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.
-
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.
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:
-
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>
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.
HTML validators:
HTML validators check the syntax and validity of HTML code and report any errors or warnings. They can help identify and fix issues that may affect the accessibility of web content, such as missing or incorrect attributes, nested elements, or deprecated elements.
Online HTML validation tools: An example is The W3C Markup Validation Service, this validator checks the markup validity of web documents in HTML, XHTML, etc. It supports HTML5, SVG 1.1, etc. It can validate by URI, file upload, or direct input.
HTML Validation IDE settings: Some Integrated Development Environments (IDEs), such as RJTextEd, have built-in HTML validators that can be used to validate HTML code.
HTML validation extensions: In cases whereby the IDE does not have a built-in HTML validator, extensions like HTMLHint which is available for VSCode could be installed.
Screen reader emulators:
By using a screen reader emulator, developers can test their web content and ensure that it is properly structured and labelled with the appropriate HTML tags. A screen reader emulator can help developers ensure that their web content is compatible with popular screen readers like JAWS, ChromeVox, NVDA, and VoiceOver. Some examples are:
WebAnywhere: This is a web-based screen reader that works from any browser without installation. It can read aloud web pages and provide keyboard navigation. It is free and open source.
Silktide Disability Toolbar: This is a Chrome extension that allows you to experience your website with a range of simulated disabilities, including blindness and partial sightedness. It also has a screen reader simulator that can read aloud text and navigate with keyboard or mouse. It is free to use.
Accessibility testing tools:
The WAVE Web Accessibility Evaluation Tool, which is a free web browser extension can help identify accessibility issues on a web page.
Lighthouse, which can be used in Chrome DevTools, from the command line, or as a Node module. It generates a report on how well the web page did in terms of performance, accessibility, and more and then provides suggestions for improvement.
Resources
In addition to tools, there are also many online resources available.
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.
