Potential Barriers for users with visual impairments – how to address them?

Content of this post

1. Introduction

2. Potential Barriers

  1. Missing Text Alternatives – Images, videos, and multimedia content
  2. Small fonts, text resizing, and reflow issues
  3. Insufficient color contrast
  4. Information conveyed using color alone
  5. Missing page titles, landmarks, and headings
  6. Lack of keyboard support
  7. Missing ‘Skip to’ links to bypass blocks
  8. Missing or no clear visible focus indicator
  9. Inaccessible Form elements
  10. Moving, scrolling, auto-updating content on page load.

3. Assistive Technology Tools that assist users with visual impairments


Introduction

In this post, let us concentrate on the potential barriers of users with visual impairments, things to consider to improve accessibility that provides a better experience for users to access the web, some useful tools to test, and the tools that assist users with visual impairments.

I am separating the checklists based on the 4 major types of disabilities, that helps us understand better on how users with various limitations access digital content.

Checklist

A quick overview of things to consider for users with visual impairments.

Checklist illustrating how to improve accessibility for vision impairments

Click here to view the High Contrast and Text version of the checklist

Please note achieving accessibility compliance is a process of continuous improvement to provide good user experience for a diverse range of users and is not limited to this checklist.

Knowing the Potential Barriers

1. Missing Text Alternatives -Images, videos and multimedia content

The users with visual disabilities or impairments rely on screen readers or braille output to read content on the web. The users who cannot perceive information visually would miss out on important information that is conveyed using non-text elements on screen or may find it very challenging to access content such as images, graphics, multimedia content (Video or Audio-visual, animations) that do not have text alternatives.

Things to consider

  • Providing meaningful Alt text for images, Textual format (Table) of Graphs, pie chart, etc.
  • Including captions, transcripts, and audio descriptions for multimedia content.
  • Providing empty alt text (alt=””) or (role=”presentation”) for decorative images that do not convey information.

2. Small fonts, text resizing, reflow issues

Low vision users, older people often zoom the browser up to 400%, some users rely on screen magnifying software, and some may require adjustable text spacing features to read content on screen.

Text and images that cannot be resized, layouts that have fixed design, overlapping content, or any loss of functionality, the presence of two directional scrolling when text or content is scaled up would make it hard and challenging for users to read and access the content.

Also, the use of small text or light weight fonts would be challenging for users to read text on screen.

Things to consider

  • Use of Responsive design – design and develop for different view-port sizes or breakpoints.
  • Reflow
    • Zoom or Scaling : Allow zooming of all content upto 400%.
    • Viewport – When the browser zoom is used to scale content up to 400%, 320px width x 256px height is equivalent to starting a viewport at 1280px width x 1054px height.
    • Scroll – Avoid two way scroll (both horizontal and vertical scroll) at the same time.
  • Use of relative or scalable units – For texts, containers, and layouts units like (em, rem, %) could be used instead of fixed units like (px, pt.)
  • No overflow or loss of functionality – Ensure the text within the containers does not overlap or gets cropped when text is resized or browser is zoomed upto 400% causing loss of functionality.
  • Use of fonts sizes and font weights: Ensure font sizes are clear and are at least 12 pt. Using text smaller than 12pt, or use of thin and lightweight fonts would make it difficult for users to read the content.

Useful Tools to Test:

  1. Viewport Resizer A chrome extension, could be used to check the web page in different viewport sizes.
  2. Text spacing bookmarklet to check there is no loss of functionality or overlapping content when the text style properties are adjusted to
    • Line height /Line spacing – to at least 1.5 times the font size;
    • Paragraphs spacing – to at least 2 times the font size;
    • Letter spacing – to at least 0.12 times the font size;
    • Word spacing – to at least 0.16 times the font size.

3. Insufficient color contrast

Low vision users, some older people may be sensitive to brightness and others may have difficulty reading in low contrast (light text on light background) and some users may require high contrast settings to view and read the content. It is essential that the text and the user interface components, icons, and status changes have sufficient contrast.

Things to consider

1. Minimum Contrast Ratio

  • Normal text (up to 18 pt), bold text (up to 14 pt), the contrast ratio of text to its background should be at least 4.5:1, greater the ratio the better.
  • The contrast ratio of large text to its background should be at least 3:1.

