Digital Accessibility Guide

Misconception: I can choose heading and text styles based on personal preference.

Fact: Within the WCMS and other digital templating tools, styles such as “heading 1”, “heading 2”, or “captions” are meant to be used as indicated. Likewise, colour combinations should be used as indicated to ensure accessible contrast.

• A “heading 1” style should only be used once per page and summarize the content of the page.
• Other “heading” styles should be used in number order to clearly organize content.
  
  For example:
  • Heading 1 (only one per page)
    • Heading 2
    • Heading 2 (heading numbers should repeat if introducing a new section)
      • Heading 3 (subsection under the previous heading 2)
        • Heading 4 (subsection under the previous heading 3)
    • Heading 2 (new section)
• A “caption” style should only be used to caption an image or other media.

Misconception: Only external-facing content needs to be accessible.

Fact: Anyone may be living with a disability, and many are invisible. The University of Waterloo community includes over 40,000 students, faculty, and staff, some of whom have a disability. All content must be accessible to serve the needs of both our internal and external communities.

Misconception: Machine readable content is an accessibility consideration alone.

Fact: Machine readable content does benefit users of screen readers or other assistive technologies who may have a range of physical and cognitive disabilities.Accessible content also supports improved search engine optimization (SEO), the use of translation services like Google Translate and improved readability, in general. Some research shows that videos with captions are more likely to be viewed by all audiences.

Misconception: Accessibility is about making content machine-readable.

Fact: Screen readers are an important consideration, but they aren’t the only technology people use to customize their digital experience. For example, some people enlarge the size of the font on the screen or use a screen magnifier – images of text can be hard to read on mobile devices and often become pixelated when magnified.

Another example is accessible colour combinations. Even though yellow heading text on a white background is machine readable, it’s difficult for most audiences to see.

Some users might have mobility issues such as a tremor that make it difficult to use a mouse or click on a small link on a touch screen.

Misconception: Accessibility is a lot of extra work for just a few people.

Fact: If you’ve used Siri or a digital home assistant – or even the sliding doors at the grocery store – you’ve experienced how universal design benefits everyone. Statistics tell us that about one in five Canadians over the age of 15 has at least one disability, and many more may be using certain features as a matter of preference too. (For instance, someone using closed captions because they’re in a noisy environment.)

With some practice, accessibility is part of our everyday work.

Text alternatives are required for all images (except decorations), infographics and audio/video playback. Text alternatives, or “alt text” provide users who use screen readers descriptions of visual content and ensures your message is clearly communicated to all users.

We’ll look at how text alternatives can be used in the following use-cases.

Images on a web page

Keep the “alt text” simple and objective.

• Describe the image to the user in conversational language
• Descriptors of subject characteristics, such as gender or race, should be avoided unless relevant.
• Technical or promotional language should be avoided.
  • Example (image below): “A researcher uses optometry equipment to examine a patient”

Keep the “alt text” to fewer than 125 characters.

Many screen-reading tools will stop reading past this point.

Don’t start “alt text” with “Picture of...” or “Photo of...”.

• Describe only the image. Screen reading tools (and search engines) will identify it as an image from the web page’s HTML source code.
• In some cases, it may be necessary to include details such as “archival photo of” or “architects rendering of” for context.

Use visible caption text in addition to “alt text”

• Alt text is rarely visible on screen. Captions always are.
• Captions can help all users to better understand the image and place it in appropriate context.

Infographic descriptions

Infographics can be very effective tools to communicate complex or procedural information, however they cannot be read by most assistive devices. If used, be sure to include a longer-form version of the information. Depending on the information, tabular data may be useful. You may also choose to provide the information through on-page copy.

Captions

Video and audio recordings are increasingly being used across the University website and the broader internet. These mediums can increase the impact of our messaging and allow us to create vivid, high-quality user experiences.

