Accessibility is the practice of making your website as usable by many users as possible. It helps people with disability and those who use mobile or slow internet connections.
Ways to make HTML Accessible
Web content can be made accessible just by making sure the correct HTML elements are used for the correct purpose. Some major ways to make HTML accessible are as follows:
- Semantic HTML
- Good Alternative texts
- Proper use of Headings
- HTML lang attribute
- Descriptive link text
We will learn about each of the ways in detail:
Semantic HTML
Semantic HTML means using correct HTML for the correct purpose. If you need a button on your web page use <button> tag instead of <div> tag. For example,
<button> tag
<button>Login</button>
Browser output
<div> tag
<div>Login</div>
<style>
div,
button {
border: 1px solid #767676;
display: inline;
padding: 5px;
background: #EFEFEF;
border-radius: 3px;
font-family: "Arial";
}
</style>
Browser output
As you can see, with some CSS we can make <div> also look like a <button>. Some people also do this but this is very bad for accessibility. A button has some inbuilt accessibility features which we will miss out on if we use the <div>. Some of them are:
- Clickable
- Focusable
- Screen readers read it as a button.
- It is keyboard accessible.
- And much more.
Hence, it is a good idea to use proper semantic HTML like <form> <article> <figure> <header> which clearly defines its content rather than using non-semantic tags like a <div> or a <span> which do not give any information about the content.
Good Alternative Texts
The alt attribute is the text description of an image. The value of the alt attribute should describe the image such that the content is meaningful even if the image fails to load. For example,
<img src="cat.jpg" alt="A white cat sleeping on a chair">
In this example, A white cat sleeping on a chair is read out loud by screenreaders which helps visually impaired people to understand the image displayed on this web page. It is also beneficial to people with slow internet.
Proper use of headings
Headings help to structure the document structure. Headings are defined with the <h1>, <h2>, <h3>, <h4>, <h5> and <h6> tags.
<h1>Online tutorial</h1>
Screen readers use headings for navigation purposes. Different types of headings specify the outline of the page. Headings help screen readers to properly convey the context to the users.
HTML lang attribute
The lang attribute in the <html> tag identifies the primary language of the web page to the browser, translation software, screen readers, etc. For example,
<html lang="en">
/* rest of the page content in english */
</html>
Here, lang = "en" specifies the page content is in English.
Descriptive link text
HTML link text should clearly explain what information the reader will get by clicking on it.
A good link should always have relevant text inside the anchor tag.
click here, visit, are bad examples of link text.
Good examples of descriptive link text are Visit HTML Link to know more about HTML link, Visit Programiz to learn more about programming, etc.
Web Accessibility Standards
Web Accessibility relies on several components that work together, some of which are mentioned below:
- Web Content - It refers to any part of the website including text, images, forms, and multimedia. This is the code we write in HTML, CSS, and JS.
- User Agents - It is software that people use to access web content.
- Authorizing tools - It is software or tool that people use to develop web content including web editors, document conversion tools, etc.
Note: Implementing accessibility to the website is even a part of the law in some countries.