WebAIM - Web Accessibility In Mind

HTML Semantics and Accessibility Cheat Sheet

Note

This resource is designed to be printed as a PDF file. An HTML version is available below.

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