Getting Started with Accessibility

September 14, 2018

Accessibility (or “a11y” for short, the number 11 representing the eleven letters it replaces) is a term regarding the degree to which a product, device, service, or environment is available to as many people as possible. As a digital agency, we typically use this term when assessing how usable websites are by people who are impaired to any degree.

What “Impaired” Means

Folks commonly assume accessibility is only relevant to people with permanent disabilities, but it’s not quite as simple as that: there’s a wide variety of people and situations where accessibility matters.

  • Visual impairment could include someone with blindness, color blindness, someone who just lost a contact, or someone using a mobile device outdoors where there is screen glare
  • Motor impairment could be due to Parkinson’s, cerebral palsy, a stroke, inebriation, or simple exhaustion.
  • Auditory limitations could stem from deafness, hyperacusis, or even accounting for a nearby sleeping baby!
  • Cognitive issues may stem from ADHD, developmental disabilities, or external distractions.

When considering accessibility efforts, it’s critically important to remember that many impairments may be temporary and are often out of the end user’s control!

Motivation for Improvements

There are a host of reasons why putting effort into increasing your website’s accessibility is worthwhile. Four key reasons:

  1. Humanity/ethics: Caring about your users, particularly those who are disabled or impaireddifferently abled for any reason, is a good thing to do!
  2. Audience: From a practical standpoint, your website can successfully connect with a larger potential audience if is accessible to the widest possible set of users.
  3. SEO: Good a11y practices naturally lead toward semantic markup, which significantly improves SEO as a nice side effect.
  4. Funding & Liability: You may be exposed to legal action if you fail to meet certain a11y standards, or your funders may make certain a11y requirements of you when giving grants.

Understanding Accessibility Standards

When it comes to accessibility on the web, one of the first intimidating factors can be trying to learn and meet a particular set of standards set forth by some body or another. These standards often have confusing names and lengthy, seemingly idiosyncratic requirements that can be challenging to meet.

The two most commonly encountered are Section 508,” a provision of the U.S. Rehabilitation Act requiring that all website content be accessible to people with disabilities, and WCAG,” a set of Web Content Accessibility Guidelines issued by the World Wide Web Consortium (W3C for short). WCAG has three different levels, A, AA, and AAA, with increasingly stringent requirements.

These days, WCAG 2.0 level AA tends to be the typical benchmark for considering something “accessible,” but fundamental accessibility issues can be very hard to quantify and describe.  Compliance to a standard isn’t necessarily the ideal way to focus one’s energy: making sure your site is actually usable by users often matters as much as (or more than!) meeting the letter of the law, so to speak.

If you’re just getting started, our recommendation would be to not obsess about meeting some abstract standard, but to spend time and energy getting the basics right and then have actual users test out your site to assess its usability.

Where to Start

There are several best practices and things you can do to boost your site’s accessibility without having to hire a specialist or recruit testers. These include…

Think Text-Only

A good portion of users with disabilities may be browsing your site without images or even any visual styling at all. For these users, it’s important that you consistently provide ALT and TITLE attributes for images and links, respectively. (Note: writing good ALT tags is a challenge!)

It’s also important to offer good keyboard navigability, so users without a mouse can use the tab key and other inputs to navigate. Offering a “skip to content” link at the top of the page to reduce the need to tab through the entire page header with every new page load, for example, is one way to increase keyboard navigability. Another consideration is to be mindful of the TABINDEX value of the elements on your pages.

Use Good Document Structure

Users not getting the full visual representation of your site don’t have visual clues of size and placement to indicate relative importance of different elements, so it’s important that your page’s markup itself represents the structure of the content. This means using semantic HTML5 elements like <nav>, <aside> and <main> to express purpose, as well as being mindful of use of H1-H6 elements to create a meaningful document outline.

Keep Design Accessible

Even if users are viewing the design of your website, they may have limitations, so it’s important to be mindful and not over-reliant on visuals. Make sure your color contrast ratios are high, your font sizes aren’t too small (or large!), and so on (WCAG offers specific guidance on contrast ratios and sizes you can follow). Whenever possible, use more than just color to denote differences, emphasis, and content meaning.

Oh, and remember you can use CSS to make text appear in ALL CAPS, rather than typing things out capitalized.

Be Mindful of Media

Images, video and other non-textual elements can pose significant a11y challenges. As such, it’s important to provide textual alternatives, such as closed captions or transcripts, whenever possible.

Also note that you shouldn’t ever offer autoplay audio or video, and that images of text should be avoided — even though you can put in an ALT tag with the text of that headline, you’re much better off making it actual text. Use pictures for pictures and words for words!

Recommended Tools

While compliance with a standard is not the be-all end-all of accessibility — the user experience is really what matters — it can be helpful to perform standards-based assessments. Our favorite tool to get started with this is a browser extension called WAVE, which can evaluate any given web page you visit and provide an in-browser report on problems and issues. It’s not flawless, but it can certainly help you identify glaring issues.

We also like the browser extension Spectrum for helping simulate different visual impairments; it can help identify visual design issues that a standards-based assessment won’t catch.

Other tools you might find useful depending or your needs and experience include Google’s Lighthouse (now built-in to Chrome) and Deque System’s aXe, another browser extension that can analyze a page’s accessibility. There are, of course, lots of other tools out there; we’ve highlighted just a few we know from experience can be valuable.

When getting started on improving your site’s accessibility, remember to keep in mind that addressing accessibility issues is not a binary “is/is not compliant” question. Even if you’re not meeting some documented criterion, every step you make toward making your site more usable by more people is a positive one.

Need some help with building a better website? Contact us!

 

By Ben Byrne

Ben is our very own designer/developer unicorn. He’s been designing on the web professionally for over 17 years, but he’s also been a developer for almost as long, building up extensive experience with languages such as HTML, CSS, JavaScript, and PHP, and putting them to good use implementing his designs on several CMS platforms, including WordPress and Drupal. In addition to his own work, Ben oversees the design and development the rest of our team does, ensuring it’s up to our high standards. He enjoys sharing his knowledge, and has presented to groups of varying sizes on topics like the difference between print and web design, web typography, WordPress widgets, and front-end performance.