Accessibility on the web

Explore the basics of accessibility in HTML

It is important that we consider accessibility when designing HTML.

Having accessible HTML means that people with disabilities can use the Web. There are completely blind or visually impaired users, hearing impaired people, and many other different disabilities.

Unfortunately, this theme does not emphasize the importance it needs, and it does not seem to be as cool as other themes.

If one can'tLookYour page, but still want to use its content? First, how do they do this? They can’t use a mouse, they use something calledScreen reader. You don’t have to imagine. You can try it now: Google offers for freeChromeVox Chrome extension. Accessibility must also pay attention to allowing tools to easily select elements or browse pages.

Web pages and Web applications do not always regard accessibility as one of their primary goals. Perhaps the released version 1 is inaccessible, but after the fact, the web pages can be made accessible. The sooner the better, but it is never too late.

This is very important. In our country, it must be possible to visit websites established by the government or other public organizations.

What does it mean to make HTML accessible? Let me explain the main things you need to consider.

Note: There are several other items in the CSS theme that need attention, such as color, contrast, and fonts. orHow to make SVG images accessible. I will not talk about them here.

Use semantic HTML

Semantic HTML is very important, and this is one of the main things you need to pay attention to. Let me illustrate some common situations.

It is important to use the correct structure for the title tag. the most important ish1, Use higher numbers for less important numbers, but all headings at the same level should have the same meaning (think like a tree structure)

h1
	h2
		h3
	h2
	h2
		h3
			h4

usestrongwitheminsteadbwithi. Visually, they look the same, but the first two have more meaning.bwithiIt is more visual element.

The list is important. Screen readers can detect the list and provide an overview, and then let the user choose whether to enter the list.

A table should have onecaptionA label describing its content:

<table>
  <caption>Dogs age</caption>
  <tr>
    <th>Dog</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Roger</td>
    <td>7</td>
  </tr>
</table>

usealtImage attributes

All pictures must have onealtA label describing the content of the image. This is not only a good habit, but also required by the HTML standard. Unverified HTML will not be accepted.

<img src="dog.png" alt="picture of my dog">

If this motivates you to add it, then it is also good for search engines.

useroleAttributes

ThisroleAttributes allow you to assign specific roles to various elements on the page.

You can assign many different roles: complementary, list, list item, main, navigation, area, tab, alert, application, article, banner, button, cell, checkbox, contentinfo, dialog, document, feed , Figure, table, grid, grid cell, title, img, list box, row, row group, search, switch, table, tab, text box, timer.

A lot, I give you a complete reference for everyoneThe MDN link. However, you don’t need to assign a role to every element on the page. In most cases, screen readers can infer from HTML tags. For example, you don’t need to add role tags to semantic tags, such asnav,button,form.

Let's donavLabel example. You can use it to define page navigation as follows:

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/blog">Blog</a></li>
  </ul>
</nav>

What if you areForcedusedivLabel insteadnav,you can use itnavigationCharacter:

<div role="navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/blog">Blog</a></li>
  </ul>
</div>

So here is a practical example:roleWhen the label has not yet conveyed the meaning, it is used to assign a meaningful value.

usetabindexAttributes

ThistabindexAttributes allow you to change the order in which "optional" elements are selected by pressing the Tab key. By default, you can "select" links and form elements only by navigating with the Tab key (and you don’t need to settabindexIn them).

Addingtabindex="0"Make the element optional:

<div tabindex="0">
...
</div>

usetabindex="-1"Instead, remove an element from this tab-based navigation, which can be very useful.

useariaAttributes

ARIA is an acronym that stands for Accessible Rich Internet Applications and defines the semantics that can be applied to elements.

aria-label

This attribute is used to add a string describing the element.

example:

<p aria-label="The description of the product">...</p>

I use this attribute on the sidebar of the blog, where I have an input box for searching without an explicit label because it has a placeholder attribute.

aria-labelledby

This attribute sets up an association between the current element and the element that marks it.

If you know howinputElements can be linked tolabelElement, which is similar.

We pass the product ID describing the current element.

example:

<h3 id="description">The description of the product</h3>

<p aria-labelledby=“description”> … </p>

aria-describedby

This attribute allows us to associate one element with another element that is used as a description.

example:

<button aria-describedby="payNowDescription" >Pay now</button>

<div id=“payNowDescription”>Clicking the button will send you to our Stripe form!</div>

Use Hidden Aria to hide content

I like the minimalist design in the website. For example, my blog is mainly content, and there are some links in the sidebar. However, some of the content in the sidebar is just a visual element, and cannot add up to the experience of a person who cannot see the page. Just like my logo image or dark/dark theme selector.

Add toaria-hidden="true"The attribute will tell the screen reader to ignore the element.

Where to learn more

This is just an introduction to the subject. To learn more, I recommend the following resources:

Download mine for freeHTML manual


More HTML tutorials: