Goal
Ensure that our inline elements are semantically structured so they are understandable for users, assistive technology, and other machine uses.
<del> and <ins> for screen readers results in a “High” level defect, for example. See the tags on the elements to identify the critical failures. Items that are not marked can be considered a “Medium”.Some of the semantic elements below are more critical to be read correctly than others. Failure to properly implement <del> and <ins> for screen readers results in a “High” level defect, for example. See the tags on the elements to identify the critical failures. Items that are not marked can be considered a “Medium”.
Why this matters
Read Why does it matter if our HTML is semantic?.
Read Writing for Screen Readers for additional information about how to ensure users get critical information.
How to implement
Note: Many inline elements, such as inputs and line breaks, are already handled by other entries, which is why they’re not included here.
<abbr>
Used to indicate the text inside the tags is an abbreviation. A title attribute explains or expands the abbreviation.
<bdi>
Used to indicate we’re not sure which direction the language between the tags is read (left to right or right to left).
<bdo>
Used to indicate that instead of the default (in the case of this site) left-to-right rendering of text the language between the tags is read right-to-left.
<cite>
Used to describe a reference in a cited work.
<code>
Used to indicate the text inside the tags is a fragment of code.
Note: screen readers ignore this tag, so use alternate methods to let screen reader users identify code if it’s critical to understanding.
<del>
Used to indicate the text inside the tags is marked to be deleted. Frequently used for “track changes” scenarios for source code, Google Docs, etc.
HIGH Note: screen readers ignore this tag, so use alternate methods to let screen reader users identify deleted text.
<dfn>
Used to indicate the text inside the tags is being defined by the phrase following it.
<em>
Used to indicate emphasis on the text inside the tags. (“Get out of bed now.”) Often renders as italics (but doesn’t have to, so don’t count on it).
Note: screen readers ignore this tag, so use alternate methods to let screen reader users identify emphasized code if it’s critical to understanding.
<i>
Used to indicate that the text inside the tags should be offset from other text. Generally this renders as italics but doesn’t need to be; it calls back to using italics to offset technical terms, foreign language phrases, or fictional character thoughts.
<ins>
Used to indicate the text inside the tags is marked to be inserted. Frequently used for “track changes” scenarios for source code, Google Docs, etc.
HIGH Note: screen readers ignore this tag, so use alternate methods to let screen reader users identify inserted text.
<kbd>
Used to indicate the keys the user is to input from a keyboard, voice input, or other text entry device. Example: “Please press Ctrl + Shift + R” has each of the keys wrapped in a <kbd> tag.
<mark>
Used to indicate the text is marked or highlighted for reference purposes. Frequently used to mark the search term you searched for in the text, or that a comment is associated with the term (in, say, Google Docs).
HIGH Note: screen readers ignore this tag, so use alternate methods to let screen reader users identify highlighted text.
<output>
Used in conjunction with an input form element, it displays the output of a calculation taking place on the page. See <output>: The Output Element on MDN for an example.
<q>
Used for inline quotes (as compared to block quotes).
Note: Deque University actually recommends against using the <q> element currently because screen readers ignore it and quote marks (““) work just as well for sighted users.
<s>
Used to indicate that the information is no longer relevant or accurate and is struck through. Note that this should not be used for displaying tracked changes – use <del> instead.
<samp>
Used to indicate that the text between the tags is displaying sample (or quoted) output from a computer program, usually in help documentation or instructions to let the user know what to expect.
<small>
Used to indicate that the text inside the tags is “small print” for legal, copyright, metadata, etc. content. Not to be used to make text smaller!
<strong>
Used to indicate the text between the tags has strong importance, seriousness, or urgency. If unsure whether to use this or <em> contact your technical content creator.
Note: screen readers ignore this tag, so use alternate methods to let screen reader users identify strong text if it’s critical to understanding.
<sub>
Used to set text in a subscript for solely typographical reasons.
<sup>
Used to set text in a superscript for solely typographical reasons.
<time>
Used to indicate that the text inside represents a specific period of time. Works best if the datetime attribute specifies the tie in a machine-readable format.
<var>
Used to indicate that the text inside the tags is the name of a variable in a mathematical expression or a programming context.
Additional implementation tips
If the tags above are marked as “ignored by screen readers” and the semantic presentation of the text is critical to understanding (and only if it’s critical), add additional text to the page for people using screen readers. This could be through:
- Updating the text for all users (such as adding the word “Important:” to the message)
- Adding text that CSS then hides so it only is read out to people using screen readers. Scott O’Hara’s article, Inclusively Hidden, covers techniques for hiding content from visual users (as well as hiding from screen readers but not visual users, and from everyone).
- Adding an icon with appropriate alt text. The alerts used on this site (see the top of the page) are a good example of this technique.
For a full list of semantic elements and further descriptions of how they work, see Inline elements on MDN.
How to test
Manual testing
Right-click the text that requires additional semantic meaning and inspect the code. Ensure in the source code the appropriate inline tags are applied.