Must-Haves for Web Accessible HTML in Your Site 

Technical writing is fast becoming a side hustle for web developers the world over. As developers, you should lead by example. So I’ve curated a list of accessibility practices that are essential for any HTML website. But first, what is web accessibility?

Web accessibility (a11y) is the practice of building digital products in a way that is accessible to people with disabilities — such products usually conform to the Web Content Accessibility Guidelines (WCAG).

Semantic HTML

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.

There’s a simple concept that I’d like to mention in relation to semantics and that’s affordance. The implicit design of things can give users 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. 

Good semantics involves intuitive design experience and affordances are the way to achieve that.

ARIA

ARIA is an acronym for accessible rich internet applications. These applications are attributes that communicate with the accessibility tree of a subset of the DOM. This simplified rendering of a website is the accessibility tree. This is sometimes called the “shadow DOM”. This version can be read by screen readers and is focusable by keyboards.

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. By assigning the correct role property to an HTML tag, ARIA is able to perform its intended function. However, we should not define roles with abstract terms. The DOM and accessibility tree are structured with a few different types of roles. Here are a few examples:

• Landmarks
• Navigation
• Search
• Banner
• Main
• Widgets
• menuitem
• tab

The Roles Model by W3 provides an alphabetical listing of all ARIA roles along with their definitions in section 5.4.

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.

Media with Lazy Loading

Google Chrome has a native feature called lazy loading. The feature prevents images from being loaded until they are actually viewed. It’s awesome because images and videos won’t pre-load and slow down the page. To use the lazy loading feature, add the following code to the image HTML tags:

loading=”lazy”

There is Javascript that adds cross-browser support. To learn more about lazy loading for other browsers, check out this article by Addy Osmani.

Tab Index

There are some web users who only use their keyboards to navigate websites. Up and down arrows scroll, the tab key focuses on links, buttons, and selectable page elements and the enter key selects. Most modern browsers feature keyboard focus. You can use tabindex when a web browser cannot detect the portions of a website that should be clicked or hovered over. A tabindex organizes selectable items on a page into a hierarchy. Its default value is 0. As a result, everything is equally important and will be sorted from left to right for rows, then up and down for side menus or columns. To ensure easy navigation, change the tab index to match the layout of the page.

Alt Text

In HTML, ALT text is the alternative text description given to an image that explains what the image is about. There are various reasons for adding alt text to images. It is recommended by the WCAG and it provides an alternative description for people who are blind and people with low bandwidth.

The alternative text is not visible to the user, but holds information about its link or image. It can be a description or an attribute. It is available to screen readers and search engines to index images and links.

Here is an example of how best to insert an image using HTML 

<img src=“image.jpg” width=“500px” height=“600px” alt=“image description” title=“image tooltip”>

The alt attribute describes the image, and the title attribute provides a tooltip that appears when a user hovers over the image.