HTML and Accessibility , How are they related ?

Raneen Medhat
Aug 17 · 5 min read

The meaning of the term Accessibility

Accessibility means : that everyone has the right to access something regardless of their conditions.

If we want to talk about accessibility we can not overlook the web accessibility.
Millions of people use the web everyday. In work , at home and on the road.
So it is important that the Web be accessible to everyone , to understand , navigate and interact with your website.

In this article we will not learn any thing new about HTML itself but we will talk about How HTML can help in accessibility , in other words How can write an accessible HTML code.

HTML and Accessibility

As we know and learn about HTML , it’s recommended to write semantic HTML.
You might wonder why this is so important to write semantic HTML code instead of regular elements like div tag ?

semantic and non semantic HTML

In the example above the button tag is more suitable than the div tag not only because the button tag by default have some styles ( however you can override them and make your own style ) , also you can style the div tag to make it look like the button style.
but the idea is the button tag is more descriptive and semantic HTML element and this is not only important for SEO (Search Engine Optimization) but also gives context to screen readers, which read the contents of a web page out loud.

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).

Button is more suitable in this case because :
— Buttons have more suitable styling by default.
— A screen reader identifies it as a button.
— Focus-able.
— Clickable.

Content structure

One of the best accessibility aids a screen reader user can have is a good content structure with headings, paragraphs, lists, etc.

bad and goof HTML structure

How screen reader deals with page structure ?

— The screen reader reads each header out as you progress through the content, notifying you what is a heading, what is a paragraph, etc.

— It stops after each element, letting you go at whatever pace is comfortable for you.

— You can jump to next/previous heading in many screen reader.

— Search engines use the headings to index the structure and content of your web pages.
— Users skim your pages by its headings. It is important to use headings to show the document structure and the relationships between different sections.
— <h1> headings should be used for main headings, followed by <h2> headings, then the less important <h3>, and so on.

Clear language

Language also can affect the web accessibility.
you should try to avoid using language and characters that don’t get read out clearly by the screen reader for example:

— Don’t use dashes if you can avoid it. Instead of writing 5–7, write 5 to 7.
— Expand abbreviations — instead of writing Jan, write January.
— Keep sentences as short as possible.
— Avoid complex words

Alt Attribute

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).
How can a screen reader deals with the img tag ?

Alt attribute

In the first example if you put the img without alt attribute the screen reader will read the src url ex: dinasour.png (which is bad experiences ).

In the second example the screen reader will read the full alt attribute ( witch is more descriptive and accessible ).

What if our image is not related to the site content and only for decoration or related to the design ?
Should you put alt attribute ?

In this case you can put empty alt attribute or better than that try to use the CSS with all your decorative images (put it as background image if that possible ).

If you have the same alt content more than one time you can use this way to define reusable alternative text .
Just add aria-labelledby attribute and give it the value of the p tag id so you can use this paragraph as an alternative text more than one time.
For example:

Descriptive Links

Try to be descriptive and explain to screen reader what information will get by clicking on that link .
For example :

Descriptive links


HTML can affect the web accessibility not only the SEO
This is some tips to make your HTML code more accessible :
— Write semantic HTML as much as you can.
— Make your code structure readable for both humans and screen readers.
— Make Your language clear and easy.
— Define alternative text for your site images.
— Make your links descriptive.

Raneen Medhat

Written by

Front End Developer

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade