HTML Web Accessibility Tips

Web accessibility refers to the inclusive practice of removing barriers that prevent interaction with, or access to websites, by people with disabilities. When sites are correctly designed, developed and edited, all users have equal access to information and functionality.

Semantic HTML

Use content-appropriate semantic html tags. For example;

Use button tag for button functionality;

//don't
<div>Click me!</div>
//do            
<button>Click me</button>

Use nav element for menu instead of div

//don't
<div class="menu">
<ul>
...
</ul>
</div>
//do
<nav class="menu">
<ul>
...
</ul>
</nav>

Use good content structure of headings, paragraphs, lists, etc.

<h1>My heading</h1>

<p>This is the first section of my document.</p>

<p>I'll add another paragraph here too.</p>

<ol>
<li>Here is</li>
<li>a list for</li>
<li>you to read</li>
</ol>

<h2>My subheading</h2>

<p>This is the first subsection of my document. I'd love people to be able to find this content!</p>

<h2>My 2nd subheading</h2>

<p>This is the second subsection of my content. I think is more interesting than the last one.</p>

A heading is for heading not for text size or its bold. And also you should use heading tags in a certain order. (h1>h2>h3>…)

Clear/Good Language

Don’t use dashed.

//don't
<button>print 1-5 pages</button>
//do
<button>print pages from 1 to 5</button>

Don’t use abbreviations.

//don't
<p>Jan</p>
//do
<p>January</p>

Expand acronyms, at least once or twice. Instead of writing HTML in the first instance, write Hypertext Markup Language

Declare the Page Language

Declare the language in “html” markup like following.

<html lang="en">

</html>

You can use the lang attribute, if you switch the language in the document.

<p>These words <b lang="tr">bu alan Türkçe kelimeler içeriyor</b> are wrote in Turkish</p>

Meaningful Links

//don't
<ul>
<li><a href="#">Click here</a></li>
<li><a href="#">Read more..</a></li>
<li>Buy tickets to Mars <a href="#">here</a></li>
</ul>
//do
<ul>
<li><a href="#">Find out more about the HTML language</a></li>
<li>Read more about <a href="#">how to eat healthy</a></li>
<li><a href="#">Buy tickets to Mars here</a></li>
</ul>

And also it is the good practice to write meaningful text for title attribute.

<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML section">Visit our HTML Tutorial</a>

Alternative Text for Media Tags

Alternative text are very important if media is not visible for users ( image/video content cannot be seen by visually-impaired people, and audio content cannot be heard by hearing-impaired people).

<img src="test_image.jpg" alt="Animals in Asia">

ARIA Attributes

“Accessible Rich Internet Applications”. It is a set of attributes to help enhance the semantics of a web site or web application to help assistive technologies, such as screen readers for the blind, make sense of certain things that are not native to HTML.

For example, you can use aria-role and aria-label for navigation menu.

<nav aria-label="Mythical University">
<ul id="menubar1"
role="menubar"
aria-label="Mythical University">
<li>
<a role="menuitem"
aria-haspopup="true"
aria-expanded="false"
href="#"
tabindex="0">
About
</a>
<ul role="menu" aria-label="About">
<li role="none">
<a role="menuitem"
href="mb-about.html#overview"
tabindex="-1">
Overview
</a>
</li>
...

Using aria-label attribute in an “icon only buttons” is the one of the good practice for accessibility. For example;

<button><i class="flaticon-search-1" aria-label="@L("Search")"></i></button>

Labeling Input Elements

Use “for” attribute that matches the “id” of the input element. For example;

<label for="inputId"></label>
<input type="text" id="inputId" />