HTML Accessibility (A11y)

HTML promotes accessibility. Learn HTML. Be accessible.

Special note: This page could be accessible to more people. However, it's current condition is to prove what well-written HTML does and doesn't do right out of the box.

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

Metadata: Making the document make sense by setting up its presentation, behavior, and relationships.
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

Landmarks: Containers that wrap content which have a specific purpose.
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

Headings: Introduce a new section/idea within the document.
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)

Content anatomy: The nitty-gritty purpose that is conveyed within the document.
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)

Media: Interactive components with controls to play audio or video.
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

Able Player

Forms

Forms: Data collection or dynamic input and output.
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

Tables: Grids to help keep related information together.
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)

Division and Organization: Organizing or styling your content.
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)

Call Attention: Visually or semantically calling attention to inline content.
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.

References

Tools