Web accessibility: Semantics

Introduction

Accessibility matters even on the web!

The goal of web accessibility is to ensure that everyone has equal access to information, services, and a good user experience irrespective of their abilities or disabilities. Web accessibility refers to measures taken to ensure that all individuals inclusive of those with disabilities can access and use websites and digital content with ease. To achieve this, websites should be created in a way that is perceivable, operable, understandable, and robust, providing access for everyone. This approach fosters inclusivity and equal opportunities for all users.

Semantics

The word 'semantic' means the study of the meaning of language 😵. It helps to ensure that communication is clear and accurate by providing context and meaning to language. In the same vein, semantic HTML is the use of HTML markup in a way that accurately conveys the meaning and purpose of the content on a web page. Semantic HTML is a backbone for web accessibility. It is how accessibility is incorporated into websites.

Why do we need Semantic web content?

• It adds meaning to your HTML content, which lets web browsers, search engines, screen readers, RSS readers, and ultimately users understand it and easily navigate and interact.

• It improves SEO. Semantic HTML makes it easier for search engines to understand the flow and content of a page. This makes your website easier to discover.

• Code written in semantic HTML makes it easier for other developers to maintain and update.

Using Semantic HTML

There are 2 major ways to give HTML content more meaning.

1. ### The proper use of HTML tags

The proper use of HTML tags is crucial for providing structure and meaning to web content, making it easily understandable to both humans and machines. It is essential to use HTML tags in a semantically correct manner, where they accurately reflect the content and purpose of the element they are applied to.

For instance, it is semantically correct to use the <h1> tag to mark up the main heading of a web page. In contrast, using a <div> tag with a large font size is not semantically correct and should be avoided.

By using HTML tags correctly, web content becomes more accessible to users with disabilities. An example is using the <img> tag to include alternative text descriptions for images helps users with visual impairments understand the content of the image. Similarly, using the <label> tag with form elements such as text inputs and checkboxes makes it easier for screen reader users to understand the purpose of the form element and how to interact with it.

In addition to the <h1>, <img>, and <label> tags, several other semantic HTML tags are commonly used to provide structure and meaning to web content.

The <nav> tag is used to mark up the navigation section of a web page, while the <article> tag is used to define a self-contained piece of content, such as a blog post or news article. The <header> and <footer> tags are used to define the header and footer sections of a web page, respectively. The <main> tag is used to define the main content of a web page, while the <aside> tag is used to define content that is tangentially related to the main content, such as a sidebar or a call-to-action section.

Using these tags correctly helps to make web content more accessible and understandable for all users, including those with disabilities. A comprehensive list of semantic HTML tags and their uses can be found on the MDN website, which provides a reference for web developers to follow when creating accessible and semantically correct web content.

1. ### ARIA attributes

ARIA stands for Accessible Rich Internet Applications. These attributes are a set of HTML attributes used to define accessibility features for web content. Assistive technologies such as screen readers use the additional information provided by ARIA attributes. ARIA attributes can be used along with semantic HTML tags or whenever semantic HTML cannot be used. ARIA attributes can be used to provide additional information about the elements on a web page, specifically in four ways:

1. • Roles : ARIA roles define the type of element and its purpose. For example, an element can have a role="button" to indicate that it is a clickable button.

This webpage provides a list of all ARIA roles, properties, states and labels, which have been defined by W3C (the organization that develops web standards).

Example showing the use of ARIA attributes

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>About Us</title>
</head>
<body>

  <div>
    <div role="banner">
      <h1>About Us</h1>
      <nav role="navigation">
        <ul role="menu">
          <li role="menuitem"><a href="/" role="link">Home</a></li>
          <li role="menuitem" aria-current="page"><a href="/about" role="link">About</a></li>
          <li role="menuitem"><a href="/contact" role="link">Contact Us</a></li>
        </ul>
      </nav>
    </div>
  </div>

  <main>
    <div>
      <div role="region">
        <h2>Our Mission</h2>
        <p role="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam auctor nisl eget augue laoreet vestibulum. Sed sit amet orci bibendum, tincidunt ex ac, euismod velit. </p>
      </div>
    </div>
  </main>

</body>
</html>

Testing web semantics using accessibility tools and resources

There are many tools and resources which range from simple web browser extensions to accessibility testing suites that help developers create semantic and accessible web content for all users.

Tools

1. HTML validators:

2. Screen reader emulators:

3. Accessibility testing tools:

Resources

In addition to tools, there are also many online resources available.

• The MDN doc mentioned above.

• The Web Content Accessibility Guidelines (WCAG) by the World Wide Web Consortium (W3C).

• The ARIA Authoring Practices Guide, which guides on how to use ARIA attributes to improve the accessibility of web content.

• The HTML Living Standard

Conclusion

Web accessibility is a critical aspect of development that ensures everyone can access and use digital content. Semantic HTML is one of the fundamental building blocks of web accessibility, as it provides structure and meaning to web content. Using HTML tags in a semantically correct way is important because it helps both humans and machines understand the purpose and function of different elements on a web page. In addition to using semantic HTML tags, developers can utilize ARIA attributes to further enhance web accessibility. These attributes can define roles, states, properties, and labels for elements on a web page, making it easier for users with disabilities to interact with web content.

To create more accessible web content, developers and designers can use a variety of tools and resources available online. By prioritizing web accessibility in their development or design practices, they can help ensure that everyone has equal access to digital content.