However, not all users are able to see or hear videos or audio content. It is important to provide these in alternative formats as well. Many popular video hosting platforms, such as YouTube provide auto-transcription services. These can help get you started, but it is important that you take the time to review the transcript and correct any errors. Transcripts can be posted to the website as text on a webpage or accessible downloads.

Headings and subheadings provide a way for users to preview content. For instance, a visitor using a screen reader might scan all the headings on a page. Our eyes are also drawn to formatting that stands out on a page, so headings can be an important visual cue where to find content (especially as people are scrolling on a mobile device).

A good guideline is to ask, “does this heading make sense out of context?” Create headings to provide an outline of your content and answer your users’ top questions.

Examples: “Steps to hiring a co-op student” and “PhD funding opportunities.”

Formatting headings

Within the WCMS and other digital templating tools, styles such as Heading 1, Heading 2, or captions are meant to be used as indicated. Likewise, colour combinations should be used as indicated to ensure accessible contrast.

• A Heading 1 style should only be used once per page and summarize the content of the page. (In the WCMS, the H1 is also your page title.)  

• Other heading styles should be used in number order to clearly organize content.
  
  For example:
  • Heading 1 (only one per page)
    • Heading 2
    • Heading 2 (heading numbers should repeat if introducing a new section)
      • Heading 3 (subsection under the previous heading 2)
        • Heading 4 (subsection under the previous heading 3)
    • Heading 2 (new section)

• Headlines need to quickly capture your audience’s attention. Keep headings short and direct.
• H1/Page titles should also be concise and be sure to use your keywords upfront as search engines only display a certain number of characters in search results.
• Capitalize only the first word when using sentence case (unless there are also proper nouns later in the sentence).

• Punctuation is not necessary in headlines or subheadings. Exceptions are made for when headlines are questions and sub headlines have more than one sentence.
• Avoid overuse of abbreviations or acronyms. Commonly known acronyms may be used in headlines (e.g., IQC, NASA, SLC). When using abbreviations, spell out the full name at the first mention, followed by the abbreviation in parentheses. After that, you can just use the abbreviation.

Using additional styles

• A caption style should only be used to caption an image or other media.
• A highlight style can be used for visual impact rather than a heading style to make text stand out.
• Use italics and bold sparingly – they can be difficult to read.
• The blockquote style can be used for quotations and testimonials.
• Use underlining only for hyperlinks – users will expect to be able to click on the text.

You might have seen wording on websites like “click the button on the right” or “look for x in the menu on the left”. Giving directions can be confusing for audiences who don’t see the page layout the same way you do – or who may not be able to see the page at all.

For example, content will be arranged differently on mobile devices, so a visitor might not be able to see what you’re talking about on their screen – and “right” and “left” become irrelevant because content is now above or below. Someone using a screen reader won’t easily be able to find the next step based on words alone.

Instead of using directional language, make sure the elements of your web page are easy to see and follow a logical order. For example, create a call-to-action button to link people to a form rather than trying to describe where it is in the menu.

Not sure whether to use a table or not? Here’s a simple guideline to follow. Use tables for data, use columns for layout. Screen readers will read out table cells row by row, column by column, so it’s important to show and properly format tables to show relationships.

In contrast, using columns for layout offers you more control when it comes to design, and the content will automatically adjust for different screen sizes.

Tips for tables

• Use headers for your columns and rows (as needed).
• Avoid empty cells. You can use “N/A” for instance.
• Use the table summary and table caption fields to provide a quick description of what the table contains.
• Seek some expert help for complex tables involving a lot of data and merged cells. It’s important to get the code right for screen readers.

Using columns

In WCMS 3, you can add blocks to your layout that include up to four columns and columns of different proportions – for instance, the first column spans two-thirds of the page and the second column spans the remaining one-third. Layout builder makes it easy to add text, video and images and to move your blocks around to try different arrangements.

Let us say you wanted to create a block of six-story teasers. You can create two rows of three columns.

