A Guide to HTML Accessibility
By: Md Shahab Uddin
Tags: HTML, Web Design, Front End Development, Frontend, Web Development

Reaching more and more people is a priority of a webpage and that includes people with disabilities and people who use screen readers to browse the webpage. It’s our job and responsibility to provide them the same information we all receive.

Besides ensuring information, it’s crucial to use well structured, readable, maintainable code. To fill that void, HTML accessibility comes into view. It ensures us that all people get the same content and information irrespecitve of their physical condition, age, race, and location. Today, we will cover this topic in broad.

Semantic HTML

Semantic means Correct interpretation of the meaning of a word or sentence. In HTML semantic HTML men's using correct HTML to convey the right message about the document. It ensures that we used the correct HTML according to its purpose.

But What is the correct HTML? Let’s see an example and you will be crystal clear.

Look at the above code. There are two HTML elements h1 and p tag. In the h1 element, we didn’t use any CSS. But in the “p” element, we used CSS. With some styling on the p element, both give us the same result. But the question arises, which element to use?

You should use elements according to the intended purpose

h1 ↠↠↠ Heading tag was made to describe the most important text in the document whereas h1 is the most important text and h6 is the least important text.

p ↠↠↠ It is used to enclose the text in a paragraph

So, it’s very much important to use the correct HTML element in our webpage.

Another example: Suppose you need to write an address. You can write the address inside the “p” tag. But it would be better to write the address inside the“ address ”tag. Because the “address” tag was created to write address specifically. This is the semantic HTML.

What Semantic HTML do?

It tells the browser What this document is about, What kind of content we have, What purpose that content serves, etc. It makes our content both human and machine-readable It gives more clarity to communicate with search engines.

Advantage of Semantic HTML

It enhances accessibility(Good for screen readers and physically disabled people) so that your website can be accessible to all people. It enhances searchability for browsers, web crawlers, and screen reading technologies. As a result, your webpage gets a higher SEO ranking. It’s better to write semantic markup because it gives you some additional functionality without doing anything. Semantic HTML makes your file size lighter and also easier to make responsive It’s good for SEO ranking

What are some semantic tags?

There are many such as blockquote,p,h1….h6,address,code,kbd etc.

What are some non-semantic tags?

Elements that have no meaning are called non-semantic elements. Such has div. You can put anything inside div such as text, image, address, table, list, etc. The browser can’t understand what kind of content is inside the div tag.

Some common mistakes we do

p tag: Don’t use this to give spacing between two elements. Use margin, padding, or “br” tag to add space.

Blockquote tag: Some people use this for text indentation. This is for quote only. Indent with CSS margin instead.

h1,h2,h3 : Don’t use this tag to get larger font size. If you need a larger font, use font size and font-weight property instead.

There are some other tags people use incorrectly. But we have to be aware of this

Use ALT attribute

We must use the alt attribute in the“ img” tag. ALT means alternative text. If for any reason user can’t view the image, then the alt attribute provides the alternative text. It helps both normal people and people who use screen readers.

Be more descriptive in alt attribute so that visually impaired people can understand what the image is all about. You may use the title attribute with alt to give more information about the image. But it’s not always necessary.

For example:

<img src="picture.jpg" alt="this is a picture of a cat">

There is another method you can use for better accessibility

<img src="cat.jpg" aria-labelledby="dino-label">



<p id="dino-label">This is an example of cat</p>

It’s an alternative to the “alt” attribute. This helps when you want to use the same text as a label for multiple images which isn’t possible with “alt”

Declare Language in HTML tag

<html lang="en">

Use title attribute

The title attribute shows extra information about an element. Information is shown as a tooltip.

Use clear Language

It's important to write in a clear language because it helps people with disabilities and for decorative beauty purpose.

Don’t write complex an unnecessary terms Avoid using dash(-) Don’t write abbreviations or short forms. Write the full form of abbreviation or expand the abbreviation and short form. Meaningful text Label. You must write clear and distinguishable text labels in buttons and anchor tags. Instead of writing “click here”, you should write “click here to read more info”. Write crystal clear form labels Instead of making page layout with table, use “header, footer, main, aside, article, section” tags to make page layout. Table layout is obsolete in 2020. Use “tabindex” attribute to navigate between elements within a page via the TAB button on the keyboard.

Use empty alt attributes

Sometimes an image is used only for decorative purposes. In that case, we usually don’t use the alt attribute. But we should add an empty alt attribute. The reason behind this is that“ if we don’t use the alt attribute screen reader may read the full URL of the image which is sometimes irritating”.

<img src="picture.jpg" alt="" >

Another alternative is that we use the “aria-role ”attribute

<img src="picture.jpg" aria-role="presentation" >

Links

There should be good contrast between link background and text color The link should be different from the text which is not links Don’t use the “onClick” event in an anchor tag like this

<a onClick="myFunction()" >Click here</a>

IF you really want to use the onclick event, please use the button tag instead. Because using an “onclick event” inside an “anchor tag” causes unexpected behavior. Anchor tag should only be used in navigation.

References