Printable HTML Accessibility Checklist
HTML is already fairly accessible by design. Whenever possible use semantic HTML: use the correct elements for the purposes they are intended for. If you are creating a button, use a <button> tag. If something is a header, carefully choose the correct header element. Follow the same general best practices for links, alt text, and tables.
Check that the headings are properly tagged and content and headings are properly nested. Use <h1> for the page title, <h2> for subheadings, <h3> for information within that subheading etc. Do not skip heading levels. Start with <h1> and then move to <h2>.
In order to create lists accessibly, they need to be properly tagged.
Unordered lists are tagged with <ul> with each list item <li> written on a separate line. Ordered lists are tagged with <ol>.
Keep in mind that depending on the content, some list styles are more appropriate than others. For instance, if you are providing instructions that must be followed in order, choose an ordered list style. If the order doesn’t matter, use an unordered list style.
The <a> tag is used to create hyperlinks:
<a href= "url">link text</a>
When creating links, the link text needs to give sufficient information about where the link leads. Phrases such as “click here” or “read more” do not give sufficient information about the link destination. Raw URLs pose problems for both screen reader users and voice input users because raw URLs are difficult to understand and pronounce.
For alternative text to be accessible, it must convey the content and context of the image.
If a graphic element is used for decorative purposes, it does not need alt text and should be marked “Decorative.” Verify that within each <img> tag that the alt text is adequately defined.
Alt text is inserted within the quotations after alt:
<img src= “example.jgp” alt= “Insert alt text here” width= “250” height= “250”>
Make sure tabular table is properly defined as a <table>. Within tables verify that any individual cell that is a header is defined as <th> (table header). <th> is used for both column and row headers. Individual cell data should be defined as <td> (table data).
Manually verify the color contrast between the background and the font.
Color contrast can be manually checked with tools like WebAIM’s Color Contrast Checker. To meet WCAG 2.0 level AA requirements, the contrast ratio must be at least 4.5:1 for normal text and 3:1 for large text.
Verify that the LANG attribute is set properly for the page. For example, for English:
<html lang="en">
To change a section, of a page to another language embed the lang attribute in the proper element. For example: <p lang=”es”> will change the language attribute to Spanish within that <p> tag.