Web Accessibility Standards Your Digital Assets Need

Digital accessibility and inclusiveness are imperative - up to 71 percent of people living with disabilities will leave a site that’s not fully accessible or difficult to navigate. One in four adults living in the U.S. has a disability, yet this demographic remains fundamentally underserved.

Following ADA guidelines may seem like a big task, but making a few simple tweaks will help make your site more compliant when viewed on mobile devices and desktop computers. Not only will this help pull in more customers, but it may also help your organization avoid potential legal action in the future. 

Web Accessibility Standards

The following guidelines will help you understand the web accessibility standards of your company’s website, app, and digital content.

• Orientation - Does your site or app work regardless of the site’s orientation? If a person using a wheelchair has a tablet attached to their device and can’t rotate it horizontally, they should still be able to access the site.
• Simple, clear, top-to-bottom navigation - Your content should be accessible by keyboard and keyboard equivalents, and your site’s ‘Skip Navigation’ feature should help screen readers find and access specific content
• Alt text accurately describes photos, graphics, and more - Alt text should accompany any non-text page elements, such as photos, charts, and graphics
• All videos and photos should have captions - Photos and videos should contain text captions, descriptions, and subtitles for users living with hearing impairments, with audio cues that signify changes in gesturing, tone, color, setting, and all visual assets
• Color contrast follows WCAG 2.1 guidelines - All text should contain a color contrast ratio of 4.5:1 against the background, and graphics must have a contrast ratio of at least 3:1 against adjacent colors
• Color should not be the only way you’re conveying a message
• Four-character key shortcuts - Assistive technology must be available to turn shortcuts on or off, remap a shortcut, or become active when the component has a focus
• Time outs - Users are informed about the duration of inactivity that could lead to data loss unless data is saved for more than 20 hours
• Headings - Make sure that headings are clearly presented and text can be read in the correct order
• Link names - Review link names to ensure that they are contextualized and not too vague (such as a nondescript ‘Click Here’)
• Fields - Go through all important forms to make sure fields are correctly labeled and no hidden barriers exist
• User flows - Navigate user flows, from start to finish, to check for any critical issues that users may encounter
• Text spacing - According to WCAG standards, no content or functionality should be lost when setting the following elements and changing no other style property:

• • Line height, or line spacing, to at least 1.5 times the font size
  • Paragraph spacing to at least two times the font size
  • Letter spacing, or tracking, to at least 0.12 times the font size
  • Word spacing to at least 0.16 times the font size

• Text placement and presentation - Avoid using long paragraphs or chunky blocks of text - not only are they visually awkward, but they may also confuse users with various types of dyslexia or learning disabilities
• Include a ‘Skip Navigation’ feature at the top of each page on your site - This will allow screen readers used by visually impaired people to locate and access content
• Reflow - Content can be accessed without scrolling in two dimensions
• Identify Purpose - The function  of UI components, icons, and regions should be automatically determined in content using markup languages
• Ability to disable graphics, moving images - Motion animation caused by user interaction can be disabled unless it’s imperative to the functionality or data that’s being communicated
• Content on hover or focus - When receiving and removing pointer hover or keyboard focus to reveal  more content, the additional content should be dismissible, persistent if the user is still hovering, and available once the pointer moves over the additional content
• Pointer Cancellation - For functions that only require a single pointer, there must be either a no down event, an up reversal, an abort, or an undo option for down events unless they’re essential
• Target Size - The size of the pointer target inputs is at least 44x44 CSS pixels, barring a few particular exceptions
• Data presentation - Information is presented in a linear fashion that won’t confuse visitors with visual impairments

Your journey to meeting web accessibility standards is not a simple destination that can be reached quickly - it’s an ever-evolving improvement process based on automated and user testing, honest feedback, and understanding which methods yield the best results. By examining your customer base and knowing what their needs are, you can create digital content that’s engaging, captivating, and inclusive to everyone.