All for one, one for all. A popular idiom whose usage was amplified by the three Musketeers, Athos, Porthos, and Aramis (and D’Artagnan), embodies the way developers stick together through thick and thin. I’ve benefited from acts of kindness from other developers. When I started my developer journey, I was given free access to Udemy courses that others had paid for and I had people whom I could disturb late in the night for some help debugging my code. I’m grateful for the help.

Strangely, developers do not see web accessibility the same way as is evident in this WebAim study of the top 1,000,000 home pages. Web accessibility (a11y) is the practice of building digital products in a way that is accessible to people with disabilities and that conforms to the Web Content Accessibility Guidelines (WCAG). Alternatively, it is a way of making web content available to everyone by using functionality that can be operated by anyone.

A Little Bit of Backstory

When the World Wide Web Consortium (W3C) was founded by Tim Berners-Lee in 1994, it had a goal to make the internet accessible to all. A few years later, at the University of Wisconsin-Madison’s TRACE Centre, the Unified Web Site Accessibility Guidelines (UWSAG) were compiled as reference documents for how developers should build accessible products. A version of UWSAG version 8 became the seed document for the WCAG 1.0 standard.

In 1997, the W3C created the Web Accessibility Initiative (WAI) to steward the development and maintenance of accessibility standards for the web; and in 1999, the WAI outlined the WCAG 1.0. Fast forward 19 years later to June 2018 the WCAG 2.1 was released with 13 guidelines and 78 success criteria for testing conformance to its standards.

The WCAG 2.1 level AA is currently the most referenced web accessibility documents by governments the world over. But the WCAG standards aren’t just referenceable materials, they are documents detailing how accessible websites should be built. Everyone on the web development team from the programmers to the designers and the product managers should be well versed in the practices outlined in the WCAG standards.

In this article, I outline five best practices that everyone should follow to build accessible web content .

1. Managing Focus

Focus refers to a highlighted or clearly defined area of the web page that receives the input of keyboard events. For example, when filling a form online you may notice that if you take your mouse pointer to a particular form field, the field's decorative properties(color, margin, etc) may change. That shows that the field is in focus. When using a keyboard to navigate a webpage, the focus is often defined by a focus ring whose styling is defined by the browser or the developer's custom styles.

Deciding What's in Focus

It's important to develop a good focus strategy for each site. DOM order is important when considering focus, especially when using CSS to visually change the position of elements on the screen. This can cause the tab order to be manipulated out of a logical sequence that might not make sense to someone using a keyboard to access the website.

Tabindex attribute. It is used to adjust the tab order (and invariably, the DOM tree) of elements that it is applied to. It can be applied to any HTML element and it accepts a range of numerical values. For blind people, tabindex can be used to remove elements from the natural tab order so that they don’t go through the hassle of tabbing through unnecessary content.

Remove an element using tabindex="-1". For example:

<img src=”image.png”  tabindex="-1" alt=”describe the image concisely and accurately”>Can't reach me with the TAB key!</img>

Skip link. An anchor tag that allows keyboard and switch device users to jump straight to the main page content without the hassle of tabbing through all the links according to the tab order.

Roving focus. It works in tandem with the tabindex attribute by setting Tabindex to -1. It is a way of managing the focus in components such as drop-down lists that allows a keyboard user to easily tab through the list items.

2. The Use of Semantic Elements

What is semantics?

Semantics in web design describes writing meaningful HTML code using self-expressive tags that make sense to both the developer and the browser engine which renders the a11y tree. When an element is semantically accurate, screen readers are able to announce its role name state, and value.

Exploring semantics

Affordances. The implicit design of things that gives the user a clue on how to use them. For example, a doorknob suggests to anyone approaching a door that it may be opened by turning the knob. In web apps, affordances are important to help to make the UX hitch-free. A good example is a hamburger menu icon (the 3 horizontal dashes usually at the top corner of a web page) which suggests to the user that there is a hidden menu that can be accessed by clicking.

