HTML 💗 Accessibility
The web is accessible by design. HyperText Markup Language (HTML) was created to share content wrapped in context.
HTML is written to clarify information and relationships (WCAG 1.3.1). It is created with rules to follow so it works across all browsers (WCAG 4.1.1).
Anatomy of a Document
Building a webpage in HTML is a lot like creating a Word document. You need to share content. You need to make it make sense to your audience. If you can author an accessible Word document, you can build a webpage. Maybe even more successfully than making a document accessible!
Abbreviations
- A11y
- Accessibility
- HTML
- HyperText Markup Language
- WCAG
- Web Content Accessibility Guidelines
- SC
- Success Criteria
HTML Cheatsheet
Metadata
Element | Name | A11y Value | WCAG SC |
---|---|---|---|
html |
HTML document | Defines language for screen reader language/accent | 3.1.1; 4.1.1 |
head |
head of document | Proper structure of HTML | 4.1.1 |
title |
title of document | Screen reader announces the page title first; visual users can see page title in browser tab | 2.4.2 |
link |
links to files, like stylesheets, to link to document | Proper structure of HTML; Separation of architecture and presentation layers | 4.1.1; 1.3.1 |
script |
JavaScript code or links to JavaScript file | Proper structure of HTML; Separation of architecture and interaction layers | 4.1.1 |
body |
body of document | Proper structure of HTML | 4.1.1 |
Landmarks
Element | Name | A11y Value | WCAG SC |
---|---|---|---|
header |
header area, can include heading or navigation | Enables a screen reader user to understand the stucture of the page and use keyboard shortcuts to jump between landmarks. | 1.3.1; 2.4.1 |
nav |
navigation area of document (can be for site or page) | Enables a screen reader user to understand the stucture of the page and use keyboard shortcuts to jump between landmarks. | |
main |
main area of document | Enables a screen reader user to understand the stucture of the page and use keyboard shortcuts to jump between landmarks. | |
section |
section of document | Enables a screen reader user to understand the stucture of the page and use keyboard shortcuts to jump between landmarks. | |
article |
article within the document | Enables a screen reader user to understand the stucture of the page and use keyboard shortcuts to jump between landmarks. | |
aside |
information on page, perhaps related to page, but not in flow of document | Enables a screen reader user to understand the stucture of the page and use keyboard shortcuts to jump between landmarks. | |
footer |
footer of document, usually contact information and more links | Enables a screen reader user to understand the stucture of the page and use keyboard shortcuts to jump between landmarks. |
Cool Tool
Matthew Atkinson's Landmarks browser extension.
Headings
Element | Name | A11y Value | WCAG SC |
---|---|---|---|
h1 |
heading level 1 | Enables a screen reader user to understand the stucture of the page and use keyboard shortcuts to jump between headings. | 1.3.1, 1.3.6; 2.4.1; 2.4.6; 2.4.10 |
h2 |
heading level 2 | Enables a screen reader user to understand the stucture of the page and use keyboard shortcuts to jump between headings. | |
h3 |
heading level 3 | Enables a screen reader user to understand the stucture of the page and use keyboard shortcuts to jump between headings. | |
h4 |
heading level 4 | Enables a screen reader user to understand the stucture of the page and use keyboard shortcuts to jump between headings. | |
h5 |
heading level 5 | Enables a screen reader user to understand the stucture of the page and use keyboard shortcuts to jump between headings. | |
h6 |
heading level 6 | Enables a screen reader user to understand the stucture of the page and use keyboard shortcuts to jump between headings. |
Content Anatomy (Phrasing content)
Element | Name | A11y Value | WCAG SC |
---|---|---|---|
p |
paragraph | Screen reader user can quickly navigate between paragraphs. | 1.3.1 |
a |
anchor (hyperlink) | Keyboard user can tab between links. Screen reader user can bring up a list of all links on page. | 1.3.1; 1.4.1; 2.1.1; 2.4.4; 2.4.9; 2.5.3; 2.5.6; 4.1.2 |
img |
image | Screen reader user can quickly navigate between images via keyboard shortcuts or a list of images. Alt attribute gives space for a description. | 1.1.1; 1.3.1 |
svg |
scalable vector graphic | Images can be zoomed/magnified without losing quality. | 1.1.1; 1.3.1; 4.1.2 |
ul |
unordered list | Tells a screen reader user its a bulleted list and how many items are in that list. | 1.3.1 |
ol |
ordered list | Tells a screen reader user its a numbered list and how many items are in a list. | 1.3.1 |
li |
list item | Tells a screen reader user they are on a list item and which item they are on. | 1.3.1 |
dl |
description (definition) list | Tells a screen reader user its a description/definition list and how many items are in that list. | 1.3.1 |
dt |
description term | Tells a screen reader user they are on a description term (ideally). | 1.3.1; 4.1.1 |
dd |
description definition | Tells a screen reader user they are on a description definition (ideally). | 1.3.1; 4.1.1 |
iframe |
inline frame (embedded external content) | Enables users to interact with information from another website as though it is part of the current webpage. It's accessible when the external content is accessible. | 1.3.1 |
Media (time-based)
Element | Name | A11y Value | WCAG SC |
---|---|---|---|
audio |
audio player | Enables a keyboard user to toggle controls. Enables a screen reader user to understand the component and its controls. | 1.3.1; 2.1.1 |
video |
video player | Enables a keyboard user to toggle controls. Enables a screen reader user to understand the component and its controls. |
Cool Tool
Forms
Element | Name | A11y Value | WCAG SC |
---|---|---|---|
form |
form | Parent element of form fields. | 1.3.1; 4.1.1 |
fieldset |
form input field set (groups radio buttons, checkboxes, or related fields) | Gives an accessible name to grouped form fields. | 1.3.1 |
legend |
form legend | Provides additional context for grouped form fields. | 1.3.1 |
label |
form field label | Gives an accessible name to a form field. Increases the touch target of a form field. | 1.3.1; 2.4.6; 2.5.3; 3.3.2; 4.1.2 |
input |
form field (input field) | Moves a screen reader user into forms mode, which changes keyboard shortcuts. Provides validation errors. | 1.3.1; 1.3.5; 1.3.6; 2.1.1; 2.1.2; 2.1.3; 2.5.5; 3.3.1; 4.1.2 |
select |
dropdown form field | Moves a screen reader user into forms mode, which changes keyboard shortcuts. Provides validation errors. | |
textarea |
form field with several rows | Moves a screen reader user into forms mode, which changes keyboard shortcuts. Provides validation errors. | |
option |
list of options within a dropdown form field | Child element of select or datalist | 1.3.1; 4.1.1 |
button |
submit button or generic interactive button | Enables a keyboard user to Tab to the button. Gives a screen reader user context. | 1.3.1; 1.3.5; 1.3.6; 2.1.1; 2.1.2; 2.1.3; 2.5.5; 3.3.2; 4.1.2 |
Tables
Element | Name | A11y Value | WCAG SC |
---|---|---|---|
table |
table | Enables screen reader users to quickly navigate between tables. | 1.3.1 |
caption |
table caption (description) | Provides an accessible name for each table. | |
thead |
table head | Offers additional context about the structure of the table. | |
tbody |
table body | Offers additional context about the structure of the table. | |
tfoot |
table footer | Offers additional context about the structure of the table. | |
tr |
table row | Enables screen reader users to navigate the table with keyboard shortcuts. | |
th |
table header | Screen reader software appends header information to table data cell information to clarify the relationship of the table. Enables screen reader users to navigate the table with keyboard shortcuts. | |
td |
table data | Enables screen reader users to navigate the table with keyboard shortcuts. |
Division and Organization (use with caution)
Element | Name | A11y Value | WCAG SC |
---|---|---|---|
hr |
horizontal ruler | Offers visual and semantic clarification of a divide in sections. | 1.3.1 |
div |
division (block) | none | none |
span |
span (inline) | none | none |
Call Attention (use with caution)
Element | Name | A11y Value | WCAG SC |
---|---|---|---|
i |
italics | Helps some screen reader users know words have been italicized. | 1.3.1 |
b |
bold | Helps some screen reader users know words have been bolded. | |
em |
emphasis | Helps some screen reader users know words have been emphasized. | |
strong |
strong | Helps some screen reader users know words have been written strongly. |