Pic

Digital Accessibility

What it is?

(Digital) Accessibility focus on creating digital content and applications that can be used by a greater amount of people regardless of their disabilities.

“Over a billion people have some form of disability. This is about 15% of the world’s population.”

Source: World Health Organization

Who benefits?

Even though accessibility focuses mainly on assessing the needs of people with disabilities, it can also help you bridge the gap in providing access to digital platforms more uniformly to more people.

“2.2 billion people around the world, about 29% of the world’s population, have a vision impairment.”

— Source: World Health Organization

People using mobile phones, smartwatches, smart TVs, devices with small screens, or different input modes will find it easier to accesses your website or app. Or people with “temporary disabilities” such as a broken bone, situational limitations like being under bright sunlight, and people using a slow or expensive bandwidth will also benefit from accessible websites and apps.

“Accessibility is about making things work for everyone.”

— wiki.mozilla.org

The Aging User

Accessibility will also improve the experience of the aging user. As the world becomes more digitalized, and the public use of the internet becomes more a part of our day-to-day lives we see an increase in older generations using the web.

With age, various capacities like vision, physical ability, hearing, and cognitive ability start decreasing. This means that a lot of websites, apps, and other digital platforms can become challenging for a population that was previously accustomed and has to rely on them for most of their daily tasks.

How to Improve Accessibility

We compiled some of the more essential tips for accessibility and potentially better the overall user experience.

Subtitles & Transcriptions

  • Subtitles & Transcriptions are important for multimedia content like videos and audio.
  • Provide an alternative text for all images, charts, graphs, and maps.

Content

  • Use plain language and avoid figures of speech, idioms, and complicated metaphors.

  • Make links that are visible, recognizable, and have an appropriate target size.

Feedback Selection

  • Focus on buttons, widgets and make sure there is a visible focus style for interactive elements that are navigated to via keyboard input, this way, it’s clear where it leads, without relying on visual context.

  • In very long busy pages consider a skip to content link visible when focused.

  • Visual controls, like sliders, progress-bars or star-ratings must be accessible by conveying their current value through screen readers.

  • Make your button copy descriptive.

  • Announce completion, success, and errors.

To announce something make sure to add icons or illustrations plus colour to your descriptions

  • On a form, when the pages reload to display a feedback message (informative, success, error, etc) make sure they will be at the top. This way when the page reloads, the users will be able to know what went well or immediately assess what failed and correct it efficiently.

Structure

Predictable layout, clear hierarchy and scalable.

  • By using heading elements, the screen reader is able to introduce the user to the hierarchy level of the content. That hierarchy must be clear and predictable. Emphasize important sections of the text.

  • To break up sections and focus on content use empty space on the page. Too much content can overwhelm and confuse users.

Navigation input

  • Voice Control
    Allow for Voice Control input as some users cannot use a keyboard or mouse. Some users rely on voice controls to navigate the web.

  • Keyboard
    Guarantee the accessibility of the website through keyboard navigations. The keyboard access must not be disabled or create dead ends because users can get stuck while navigating with the keyboard.

Adjustable features

  • Prepare your website to be scalable through system and browser settings. Assure nothing disappears or gets cut by another element onscreen.

  • Provide appropriate media content controls for elements like videos & carrousels. Allow all media to be paused.

Colours & Contrast

  • Minimum Text Size: WCAG 2.0 suggests using text no smaller than 16pt.

  • The information can’t exclusively rely only on color to convey an idea. Also use patterns, icons, copy, or something else to display it.
  • Make sure that error, warning, and success states are not only communicated by color.

Bonus Hints

  • Understand how a screen reader works. Try for example VoiceOver or Chormevox.
  • Third-party content must also be checked for accessibility.
  • PDF’s tend to be inaccessible. If you use one make sure it is accessible or you provide an accessible alternative.
  • Sensibilize your team for these topics.

  • Include personas with disabilities and their user journeys. Have descriptions of assistive technology, disability, and pain points.
  • Test with real users with disabilities. Testing with one visually impaired user will allow you to find around 80% of the accessibility problems.

Refreshable Braille Display

Some Resources

More on WCAG

Checklist on Accessibility
History of the WCAG guidelines
WCAG guidelines

More helpful tools:

aXe
Wave
VPAT for when buying software

Sources
Designing for accessibility is not that hard
7 Things Every Designer Needs to Know about Accessibility
World Health Organization on Disability and Health
World Health Organization’s Report on Vision
Web Accessibility Laws & Policies
Web Accessibility Check List
W3C on Older Users and Web Accessibility
W3C on How People with Disabilities Use the Web

Revised by: Fanny Dias