Liben Hailu

Unlocking Digital Accessibility: A Guide to Inclusive Web Development

by Liben Hailu
9 mins read

Unlock digital accessibility – from why it matters to practical tips on inclusive web development to make the web accessible for all!

Digital Accessibility

Digital accessibility, commonly abbreviated as A11y, involves designing and building websites to enable operation by a diverse audience, including individuals with disabilities.

Why Accessible Development?

  • 15% of the world population has a disability, and 96.5% of websites have accessibility issues. This is a reality you can change.
  • Business impact: Accommodating people with disabilities will help to attract even more users.
  • Legal impact: It is considered illegal in some countries.
  • SEO advantages: Search engine bots utilize keyboard navigation to analyze the content of browsers.

Assistive Technologies

Assistive Technologies, commonly abbreviated as AT, are tools that help improve interaction with the web, taking advantage of accessible web content. Some examples of assistive technologies (AT) include:

  • Screen readers
  • Speech recognition softwares
  • Screen magnifiers
  • Alternative input devices(for people motor skill impairment)

The Accessibility Tree

The accessibility tree is created by the browser based on the standard Document Object Model (DOM), which is used by platform-specific Accessibility APIs to provide a representation that can be understood by assistive technologies, such as screen readers.

Accessibility Audit

Testing your digital product against accessibility standards is commonly referred to as an accessibility audit

  • Using AT
  • Contrast checkers
  • Manual testing
  • Automated tools
    • Chrome Lighthouse
    • Firefox Accessibility inspector
    • Axe

Accessibility Standards

There are many accessibility standards based on the industry, country laws, and policies. If no specific standard is required, the standard recommendation is to follow the latest version of the Web Content Accessibility Guidelines (WCAG), which is an international set of accessibility standards.

The WCAG guidelines have three levels of success criteria: A, AA, and AAA. The success criteria determine conformance to WCAG.

Color Contrast

Colors should have enough contrast to be accessible. Text should have sufficient contrast with the background, but for some backgrounds, such as red and green, changing the color of the text might not be sufficient to achieve enough contrast. In such cases, you can increase the size of the text or change the background.

Semantic HTML

Assistive technologies rely on structural elements to provide information about the page's overall layout. To achieve this, we can either use ARIA landmark roles or new HTML landmark elements. It is best to default to using only new HTML landmark elements, such as nav, header, main, section, footer.

Using landmarks enhances navigation and efficiency of the user experience. The user can directly jump to the main section or to the navigation.

Example of inaccessible content. ✖

<div>
    <div>...</div>
</div>
<div>
    <p>Explore the fascinating world of astronomy, delving into celestial bodies, galaxies, and the mysteries of the cosmos.</p>
</div>
<div>
    <p>© 2022 - Cosmos Explorers</p>
</div>

Example of accessible content. ✔

<header>
    <nav>...</nav>
</header>
<section aria-label="Discover the wonders of astronomy">
    <p>Explore the fascinating world of astronomy, delving into celestial bodies, galaxies, and the mysteries of the cosmos.</p>
</section>
<footer>
    <p>© 2022 - Cosmos Explorers</p>
</footer>

Headings

Headings are one of the ways users of assistive technology navigate through the web. If you are not using headings properly, there is no way users of assistive technology can identify important text from other text and navigate easily.

Some things to keep in mind while using headings are:

  • There should be only one h1 per page.
  • Heading numbers should be consecutive: 1, 2, 3, 4, 5, 6 don't skip the order.
  • Apply them for structure, not for style.
  • If the default style is bothering you, use CSS to scale down or up as needed.

Example of inaccessible content. ✖

<div>
    <h3>Coins</h3>
    <p>Coin collecting, also known as numismatics, is the study of coins, currency, and related items.</p>
</div>
<div>
    <h3>How do I start a coin collection?</h3>
    <h2>Equipment you will need</h2>
    <h4>...</h4>
</div>

Example of accessible content. ✔

<heading>
    <h1>Coins</h1>
</heading>
<main>
<section aria-label="Introduction to coin">
    <h2>What is coin collecting?</h2>
    <p>Coin collecting, also known as numismatics, is the study of coins, currency, and related items.</p>
