161 reads

How to Use HTML to Improve Accessibility for Low-Vision Users

by Akintola RahmatFebruary 20th, 2020

Too Long; Didn't Read

The power of the Web is in its universality. Accessibility is an essential aspect. We need to provide the user with a good way to navigate and interact with the site. W3C Director and inventor of the World Wide Web: Accessibility guidelines will help make sites that perform well on mobile, tablet and desktop devices, while also allowing you to deliver content to users at all levels of visual and physical ability. Here are a few tips on improving the accessibility of a website using HTML.

Company Mentioned

featured image - How to Use HTML to Improve Accessibility for Low-Vision Users

The power of the Web is in its universality.
Access by everyone regardless of disability is an essential aspect.
Tim Berners-Lee, W3C Director and inventor of the World Wide Web

While working on my HTML and CSS curriculum project with my partner at Microverse, I learned the importance of making a website accessible to visitors and screen readers. We need to provide the user with a good way to navigate and interact with the site.

Accessibility guidelines will help make sites that perform well on mobile, tablet and desktop devices, while also allowing you to deliver content to users at all levels of visual and physical ability.

Here are a few tips on improving the accessibility of a website using HTML

1. Declare the language of your document

Declaring the correct language on an HTML page has many benefits. It is good for search engine optimization (SEO) and it also helps third-party translation tools and browsers to identify the right language and dictionary.

<html lang ="en">
.....
</html>

2. Semantic HTML

These are elements that have meaning. Proper HTML elements should be used for their correct purpose as much as possible. It helps give context to screen readers For example, use the button element instead of a div if you need a button.

<!-- Don't do this -->
<div> Click Me! </div>

<!-- Do this -->
<button> Click Me! </button>

3. Using h1- h6 headings are important

The document structure is everything when presenting content through assistive technology. Proper headings make the organization of the content presentable in a meaningful way and show the relationships between different sections.

<h1> Heading 1 </h1>
<h2> Heading 2</h1>
<h3> Heading 3</h1>
<h4> Heading 4</h1>
<h5> Heading 5</h1>
<h6> Heading 6</h1>

4. Hide content with hidden attribute

You can hide content visually and from screen readers by using the

hidden

attribute. It can be used on all elements.
Browser compatibility for the hidden attribute is good except for IE 10 and lower.

<p hidden> I wont display on browser </p>

5. Text Alternatives

Using

alt

attribute on the <img> element provides an alternate text for an image if the user for some reason cannot view it either because of slow connection, an error in the src attribute or if the user uses a screen reader.

If the image is purely for visual decoration or has no content value, consider embedding it with CSS as a background image. If you have/want to add it in HTML, don’t remove the alt attribute, but leave it empty.

<img src = "cat.jpg" alt = "orange cat lying on it's back" >
<img src = "icon.jpg" alt = "" >

6. Clear Language

Use clear language that is easy to understand, and try to avoid characters that cannot be read clearly by a screen reader. For example:

Keep sentences as short as possible.
Avoid dashes. Instead of writing 1–3, write 1 to 3
Avoid abbreviations. Instead of writing Feb, write February.
Avoid slang words.

I hope these tips will help you write more accessible HTML. The links below were helpful when writing this article, you can check them for more information on accessibility tips.

Note: Image from consultr.net

Previously published at https://medium.com/@akintolarahmah/how-to-use-html-to-improve-accessibility-for-low-vision-users-b424c54ba87c