When you hear the phrase “web accessibility,” you might first think about enhancements that are external to the website itself, such as closed captions and screen readers. But through HTML, you can build important accessibility features into the foundation of your website.
By describing your pages’ structure and layout, HTML can be considered the foundational language of Web development. The current version of the HTML standard, HTML5, also includes new elements and attributes that can be used for accessibility. Below, we’ll go over some of the most important tips and tricks for accessibility using HTML.
The lang attribute for the opening <html> tag describes what natural language a web page is written in. For example, this code snippet indicates that a page is written in English:
<html lang="en">
…
</html>
Explicitly identifying a page’s language can help applications such as screen readers, translation tools, and search engines better serve their users.
In addition to the page’s primary language, you should also identify changes of language within the page in order to help screen readers pronounce the text better:
<p>The terms of the contract do not cover <i lang=”fr”>force majeure</i> events.</p>
To help screen readers parse the page, you should use all appropriate markup tags for sections such as headers, tables, and lists.
HTML5 also includes new semantic elements that define how the different sections and parts of a page should be interpreted. These include the <header>, <footer>, <figure>, and <figcaption> tags, which all have fairly self-explanatory names.
The <nav> element is used to denote a page section that provides navigation links, while the <aside> element is used for sidebars and other less pertinent information.
The example below uses three HTML5 semantic elements, <article>, <header>, and <aside>:
<article>
<header>
<h1>Winter Storm Skylar Will Bring Heavy Snow to Northeast</h1>
<p>March 11, 2017</p>
</header>
<h2>Effects of the Storm</h2>
<ul>
<li>Rain and snow mix between eastern Kentucky and western Virginia</li>
<li>Moderate snow and strong winds in the mid-Atlantic region</li>
</ul>
<aside>
Winter Storm Skylar is the 19th named winter storm for the 2017-18 season.
</aside>
</article>
In addition to the HTML5 semantic elements, the WAI-ARIA specification defines additional HTML attributes to improve how your page is interpreted by browsers and screen readers. For example, the role attribute defines the function of a particular element on the page, such as “navigation,” “banner,” or “search.”
Including alternative text for the images on your website is one of the simplest yet most powerful techniques for accessibility. Of course, alt text is important not just for accessibility purposes, but also for indexing by search engines and for instances when the images fail to load in the user’s browser.
The example below shows how you can use alt text to replace or supplement an image:
<img src="lion.jpg" alt="A male lion stands atop a rocky crag." />
Screen readers can vocalize this alternative text so that users with visual impairments can still understand the content and function of the image within the page.
In Conclusion
If properly harnessed, HTML can be one of the most powerful accessibility tools for your website, helping to guide users and their assistive devices through your site’s content and structure. Our free scanning tool can be used to test the impact of your HTML on the accessibility of your website. For more tips on website accessibility, visit the Bureau of Internet Accessibility’s blog.