Tools & Tips

Principles of Web Accessibility: Designing A Website For Everyone

Sam Berman & Chelsea Herman September 16, 2019

Why Does Website Accessibility Matter?

What did you do on the internet this week? Our guess is, probably lots: paid your phone bill, booked a flight, bought movie tickets, registered to vote, caught up on the news, researched an important purchase. And that’s just in your personal life. Chances are, you relied on the internet at work too.

Imagine you couldn’t do most, or any, of those things anymore—not because the technology disappeared, but because you were suddenly unable to use it, even while most of the people around you still could. At best, life would be less convenient and more expensive; many tasks would take much longer. At worst, you could be on the wrong side of the digital divide, and at a serious social and economic disadvantage.

That’s reality for many of the 56 million Americans who identify as having a disability. For them, using even the most seemingly basic website can present anything from frustrating challenges to insurmountable obstacles. That’s why the World Wide Web Consortium created the Web Content Accessibility Guidelines. They represented an important step in ensuring the power of the web is available to people of all abilities.

For your organization, failing to follow these guidelines could mean alienating users, ultimately losing you customers or donors. And it could even get you sued under the Americans with Disabilities Act.

Read on for our tips on how to make your website welcoming to people of all abilities. We've also made this post into a downloadable PDF, so you can also reference it offline. Because you can’t afford to alienate users, or get sued. More than that, it’s the right thing to do.

Download the pdf

The Terminology

What is the American with Disabilities Act (ADA)?

The ADA is a civil rights legislation signed into law by President George HW Bush on July 26th, 1990 protecting people with disabilities from discrimination - ada.gov

What are Web Content Accessibility Guidelines (WCAG)?

WCAG is a set of technical standards and guidelines written by the World Wide Web Consortium. Although WCAG is not in and of itself a legal document, when a company or organization is sued under the ADA, these guidelines are frequently cited as the standard for digital accessibility.

Website Accessibility Best Practices

The most important thing you can do to ensure an inclusive website is to think about accessibility throughout the project: from content strategy to wire-framing to design to development. Accessibility should never be a compliance box to tick, or a requirement to tack on retroactively.

The best websites are created when strategists and designers put themselves in the proverbial shoes of users, anticipating how they will navigate the site to find the information they want and need. As we learned working with The Chicago Lighthouse,  building an accessible website is no different; it simply requires a broadened understanding of what that navigation experience might look, sound and feel like.

Designing for accessibility isn’t hard, and it doesn’t need to be ugly. But if you’re designing with the primary goal of meeting standards, it likely will be. Your goal should always be a website that is enjoyable and usable for everyone.

That being said, here are eleven broad guidelines to keep in mind, based on the WCAG’s four principles of web accessibility, plus some practical accessibility measures you can put to use on your website right now.

Principle 1: Perceivable  

Provide text alternatives for any non-text content.

  • All images, form image buttons, and image map hot- spots should have appropriate, equivalent alternative text (alt text).

  • Images that do not convey content, are decorative, or contain content that is already conveyed in text should be given null alt text or implemented as CSS backgrounds.

  • All images should have descriptive alternative text.

  • Form inputs should have associated text labels:

form-fields

Provide alternatives for video content

  • Captions should be provided for non-live video (e.g., YouTube videos).

  • A descriptive text transcript or audio description track should be provided for non-live video.

Create content that can be presented in different ways (like a simpler layout) without losing information or structure.

  • Make sure the reading and navigation is in order, logical and intuitive.

  • Instructions should not rely upon shape, size or visual location (e.g., “Click on the square icon” or “See instructions in right-hand column”).

Make it easier for users to see and hear content, including separating foreground from background

  • Color should not be used as the sole method of conveying content or distinguishing visual elements:

color-indicators

  • Text and images of text should have a contrast ratio of at least 4.5:1.
  • Text should be at least 18 point (typically 24 px) or 14 point (18.66 px),bold, and should have a contrast ratio of at least 3:1.
  • The page should be readable and functional when the page is zoomed to 200%

Principle 2: Operable

Make all functionality available using a keyboard

  • Keyboard focus should never be locked or trapped at one particular page element. The user should be able to navigate to and from all navigable page elements using only a keyboard.

Provide users enough time to read and use content

  • If a page or application has a time limit, the user should have the option to turn off, adjust or extend the time limit.

  • It should be possible for users to postpone or suppress any interruptions like alerts or page pop-ups.

  • Users should be warned of any timeout that could result in data loss.

Do not design content in a way that is known to cause seizures of physical reactions

  • Page content should not flash more than 3 times per second, unless the flashing content is small and the flashes are of low contrast and do not contain too much red.

  • Users should be able to disable any non-essential animation and movement that is triggered by user interaction.

Provide ways to help users navigate, find content, and determine where they are

  • A link should be provided that allows users to skip navigation and other page elements that are repeated across web pages.
  • Each page should have a descriptive and informative page title.
  • The purpose of each link should be determinable from the link text alone, or from the link text and its context.

link-text

  • There should be multiple ways to find other pages on the site—at least two of the following: a list of related pages, table of contents, site map, site search, or list of all available pages.
  • If a page is part of a sequence of pages or within a complex site structure, an indication of the current page location should be provided—for example, through breadcrumbs or by specifying the current step in a sequence (e.g., “Step 3 of 5”).

Principle 3: Readable

Make text content readable and understandable

  • Words that may be ambiguous, unfamiliar or used in a very specific way should be defined through adjacent text, a definition list, a glossary, or other suitable method.
  • The meaning of an unfamiliar abbreviation should be provided by expanding it the first time it is used.

Make web pages appear and operate in predictable ways

  • Navigation links that are repeated on pages should not change order when navigating through the site.
  • Elements that have the same functionality across multiple pages should be consistently identified. For example, a search box at the top of the site should always be labeled the same way:

Principle 4: Robust

Maximize compatibility with current and future user agents, including assistive technologies

  • Make sure your HTML/XHTML is valid, so that accessibility tools such as screen readers can read the page without errors.
  • Markup should be used in a way that facilitates accessibility. This includes following the HTML/XHTML specifications and using forms, form labels, frame titles, etc. appropriately.
  • ARIA should be used appropriately to enhance accessibility when HTML is not sufficient.

We've created a handy downloadable PDF version of this post. It should be noted that there are more guidelines not included here; for the original, exhaustive list of guidelines, visit the WCAG website.

Whether you want to assess the accessibility of your current website, are interested in bringing your existing website into compliance with the Web Content Accessibility Guidelines, or are thinking about building a new—and, of course, accessible—website, we’re always here to chat. Drop us a line.

Download the pdf