What is an accessible web page and why should you care?

Sometimes you take for granted how easily you can perform everyday tasks. How often do you think of something as innocuous as your thumb? Contemplating the virtues of your thumb is probably not high on your list of priorities, but the minute you injure it, you suddenly take notice of how much you needed that thumb to pick up a cup or tap out a text message.

girl sitting with mobile phone in hands

Similarly, when people design and build web pages, it's often easy to take for granted that viewing the content as intended might not be an easy task for everyone.

Reading, watching a video, or clicking a link — these could all be challenges for people with certain forms of disability. As good citizens, we should feel compelled to make an effort to make web pages accessible to all visitors regardless of any type of limitation or device used.

In fact, the WMS outlines a set of accessibility and usability standards for all content creators. Drupal itself (on which the WMS is built) follows a set of Accessibility Principles. Both are based on compliance with the W3C's global Web Accessibility Initiative (WAI) and its Web Content Accessibility Guidelines. Beyond that, making your website accessible is a sound business decision because it allows you to serve as many people as possible.

Benefits of accessibility

  • Equal access to information for users with disabilities
  • Equal access to information for users in developing countries (i.e., slow internet connections, limited multimedia capacity, old browsers, small-screen devices)
  • Well-structured, clear, responsive content for all users
  • Compliance with anti-discrimination laws
  • Broader user base

Four main categories of disability

visual impairment symbol

Visual

  • blindness
  • low vision
  • color-blindness

hearing impairment symbol

Hearing

  • deafness
  • hard-of-hearing

 


motor impairment symbol

Motor

  • limited fine motor control
  • slow response time
  • inability to use or control a mouse

cognitive impairment symbol

Cognitive

  • learning disorder (e.g., dyslexia, dyscalculia, ADD, autism spectrum)
  • memory
  • problem-solving
  • attention
  • reading, verbal or linguistic comprehension
  • math comprehension
  • visual comprehension

Solutions for accessible content

Visual impairment

People who are blind or have low vision will not be able to effectively use a screen or mouse. Instead, they use assistive technology which may include software programs for screen readers or screen magnifiers. Screen readers convert text into synthesized speech while for those who are both blind and deaf, there are screen readers that convert text to braille. Screen magnifiers may be used by visitors with low vision (common in older populations) and these enlarge the area around the cursor for easier viewing. There are also keyboards available with large print and tactile keys for special functions such as magnifying the cursor. Screen readers have limitations given that they read linearly and cannot describe the overall layout of a page or the meaning of images. With screen magnifiers, users can only see a small portion of the screen at a time. Keeping these limitations of assistive technology in mind, you can help visitors to navigate your web pages by keeping content together in a logical fashion.

  • Organize content linearly and logically
  • Structure content with descriptive headings
  • Use descriptive link text (e.g., "Contact us" vs. "Click here")
  • Use alternate text to describe images
  • Don't use images with embedded text to present information (e.g., use a Statement block instead)
  • Avoid text in all-caps which can be hard to read or misread by screen readers
  • Provide transcripts for videos
  • Avoid using colour as the only way of conveying information
  • Develop content with keyboard vs. mouse usage in mind

Hearing impairment

People who are deaf or have some degree of hearing loss need to be made aware that there is auditory information available.

  • Include captions and/or transcripts for videos containing audio
  • Avoid providing information only in audio format
  • Audio content should be spoken clearly, at a modest pace, with no background noise
  • Use plain language
  • Offer alternative means of communication apart from the telephone for contact purposes

Motor disability

People who have a motor disability must be able to operate some form of assistive technology in order to navigate a web page. There are a range of technologies available such as: mouth stick, head wand, sip and puff switch, oversized trackball mouse, adaptive keyboard, eye-tracking, and voice recognition software.

  • Create content with keyboard, speech-only, or touchscreen use in mind
  • Don't require fine motor precision (e.g., avoid small links, closely-spaced interactions, small form fields)
  • Provide shortcuts to avoid tiring users with too much typing or scrolling (e.g., links to skip over content, back-to-top buttons, On this page block and anchors)

Cognitive disability

People who have a cognitive deficit find it harder than the average person to accomplish certain mental tasks. It may not be possible to accommodate all severities of cognitive disability but there are ways to increase accessibility. Also, many of the language-based difficulties experienced by those with cognitive limitations can also be applied to visitors for whom the content is not in their first language and these individuals may actually represent an even larger audience that those with a cognitive disability.

  • Use plain language in clear and simple writing
  • Avoid non-literal content (e.g., sarcasm, metaphors, idioms)
  • Avoid unexplained acronyms, abbreviations, or initialisms
  • Left-align text
  • Don't underline text if it is not a link
  • Break up dense blocks of writing
  • Structure content with headings and bulleted or numbered lists
  • Include images, multimedia, or diagrams to support text
  • Use descriptive links and buttons (e.g., "Download report")
  • Provide reminders during multi-page transactions (e.g., "previous page (Applicant details)" vs. "previous page")
  • Create simple and consistent layouts with whitespace around elements (e.g., by using Call to action blocks)

Be accessible!

A good place to start if you want to make your site more accessible is with a site review. You can then re-organize your content into a more logical structure and assess what changes are needed in order to be more inclusive. You can also find good references online covering accessibility to help you on your journey.

Accessible pages are key to ensuring that the information on your site reaches as diverse an array of visitors as possible. Furthermore, an accessible site is typically a site that follows best practice and basic good design principles. So it's a win-win! Accessible pages get two thumbs up!

woman with two thumbs up

Back to top