Imarc

Another Look at Web Accessibility

Marcel Moreau, Lead UX Engineer
Posted on Aug 10, 2017

In June, I headed to Watertown, Massachusetts to attend a website accessibility workshop, hosted by Perkins School for the Blind. Staff members in attendance spoke knowledgeably about the challenges in making websites accessible for those impaired. It was for sure a humbling experience, and my notes from the day shed some light on today’s need for accessible technology.

Assistive Technologies

Popular assistive technologies (AT) include screen readers and screen magnifiers. Apple includes both of these, out-of-the-box, with VoiceOver and Zoom features. And these are just the first one of many accessibility tools that Apple provides. Comparatively, Windows users rely on JAWS (paid) and NVDA (free). The moderator who led the screen reader segment of the workshop prefers the JAWS solution, as they find it’s more robust than Apple’s VoiceOver.

Screen readers

I was able to observe a blind moderator use a screen reader. The moderator’s common workflow when visiting a page was: listen to how many links there are on the page. Listen to how many headlines exist (headlines can be used as a navigational tool!). Search the page for a link containing text, relevant to their visit. The use of ‘skip to content’ links are a good accessibility technique, however was not a feature that this visitor utilized.

Screen magnification

A second moderator, partially blind, heavily leveraged Apple’s Zoom feature in order to read a web page’s navigation labels. This instance is separate from using browser-specific zoom (which is also very helpful).

Here, a comment that I noted for myself was that “Placing the navigation in a conventional place helps a lot”.

Miscellaneous Helpers

  • Some users will invert or grayscale the color on your webpage to help with contrast. Have you tested for this?
  • Browser zoom hotkeys allow users to quickly and easily zoom on page;
  • Resizing the browser can help users re-flow content into more digestible and simpler layouts (responsive design).

Policy

Honestly, this was a little fuzzy to me and others in attendance. While, companies are not required by law to make their websites accessible, they can still be sued, and often will agree to settlements.

There is no set standard the Department of Justice follows, but they do endorse the Web Content Accessibility Guidelines (WCAG) 2.0 AA Guidelines (which is now 10+ years old). It’s good practice to try to make your site achieve as much compliance with WCAG 2.0 AA as possible.

In the end, as the moderators told the audience, you will never, ever be “fully compliant” or “fully accessible”. Simply make it a priority and do the best you can.

WCAG

The Web Content Accessibility Guidelines (WCAG) is a globally maintained technical standard guided by the W3C. Meeting the outlined criteria can help direct your website to being more accessible to users.

Section 508

I have seen this in many Request for Proposals (RFPs) but it doesn’t really apply to the private sector. Section 508 was an amendment to the Rehabilitation Act of 1973, requiring federal agencies to ensure that technologies they develop, utilize, procure and maintain are accessible to federal employees with disabilities. The amendment included only high-level standards, some of which are irrelevant today. In 2008, the content was reviewed and “refreshed”, but essentially says “just use WCAG 2.0, thanks”.

General Accessibility Tips

Throughout the workshop, I noted many tips. Some are old hat but some were new to me.

Here’s a run-through of what stood out in my mind:

  • Carousels are an accessibility nightmare. They’re keyboard traps. Users focus in but cannot get out of them. AVOID CAROUSELS.
  • Form fields without associated labels is one of the largest pet peeves. This makes it so difficult for disabled users to know what they’re filling out. Often, minimal site search forms are a big culprit.
  • Modal windows are ok if they have forced focus, though many do not.
  • Make sure your colors have proper contrast ratio. There are plenty of web-based tools out there to help with this.
  • Media players need accessible controls (play, pause, stop). Able Player is the most accessible media player around.
  • Use headline elements (h1, h2, h3, etc.) to logically group content within your web pages. Don’t use them arbitrability based on design preferences. This is a hard challenge for authors, especially non-technical users. It’s key to not skip headline levels.
  • Your videos need to have transcripts and/or captions associated.
  • Image alt tags are important! Be sure to use them if the image is necessary for the user to understand what the content means.

It’s important for web design agencies to incorporate accessibility into their workflow. With proposed amendments to the Americans With Disability Act coming in 2018, agencies must get on board. Regardless of legal concerns, making your web projects accessible is crucial for all users of the web.

Interested in learning more about designing an accessible website? Let's Talk!