According to the Camridge dictionary, 'Accessibility is the quality or characteristic of something that makes it possible to approach, enter, or use it'.

We say that a product is accessible when it is available for use to everyone. In the context of web development, this means developing websites that are functional for people of all types including people with visual or hearing disabilities. This article demonstrates different ways of making HTML websites more accessible.

Here are some reasons to make websites more accessible:

• It increases the potential reach of websites to more users which could lead to better engagement.
• It is a morally right thing to do.
• It is a legal requirement in some geographic regions.

Assistive Technologies

There are various tools that people use to consume web content. These include:

• Screen readers.
• Speech recognition software.
• Screen magnifiers.
• Alternative input devices designed for people with disabilities such as motor skill impairments.

Screen readers are one of the most common types of assistive technology. This is because the most common disabilities are usually related to vision. Screen readers rely heavily on HTML elements such as headings, links, buttons, and form labels for navigation. A concept known as the accessibility tree is used to represent how browsers interact with assistive technologies. The accessibility tree is a simplified representation of a web page, focusing on elements that are important for accessibility such as the HTML elements previously mentioned.

Consider the two HTML elements below:

<button type="button">Click button</button>

<div type="button">Click div</div>

The two HTML elements above could appear the same in the visual UI but are interpreted differently by assistive technology. For this reason, it is important to write HTML semantically allowing assistive technology to correctly elaborate web content to people with disabilities. Writing semantic HTML means using the right HTML tag for its intended purpose. For instance, using the <nav> element instead of a <div> for menus. Additionally, semantic HTML provides the benefit of keyboard accessibility for certain elements such as <a>, <form>, and <button>. This means pressing the tab key will automatically select such elements.

Color Contrast

A key consideration for web accessibility is the color contrast of elements on the web page. There are a set of well-defined guidelines on things like text and images called the Web Content Accessibility Guidelines (WCAG). These guidelines have different levels categorized as A, AA, and AAA which mean 'not accessible', 'acceptable', and 'accessible' respectively.

Color contrast for text refers to how visible words are considering their background. A contrast ratio is used to describe the color contrast of text. Black text on a black background has a contrast ratio of 1:1. The highest contrast ratio is 1:21 which is achieved by applying a black color to text on a white background and vice-versa. This ratio changes depending on the text and background with the ultimate goal of making text readable regardless of the background. The table below shows more examples:

Consider the image below:

Notice how each background has a different ratio depending on the color of the text. We can use this contrast checking website to determine the contrast ratio of a web page. We can also access the developer tools from the browser by right-clicking and selecting 'inspect', and then clicking on the accessibility tab to see the contrast ratio of a web page.

For the AA level, normal text should have a contrast of 4.5:1, and large text, which is >= 24px should have a ratio of 3:1. However, the goal should be to achieve the AAA level which has a 7:1 contrast for normal text and 4.5:1 for large text.

Alternative Text

When we add images to a web page, we should consider that some users may not be able to see them. This makes it necessary to add descriptive text associated with the image as an alternative. Consider the HTML code below:

<img src="/assets/car.png" alt="A car"/>

The code above would render an image on the web page based on the URL specified in the src attribute. The alt attribute is the alternative text and some benefits of adding it are:

• If the URL of the image is no longer valid, the description is shown in the browser instead.
• Screen readers say the alternative text out loud for visually impaired users.
• It is good for SEO because search engines use them for page ranking.

From my experience, a best practice for writing alternative text is specifying the object in the image. There is no need to write that it is an image e.g 'An image of a car'. You can simply write, 'A car'. This is because screen readers can detect that this is an image and actually let the user know that it is an image, writing it this way avoids redundancy. The same goes for writing 'a photo of a car', or 'a picture of a car'. Also, keep in mind that there is no need to add alternative text for decorative images such as section or header backgrounds, button icons, images that show text, and images that have a descriptive label nearby. Decorative images don't add informational content but are purely for aesthetics.

Below are some examples of good alternative text from my portfolio website:

A white duck flying an army helicopter in the clouds:

An elephant sitting on top of a blue moving van in the desert and a rainbow in the sky:

A male lion smoking a cigar while sitting in a boat and casting a fishing rod:

A man sitting inside a futuristic car in a futuristic city:

A rhino running on a rugby field, holding a rugby ball while being chased by hyenas:

The last one is a bit of a tongue twister😉. Alternative text is a good practice and it is important for everyone not just people using screen readers.

Links

Labels for control elements such as links and buttons are important to all users. Implementing them correctly is essential for users with disabilities. Links should generally meet the following requirements:

• Should use the <a> element.
• Should be recognizable as links.
• Should have non-ambiguous text.

It is a bad practice to use vague labels for links such as "click here", "more", "continue", etc. This is because screen reader users sometimes navigate through links without reading the context. We can make links more recognizable by underlining them as shown in the example below:

HTML Code:

<a href="https://google.com">Contact Us</a>

CSS Code:

a {
  text-decoration: underline;
}

The anchor element (<a>) is underlined by default. As mentioned previously, link elements have keyboard accessibility by default allowing them to be focused on by pressing the tab key.

Forms

Labels in all form elements are a hugely important part of accessible development. Unfortunately, elements like input fields often lack labels and rely on placeholder text to describe them. It is a good practice for accessibility to add a label whose for attribute matches the id attribute of the corresponding input field. Consider the example below:

<div>
  <label for="name">Name</label>
  <input id="name" type="text" />
</div>
<div>
  <label for="email">Email</label>
  <input id="email" type="email" />
</div>

Writing it this way makes it so that the input field is highlighted when a user clicks on the corresponding label. We can then use the placeholders to display exemplary information, for example:

<div>
  <label for="name">Name</label>
  <input id="name" type="text" placeholder="Your name e.g. John" />
</div>
<div>
  <label for="email">Email</label>
  <input id="email" type="email" placeholder="user@gmail.com" />
</div>

It is a good practice to specify what a button does especially if it exists inside a form. The two common options are "submit" and "button". When clicked, these serve the purpose of submitting a form and working as a normal button respectively.

<button type="submit">Submit</button>

Radio buttons could be written more semantically by using the fieldset and legend tags which group a set of inputs providing context to screen readers. When a screen reader encounters a fieldset tag, it announces that a new group has been entered. This helps users understand that the following elements are related and should be considered as part of a group. Additionally, when a screen reader encounters a legend tag, it reads it out as the title or description of the group.

Consider the HTML snippet below which demonstrates good practices for the fieldset and legend tags:

<fieldset>
  <legend>What is your favorite color?</legend>
  <label for="red">Red</label>
  <input id="red" type="radio" name="red" />
  <label for="blue">Blue</label>
  <input id="blue" type="radio" name="blue" />
  <label for="orange">Orange</label>
  <input id="orange" type="radio" name="orange" />
  <label for="green">Green</label>
  <input id="green" type="radio" name="green" />
</fieldset>

The Semantics of Semantic HTML

Semantic HTML has another benefit beyond accessibility which is that search engines, such as Google, give more importance to key words inside semantic elements like headings and links than those included in non-semantic div elements. Consider the example below:

Non-semantic HTML:

<div>Website Title</div>
<div>The quick big brown fox jumped over the lazy dog.</div>

Semantic HTML:

<h1>Website Title</h1>
<p>The quick big brown fox jumped over the lazy dog.</p>

Writing HTML using the correct element for its rightful purpose ensures that a website is more discoverable by potential users. There are tags that are considered landmark regions which are:

• <nav>
• <header>
• <main>
• <section>
• <footer>

These elements help to communicate the layout and important areas of a web page enabling quick access to those regions. These improvements result in easier navigation using assistive technologies. Tools such as screen readers can quickly identify landmark regions and provide shortcuts or navigation commands to jump directly to these sections. For example, a user can skip directly to the main content or quickly access the navigation menu. This reduces time and effort required to navigate through unnecessary content enhancing the user experience.