</section>
<section aria-label="Start a coin collection">
    <h2>How do I start a coin collection?</h2>
    <h3>Equipment you will need</h3>
    <p>...</p>
</section>
</main>

List

It is important to use a list if there are similar consecutive items, rather than using a bunch of divs. When assistive technology encounters semantic lists, it can inform the user about the list name, its position (e.g., 'one out of five'), and the total number of items in it.

Example of inaccessible content. ✖

<div>
    <a href="index.html">Home</a>
    <a href="about.html">About</a>
    <a href="contact.html">Contact</a>
</div>

Example of accessible content. ✔

<ul>
    <li>
        <a href="index.html">Home</a>
    </li>
    <li>
        <a href="about.html">About</a>
    </li>
    <li>
        <a href="contact.html">Contact</a>
    </li>
</ul>

Alternative Text on Images

Alternative texts are used by screen readers when an image is encountered. It is best practice if these texts are descriptive, clear, and concise. There is no limit to the text length, but it is advised to be 150 characters or less to avoid reader fatigue.

It helps people with little or no vision and those who have disabled images for various reasons, such as internet issues. It can also enhance the user experience when images fail to load, users can still see the description of the image. also it helps search engine bots like Google bots to understand the content and display it in search results.

If an image is informational or functional, it is necessary to add alt text to it. If you are using SVG, in order to have proper semantics, add the role="img" attribute.

Example of inaccessible content. ✖

<img src="../duck.jpg" alt="an image of duck made out of rubber or plastic with yellow color floating on a bathtub full of water">

Example of accessible content. ✔

<img src="../duck.jpg" alt="Yellow rubber duck floating in a bathtub.">

Note: There is no need to prefix alt text with 'image of' or 'photo of'; the screen reader will identify the files for you. Additionally, it is nice to have proper punctuation. For example, it is good to add a period . at the end of alt text so that the screen reader will make a good pause.

Not all images need alt text, some images are just there to add aesthetics. For such decorative images, we don't have to add alt text. For example, a stylistic background image. There are different ways to handle this: you can set the role to presentation or none, or use the aria-hidden attribute, or you can use an empty alt attribute.

<img src="../duck.jpg" alt="">
<img src="../duck.jpg" role="presentation">
<img src="../duck.jpg" role="none">
<img src="../duck.jpg" aria-hidden="true">

When using links on the web, it is important to use the a tag and ensure that the link element is recognizable. It should not look the same as other text from a styling point of view. Other mistakes include not using descriptive or ambiguous text for links, such as 'click here', 'more', or 'continue'.

Example of inaccessible content. ✖

<a href="post.html">Take me there</a>

Example of accessible content. ✔

<a href="post.html">Visit my blog here</a>
<a href="post.html" aria-label="Visit myblog.com">Click here</a>

Labels

Nowadays, it is becoming common to see inputs without labels and just having placeholder text. Placeholder texts cannot replace labels, and they are not accessible.

Example of inaccessible content. ✖

<input placeholder="John Doe"/>

Example of accessible content. ✔

<label html-for="name">Name<label>
<input id="name" placeholder="John Doe"/>

Text Size

Some people might want to change the default text size setting in the browser to make all the text bigger and easier to read without needing to use the browser zoom tool. The problem is that the pixel unit is a fixed measurement, it does not scale with the changes in the browser's default font size. To avoid this, we can use a unit in CSS called rem. To change px to rem, you can divide the pixel value by 16.

Example of inaccessible content. ✖

<p style="font-size: 24px;">This is a sample paragraph with text size set in px units using inline CSS.</p>

Example of accessible content. ✔

<p style="font-size: 1.5rem;">This is a sample paragraph with text size set in rem units using inline CSS.</p>

ARIA Live Regions

ARIA live regions are parts of the web page marked to be dynamically updated when content changes in that region without page reload. It will be announced by screen readers without the need to navigate to the changed content. Some common use cases include notifications, the status of form submission, and filter and search results.

We can use aria-controls to connect the source element with the target element. We can also observe how the changes are announced.

  • aria-live="off" : Default for elements.
  • aria-live="polite" : The most common one, The screen reader will announce when there is a natural pause.
  • aria-live="assertive" : Should only be used for time-sensitive notifications. It will interrupt the screen reader; because of this, it should be used for notifications that require immediate attention."