The important thing to keep in mind with columns is the reading order, especially on mobile devices. For instance, on a phone, the content in the right-hand content will appear below the content in the left-hand column to create a single stream of content for users to scan through. It is important to make sure headings, lists and images are arranged accordingly to the reading order still makes sense on different devices.

When in doubt, test it out on different devices. Send a link to yourself and your team and try it out on a computer, tablet and phone – Apple, Microsoft and Android if possible.

Link text is the text that audiences click on to go to another page. It is important to remember that they might not see the rest of the text in your sentence or paragraph.

Can you tell where these words might send you?

• “available online”

• “click here”
• “read more”

Writing descriptive link text is important for several reasons:

• Users of a screen reader might scan through the links on your page without going through the rest of the text.
• Hyperlinks are formatted differently from surrounding body text and capture users’ attention, just like highlighting or underlining in a textbook.
• Search engines look at link text too. Descriptive link text can help your page rank higher.
• Two- or three-word links are harder to click on from a mobile device.

Good link text

The best practice is to give your audience clues about what will happen when they click the link, such as what content they can expect to find and whether the link is opening a file or email. Here are some examples to create or fix link text:

Focus on the destination.

• Example: “The latest schedule of workshops is available online”.
• Consider: What is important to your audience (and a screen reader) is the “latest schedule of classes” - because it’s a link, people already know it’s online.
• Recommendation: “The latest schedule of classes is now available.”

Consider a call to action.

• Example: “To read more about research on robotics, click here”
• Consider: These types of links can easily be transformed into a clear call to action.
• Recommendation: “Read more about robots research”

Try the title of the destination page.

• Example: “Learn about accessibility"
• Consider: If the page you are sending people to is “Tips and resources for web accessibility,” use that text on your own page for consistently and search engine optimization.
• Recommendation: “Tips and resources for web accessibility”

Use the same text for repeated links.

• Sometimes you need to include a second link to the same destination (for instance, if you’re using the expand/collapse template).
• Keep the text consistent so people know it is the same link.
• Similarly, avoid use of generic text, like “click here” as they could go several links with the same text could go to different places.

Keep the length concise.

• It’s easier for all audiences to read at a glance, and especially for people using speech recognition applications.
• For example, the full title of an academic paper may be too long to effective use as link text. Instead consider: “A recent study on robotics found that...”

Use a call-to-action button when needed.

• Buttons are easier to see than a link in body text. If something is important, make it big.
• They’re also easier for mobile users to click on, especially where fine motor skills might be a concern.

Linking to contact information

• Use link text when you are linking to a web form, list of contacts, or a contact card for a generic account (a shared email address and phone.)
  • For example: “Contact us” or “Contact the Department of...”
• Hyperlink the person’s name or role when linking to a contact card. That way, people know there are multiple ways to get in touch.
  • For example: “Contact Jane Colleague”
• Hyperlink an email address rather than a name when you want people to reach out by email. This lets users know the link is about to open their email program.
  • For example: “Contact us at team@uwaterloo.ca”

Linking to social media

Take them directly to your profile.If you need to link to social media platforms, make sure to link to a specific profile rather than the social media platform itself. Users generally won’t search for your account if you only point them to the platform, and it’s easy to confuse our accounts with other schools that use “UW”.

For example: “Follow the Faculty of Health on Twitter” or “Follow @uwaterloohealth on Twitter”

Linking to files

While webpages are preferable to PDFs, we know it is sometimes necessary to offer a downloadable or printable copy. However, users prefer a warning before a new program opens up or they’re about to download a large file.

• Add the file extension to the link.
  • For example: “Inclusive Style Guide (PDF)” 
• Use a bulleted list when offering multiple versions.
  • For example:
    • Project proposal template (PDF)
    • Project proposal template (Word)
• Warn users about large files
  • Mobile users may want to wait to download a file from a computer instead, or when they have access to wi-fi rather than using their data plan.
  • For example: “Inclusive Style Guide (PDF, 10 MB)”