Web Accessibility & Inclusion FAQs

Please see the listed resources below:

• Our webinar partner INclusion INcorporated can assist you by providing overall equality, diversity, and inclusion (EDI) audits, strategies, and action plans, to help you meet your goals.
• Reach Deck is a digital tool that can be added to your website to help to improve accessibility and readability.
• The Hemingway App is a free tool that helps with identifying the reading levels of the content on your website.
• WCAG Reading Level Guidelines provide context and guidelines to follow for accessible content regarding reading level.
• WCAG Page and Heading Structure is a valuable resource that will help you format structure and helpful links within your digital content so it can easily be consumed by your users.
• Neilson Norman Group Article for Link Labels provides a well-rounded overview of link best practices that can be shared with your content editors.
• Upanup now offers website accessibility maintenance services to ensure your website continues to meet accessibility standards after launch. Get in touch with our team to learn more about this offering. 

As discussed in the webinar, it is unrealistic to have a website that is completely accessible. There is a constant balance between using modern designs and following accessibility standards and as content is removed and added this will often affect a website's accessibility. At this point in time in North America, websites that meet the WCAG 2.1 Level AA standards go above and beyond any legal requirements and are considered to be highly accessible. Some municipal websites that meet these standards and guidelines include:

• City of Delta, delta.ca
• Puget Sound Regional Council, psrc.org
• Regional District of North Okanagan, rdno.ca

