10 key considerations in designing accessible web solutions

, Ottawa Canada

As the saying goes… a goal without a plan is just a wish.  So planning is incredibly important when designing accessible web solutions. Digital teams should consider multiple factors to ensure that all users, including those with varying abilities, can perceive, understand, navigate, and interact with the web application effectively. 
 

  1. Text Alternatives
  • Provide descriptive alternative text for images to convey their content and function to users who cannot see them.  A simple sentence on what the image being presented is can dramatically improve the user experience of those using assistive technologies like screen readers. 
  • Use proper markup for non-text content, such as videos and audio, to ensure compatibility with assistive technologies.
  1. Semantic HTML
  • Utilize semantic HTML elements (e.g., headings, lists, landmarks) to convey document structure and enhance navigation for screen reader users. When a page is clearly labelled H1s, H2s, H3s in proper order, you reduce that chance of confusing users.
  • Avoid relying solely on visual cues (e.g., colour, font style) to convey meaning or functionality.
  1. Keyboard Accessibility
  • Ensure that all interactive elements and functions can be accessed and operated using a keyboard alone, without requiring mouse interaction and be mindful of providing navigation specifically for keyboard users.  For example, use skip-navigation to allow users of assistive technologies to skip the reading of the menu at the top of every page (can you imagine the annoyance!!) 
  • Provide visible focus indicators to indicate the currently focused element for keyboard users.
  1. Colour Contrast
  • Maintain sufficient colour contrast (at least 4.5:1) between text and background elements to ensure readability for users with low vision or colour vision deficiencies.  A good (and free) tool we recommend is Web Aim’s colour contrast checker - https://webaim.org/resources/contrastchecker/ 
  • Do not rely solely on colour to convey information or distinguish elements. E.g. – a form field that turns red to indicate an error means that users on screen readers or users that have challenges seeing various colours, have no indication of what the error is. 
  1. Flexible Layouts
  • Design layouts that adapt to different screen sizes and devices, accommodating users who may use a variety of devices, including assistive technologies.
  • Avoid fixed-width layouts and ensure that content remains readable and usable at different zoom levels.  The current recommendation is to design so that can be scaled up to 200%.  This will allow users who need to zoom in to see content without dramatically breaking the layout of the web solution. 
  1. Descriptive Link Text
  • Use descriptive link text that provides context about the target of the link, rather than generic phrases like "click here" or "read more." This can be on the front end (see on the screen) or through code so that people using assistive technologies get more specific context about where a link points. 
  • Make sure that the purpose of each link is clear when read out of context (e.g., in a list of links).
  1. Clear Navigation
  • Design clear and consistent navigation menus that are easy to understand and navigate using assistive technologies.  This means using human-friendly titles and consistent navigation. (Now is not the time to use vague phraseology in your menu. If you mean “About us”, or “Contact us” or “Our services” then say it!)
  • Provide skip navigation links to allow users to bypass repetitive navigation and jump directly to main content areas.
  1. Form Accessibility
  • Ensure that form elements are properly labeled and programmatically associated with their corresponding labels to assist screen reader users in understanding what they need to do.
  • Provide helpful error messages and suggestions for completing forms correctly.  We’ve all seen examples of a red “error” box at the top of a form without any meaningful information about what the issue is…..so frustrating!
  1. Video and Audio Accessibility
  • Provide captions at the bottom on the screen and/or transcripts for video and audio content to make it accessible to users who are deaf or hard of hearing. This will allow them to read what is being said in a video or audio file.
  • Include controls for adjusting volume, playback speed, and other settings to accommodate different user preferences and needs. We’ve all seen a video that speeds along too quickly…whaaat???  So, give users the controls to stop, rewind, make it louder, etc. 
  1. Consistent User Experience
  • Strategic web designs know that creating UI elements that users understand and can easily navigate is the key! Maintain consistency in design and functionality across different pages of the website to enhance usability for all users.
  • Test the website with real users, including individuals with sight challenges, movement challenges and those that user assistive technologies so that you can identify and address any accessibility barriers or usability issues.