List of simple accessibility practices to know and other common mistakes to avoid while writing your code
Start tag
<!DOCTYPE html>Always add the "!DOCTYPE"
HTML Language
<html lang="en">Title
<head>
<title>Some title</title>
</head>Semantic tags
The direct children of the body must be wrapped in semantic tags to indicate users about the various purposes of different parts of a webpage.
For example,
<body>
<header>
...header of the webpage...
</header>
<main>
...main content of the webpage...
</main>
<footer>
...footer of the webpage...
</footer>
</body>Read more here
Heading
- A first-level heading, (
<h1>), indicates what the webpage is about and it is a must that every page has one (and only one). - If an image is being used as the
h1, then thealtattribute of theimgmust not be empty. - Headings must start with
<h1>, and move up by one level each time. This makes it easier for a screen reader to navigate the page.
Image
Image tags (<img>) must contain alternative text (alt=" ") for a screen reader to read out loud to the user.
For example,
<img src="images/flower.jpg" alt="Pink flower">However, images with no semantic meaning—such as those which are solely decorative—or of limited informational value, should have their alt attributes set to the empty string ("").
Unordered and Ordered List
<ul> or <ol> must contain <li>. In other words, the direct children of unordered(<ul>) or ordered(<ol>) lists must be list items(<li>).
For example, if images need to be put in a list, then the images must go inside of <li> tags.
<ul>
<li>
<img src="images/image-1.jpg" alt="Spaghetti">
</li>
<li>
<img src="images/image-2.jpg" alt="Ravioli">
</li>
<li>
<img src="images/image-3.jpg" alt="Penne">
</li>
<li>
<img src="images/image-4.jpg" alt="Macaroni">
</li>
</ul>ID vs. Class
IDs must only be used once. Use classes instead of IDs if they're required for styling on more than one element.
Link
<a> should have an aria-label. Read more here
For example,
<ul class="social-media">
<li>
<a aria-label="Facebook">
<img src="images/icon-facebook.svg" alt="facebook">
</a>
</li>
<li>
<a aria-label="Twitter"><img src="images/icon-twitter.svg" alt="twitter">
</a>
</li>
<li>
<a aria-label="Instagram"><img src="images/icon-instagram.svg" alt="instagram">
</a>
</li>
</ul>Button
Like <a> tags, <button> tags must also contain an aria-label=" ". Read more here
Link vs. Button
In simple words, use <a> if it needs to take the user to a different webpage; whereas, use a button if it needs to fulfill a small purpose on the same page, for example, a button to make the text green.
Read more here
Don't use a <button> with an <a> inside of it. Instead, use <a> and style it like a button.
Form
An <input> must have a corresponding <label>
Section
A <section> needs a heading; if you don't need a heading in it, use some other element such as <div>
Article
An <article> needs a heading; if you don't need a heading in it, use some other element such as <div>
I hope this helps you :)