If you wish to make your information more accessible by moving pie charts from a PDF to content directly on your website there is a wide range of tools you can use. Adding a new content type (see our article on Drupal content types) would be an option ( for example see the Township of Clearview's Tax Estimator tool results graph) or you can use third-party data visualization tools such as Tableau or Infogram to create labeled charts and graphs in a more accessible way. 

Content such as maps, charts, and diagrams can be very difficult to describe concisely while still providing relevant information.

If the information conveyed by the map is covered within the text of the webpage then alt text that says "map of waste collection route" might suffice. You can also include GPS coordinates as many assistive technology users are familiar with using GPS. Alternatively, you can describe the route, for example, "Map of waste collection route. Start at the intersection of Mountain and Sky streets. Make the second right onto Fall Avenue...". The main thing to remember is that the context of the map must be considered. It’s not always necessary to describe the entire map.

For graphs and charts, we would recommend including a data table for any chart or graph within the page. If that isn’t possible, either general trends should be described, or each data point should be described in the alt text (depending on how complex the chart is). You can use alt text like this for the graph or map images, e.g. "Chart showing a downward trend over 5 years; refer to the data table on this page for specific details."

Yes, we have seen many provinces and states implement legislation around accessibility. While inclusion is not as regulated, it often falls under the accessibility umbrella and we anticipate this will be more of a focus for municipalities going forward. To learn more about some of the legislation that is in place please view the below articles:

• B.C. Accessibility Act
• Manitoba Accessibility Legislation
• Accessibility for Ontarians with Disabilities Act (AODA)
• Americans with Disabilities Act

Pop-up windows are rarely good for the user experience (UX) as it introduces a new level of navigation and from our user experience testing, we have seen users struggle to close these overlay messages. In addition, the nature of pop-up windows means the information will get covered on smaller browsers or mobile. This goes against best practices.

We would recommend adding it within the page itself if at all possible within the help text—even if it means copy/pasting the external resource. We have seen good results when adding help text inline with the form, using accordion style designs that made it easy for users to review the information and mobile friendly.

Adding an icon for external links is recommended—it lets users know that they will navigate to a new website. For example, during the webinar Elliot used the example of opening doors. Imagine opening a door and suddenly you are in a new house—sometimes even a new tab, which means the back button does not take them back to the original site.

That being said, we have experienced some people ask us to remove these icons as they find them visually distracting or that outbound links seem more prominent due to the icon. One of the biggest challenges with this scenario is overcoming the 'you are not the user' hurdle.

In most cases, we recommend replacing a PDF with text content on a webpage. We have worked with many municipalities that have ditched PDFs for things like media releases, news articles, etc., and have instead created a unique content type on their site for this specific content. Additionally, applications and tools are good examples of information that was previously located in a document and is now provided in an engaging and user-friendly way. Some examples include: 

• The City of Barrie, it has converted some PDFs to webforms to improve the user experience. For example, see their Request for Letter form or Proclamation Request form.  
• The Township of King's Recreation Guide, this information is often provided in PDFs however, this tool allows for the information to be more accessible and easily updated. 
• The City of Kamloops Tax Estimator tool is another example of sharing information in a more accessible way. Detailed tax information is often found within a PDF and requires users to do their own research and calculations but this tool greatly improves the users experience. 

Honestly, the answer is both at the same time! There will be different users with different abilities—offering the tool and a dedicated accessibility page with help and resources will provide better service. If you had to choose just one, we would recommend the dedicated page, however, the page should be prominent. The perk of a dedicated page is that you can update it as needed.

For adding instructions for how to set up accessibility tools on the browser, we recommend creating a video, making sure to show examples for common browsers. (Make sure the video has a closed caption and transcript available.)

Elements themselves often are not the issue; it is the overuse of tools that are meant to create focus (buttons, accordions, bullets, etc.). When you add elements to a page, you are adding 'focus variety,' which is good! You can make complex information easier to parse and highlight the most important details. But if you add too many, it's no longer unique, and at worst the page becomes a cacophony of information.

Below are some general recommendations:

• Accordions: use accordion on pages that have a lot of information—for example, a page that outlines where and when to vote can be structured by 'physical location' or 'unique circumstances.' Users would be able to navigate to a relevant section using headers and content, and then decide if they need more details. This reduces mental fatigue and page length. In general, we recommend not having more than three accordions per section. Use accordions for detailed information that is specific to a section, but do not use them for a whole section as context is needed for accordions.
• Tables: try to keep tables to two or three columns max when possible. This improves the mobile experience. If a page has many tables, consider placing them inside accordions. If this method is used, stick to two columns.
• Bullet points: This is one of the best tools editors have for text focus, but it is often miss used. Do not use bullets for full sentences or paragraphs; ideally, keep bullets to 3-5 per section. Again, overusing a focus tool renders it useless. Bullets are especially helpful for users with learning disabilities, so make sure to consider the reading level. In testing we have observed users skipping paragraphs leading up to bullets, so make sure headers for bullet sections are clear and if crucial information is part of the paragraph, add text such as 'Please read first', 'important', etc. to make sure details are not missed.
• Buttons and links: Use buttons for highly desired paths, e.g. an 'apply for rebate' or 'vote online' link. Links can be used throughout a section but we do recommend not peppering sentences. If multiple related links are needed, consider adding the links to the end of the paragraph.
• Inline images: When possible, do not use inline images as it pushes text which may look OK on a desktop, but creates 'slim corridors' of text on smaller screens. This greatly impacts readability.

PDF files follow the same best practice as links: it is better not to open new windows and tabs since they can be disorienting for people, especially people who have difficulty perceiving visual content.

Unfortunately, it is not a common practice to provide large reports in a web content format because of the volume of the content (e.g., some reports are hundreds of pages long), but it would make it more accessible than a PDF. You could create a microsite for this content so it does not affect your main website content and user experience. 

Large reports can be made accessible, for example, see the District of North Vancouver's 2019 Fire Report. However, making large reports accessible is often a time-intensive task. There are third-party systems available that provide this service if you do not have the resources. (Additionally, please see the response to question #12 above.)

As discussed in the webinar we recommend beginning with the following steps to improve your municipalities inclusivity:

• The best place to start is to determine what is possible for your municipality. We know that staffing and resources can be tight, and therefore you must determine what is achievable and sustainable.
• Think about what you can do really well and with meaning for your municipality; Inclusion should be very intentional. 
• Consider the needs of your community and involve citizens to co-determine what inclusion will look like for you.
• Create an action plan for the short, medium, and long term so you have a clear idea of where to start.

The label or the text for a link on your website should accurately describe the purpose of the link and the destination page or content. Avoid linking words like "click here" as that does not provide any context to those that use assistive technologies.

While a Word document would likely be easier to make accessible as it has its own accessibility tools built in, a PDF is independent of the software used to create it so it is more widely accepted and therefore more accessible.

For a large number of records, there are various ways to make the content accessible; however, this often requires resources that many municipalities do not have. When done correctly (e.g. using headers, indicating data cells, etc.) tables can be made accessible (also see the response to #10 above for information on tables, accordions, etc.).

Implementing front-facing tools helps users of all levels and abilities. There are various tools available and each one can have a different quality and level of sophistication (all third-party tools will include javascript to add to the functionality of the tool themselves). If you are considering an add-on toolbar, we recommend that you research the needs of your communities and if the toolbar UI (user interface) is user-friendly.