Web accessibility ensures that people with disabilities can use websites effectively. Here are some basic tips to make your website accessible,
Semantic
Semantic elements provide information about the content between opening and closing tags so that the screen reader will able to read them better. It makes code easier to read. Some of the semantic elements are,
- header
- section
- nav
- main
- article
- figure
- aside
Using these semantic elements a html structure can be,
<header>
<nav></nav>
</header>
<main>
<article>
<figure></figure>
</article>
</main>
Headings
Headings give users an idea of page’s organization and structure. Heading elements are - h1, h2, h3, h4, h5 & h6.
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
Native HTML Elements
Use native html elements, you will get the default semantic information. For example,
<button>Add to cart</button>
----------------------------
name: Add to cart
role: button
Invalid user entry: false
Focusable: true
In case if you don't want to use native html elements, you have to specify it using role, aria attribute.
Aria
Aria attribute is generally used to add semantics to an element so that the screen reader read the semantic information. It doesn't change element's behavior. Example can be,
- aria-label: aria-label is used to add an additional name for an element so that the screen reader can tell it.
<div aria-label="Login button" class="btn">Login</div>
aria-labelledby, aria-expanded, aria-describedby, aria-checked are common examples of aria. You can find more in their official docs, w3.org
Label tag
Use html label tag, this will help the user to understand the purpose of a control(ex, input).
<label>
Name:
<input type="text" />
</label>
alternatively you can use for attribute,
<label for="name">Name</label>
<input type="text" id="name" />
Alt attribute
Use alt attribute inside img tag, the screen reader will read the text from the inside of alt attribute.
<img alt="Image of a cat" src="./cat.jpg" />
Tabindex
The tabindex attribute allows elements to be focused when using the keyboard. You can use this in three way, tabindex: 0, tabindex: greater than 0 & tabindex: -1.
tabindex: 0, means the element is focusable in sequential keyboard navigation.
tabindex: greater than 0, defines manual tab order. example,
<div tabindex="2">This is number 1 text</div>
<div tabindex="1">This is number 2 text</div>
<div tabindex="3">This is number 3 text</div>
You will see tabindex="1" focused first, tabindex="2" focused second & tabindex="3" focused last.
tabindex: -1, this will remove the element's focusability in tab order.
Lang attribute
Use lang attribute, when you are using blocks of text in different languages if you add lang attribute then the screen reader will know how to pronounce them.
<ul>
<li lang="de">Deutsch</li>
<li lang="en">English</li>
<li lang="jp">Japan</li>
</ul>
Skip Link
Skip link allows users to skip contents which may not necessary for them.
<body>
<header>
<nav>
<a class='skip-link' href='#main-content'>
Skip to Content
</a>
</nav>
</header>
<main id='main-content'>
Lorem ipsum...
</main>
</body>
.skip-link {
position: absolute;
left: -999px;
width: 1px;
height: 1px;
top: auto;
}
.skip-link:focus {
color: black;
display: inline-block;
height: auto;
width: auto;
position: static;
margin: auto;
}
Links
- Avoid Read More, Read, Click Here, Links to, etc inside link(a tag).
Why? These kinds of links can be confusing when screen reader reads them.
- Avoid longer text inside link.
Color
Use of color should not interfere with the ability to view content on a page for a user. For that you can use online contrast checker like webaim.org
Avoid using outline: none
Avoid using outline: none, if you have to use it, it is better to provide an alternative styling.
Top comments (0)