1. Add a Text Alternative to Images for Visually Impaired Accessibility
<img src="importantLogo.jpeg" alt="Company logo">
2. Know When Alt Text Should be Left Blank
In situations when an image is already explained with text content, or does not add meaning to a page, the img still needs an alt attribute, but it can be set to an empty string. Here’s an example:
<img src="visualDecoration.jpeg" alt="">
3. Use Headings to Show Hierarchical Relationships of Content
4. Jump Straight to the Content Using the main Element
The main element is used to wrap the main content, and there should be only one per page. It’s meant to surround the information that’s related to the central topic of your page. It’s not meant to include items that repeat across pages, like navigation links or banners.
5. Wrap Content in the article Element
Note about section and div
The section element is also new with HTML5, and has a slightly different semantic meaning than article. An article is for standalone content, and a section is for grouping thematically related content. They can be used within each other, as needed. For example, if a book is the article, then each chapter is a section. When there’s no relationship between groups of content, then use a div.
<div> - groups content
<section> - groups related content
<article> - groups independent, self-contained content6. Make Screen Reader Navigation Easier with the header Landmark
The header tag is used to wrap introductory information or navigation links for its parent tag and works well around content that’s repeated at the top on multiple pages.
7. Make Screen Reader Navigation Easier with the nav Landmark
The nav element is another HTML5 item with the embedded landmark feature for easy screen reader navigation. This tag is meant to wrap around the main navigation links in your page.
8. Make Screen Reader Navigation Easier with the footer Landmark
The footer is primarily used to contain copyright information or links to related documents that usually sit at the bottom of a page.
9. Improve Accessibility of Audio Content with the audio Element
<audio id="meowClip" controls>
<source src="audio/meow.mp3" type="audio/mpeg" />
<source src="audio/meow.ogg" type="audio/ogg" />
</audio>10. Improve Chart Accessibility with the figure Element
HTML5 introduced the figure element, along with the related figcaption. Used together, these items wrap a visual representation (like an image, diagram, or chart) along with its caption. This gives a two-fold accessibility boost by both semantically grouping related content, and providing a text alternative that explains the figure.
<figure>
<img src="roundhouseDestruction.jpeg" alt="Photo of Camper Cat executing a roundhouse kick">
<br>
<figcaption>
Master Camper Cat demonstrates proper form of a roundhouse kick.
</figcaption>
</figure>11. Improve Form Field Accessibility with the label Element
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
</form>12. Wrap Radio Buttons in a fieldset Element for Better Accessibility
<form>
<fieldset>
<legend>Choose one of these three items:</legend>
<input id="one" type="radio" name="items" value="one">
<label for="one">Choice One</label><br>
<input id="two" type="radio" name="items" value="two">
<label for="two">Choice Two</label><br>
<input id="three" type="radio" name="items" value="three">
<label for="three">Choice Three</label>
</fieldset>
</form>13. Add an Accessible Date Picker
<label for="input1">Enter a date:</label>
<input type="date" id="input1" name="input1">14. Standardize Times with the HTML5 datetime Attribute
HTML5 also introduced the time element along with a datetime attribute to standardize times. This is an inline element that can wrap a date or time on a page.
<p>Master Camper Cat officiated the cage match between Goro and Scorpion <time datetime="2013-02-13">last Wednesday</time>, which ended in a draw.</p>
15. Make Elements Only Visible to a Screen Reader by Using Custom CSS
.sr-only {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
top: auto;
overflow: hidden;
}16. Improve Readability with High Contrast Text
17. Avoid Colorblindness Issues by Using Sufficient Contrast
18. Avoid Colorblindness Issues by Carefully Choosing Colors that Convey Information
19. Give Links Meaning by Using Descriptive Link Text
20. Make Links Navigable with HTML Access Keys
HTML offers the accesskey attribute to specify a shortcut key to activate or bring focus to an element. This can make navigation more efficient for keyboard-only users.
<button accesskey="b">Important Button</button>
21. Use tabindex to Add Keyboard Focus to an Element
Certain elements, such as links and form controls, automatically receive keyboard focus when a user tabs through a page. It’s in the same order as the elements come in the HTML source markup. This same functionality can be given to other elements, such as div, span, and p, by placing a tabindex="0" attribute on them. Here’s an example:
<div tabindex="0">I need keyboard focus!</div>
22. Use tabindex to Specify the Order of Keyboard Focus for Several Elements
It’s important to note that when the tab order is set this way, it overrides the default order (which uses the HTML source). This may confuse users who are expecting to start navigation from the top of the page. This technique may be necessary in some circumstances, but in terms of accessibility, take care before applying it.
Here’s an example:
<div tabindex="1">I get keyboard focus, and I get it first!</div>
<div tabindex="2">I get keyboard focus, and I get it second!</div>