Landmark regions also help users understand the layout and organization of a page allowing screen readers to announce the type of landmark when entering a new section such as "navigation" or "section". Access to such context is crucial for users who cannot visually perceive the page layout. Using standard landmarks also allows for a predictable browsing experience. Users familiarize themselves with common landmarks and become knowledgeable about what types of content to expect in which regions.

Font Size

Some people have poor eyesight mandating them to use visual aids to browse the web. For people that prefer it, they can change the default text size in their browser to make all text bigger and easier to read. The common pixel unit (px) that we use is a fixed unit of measurement and it does not scale with the browsers default font size.

In order to accommodate users settings, we can use the rem CSS unit instead of pixels. The default font size is 16px and 1rem is equal to whatever the default font size is. The default font size is changeable from the settings of most browsers.

Using the rem unit makes the text on a web page adapt based on the users default font size instead of setting it to a fixed pixel unit. For example, if a user changed their browsers default font size to 32px, rem units would easily adjust to match this whereas px units would not.

Here are some helpful conversions for default settings:

• 1rem = 16px.
• 1.5rem = 24px.
• 2rem = 32px.

How screen reader users navigate sites:

Here are some rules to follow when it comes to writing headings.

1. Heading numbers should be consecutive and in descending order (h1 - h6).
2. There should only be one <h1> element per page.
3. They should only be used for structure and not style.
4. Headings should always introduce new content sections. Never use a <p> or <div>.

ARIA

💡Did you know that ARIA stands for Accessible Rich Internet Applications? ARIA refers to a set of attributes that can be added to HTML elements to provide more context and information to assistive technologies. It is a way to make web applications and dynamic content more accessible to assistive technologies such as screen readers and voice recognition software.

ARIA labels help to fill in the gaps when HTML native semantics fall short. Consider the example below:

<button class="example-class">Log in</button>
<div class="example-class">Sign in</div>

The two buttons above will appear the same in the user interface. These two elements differ in the following ways:

We can use ARIA to reintroduce certain functionalities. In most cases, it is much easier to use a semantic HTML element. Essentially, if it is possible to use a native HTML element, it is a best practice to use it instead of relying on ARIA.

To make the div element above more accessible, it would need some additional attributes as shown below:

<div class="example-class" role="button" tabindex="0">Sign in</div>

• The role attribute defines the elements role.
• The tabindex will make it keyboard focusable.

However, the element may still lack some of the built-in accessibility features even after applying these ARIA attributes. A more common use of ARIA is for website theme toggle elements as shown in the example below.

An example of a website theme toggle:

<div id="toggleTheme" onClick="toggleTheme()" role="switch" aria-checked="false" tabindex="0">Light Mode</div>

In the context of the above custom toggle switch, the role attribute indicates that the element is intended to be used as a switch similar to a checkbox. The aria-checked attribute tells a screen reader whether the switch is activated or not.

It is important to remember the following facts about using ARIA:

• Avoid it if a native HTML element exists that already does the job.
• Use it when creating a UI component that doesn't exist in the HTML.
• Use it to provide additional context to assistive technology.

ARIA Live Regions

ARIA live regions are parts of a web page marked to be dynamically updated. Screen readers announce it when content changes in these regions without requiring users to navigate to the changed content. Some of their common use cases include real-time notifications, status messages after form submissions, and updates resulting from on-page filtering or searching.

ARIA controls are used for this and they are HTML attributes that are applied to an element. We can choose between different settings for how these changes are announced by using the aria-live attribute as shown below.

Conclusion

This was a great article to write because it also reminded me of mistakes I make sometimes that cause my web pages to be less accessible. I hope you learnt something too! I also hope not to receive messages in my inbox telling me that I don't practice what I write about. After all, this should help with learning. After reading this article, you may have learnt more about the following topics:

• Accessible links 🔗.
• Text contrast 🔗.
• Accessible form fields 🔗.
• Semantic HTML 🔗.
• Alternative text for images 🔗.
• Font size 🔗.

I encourage you to do further research about these topics because I did not do a deep dive into them. Additionally, learning is best done practically. Feel free to share your feedback with me about this post via whichever platform you prefer. Thank you for reading my blog and happy coding!