HTML Semantics and Accessibility Cheat Sheet
The following table lists the most common and useful HTML elements that have an impact on accessibility
for users with disabilities.
Element Semantics/Functionality Accessibility Considerations
Ensure the element functions as a link—it takes the user to another page/file or another location
Defines a link if a non-empty href within the page. Ensure the link can be navigated and activated with a keyboard and has a visible
<a>
attribute is present. focus indicator. Must contain content that describes the function of the link. Should typically be
underlined within body content.
Represents an abbreviation or acronym.
Best practice is to spell out acronyms and abbreviations in text at their first occurrence instead of
<abbr> The <abbr title> attribute value is
using <abbr>.
presented to assistive technology.
Defines a hotspot within an image map
<area> Must have an alt attribute value that describes the content/function of the hotspot.
(defined with <map>).
These have no useful semantics unless
<article> and Use these primarily for visual styling and content parsing. Use <main> instead for the main
given an ARIA label (which is not
<section> content. Should typically begin with a heading (<h1>-<h6>).
typically recommended).
Contains sidebar or call-out content
<aside> indirectly related to <main>. Identified as Use only for tangential or sidebar information, such as links related to the main content.
a region/landmark.
Defines an interactive element for Ensure the button remains keyboard navigable and has a visible focus indicator. Must contain
<button> submitting a form or performing a content that describes the function of the button. Use <a href> instead if the element directs the
function. user to another page or another location within the same page.
<caption> Defines a caption or title for a <table>. If a <table> has text that describes it, associate that text to the table with <caption>.
Creates a disclosure widget in which
<details> information is visible only when the Ensure a <summary> is present that describes or summarizes the disclosure content.
widget is toggled into an "open" state.
Ensure focus is set to the dialog when it appears. If the dialog is dismissible, ensure keyboard
Contains a dialog box or other
<dialog> users can close the dialog. The ESC key should typically close the dialog. Ensure keyboard focus
interactive component.
remains within modal dialogs and that focus is set to a logical location when the dialog is closed.
Element Semantics/Functionality Accessibility Considerations
Use another semantic element if the content presents semantics. Use <a href>, <button>, or a form
A generic container that does not have
<div> input for interactive elements. Can be given semantics using ARIA roles when HTML is not
any semantics.
sufficient.
Marks text as emphasized and displays Use when text needs emphasis (otherwise use <i> or styles). Use sparingly–it can negatively
<em>
the text as italicized. impact the readability of long sections of text. Not typically read differently by screen readers.
Semantically and visually groups a set of
<fieldset> related inputs, such as a group of radio Should typically have a <legend> that describes the set of fields.
buttons or checkboxes.
Contains an image, illustration, code
An alt attribute should typically be provided for images within a figure, with a <figcaption> that
<figure> snippet, etc., that is referenced in the
provides a caption or legend for the <figure> content.
main flow of a document.
Contains footer content, such as
<footer> copyright data or related links. Identified Use only for footer content. Typically one per page.
as a region/landmark.
Describes a section of content and Ensure the heading accurately describes the content that follows. Headings must never be empty.
<h1>-<h6> define the structural level of that A page should typically have one <h1> and should not skip heading levels (e.g., <h2> followed
content. by <h4>).
Contains header content, navigational
Do not confuse with headings (<h1>, etc.). Use only for header content. Typically one instance per
<header> links, logo, search, etc. Identified as
page.
a region/landmark.
Nests other-page content (often Should typically have a title attribute value that describes the content/functionality of the inline
<iframe> external videos or feeds) within the frame, unless the iframe's presence is visually transparent to the user (use role="presentation" in
page. this case). Ensure the content within the iframe is accessible or provide an equivalent alternative.
<input>,
Defines an interactive control for Use <label> to associate descriptive text or, in complex cases, aria-labelledby or aria-label. Ensure
<select>,
accepting user data. the input remains keyboard navigable and has a visible focus indicator.
and <textarea>
Must have an alt attribute value that describes the content and/or functionality of the
<img> Embeds an image.
image. alt="" is allowed if the image is decorative or the content is presented near the image.
Describes the functionality/purpose of Must contain text that describes the form input. To associate <label> with an input, either
<label>
an <input>, <select>, or <textarea>. wrap <label> around the input and label text or use matching for/id attribute values.
<legend> Describes the contents of a <fieldset>. Use only within <fieldset> to describe the grouping of form inputs.
Element Semantics/Functionality Accessibility Considerations
Defines an item within an <ol> or <ul>.
<li> The number of items in a list is Ensure the list item is never empty. Be careful with complex nesting of lists within list items.
announced by screen readers.
Contains the main content. Identified as
<main> Use only for main content. Typically one instance per page.
a region/landmark.
Defines an unordered list of menu items.
<menu> Use <ul> instead unless the nested items are menu items. Must contain at least one <li>.
Semantically identical to <ul>.
Contains navigation links. Identified as Use only for groups/lists of significant site or in-page navigation links. Typically 1 or 2 instances
<nav>
a region/landmark. per page.
<ol> Defines an ordered/hierarchical list. Use for lists where the order of items impacts meaning. Must contain at least one <li>.
Identifies a paragraph. Presents no
<p> Use to create blocks/paragraphs of text.
useful semantics.
Use another semantic element if the content has semantics or functionality. Can be given
<span> A generic container for inline text.
semantics using ARIA, but only if HTML is not sufficient.
Use when text needs strong emphasis (otherwise use <b> or styles). Use sparingly–it can
Marks text as strongly emphasized and
<strong> negatively impact the readability of long sections of text. Not typically read differently by screen
displays the text as bold type.
readers.
If the SVG conveys content or is clickable, assign role="img" and aria-label or aria-labelledby (with
Defines a scalable vector graphic. Proper
<svg> reference to descriptive content) so the <svg> is identified as an image with alternative text. If the
semantics are not well-supported.
SVG is decorative, assign role="presentation" and aria-hidden="true".
Defines tabular content presented in a Use only for a grid of tabular content/data, not for layout. Ensure table header cells are defined
<table>
grid. with <th>. If appropriate, describe the table with <caption>.
<td> Defines a data cell in a table. Try to avoid spanned table cells. For column or row headers, use <th> instead.
Always assign a scope attribute value of "row" or "col". Try to avoid spanned table headers. If the
<th> Defines a header cell in a table.
cell is not a row/column header, use <td> instead.
Defines the document's title. Shown in
<title> Ensure the title succinctly describes the page content.
browser tab.
<ul> Defines an unordered/bulleted list. Use for lists where the order of items does not impact meaning. Must contain at least one <li>.