Web Accessibility: What You Need to Know Now

by Sharon Rosenblatt, Director of Communications at Accessibility Partners

Insights / Website Development / Web Accessibility: What You Need to Know Now

Time really flies — I cannot believe it’s been over five years since we partnered with Digital Ink to create an infographic on website accessibility. But the fascinating thing about web accessibility as opposed to other evolving standards and design practices is that the fundamentals remain: equal access to information technology.

Guess what — if you are still using that infographic from 2016 (it was a great year, Leonardo DiCaprio FINALLY got his Oscar!), then you’re still well on your way to making accessible and inclusive content for users with disabilities.

That being said…

Technology Has Evolved

Many of us were using the iPhone 6 or Samsung Galaxy S7 as just a phone and data assistant. Who would have anticipated a pandemic and other global event would have suddenly impacted our usage of mobile devices as now the primary way to access online content as opposed to desktop computers?

Since our last post, the Web Content Accessibility Guidelines (WCAG) had a bit of a refresh.

The WCAG “are part of a series of web accessibility guidelines published by the Web Accessibility Initiative of the World Wide Web Consortium, the main international standards organization for the Internet.”

The more ‘modern’ version of WCAG 2.0 was published in 2008 and became a global standard of best practice in web accessibility when it was standardized in 2012. For several years, this was the de facto recommendation for anyone looking to make more accessible and inclusive content — utilized in both design practice and for litigation. There has also been an uptick in lawsuits resulting from inaccessible websites and plaintiffs with disabilities.

While it may be a separate blog topic, the net result is that online content must be accessible for users with disabilities in areas of public accommodation.

WCAG 2.1 Adds Focus on Mobile Accessibility

In 2018, WCAG 2.1 rolled out. It is inclusive of WCAG 2.0 but contains a few new additions that factor in mobile usage. With more than half of global users using mobile devices to account for all Internet traffic, the standards naturally had to evolve.

Let us dive in and see what standards are new and our best practices to understanding and accomplishing these.

Adaptable (Guideline 1.3)

“Create content that can be presented in different ways (for example with a simpler layout) without losing information or structure.”

Things to ensure when designing:

• Ensure content is not forced in one orientation (portrait or landscape) but can be rotated.
• Having autocomplete for hard-to-fill in fields (think complex addresses!)
• Keeping buttons, links, and fields programmatically consistent so assistive technology that modifies their view retains functionality (replacing text for images, for example)

Distinguishable (Guideline 1.4)

• Have a responsive reflow, especially if a user utilizes zoom.
  • It is not easy for users to have to scroll left to right, and then down.
• Maintain crisp color contrast. The default for WCAG 2.1 is a 3:1 ratio for foreground and background color choices.
  • Check out this free color contrast tool: https://webaim.org/resources/contrastchecker/
• Give your users some space and follow these recommendations:
  • Line height (line spacing) to at least 1.5 times the font size.
  • Spacing following paragraphs to at least 2 times the font size.
  • Letter spacing (tracking) to at least 0.12 times the font size.
  • Word spacing to at least 0.16 times the font size.
• Provide exit points. If you are hovering over text and a tooltip emerges, make it easy to exit and not block content.

Keyboard Accessible (Guideline 2.1)

• Make sure all areas of interaction on your application are accessible from a keyboard and that they use consistent keyboard shortcuts.
• If you deploy keyboard shortcuts, ensure that they are easy to turn on and off, and do not perform surprise functions (nobody likes randomly deleted emails!)

Enough Time (Guideline 2.2)

• Ensure your user has enough time to complete all essential functions (examples include tests, online purchases, or anything that may include a timeout)
• Guarantee users know how much time remains, and if their data may be erased upon timeout.

Seizures and Physical Reactions (Guideline 2.3)

• Some users have seizures triggered by animation, flashing, or blinking.
• Ensure you have a way to turn off these features, and a proper warning.

Input Modalities (Guideline 2.5)

• This guideline allows users to operate functionality through various inputs, like pointers or fingers.
• Disable motion features (like shaking or rotating a device) to perform essential functions and provide alternatives.
• Design buttons and areas of interactions that are large enough for users not using zoom to activate.

Compatible (Guideline 4.1)

• Maximize compatibility with current and future user agents, including assistive technologies.
  • If a blind user registers for an event and is not sure if it gets added to their calendar, an accessible pop-up or sound shows confirmation.

Over time, technology and accessibility needs will continue to evolve. Keeping yourself up to date with current web accessibility best practices is a great way to ensure that your content will be as inclusive and user-friendly as possible.

If you have any questions, never hesitate to contact a web accessibility professional.

For further information on the updates, please visit: https://www.w3.org/WAI/standards-guidelines/wcag/new-in-21/.