Municipal Website Venture

A new generation of Municipal Websites

Accessibility Tips

These web accessibility tips can be used by content authors to guide them in creating content that is fully accessible to all users. This list is not intended to replace or map to formal standards such as the World Wide Web Consortium’s (W3C’s) Web Content Accessibility Guidelines.

Headings

Use headings correctly to organize the structure of your content. Screen reader users can use heading structure to navigate content. By using headings (heading 1 or <h1>, heading 2 or <h2>, etc.) correctly and strategically, the content of your website will be well-organized and easily interpreted by screen readers.

Examples of proper use of headings:

Use heading 1 for the primary title of the page. Use headings to indicate and organize your content structure. Do not skip heading levels (e.g., go from a heading 1 to a heading 3), as screen reader users will wonder if content is missing. 

Use short headings to group related paragraphs and clearly describe the sections. Good headings provide an outline of the content.

Use letter case

Avoid writing in all capital letters as this is difficult for some people to read (for example, “Our History” – not “OUR HISTORY”).

Formatting Text

Avoid using italics or underlining text for non-linked text. Words are recognized by their shape and italicizing/underlining words change their shape, which can make them more difficult to read. If a word in the document requires emphasis it can be bolded.

Some abbreviations can cause confusion. Rather than use e.g., i.e., and etc., write out the full phrase (for example, that is, so on).

Write dates out rather than using numbers (for example, October 30, 2022, rather than 30/10/2022).

Avoid long paragraphs of text. Break text into smaller sentences or paragraphs or use bullet points to make it easier to read/comprehend.

Alt Text

Include proper alt text for images.

Alt text should be provided for images, so that screen reader users can understand the message conveyed by the use of images on the page. This is especially important for informative images (such as infographics). When creating the alt text, the text should contain the message you wish to convey through that image, and if the image includes text, that text should also be included in the alt.

The exception to this rule is when an image is used purely for decoration; in this case, the alt text can be left empty so that the screen reader user is not distracted from the more important content on the page.

Images containing Text

Avoid placing text in/on top of photos/images. If text needs to go over an image, ensure there is strong colour contrast. It is helpful to add a solid block behind the text, so the text is not directly over the image (with strong colour contrast of text/block behind).

Use text, not pictures of text

Use text instead of pictures of text, and control its appearance using CSS. Pictures of text become blurry when enlarged, take longer to download, and are inefficient for the website author to edit. In addition, text in pictures is not selectable, searchable or promotes search engine optimization.

Links

Give your links unique and descriptive names

When including links in your content, use text that properly describes where the link will go. Using "click here" is not considered descriptive, and is ineffective for a screen reader user.

Just like sighted users scan the page for linked text, visually-impaired users can use their screen readers to scan for links. As a result, screen reader users often do not read the link within the context of the rest of the page. Using descriptive text properly explains the context of links to the screen reader user.

The most unique content of the link should be presented first, as screen reader users will often navigate the links list by searching via the first letter.

For example, if you are pointing visitors to a page called "About Us":

Try not to say: "Click here to read about our company."
Instead, say: "To learn more about our company, read About Us."

Think twice about the words you choose. (Keep content clear and concise)

Keep your content simple to read and understand. Content written in plain language can ensure that users can quickly understand and act on your content.

  • Write in short, clear sentences and paragraphs.
  • Avoid using unnecessarily complex words and phrases.
  • Expand acronyms on first use. For example, Web Content Accessibility Guidelines (WCAG).
  • Consider providing a glossary for terms readers may not know.
  • Use list formatting as appropriate.
  • Consider using images, illustrations, video, audio, and symbols to help clarify meaning.

Colour

Use colour with care.

The most common form of colour deficiency, red-green colour deficiency, affects approximately 8% of the population. Using only colours will prevent individuals from understanding your message.

Other groups of people with disabilities, particularly users with learning disabilities, benefit greatly from colour when used to distinguish and organize your content.

To satisfy both groups, use colour, but also be sure to use other visual indicators, such as an asterisk or question mark.

The WebAIM Contrast Checker is one of several tools you can use to evaluate colour contrast, which will assist you in making your page as visually usable as possible to individuals with low vision or varying levels of colour blindness. 

Tables

Use tables for tabular data, not for layout.

Using tables for page layout adds additional complexity to screen reader users. Whenever a screen reader encounters a table, the user is informed that there is a table with "x" number of columns and rows, which distracts from the content. Also, the content may be read in an order that does not match the visual order of the page. Do not create the layout of a website using a table.

When a data table is necessary (i.e. you have a set of data that is best interpreted in a table format, such as a bank statement), use headers for rows and columns, which helps explain the relationships of cells.

Create accessible PDFs

Use tagged PDF, the only type of PDF that supports headings and alt text for images. Use the PDF Accessibility Checker that’s provided by Adobe Acrobat. For more information, see the UW Accessible Technology page Creating Accessible Documents.

Know when to use PDF

PDF preserves a document’s appearance across operating systems and devices. If this characteristic is not essential, consider using another format such as regular text, which is much more accessible.

White space

Provide plenty of space between lines and blocks of text. This helps many users to track text horizontally and generally makes text easier to read.

Keyboard Access

Ensure that all content can be accessed with the keyboard alone in a logical way.

Users with mobility disabilities, including repetitive stress injuries, may not be able to use a mouse or trackpad. These people are able to access content through the use of a keyboard by pressing the "tab" or "arrow" keys, or through the use of alternative input devices such as single-switch input or mouth stick. As a result, the tab order should match the visual order, so keyboard-only users are able to logically navigate through site content.

Long pages with lots of content should be broken up with anchor links (jump lists), allowing keyboard-only users to skip to relevant portions of the page without having to negotiate through other content.

Using Video

If videos are provided on the website, ensure they are captioned/subtitled, and make transcripts available in an accessible format(s).