Let’s make web apps accessible to everyone
Without question, accessibility matters in web development. We as engineers need to be advocating for this in the apps we build while making every effort to update existing projects.
In recent years, the importance of providing equal access and equal opportunity to web and digital content has taken a turn for the better. Many might think its quality assurance or a developer’s responsibility to code for accessibility, but some of the most impactful decisions that make or break accessibility for people with disabilities and seniors are, in fact, made during the design phase.
Accessible design, is by its nature, flexible, allowing content to faithfully render across a broad spectrum of devices, platforms, assistive technologies, and operating systems. In physical environments, everyone benefits from lower curbs, automatic door openers, ramps, and other features provided for disability access. Web accessibility features are becoming options that are also more widely used.
Let’s explore why it matters, WCAG principles, and how you can implement strategies to make your applications accessible to all.
Why It Matters
Endusers, especially ones with disabilities, want to be able to experience the web just as everyone else does. They want to be able to navigate a company’s site just as easily as you would their brick and mortar store. Americans with Disabilities Act (ADA)-accessible sites provide endusers with a way to navigate and interact with a site using just their keyboards and/or a screen reader.
For corporations, the importance of avoiding potential costly lawsuits is a big deal. Though not officially required by law yet, many companies face lawsuits for their websites not being ADA compliant against the WCAG 2.1 or 2.0 standards (Web Content Accessibility Guidelines).Their websites are seen as an extension of their organization, and thus should be just as accessible for all patrons.
Understanding the Four Principles of Accessibility
WCAG guidelines and success criteria are organized around the following four principles, which lay the foundation necessary for anyone to access and use Web content. Anyone who wants to use the Web must have content that is:
Perceivable — Information and user interface components must be presentable to users in ways they can perceive.
- This means that users must be able to perceive the information being presented (it can’t be invisible to all of their senses)
Operable — User interface components and navigation must be operable.
- This means that users must be able to operate the interface (the interface cannot require interaction that a user cannot perform)
Understandable — Information and the operation of user interface must be . understandable.
- This means that users must be able to understand the information as well as the operation of the user interface (the content or operation cannot be beyond their understanding).
Robust — Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.
- This means that users must be able to access the content as technologies advance (as technologies and user agents evolve, the content should remain accessible)
If any of these are not true, users with disabilities will not be able to use the Web.
How can I make my web app more accessible?
Semantic HTML
You might wonder why this is so important? After all, you can use a combination of CSS and JavaScript to make just about any HTML element behave however you want. Semantically correct HTML tells the browsers how content is interrelated and allow assistive technologies, such as screen readers, do their job by converting the provided information into a format a user seeks. Screen readers also allow the user to navigate data tables meaning a user can access individual rows at a time. Semantic tags allow screen reader users to jump or switch the content through heading, links, paragraph, or lists tags. Check out basic best practice for Semantic HTML:
In addition, using the html <button> allows for built-in keyboard accessibility! Users can navigate from button to button using the Tab key, and activate using Return or Enter keys.
Use alt tags with images
Alt tags in images refer to an invisible description which are read aloud to blind users on a screen reader. Adding alt text allows authors to include images while also providing the content in an alternative text based format. In the case of images that can’t load, alt tags will be displayed in place of the image. Additionally alt tags provide better image context/descriptions to search engine crawlers, helping them to index an image properly. Check out best practice for an alt tags below:
<img src="pancakes.png" alt="Stack of blueberry pancakes with powdered sugar">
Notice the alt text above is sufficiently descriptive but doesn’t contain any spammy attempts at keyword stuffing. Close your eyes, read aloud your alt text…. can you imagine a reasonably accurate version of your image? If so, you’re on the right track!
Tables
Tables without structural markup to differentiate and properly link between header and data cells, create big accessibility barriers. Relying on visual cues alone is not sufficient to create an accessible table.
Users using screen readers can have the row and column headers read aloud as they navigate through the table. Screen readers speak one cell at a time and reference the associated header cells, so the reader doesn’t loose context. Check out a best practice example for tables below:
The scope attribute tells the browser and screen reader that everything within a column that is associated to the header with scope="col" in that column, and that a cell with scope="row" is a header for all cells in that row.
WAI-ARIA tags
Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA). WAI-ARIA defines a way to make web content and web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies.
More specifically, WAI-ARIA provides a framework for adding attributes to identify features for user interaction, how they relate to each other, their roles, properties and current state.
An example of ARIA state attributes with a checkbox below:
An example of an ARIA attribute that is a property is aria-label. It’s used when a label for a form element is not visible on the page (maybe because it makes no sense to make it visible, or if the design dictates this). For cases when label text is visible, aria-labelledby is the more appropriate attribute to use, such as the figure example below.
Conclusion
To quote Tim Berners-Lee, director of the W3C, “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” Accessibility is not a given. It requires work by you, me, and the entire community.
UI designers, Web Devs, and QA folks, let’s always have web accessibility at the top of mind when building web apps. We should encourage each other and ensure we’re all building a more inclusive experience for everyone.
