Making Your HTML Accessible

Making Your HTML Accessible

You might be extremely proficient with HTML but are you following the right practices? Following the key points mentioned in this blog can help you make your code compatible with screen readers which work on assistive technology and render the content as speech or braille output.

Semantic Tags

The inclusion of semantic tags in your code can help visitors who depend on assistive technology enjoy your page. Not only this, the right semantics make your content easily readable and there’s a higher probability of search engines indexing your pages.

With proper tags like <header>, <nav>, <section>and <footer> you make your code more legible.

Image Alt Text

The alternate text for your image which you might ignore including very often can help the user understand the flow of your web page. Your alt name should be self-explanatory and descriptive.

Accessible Rich Internet Applications

ARIA is a set of attributes you can include in your HTML. These attributes can help the user navigate across the page easily.

This extra information to some specific elements on the page can be highly useful.

Language

Specifying the language in which your page is written can help translate the page easily when it’s being read by a user in a different country. The lang attribute can be used for this purpose. For instance, a web page containing content written in English can be declared as <html lang = "en">

As a good SEO practice, permalinks should be concise and descriptive. It’s important to use balanced links for better accessibility too.

Hence, the links you mention on your website should not be too long or short. The links are read aloud and missing any word can confuse the user.

Following these simple practices can help users all over the world. Code is for everyone and should be made accessible to everyone irrespective of all the hurdles!

To check my work, you can head to my portfolio or drop a hi 👋 at Twitter.