HTML Writing with Accessibility in Mind

Always write HTML code with accessibility in mind!

Provide the user a good way to navigate and interact with your site. Make your HTML code as semantic as possible.

Accessible design is that which accommodates everyone, which special attention to those with disabilities and limitations. We see accessibility baked into the world around us, from closed captioning to curb cuts.

When it comes to accessibility on the web, however, we have a lot more work to do. According to a recent survey of screen reader users, 60% of respondents believed that overall web accessibility had either remained the same or had worsened since the previous year.

The good news is that, with a bit of extra care taken on the back-end, any website can be made accessible to users of assistive technologies like screen readers. By investing in web accessibility, not only do you ensure a positive user experience for everyone — you also show your visitors that you care about equal access to your content. And it all starts with taking a look at your site’s underlying HTML.

In this guide, you’ll learn the basics of how to build a web page that works with assistive technologies — we’ll review six aspects of HTML that make this possible. For those unfamiliar with web development, we recommend first reviewing our introduction to HTML, CSS, and JavaScript, as well as our full guide to HTML, before continuing.

HTML: A good basis for accessibility

A great deal of web content can be made accessible just by making sure the correct Hypertext Markup Language elements are used for the correct purpose at all times. This article looks in detail at how HTML can be used to ensure maximum accessibility.

HTML and accessibility

As you learn more about HTML — read more resources, look at more examples, etc. — you’ll keep seeing a common theme: the importance of using semantic HTML (sometimes called POSH, or Plain Old Semantic HTML). This means using the correct HTML elements for their intended purpose as much as possible.

You might wonder why this is so important. After all, you can use a combination of CSS and JavaScript to make just about any HTML element behave in whatever way you want. For example, a control button to play a video on your site could be marked up like this:

<div>Play video</div>

But as you’ll see in greater detail later on, it makes sense to use the correct element for the job:

<button>Play video</button>

Not only do HTML <button>s have some suitable styling applied by default (which you will probably want to override), they also have built-in keyboard accessibility — users can navigate between buttons using the Tab key and activate their selection using Return or Enter.

Semantic HTML doesn’t take any longer to write than non-semantic (bad) markup if you do it consistently from the start of your project. Even better, semantic markup has other benefits beyond accessibility:

1. Easier to develop with — as mentioned above, you get some functionality for free, plus it is arguably easier to understand.
2. Better on mobile — semantic HTML is arguably lighter in file size than non-semantic spaghetti code, and easier to make responsive.
3. Good for SEO — search engines give more importance to keywords inside headings, links, etc. than keywords included in non-semantic <div>s, etc., so your documents will be more findable by customers.

Let’s get on and look at accessible HTML in more detail.

Semantic HTML

Semantic HTML means using correct HTML elements for their correct purpose as much as possible. Semantic elements are elements with a meaning; if you need a button, use the <button> element (and not a <div> element).

HTML — as well as its companion style language, CSS — is flexible. If you want to build a certain type of page, there are probably multiple ways you could go about writing it with HTML and styling it with CSS. However, not all HTML elements are made equal when it comes to accessibility.

When writing web pages, the single best way to make them accessible is to use semantic HTML. Semantic HTML is HTML code that says what it does — in other words, the tag itself conveys the purpose of the element. Semantically rich elements include <button>, <form>, <header>, <footer>, <nav>, and the headings <h1>, <h2>, etc.

<button>Report an Error</button>

<div>Report an Error</div>

Semantic HTML gives context to screen readers, which read the contents of a page out loud.

With the button example in mind: 

1. buttons have more suitable styling by default
2. a screen reader identifies it as a button
3. focusable
4. clickable

A button is also accessible for people relying on keyboard-only navigation; it can be clickable with both mouse and keys, and it can be tabbed between (using the tab key on the keyboard).

Examples of non-semantic elements: <div> and <span> – Tells nothing about its content.

Examples of semantic elements: <form>, <table>, and <article> – Clearly defines its content.

Headings Are Important

Headings are defined with the <h1> to <h6> tags:

Example

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Search engines use headings to index the structure and content of your web pages.

Users skim your pages by their headings. It is important to use headings to show the document structure and the relationships between different sections.

Screen readers also use headings as a navigational tool. The different types of heading specify the outline of the page. <h1>headings should be used for main headings, followed by <h2> headings, then the less important <h3>, and so on.

Note: Use HTML headings for headings only. Don’t use headings to make text BIG or bold.

Alternative Text

The alt attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

The value of the alt attribute should describe the image:

Example

<img src="img_chania.jpg" alt="A narrow city street with flowers in Chania">

If a browser cannot find an image, it will display the value of the alt attribute:

Example

<img src="wrongname.gif" alt="A narrow city street with flowers in Chania">

Declare the Language

You should always include the lang attribute inside the <html> tag, to declare the language of the Web page. This is meant to assist search engines and browsers.

The following example specifies English as the language:

<!DOCTYPE html>
<html lang="en">
<body>

...

</body>
</html>

Use Clear Language

Always use a clear language, that is easy to understand. Also try to avoid characters that cannot be read clearly by a screen reader. For example:

1. Keep sentences as short as possible
2. Avoid dashes. Instead of writing 1-3, write 1 to 3
3. Avoid abbreviations. Instead of writing Feb, write February
4. Avoid slang words

Create Good Link Text

A link text should explain clearly what information the reader will get by clicking on that link.

Examples of good and bad links:

Summary

You should now be well-versed in writing accessible HTML for most occasions. Our WAI-ARIA basics article will help to fill gaps in this knowledge, but this article has taken care of the basics. Next up we’ll explore CSS and JavaScript, and how accessibility is affected by their good or bad use.