2. High Contrast Mode

  • Turn on the high contrast setting in the operating system. Ensure all the text and UI components adapt to high contrast settings.
  • It would be great to provide an option to turn on high contrast mode within the website or application if possible ensuring all the text and UI components adapt to high contrast mode.

3. Extended Contrast Ratio

  • The extended contrast ratio for normal text is at least 7:1 and for large text it must be at least 4.5:1.

4. Support Low Brightness

  • Ensure there is sufficient contrast in low brightness settings too.

Useful Tools to check contrast ratios:

  1. Color Contrast Analyser – Use the eyedropper to check the foreground and background contrast ratio.
  2. WebAIM’s Contrast Checker – Use the hex-values to check the foreground and background contrast ratio.

4. Using color alone to present information

Some user groups have difficulty to perceive certain colors (Anomalous Trichromacy) and some users may not be able to view any color (Monochromacy). When information is presented using color alone, it has a great impact on users who have difficulty to perceive color.

Things to consider

Some examples of common occurrences where color alone is used to convey information

1. Mandatory fields – Use of RED ‘*’ alone to represent ‘Required’ fields.

  • Define RED ‘*’ with a visual label “required/mandatory” next to it and a position it at the beginning of the form (or),
  • Its always a better option to have “required/mandatory” text visible right next to the element’s visual label and making sure it’s associated with the UI element so that it is picked up by the screen readers and also visually present.

2. Error identification – Error fields highlighted only with RED outline around the UI element to indicate error.

  • An additional “error/warning” icon could be placed next to the error field along with an error suggestion to indicate validation errors.

3. Error Suggestions – Error messages displayed in RED color alone and no other error identification is available.

  • An additional “error/warning” icon could be placed before the message to identify the error field.
  • Also, ensure the error suggestion is appropriate and provides the necessary information to help users to correct their inputs and resubmit the form.

4. Status icons, Progress indicators – Use of color alone to indicate changes in status.

  • Support the use of colors along with visual text to indicate status changes.

Useful Tools to Test:

Colorblinding simulator – A Chrome extension, which could be useful to simulate how the content appears for users with various conditions of colorblindness.

5. Missing page titles, landmarks and headings

Most users with reading difficulties, users with complete blindness rely on screen readers to navigate and access content. Users find it frustrating when they are lost on the screen, or not know what they are reading about prior to getting into the blocks of content, it makes it difficult for them to understand, navigate and access content when the page titles, headings and landmarks are not clearly defined.

The page titles and structural elements like headings, landmarks, captions and section headings help the users know where there are located on the screen, find what they need, also helps them jump between (sections, headers, and landmarks) using screenreader shortcuts.

Things to consider

  • Page titles – Ensure all pages have unique and meaningful page titles.
  • Landmarks – Marking the landmarks of the web pages using native <html 5> elements or by using ARIA landmark roles.
  • Headings– Appropriately using the <h1> to <h6> to define page and section headers. Ensuring header levels are not skipped within the hierarchy.

6. Lack of keyboard support

Screenreader users require keyboard support to navigate and interact with the web components. Users find it very challenging and nearly impossible to navigate and access content when there is minimum or no keyboard support.

Things to consider

  • All functionality that is available using a mouse, touch should also be available using a keyboard.
  • The focus order or logical reading order should be meaningful.
  • Make sure there are no keyboard traps.

7. Missing ‘Skip to’ links to bypass blocks

Users who rely on screen reader and keyboard alone find it overwhelming and stressed out when they have to tab through each element to navigate and access the content of the webpage without any shortcuts.

Users find ‘Skip’ links very useful to bypass blocks of content that are repetitive (navigation, footer links), large blocks of content that require multiple tabs within a section of a page.

Things to consider

Examples:

1. ‘Skip to’ links provided at the beginning of the page to help users to skip to useful sections of page like.

  • ‘Skip to’ Navigation
  • ‘Skip to’ Main Content
  • ‘Skip to’ Login
  • ‘Skip to’ Cart

2. ‘Skip to’ links can also be provided at the beginning of sections or block elements to ‘Skip to’ end of block.

8. Missing or no clear visible focus indicator