Accessibility tree. A modified version of the DOM tree that is presented to the screen reader which allows the screen reader user to understand the affordances of the different web page components.

3. Intuitive Navigation

It is important to use meaningful headings and link text as well as good page structure as screen reader users are able to navigate via headings.

Heading levels(h1, h2 h3, etc) are used to make sense of the importance of contents/sections of web pages.

Using headings to describe the contents of web pages makes it easy for screen readers to make sense of the accessibility tree.

4. ARIA

Web accessibility initiative accessible rich internet applications (WAI-ARIA) specifies attributes that modify the way that an element is represented in the accessibility tree.

ARIA enables developers to express a broad range of HTML semantic concepts via the use of HTML attributes. It extends the use case of HTML elements beyond that which current semantic HTML tags allow. The first rule of ARIA is if a native HTML element or attribute has the semantics and behavior you require, use it instead of re-purposing an element and adding ARIA

With ARIA, HTML elements that lack semantic specifications such as span and div can be defined and assigned roles, states, and labels. Roles are the specific functions of elements on a webpage, states are the conditional statuses of elements(such as a checkbox being checked or unchecked) and labels are the names assigned to elements

ARIA can modify existing semantic elements and the accessibility tree without affecting any other thing about the page presentation or interactive behavior.

Ways in which ARIA can affect the a11y tree include

Role-playing. This represents a shorthand for a particular UI pattern. E.g the checkbox pattern that has states of "checked" and "unchecked".

Express semantic relationships between elements. For instance what button controls what functionality, or to present a child menu as a child of a parent menu using the "aria-owns" attribute, aria-activedescendant, aria-describedby, aria-posinset, or aria-setsize attributes.

For example, using aria-describedby property to describe a Close button's action. A button with the same purpose as a 'close' button is described elsewhere in the document. In order to associate the description with the link, we use the aria-describedby property.

<button aria-label="Close" aria-describedby="descriptionClose"
    onclick="myDialog.close()">X</button>

...

<div id="descriptionClose">Closing this window will discard any information entered and
return you back to the main page</div>

Live updates. Using aria-live attribute: This Informs assistive technology right away when there's a change in the status of the page such as a message in a chat box.

5. Responsive Styling

Responsive design makes a webpage more accessible. Some responsive design best practices are

Adding styles for focus and various ARIA states.

• Styling the focus ring enables screen readers to differentiate between mouse and keyboard events.
• Styling components of a webpage using CSS(cascading style sheets) helps reflect the state of the component.

Flexibility. Making UI elements flexible and able to handle being zoomed for users who may have trouble reading small text.

Viewport styling. Using a meta viewport tag thus

 <meta name="viewport" content ="width=device-width, initial-scale=1>

allows the web developer to control the page's dimension and scaling. By setting the width equal to device-width you're telling the viewport to match the screen's width in device independent pixels(dp) and by setting the initial-scale to 1, you're establishing a 1:1 relationship between CSS pixels and device-independent pixels.

Design with a responsive grid(CSS grid). Use relative units such as percents, rems, and ems. Touch target size 48(dp) corresponds to the average size of a finger pulp. That is, the area covered by an icon should be big enough to accommodate the pulp of a person's finger.

Color choices. Contrast ratio is the relationship between the foreground color and background color in terms of luminance. When colors are similar it means that there is a low contrast ratio and when they are dissimilar they are said to have a high contrast ratio.

Final Thoughts

Accessibility is the responsibility of everyone on the web development team from the programmers to the designers and the product managers. Having empathy for people with accessibility needs is a great starting point for the development of accessible web apps. Web accessibility is more effective when adopted as part of the development process from the start. When done correctly, an accessible website boosts SEO, improves user experience, and enhances overall brand image.

Finally, as important as guidelines are for the avoidance of litigation and informing the accessibility process, the true measure of accessibility is whether users can use your products.