A visible focus indicator is the ring that appears around the UI element as the user tabs through using a keyboard. This focus indicator plays an important role to identify which UI element currently receives focus and lets the user know where they are currently located on the web page.

Low vision users, keyboard-only users, screen reader users with reading difficulty would find it problematic and frustrating when the focus indicator is inconsistent or not clearly visible and keyboard-only users would find it impossible to access and navigate through the page where there is no visible focus indicator.

Things to consider

  • Ensure all the UI components that are included in the tab chain receive focus and the visual focus indicator must have bold and clear solid outlines.
  • Example – *:focus {outline: 2px solid #0000FF;}
  • Make sure 1px and dotted focus indicators are not used as it does not serve the purpose.
  • Never set *:focus {outline: 0;}
  • If you do not prefer default focus indicators for components like navigation, tab panel, then it can be customized – ensure it is clear and visible. Example – thick solid underlined focus indicator for navigation menu.
  • Ensure the focus is not lost as the user navigates within the web page.

9. Inaccessible Form Elements

Forms are important components of webpage or applications are used for user interactions, collecting data from users that helps them perform certain tasks.

Example: User Sign-up, Login, Online checkout, Online chat or comments, etc.

When forms are inaccessible visually and lack keyboard or screenreader support, or interrupted with time-limits and timeouts, users find it very challenging to complete and submit forms.

Things to consider

  • Visible label – Ensure all form elements have meaningful visible labels associated with it.
    • Ensure the “id” of every form element is associated with the “for” attribute of its label.
    • Clicking on the label should focus its associated UI Element.
  • No Placeholders – Making sure no placeholders are used to replace labels.
    • Placeholders disappear when UI receives focus.
    • Placeholders do not have sufficient color contrast.
  • Help-text – Provide help-text where required ensuring it is also associated with the respective UI element. It helps users to complete and submit the form successfully.
    • Example – Pattern for Phone numbers, Password etc
    • Use of aria-descriptions to provide help-text or instructions.
  • Status Messages – Provide status messages to notify the users about successful task completion, or any validation errors after form submit.
  • Error Identification – Ensure error fields are identified using error icon and appropriate error message along with red highlight around the UI.
  • Error suggestion – Provide appropriate error suggestions to help users correct and resubmit the form.
  • Enough time – Provide users sufficient time to complete and submit the form.
    • Do not have time limits set up to complete tasks.
    • If for security reasons time limits can’t be avoided – provide an option to turn off or adjust the time so that it helps users with low vision and assistive technology users to complete tasks without interruption.
    • Warn users in advance about any timeouts or session expiry.

10. Moving, Scrolling, Auto-updating content on page load.

It’s very important to keep in mind when designing a web page with moving, flickering, auto-playing, or auto-updating content as it may cause distractions, headaches, migraines, or may even trigger seizures in some users, Assistive technology and keyboard-only users also find it very challenging to access them when it is not designed keeping all users in mind.

Things to consider

When there are moving content like carousels, auto-playing audio or video that lasts for more than 5 seconds, ensure there is an option to “Pause, Stop, or Hide content“.

Assistive technology tools

1. Screen readers – help’s user’s to read by converting text displayed on the screen to speech output. Examples:

  • NVDA – Non-Visual Desktop Access (open source) – by NV Access
  • JAWS – Job Access With Speech (licensed tool) – by Freedom Scientific
  • Voiceover – an inbuild screen reader on Mac OS and iOS devices
  • Talkback – an inbuilt screen reader on Android devices

2. Braille readers – displays text in the form of ’embossed/raised dots’ braille output format.

3. Screen Magnifiers – Screen Magnification tool or a feature that helps to enlarge a portion of screen or content on a computer screen, laptop or mobile device. Examples:

  • Microsoft Magnifier – preinstalled on Windows OS
  • ZoomText – Magnifier/Reader (licensed tool) – by Freedom Scientific.

Related Posts



About Rupa Bandaru

My name is Rupa Bandaru, Digital Accessibility Consultant by profession. I have been working in the Accessibility space for a decade now (testing and auditing) digital content. I am very passionate about Accessibility & Inclusive Design and strive towards improving and making web content that is usable by all.

Leave a Reply

Your email address will not be published.