On this page are most html elements listed together with their respective apspects that need to be taken into account when creating accessible websites.
Complex forms that may have have multiple parts should get structured semantically.
Rules
There are two possibilities to structure forms:
First, the <fieldset> and its <legend> element. This is recommended by W3C WAI. 2
Make sure to label the fieldset by including the <legend> element as the first child or by using a <label> elementb or aria-labelledby or aria-label attributes.
Second, the <section> element. This is recommended by MDN. 1
Personal opinion: Since W3C is more official than the MDN docs, and because the <fieldset> element is more semantic as the generic <section> element I would use <fieldset> and <legend>.
Examples (for forms with multiple parts):
A payment form that has a contact Information part and a payment Info part. 1
A shipment form with a selection of existing addresses and a part where the user can input new address details.
The <form> tag in HTML signifies a portion of a document that comprises dynamic components for transmitting data. 2
Rules
Screen readers enter "Forms Mode" when encountering content within a <form> tag, and will only read out form elements such as <input>, <select>, <textarea>, <legend>, and <label>. Therefore you should provide instructions (e.g. allowed file formats, timing limitations, date format) before the <form> element. 1
You should also include important instructions within the labels of the form controls. 1
If it is not possible inside the label, you can associate the explanation via aria-labelled or aria-describedby attributes on the <input> element and the id of the explanation element. 1
Make sure to label (preferred via aria-labelledby or otherwise via aria-label) each form to create a form landmark, which makes it easier for users to navigate to the it. 3
A good valdidation possiblility is to validate fields as soon as the respective 8input elements value got changed*. If the input value is invalid after the change,
display the input in an error state and display a discriptive error message directy next to the input.
If you have validations that run on submit, you can also show the errors inline and in addition have a summary of all errors that link to the specific input elements.
For very short forms, like login forms, you could visually hide this summary.
Use the aria-invalid attribute to define inputs elements as invalid.
Use aria-describedby to connect error messages with their respective input elements.
Use a polite live-region to annouce error messages. If you use an error summary only have the live region on the summary.
Don‘t disable the submit button of the form if the form is not jet valid. Instead allow them to press the button and get an feedback
in form of errors that exaclty show what parts of the form are still invalid.
Labeling should be done explicitly whenever possible. This means using the for attribute of a <label> to associate it to it‘s <input> via its input-id. See examples. 1
If explicit labeling is not possible, use implicit labeling, by nesting the <input> inside the <label> element. This approach is not always supported by assistive technologies.
But you can make this solution more reliable by adding the "for" attribute to the label. See examples. 1
If the input has a visible explanation or should include one for assistive technologies**, use aria-describedby to link the explanation.
This is very useful, since assistive technologies like screen readers enter "forms mode", which will only read out form elements. This is why text that is not associated with an input could be missed. You can also link descriptions by linking multiple ids like this: aria-describedby="id1 id2". 1011
Make sure to label required or optional fields. This is not needed if the form is very simple, a learned pattern (like a login form) and only consists of either required or optional fields. When using an abrivation like an asterisk (*) it is benifitial to add a short explanation at the beginning of the form. 13
Mark required fields with the required or aria-required attributes. 13
Even if a visible label is not needed, make sure to still have a programmatic label. This can be achieved through a visually hidden <label> element, through the aria-label or aria-labelledby attributes.
But beware that visible labels are basically always are necessary to make the form understandable to all users including users with cognitive disabilities.
One example of an input that does not necessary need a visible label would be a search field with a search button next to it. 1
Make sure not to misuse placeholder text as a replacement for labels, because these are not broadly accessible. Don‘t put relevant information only in the placeholder text, without at least a hidden but accessible label with the same information. 1
Placeholder text often has not sufficient contrast. If possible try to meet the minimum contrast of 4.5:1. 1
If you are implementing a custom design for inputs like radio buttons or checkboxes, make sure that the actual input element has still a clickable area like described in hiding elements
If a button is created via the <input> element, then its accessible name is created by its value. See examples. 1
You can improve the usability and make the purpose of <input> elements of type="text" by adding the autocomplete attribute to it.
For a list of possible values see the linked source. 12
Use <select> element, or a group of <radio> <checkbox> instead, because there is a lot of keyboard interactivity needed to manage when using a listbox. See Aria Roles Listbox for usage info.
When implementing a search with live search results, there are multiple patterns you can use. Whichever pattern you implement, make sure to thoroughly test it.
One common pattern is to use the draft ARIA 1.2 combobox pattern, as shown below: 17141518
You should also ensure that your search results and the required information are properly announced. See Scott O'Hara's proposal: 16
Live Regions: Only communicate plain text. Use alternatives if semantic or detailed accessibility information is needed. 16
Avoid Interruptions: Refrain from constant updates as users type, such as announcing result counts, which can disrupt the experience. 16
Typing Speeds: Support users who type slowly due to disabilities or those who quickly finish typing and miss announcements. Live regions may not reliably serve both groups. 16
No Results: Use an assertive live region to notify users immediately when no results are found, saving unnecessary effort. 16
Implementation: Populate an existing empty live region with messages for robust compatibility, rather than dynamically injecting it. 16
A segment of a document, webpage, or website that constitutes a self-contained composition and forms a distinct part is referred to as a article. 1
Rules
Although not explicitly stated, it appears that the <article> element is intended for full content articles and not just summaries or lists of links.
To identify each article, a heading (<h1>-<h6> element) should typically be included as a child of the <article> element. 5
Articles can be nested, but they must have a clear logical connection between them, as demonstrated in the example. 5
If the entire main content of a webpage, excluding headers, footers, navigation blocks, and sidebars, is a single self-contained composition, it is possible to use one single <article> element to mark it up. However, this usage of the <article> element may be considered redundant in this specific case. 2
Additional features are available with <article> elements, such as the address tag 3 or "bookmark" 4 link type, which relates to the nearest ancestor <article> element.
Examples
Items such as comments, block posts, forum posts,newspaper articles, items in an social media feed or other items that are on one page.
a blog that shows the full text of each article one after another as the reader scrolls, each post would be contained in an <article> element.
Nestedexample: the comments of a blog post can be <article> elements nested in the <article> representing the blog post.
Well-structured headings are crucial for both screen reader users and search engines, as heading levels carry significance. Therefore, it is important to write headings carefully, as what benefits your readers also improves your SEO. 1
Rules
Organize headings based on their level or rank, with the mostsignificant heading having a rank of 1 (<h1>) and the leastsignificant heading having a rank of 6 (<h6>). 2
Skipping heading levels can cause confusion for both readers and search engines, so it‘s important to avoid doing so. 2
<h1> specific rules:
It‘s not recommended to include multiple <h1> elements on a single page since each page should have a single <h1> element that accurately describes its content, much like the <title> element. 3
The <h1> element should come right before your main content if possible. So for example place it as the first semantic element inside your <main> element. 1
While the <h1> element can be the first heading on a page, it is not required to be. 2
It‘s considered best practice for each section of a website to have a distinctive and visually clear <h1> heading. Consequently, using a logo as an <h1> heading is not advisable. 2
If text is visually styled in a way that conveys the meaning of a heading it needs to also use an appropriate heading element. Don‘t just use a <span> or <div>. 6 Also don‘t do the opposite: Don‘t use a heading element just to style a text bigger if it does not convey the meaning of a heading.
For fixed sections of a page, such as sidebars or footers, it is acceptable to skip heading ranks. In such cases, it is crucial to maintain consistency across all pages of the website. 2
Frequently, fixed sections are initiated with the <h2> rank, as illustrated in examples such as the W3C heading examples or the headings in the footer on the MDN website. 3
An effective heading text should accurately reflect the content that follows it. 1
Although there is no specific length requirement for headings, they should still be concise and easy to scan, primarily for the sake of usability. 1
If necessary, ensure that headings within reusable components (such as Vue components) are dynamic and can fit into the overall heading structure. 1
When using sections to divide the content on your page, each section should when ever possible include a descriptive heading. 7
Using aria-labelledby on <section> elements to link them to a single heading inside is not required. 1
This is because navigation by landmarks is not particularly common and because the section heading is already announced in addition to the main heading. Adding aria-labelledby on <section> elements may result in additional text that screen reader users have to navigate through, leading to a cluttered listening experience. 1
Headings should not be utilized as subheadings, subtitles, alternative titles, taglines, or slogans. In these situations, it‘s recommended to use a <p> tag instead. 4
A11y Project argues, that you alternatively could use the <hgroup> element in such cases. But only when used with the role="group" and aria-roledescription="Heading group" attributes. This is because the <hgroup> is not supported by assistive technologies. 1
When using the <hgroup> element, make sure to only include one heading element inside of it and one or more <p> elements. 5
It‘s generally unsuitable to use headings within tables, such as in <th> elements. 4
The HTML tag serves as the top-level container for an HTML file. 1
Rules
You need to specify a lang attribute on the root html element to indicate the document‘s primary language. This helps speech synthesis and translation tools determine proper pronunciation and usage rules. 1 This is a A level requirement of the WCAG 2.1 guidelines. 2
Your language code should be a short as possible. So only use a region subtag if it is really necessary. 4
Make sure to use the lang attribute on elements that are in different language than the default one set on the html element. Single common words of another language do not need to be declared. But use as soon as you have a complete sentence in another language. This is a AA level requirement of the WCAG 2.1 guidelines. 3
Landmarks help identify a webpage‘s structure and organization. This enables screen reader users to navigate through the structure of the page using a keyboard. 1
Rules
Place all perceivable content in a meaningful landmark to avoid missing content in complex web content. 1
When using the same landmark role multiple times on a webpage, each instance should have a unique label. 1
To label an area, you can refer to a heading element (h1-h6) at the start of that area using the "aria-labelledby" attribute. 1
If an area does not have a heading element, provide a label using the aria-label attribute. But avoid the landmark name inside the label text, since this information is already conveyed. 1
Don‘t overuse landmarks. Only add them if they improve the accessibility of your website. 11
The following defines a list of landmark roles and html elements that define this role:
Banner Role: <header>
<header> defines a banner role, except when placed inside a <article>, <aside>, <main>, <nav> or <section> element. 2
A banner landmark, usually found at the top of each page, identifies site-related content like the logo or a site-wide search often called the header. 2
Only include one <header> element that defines a banner landmark. Except for, when using multiple document or application roles, for example through the use of iframes. In this case make sure, to label each banner. 2
Should not be nested inside other landmarks (be top-level). 2
The banner landmark can only include a big heading and/or logo or alternatively also the search and/or navigation. This mainly comes down to what makes more sense in each specific case and the preference of the developers and users. You may want to survey your users what they find more intuitive. 14
The main landmark identifies the main content of the page. 6
Should not be nested inside other landmarks (be top-level). 6
Only include one <main> element that defines a main landmark. Except for, when using multiple document or application roles, for example through the use of iframes. In this case make sure, to label each main landmark. 6
Contentinfo Role: <footer>
<footer> defines a contentinfo role, except when placed inside a <article>, <aside>, <main>, <nav> or <section> element. 3
The contentinfo landmark, or footer, identifies standard information at the bottom of a webpage, such as copyright notices and policy links. 3
Should not be nested inside other landmarks (be top-level). 3
Only include one <footer> element that defines a contentinfo landmark. Except for, when using multiple document or application roles, for example through the use of iframes. In this case make sure, to label each contentinfo. 3
The complementary landmark is a supporting section of the document that‘s intended to complement the main content. It should retain its meaning even when separated from the main content. Otherwise a different role like the region role should be considered. 4
Should not be nested inside other landmarks (be top-level). 4
If multiple complementary roles are included on the page label each one. 4
Example use cases:
On a page that summarizes the plot of a movie the <aside> element could be use for a sidebar, that contains additional background information like starring actors and the release date, etc..
An info box inside the text content of a page, that contains some additional information that is not essential to the main content. This info box must not be inside the main landmark (e.g. <main> element).
The website of an animal shelter utilizes the <aside> tag to structure a positive testimonial from a satisfied customer who had an enjoyable experience with the animal rescue.
Form Role: <form>
<form> defines a landmark, if it has an accessible name, which can be achieved by using aria-labelledby (preferred) or aria-label attributes. 5
Don‘t overuse landmarks. So only label forms if it has a benefit to the user. If the form is the main content on one page, then creating a landmark for the form is unnecessary. 11
Label forms uniquely when using multiple forms on the same page. 5
The form role signifies a portion of a document that comprises dynamic components for transmitting data. 10
If a form is used solely for search purposes, it‘s better to use the search landmark instead of the form landmark. 5
Navigation landmarks serve the purpose of identifying specific groups of links, such as lists, that are intended for navigation within a website or page. 7. This can include the main navigation inside the header, links in the footer, a sidebar navigation or breadcrumbs.
It is important that each navigation landmark on a page has a distinct label. Except when multiple navigation landmarks has the exact same links inside of them. In this case use the same label twice. 7
Region Role: <section>
<section> defines a region role, if it has an accessible name, which can be achieved by using aria-labelledby, aria-label, or title attributes. 8
A region landmark is a visible webpage portion with significant information related to a specific purpose. It is important enough to be included on summaries of the page and be easily accessible for users. 8 The region landmark role‘s content should make sense if separated from the main content of the document. 12
Examples for the region role:
The home page of a news website features a segment with a weekly rotating poll. 13
Logged-in users of a bank website can expand links to view deposit account details. 13
Region landmarks can be utilized to identify content that is not adequately described by named landmarks. 8
The <meta> element is used to provide meta data for the website that gets used by for example search engines and web crawlers. 2
Rules
There is not much that the <meta> element can provide to increase accessibility. That being said, if wrongly configured it can decrease the site‘s accessibility.
Following are a few considerations that should be followed, when using the <meta> element:
Disabling or heavily restricting website zooming via the name="viewport" together with either content="user-scalable=no", content="maximum-scale",
content="minimum-scale" attributes violates the WCAG 2.1 Guidelines. 2
The http-equiv="refresh" attribute together with content="<number of seconds>" can be used to automatically refresh the page or redirect to another page.
Avoid doing so automatically, and if absolutely needed make sure to comply with the WCAG 2.1 Success Criterions that are linked to this paragraph.
345
Use the <noscript> element to represent its children if JavaScript is disabled in the user agent. If JavaScript is enabled, then the <noscript> element represents nothing. 2
Rules
There are many reasons why JavaScript might be disabled on a website. This is way progressive enhancement is an important accessibility tool.
It describes, that the website works as a static website without JavaScript. JavaScript then adds interactivity to the static site. This way a website is mostly usable even when JavaScript is disabled.
Most of the time progressive enhancement can best be accomplished without the use of the <noscript> element. This is because the element is a very blunt tool and thoughtful progressive enhancement
achieves better results most of the time. 2
A use-case for this element could in cases where the website absolutely does not work without JavaScript.
In such situations creating an alternative content via the <noscript> element that states that the website does not work when JavaScript is disabled, does at least let the user know why the website is failing. 1
The element could also be used to redirect a user to a site that works without JavaScript. 1
If the button has text and an icon consider hiding the icon if an icon label would be redundant via aria-hidden="true". 4
If the button only consists of an icon without visible text choose one of the following options:
hide the image via aria-hidden="true" and add an aria-label or aria-labelledby on the button. 4
add text inside the button and hide it visually through css. 4
if the image is an <img> element use <img alt="alt text">. 4
if the image is a <svg> element use <svg role="img" aria-labelledby="titleID"> with a <title id="titleID"> element inside of it. 54
Adding aria-pressed (which needs to be set to ‘true‘ or ‘false‘) to an element with a role of button turns the button into a toggle button. 3
In this case, don‘t change the label if the state changes. 3
While it is strictly speaking accessible to use the disabled attribute on buttons its not very usable. 6
Disabled buttons dont give the user feedback why they are disabled. Disabled buttons get removed from the tab index, making the context harder to understand. And as soon as a button is disabled it looses focus, which is unexpected for users. 76
A better way is to not disabled buttons, but to show a error message, when the button is pressed, to give the user feedback. 6
When you need to disable a button use aria-disabled. Using this, the button does not loose focus and it stays in the tab index. But you need to make sure that the button actually does nothing while disabled, via JavaScript. 6
You may give Assistive Technology users the same feedback you give your visual users. For example, when displaying a loading spinner in the button to visually give feedback for a loading state after pressing the button, you could change the accessible text of the button to "loading".
Semantic HTML is preferred over canvas for accessibility because canvas content cannot be accessed by accessibility tools. Therefore, it is recommended to refrain from using canvas in an accessible website or app. 1
When still using the canvas element:
To ensure accessibility for screen readers, it is recommended to either provide internal fallback content or use ARIA semantics to create a text alternative for the content. 3
It is recommended to use the ARIA role="img" and aria-label="alt text" attributes to create a text alternative. 2
Another approach is to use internal fallback content, where you can include alternative text within the opening and closing tags of the image. 2
If a canvas is interactive, it is recommended that authors incorporate focusable elements within the fallback content of the canvas that correspond to each focusable aspect of the canvas. 3
To design a widget that provides the option to either conceal (collapse) or reveal (expand) content. 3
Rules
There is no consensus about whether or not to use the semantic <details> and <summary> elements or to create this functionality without those elements.
Disadvantages of using <detail> and <summary> for disclosure widgets:
It is worth noting that the <details> and <summary> elements may be interpreted differently by various screen readers, resulting in inconsistent accessibility experiences (e.g. completely different way of announcing those elements).
But don‘t try to create custom announcements by for example changing ARIA roles. This is almost always a bad idea. Alternatively, implementing the functionality without these elements could potentially lead to a more consistent user experience that is under your control. 4
The <details> and <summary> elements can have bugs, including missing state change announcements, that may affect accessibility. 4
It is important to note that the <details> and <summary> elements are not supported on Internet Explorer. Whether or not this presents a problem depends on your user base and their preferred web browser. 5
Advantages of using <detail> and <summary> for disclosure widgets:
One advantage of using the <details> and <summary> elements is that they are semantic, meaning that they provide additional meaning and structure to your HTML code.
Using the <details> and <summary> elements can also offer more features out of the box than a custom implementation. 4
It‘s important to note that creating a custom implementation may increase the likelihood of mistakes being made, such as hard coding and not updating aria states in the HTML if the JS is removed. 4
Chromium Browsers will include and expand the content when you use the browser search functionality. Although this behavior might not be suitable for all use-cases, like tabs. 7
W3C APG disclosure widget pattern examplesdoes not use the <details> and <summary> elements. This is a great resource to start, when implementing this widget an your own.
When utilizing the <summary> element:
it is important to avoid placing semantic tags such as headings within it. This is because the <summary> element has an implicit ARIA role of button, which removes all roles from child elements. Alternatively, you can enclose the <summary> element inside a heading to preserve its semantic meaning. 2
hide the default triangle by using this CSS below. If you would do it another way you would risk changing the announcements made by assistive technologies. When you then insert your own custom indicator graphic make sure to use aria-hidden=“true” on on it, since it does not convey any additional information. 4
Implementing a custom disclosure widget is fairly straight forward. An example can be found in the source of this sentence. 4
Its best practice to don‘t hard code any attributes that will get changed by JavaScript in the HTML itself but to create and update these attributes entirely in JavaScript and to also hardcode the widget in its open state. This is also called progressive enhancement. That way people who don‘t run JavaScript on your site (e.g. reading modes) still can use the widget. 4
Use <iframe> to embed other HTML pages on the webpage. 3
Use <embed> and <object> to embed external content like PDFs on the webpage. 1
Rules
External resources like PDFs should be linked to on a separate page instead of embedding them on a page whenever possible. 1
To ensure that individuals using assistive technology, such as a screen reader, can comprehend the content within an <embed> or <object> element, it is recommended to utilize the title attribute to provide a descriptive label. 23
While a descriptive title attribute value is not mandatory for iframe elements, it is recommended to include one if the inline frame presents visually distinct content, such as an advertisement or video player, as a whole. Don‘t use the aria-label attribute, since it is not supported for this element. 4
Upon encountering an <iframe> element, the content is treated as if it were part of the parent page and is read in the order of markup. 4
To ensure visibility and accessibility for users who enlarge fonts and other page elements, it is not advisable to disable scrolling for iframes (or frames) using scrolling="no". 4
Whenever feasible, it is advisable to create iframes with relative sizes so that the iframe element can adjust proportionally as the page and its contents are resized. 4
Use <figure> to create a group of content like an image, diagram or code snippet with an optional caption via a <figcaption>. 2
Rules
General Rules
Each image should contain an alt attribute, that states what can be seen on the picture. Otherwise the file name might get announced by screen reader. 3
If the image is a <svg> element use <svg role="img" aria-labelledby="titleID"> with a <title id="titleID"> element inside of it. 13
End alt descriptions with a period. This will create a small pause by screen readers. 9
Don‘t include "Image of", in the alt text, since screen reader already announce the type. Exceptions can be made if the type it important, like a sketch or illustation. 9
The content of the alt text dependents on the context that it is used in. Do describe the relevant information that the image conveys depending on the way you use that image.
But always keep it as short as possible 9
To marking up emojis or emoticons you can use use a <div> or <span> with a role="img" and an aria-label. See code example below. 4
Rules By Image Type
Images can be categorized into their purposes, to determine how to implement them: 1
Informative Images
Communicate a straightforward idea or message that can be conveyed in a brief sentence or phrase. Using the alt attribute to describe the image is enough. 1
Make sure not to to provide additional information inside the alt text that could be beneficial to sighted users as well.
Decorative Images
Images that are purely decorative do not contribute any additional information to the content of a page. 1
Use a null alt text (alt="" or just alt) for decorative images to avoid adding noise to screen reader output or diverting users‘ attention from adjacent text. 16
What is considered an decorative image can only be decided by the author. A few heuristics for decorative images: 1
Visual elements such as borders, spacers, and corners used for styling purposes. 1
Images used to enhance the appearance or expand the clickable region of a link. 1
An image that is illustrative of the adjacent text but does not provide any additional information. 1
Images that are described and identified by the text surrounding it. 1
Since the purpose of the the empty alt attribute is to reduce auditory clutter, you can ask yourself if a person using assistive technologies would benefit from a additional description, or if, on the other side, some context would get lost, where the image to be hidden from assistive technologies. 1
Functional Images
Functional images are utilized for initiating actions rather than communicating information, commonly found in buttons, links, and other interactive elements. 1
When providing a text alternative for a functional image, it should communicate the action that will be triggered rather than describing the image itself. 1
Such as "Print this page" instead of "Image of a printer", "Search" rather than "Magnifying lens", or "Example.com homepage" instead of "Example.com logo". 1
But an image inside a link, that also includes a visual descriptive text, should be considered as a decorative image when the alt text would be basically the same as the visual text and should include an empty alt text instead. This is to reduce auditory clutter. An image that adds information, like a "new window"-Icon should contain "new window" in its alt description. 1
Images of Text
Whenever an image consists of text the alt text should be the same. 1
Note: Text should be displayed as actual text whenever possible. 1
To conform with WCAG 2.1 AA images of text should be replaced by actual text if the technology being used allows the visual presentation of the text as intended or needed.
But images of text are allowed in two cases:
If the image is customizable (font, size, color and background can be changed)
If the presentation of the text is essential and would not work as intended without it (that includes logos)
To conform with WCAG 2.1 AAA images of text must be replaced by actual text. Expect for:
If the presentation of the text is essential and would not work as intended without it (that includes logos)
So customizable images are not allowed anymore for WCAG 2.1 AAA and there is no exception made for insufficient technologies.
Complex Images
Images that cannot be expressed through a brief phrase or sentence, like graph, charts, diagrams or illustrations. 1
There are multiple ways of handling those images:
Add a short description to the image via the alt tag and add the expanded explanation next to the image.
This can be done via the <figure> and <figcaption> elements to associate the explanation.
The difference in content between the two is that the alt text describes what can be seen in the picture, while the caption would editorialize and give context. So the alt text is still necessary! 1
The expanded explanation can alternatively also be linked to. But don‘t rely only on the longdesc attribute of the <img> element, since this is not supported across most browsers, but also add a visible and accessible link. 1
Using aria-describedby to link a longer flat text description to the image.
Groups of Images
Multiple images that together convey one single information, can be implemented by adding an descriptive alt text to the first of these images and then add empty alt attributes to the rest of these images so that they get ignored by assistive technologies. 1
Collection of images can also be implemented inside of two levels of nested <figure> elements. 1
If you want or need a visible description for the image (see complex images) use the <figure> and <figcaption> elements to associate the text to the image. This text will be associated not as an accessible name but as additional details (like the aria-details attribute does). An alt text is still needed for the image, but make sure not to duplicate the information (see complex images). 5
Contrast Requirements
There is a minimum contrast requirement of 3:1 (WCAG2.1 1.4.11 AA) for: 10
visual non-text content, like icons, that is needed to identify or understand (not deactivated) user interface components. 10
graphical objects, like icons or important parts of graphs, that are needed to understand the content of the site, except for when the exact visual presentation is required to understand the object. 10
"Needed to understand the content", means there is no other visual representation of the graphical object, and the grapical object is not only decorative and the presentation is not essential (like a logo). 10
Ignore non-interfering colors when measuring contrast ratio for components with multiple colors. 10
A website that supports multiple color profiles like a light and dark mode generally is beneficial to accessibility.
If using multiple color profiles make sure to test the contrast requirements in all profiles and possibly change the colors of important non-text content. 11
Contrast Details: Non-Text Content for interface components
All visual information that identifies a control in a certain state (active, focus, selective, ...) also needs the 3:1 minimum contrast to its surrounding colors.
Different states of a component do not have a contrast requirement between each other except for when there are multiple components next to each other. 10
See this sentence source for more details on contrast requirements for focus indicators. 10
Contrast Details: Graphical Object Rules
Images made up of multiple lines, colors and shapes will be made of multiple graphical objects, some of which are required for understanding. 10
Only the graphical objects of a image that are required for understanding must comply with the contrast requirement. 10
Examples
Marking up emojis or emoticons using <div> or <span> elements with a role="img" and an aria-label: 4
To generate an image map consisting of clickable regions of any shape, which can then be associated with an image. 1
Rules
Make sure to include duplicate text links on the same page, as image maps may not operate properly on certain mobile devices if the area coordinates are not scaled proportionally to the image. 3
It is recommended that each <area> element should have an alt text, similar to any other hyperlink. 3
Its important to choose the right video and audio containers and codecs, including alternative formats, to increase browser support. For video content including MP4 and WebM should be enough. 3
The <source> element can be included in the <video> or <audio> elements to define multiple file sources in different formats.
An alternative to embedding video or audio content on your website is to embed them through <iframe> elements from video providers like YouTube. This can make including media easier. 3
The video or audio material should include both displayed subtitles which include dialog and important sound and music
during playback (captions) and a written record of the entire recording‘s content (transcripts).
For more details see below or WCAG 2.2 1.2.1 and 1.2.2. 1
This can be achieved by including a <track> element inside the <video> elements, which in turn has a .vtt file via the source attribute associated with it. This .vtt file includes the captions along with the timestamps of when they should be shown. 1
The <audio> element does not support WebVTT, but you can use the <video> element for audio files as well. 2
The <track> element should include the kind and srclang attributes to define what kind of track it is (e.g. caption, subtitle) and what language it is in. 4
Deocrative and sensory content:
If the video or audio content primarily intended to create a specific sensory experience, then text alternatives at least provide descriptive identification of the non-text content. 6
If the video or audio content is purely decorational, the content can be programmed to be ignored by assistive technologies, instead of appling the content rules discussed below. 6
When deciding if a video or audio content is purly decorational or only a sensory experience, make sure not to use it as an excuse to just hide content instead of providing appropriate alternatives.
For example users could benefit from accessible "Hero" videos that only have the purpose of visualzing a certain mood or vibe.
This could be done by providing a comperative experience for non-sighted users using for example sounds or voices that convey the same mood.
This way not only sighted users could benefit from the content.
This is to say, to make sure to critially challenge the purpose of the content and if assistive technology users could also benefit from this content, before hiding it from them. 7
Rules By Content
This section list the rules that apply depending on the type of content. The rules are based on WCAG 2.2.
Following are the descriptions of the rules mentioned above.
Provide text alternatives:
Provide a text alternative. This is often a transcript including all the important information
like dialogue, descriptions of important sounds, settings and setting changes and descriptions of expressions.
Provide alternative audio files:
Provide an audio track, describing all the all the important video content.
The alternative should be linked right before or after the video and should be in a common audio format, such as MP3.
Provide captions:
Embed always visible captions (dialogs and important sounds) as text in the video.
Or provide closed captions (dialogs and important sounds), that can be turned on or of by the user.
Further information can be found in the source of this sentence. 5
Provide extended audio
Provide a second audio track or a seperate video, that includes an extended audio description of the important visual information.
Extended audio descriptions temporarily pause the audio and video to allow critical information to be delivered when pauses in dialogue are insufficient for adequate descriptions.
Provide sign language
Sign language interpretation offers richer access to synchronized media by incorporating intonation, emotion, and additional audio cues absent in captions.
The sign language can be embeded ether in the video itself or better yet as a second video that is sycronized with the main video.
Anchors or often called links serve to establish a link to a webpage, file, email address, location within the same page, or any other destination that can be identified by a URL. 1
Rules
The link text should indicate where the link goes. Don‘t use an unspecific link text like "click here" or "here". 2
What you can do, is adding a link to a part of sentence as long as the link text makes sense without the surrounding sentence like so. See examples. 1
It is acceptable to link a complete sentence, although it is best to avoid doing so for longer sentences. 2
Whenever a link directs the user to a new tab/window or to a resource that is not in HTML format, such as a PDF file, it is important to clearly indicate this. See examples below for two possible ways. 1
In cases where the design of a webpage does not permit the use of descriptive link text, it is recommended to use ARIA attributes such as aria-describedby, aria-label, and aria-labelledby to generate descriptive link text. 2
It should be noted that assistive technology regards an ARIA description as supplementary to the link text, whereas an ARIA label is considered to replace the link text. Therefore, links that have ARIA labels may result in a suboptimal experience for users of speech recognition software. 2
It is not recommended to utilize Anchor elements as simulated buttons, such as by assigning their href attribute to # or javascript:void(0) in order to prevent the page from reloading, and subsequently listening for their click events. 2
Here are some recommendations as to when to use a button or a link:
Use a Link when:
the it takes you to another page or resource (document to download, mail address,... ). 3
it changes something on the current page, like opening a section of a page. 3
you need JavaScript to implement the functionality. This is not always true but a good heuristic. For example buttons in forms don‘t require JavaScript. 3
As a general guideline, it is advisable for content editors to refrain from using images as links. 2
Webpages should not display multiple links to the same destination in close proximity to one another. This can sometimes occur when an image link and a "more" text link are positioned next to each other. In such cases, it is important to ensure that these two links are treated as a single link. 2
Links on a webpage can be styled using various colors. However, relying solely on color to distinguish links is insufficient for ensuring accessibility. As a general guideline, webpages should incorporate non-color elements to indicate the presence of links. 2
One effective way to provide a non-color indication of links is to underline them (not solely on hover, but at all times). 2
There are some designers who may prefer not to use a non-color indicator for links that is only visible upon hover. While the Web Content Accessibility Guidelines (WCAG) do allow for this, the requirements for doing so are very strict. 2
You can use aria-current to mark a link as currently active. Set the active link for example to "page", "step" or "true", depending on your use-case. 4
To indicate contact information for a page or article. 1
Rules
Avoid utilizing the <address> element for addresses that do not serve as contact information for the page or article. For instance, a real estate website should not use the <address> element for each house listing address. 2
When the <address> element is utilized within an <article> element, it is construed as contact information for that specific article. If it is not nested within an <article> element, it is assumed to be contact information for the entire page. 1
The content within an <address> element ought to comprise contact information, but it does not necessarily have to be a postal address. It can take on any form that is fitting, such as a URL, email address, phone number, or social media handle. 2
To make the content visible to the user and also provide a version of the data that can be interpreted by scripts. 1
Rules
This example demonstrates the usage of the element where the content enclosed within the element is visible to the user, while scripts can retrieve this content using the "value" attribute. 1
This element does not offer any additional advantages in terms of accessibility.
Examples
Associate a product number with a T-Shirt in a list:
Used for layout or styling purposes. Other then that, they lack any semantic meaning. 21
Rules
The <div> element is inherently considered to have a generic role, rather than none. This could potentially impact certain ARIA combination declarations, as they rely on the presence of a descendant element with a specific role in order to function correctly. 1
The <div> element is recommended to be used solely when there is** no other suitable semantic element available**, such as <article> or <nav>. 1
Avoid attempting to substitute every <div> or <span> with semantic elements, as elements that are exclusively employed for layout or styling objectives should not possess any additional semantic significance. 3
The <span> element is similar to the <div> element, however, <div> elements are block-level elements whereas <span> elements are inline elements. 2
Use <dl> elements to create description lists. An instance where this element may be useful is in presenting glossaries or showcasing a set of key-value pairs. 3
Rules
The benefit of lists to users that rely on assistive technology is, that they conveys context to the user like how many list items are contained in the list and that the elements in the list form some sort of group.
Make sure to use the most appropriate list to increase semantics.
To decide whether to use <ul> or <ol>, consider rearranging the order of the list items. If doing so alters the meaning of the list, then the <ol> element should be used. Otherwise, <ul> can be used. 1
You can also nest and switch freely between <ol> and <ul>. 12
Rules for description lists:
It is possible to have several consecutive <dt> or <dd> elements for a single entry. 57
Avoid using ARIA roles such as "term" and "definition" in description lists, as this may cause unexpected behavior in iOS browsers. 7
The <menu> element exposes the same semantics to the accessibility tree than the <ul> element. Therefore there is currently not benefit of using the <menu> element over the <ul>. 9
Make sure that your design uses lists such a way, that they their meaning is unambiguous.
For example by a Headline that describes the list or by using lists inside semantic elements like primary navigations.
Only if it is not possible to convey the meaning by other means you could give the list an accessible name if - and only if - it improves the usability.
You can achieve this by using aria-label on the list itself.
This technique is not supported by all ATs, which means the label may not be annouced for all users. 10
Safari will remove the semantics of a list if you remove the list style, if the list is outside of a nav element. To enforce the semantics of a list use role="list". 11
Examples
Description list example:
<dl>
<dt>ARIA Comment Role</dt>
<dd>To denote a comment/reaction to some content on the page, or to a previous comment.</dd>
<dt>ARIA Image Role</dt>
<dt>img element </dt>
<dd>Embeds an image into the document.</dd>
</dl>
A meter serves as a graphical depiction that showcases a numeric value, which remains within a defined range. 3
Rules
A <meter> elment should only be used if there is a known lower and upper limit. 1
Meters should not be used to indicate progress (for example loading). Use the <progress> elmement instead. 1
You should provide an accessible name. The most reliable method is explicitly using the <label for="<id>"> element and associating it via the "for" attribute.
2 Otherwise use aria-labelledby or aria-label.
Include a textual representation of the current value of the meter inside the <meter> element, in case that the user agent does not support the meter element. 1
This textual representation is not used for the computation of the accessible name.
The unit of the <meter> element can be defined as a free-form text inside the title attribute. 1
Use the <progress> element to indicate the progress of a task. 1
Rules
The <progress> element can indicate an indeterminate state when it‘s not clear what the progress is or a progress between zero and the specified maximum. 1
When representing scalar values that do not represent a progress use the <meter> element instead. 1
You should provide an accessible name. The most reliable method is explicitly using the <label for="<id>"> element and associating it via the "for" attribute.
Otherwise use aria-labelledby or aria-label. 2
Include a textual representation of the current value of the progressbar inside the <progress> element, in case that the user agent does not support the progress element. 1
This textual representation is not used for the computation of the accessible name.
To indicate the loading progress of a specific section of a page using the <progress> element, utilize the aria-describedby attribute to refer to the status,
and set aria-busy="true" on the corresponding section that is undergoing updates. Once the loading is complete, remove the aria-busy attribute. 2
If it increases the usability of the progress task you can use a surrounding live-region for progress changes to be announced. 3
For important information that requires the user‘s immediate attention you can additionally use role="alertdialog" on the <dialog> element. 1
Rules
The <dialog> element had and still has some issues that prevented the element from being the goto element when creating a dialog or alertdialog. This is slowly changing through changes in 2022 and 2023. 6
If you have no need to cater to older browser versions or have very specific requirements, it may be beneficial to consider utilizing the <dialog> element instead of the dialog or alertdialog roles. Doing so would result in a greater amount of default behavior being implemented without the need for further customization (refer to the requirements listed below). 6
Whether you use the <dialog> element or the dialog or alertdialog roles, make sure that your dialog satisfies these requirements:
Ensure that there is at least one element that can receive focus included within. 2
For dialogs: Set the value of aria-modal based on whether or not the content outside the Sidebar should be clickable. If the content outside the Sidebar should not be clickable, ensure that this is set. 1
For alertdialogs: Set aria-modal (mandatory). Make sure the outside content is not clickable. 3
Give the dialog an accessible name, for example by using aria-labelledby.32
Associate any visible text explanation to the dialog element using aria-describedby, for screen readers to announce the explanation when the dialog opens. Otherwise this explanation could be missed. 8
Focus the default control inside the dialog box when it appears on the screen using the autofocus attribute with <dialog> elements. 1
When the dialog is closed, restore the keyboard focus to either its previous position before the dialog appeared or to the beginning of the page. 2
Modal dialogs should have a tab order that wraps, meaning that when the user tabs through the focusable elements within the dialog, the focus will loop back to the first element once the last element has been reached. In essence, the tab order should be confined to the dialog itself. 2
Modal dialogs should have the ability to be closed through various means, including clicking a close/cancel/confirmation button, clicking on the overlay, or by pressing the ESC key on the keyboard. 1
Ensure that the dialog is correctly hidden to exclude the focusable elements inside it from the tabbing index. 5
If applicable, use aria-controls on the button that manages the modal, setting the value to the ID of the modal it controls.
If a button controls the modal, utilize aria-expanded and ensure that the value is updated dynamically to reflect the state of the Sidebar. 5
Some usage notes specifically on the <dialog> element:
<dialog> elements that are invoked using the showModal() method will automatically have aria-modal="true". In contrast, <dialog> elements that are invoked using the show() method, rendered using the open attribute, or changing the default display of a <dialog> will have aria-modal="false". 1
If a <form> element has the attribute method="dialog" or if the button utilized to submit the form has formmethod="dialog" set, it can close a <dialog>. 1
When displaying a <dialog> using HTMLDialogElement.showModal(), the backdrop displayed behind it can be styled using the ::backdrop CSS pseudo-element. 1
A tables content is organized in the following way:
An optional <caption>: Use the <caption> to create a visible caption/title for the table. You can also use aria-labelledby or aria-label. If used, the <caption> element must be the first child of its parent <table> element. While it is not mandatory, it is very helpful to have a short description. It is strongly recommended to at least have a non visible description via an aria-label on the <table> element. 1214
Zero or more <col> or <colgroup>: To create column groupings, you can use <col> and <colgroup>. This is useful for creating logical groupings for assistive technologies or setting classes or styles on each cell in a column. If a column group spans only one column, use the <col> element. If it spans multiple columns, use the <colgroup> with the span attribute to define the number of columns included in the group. 34
Optional <thead>, <tbody> or <tfooter>:
These elements are designed for grouping table rows, providing user agents with better rendering capabilities for long tables. For instance, it can make the <tbody> scrollable while always showing the header or footer of a table. Additionally, they can be used for styling purposes, enabling users to more easily style specific sections of a page. 12
It is important to note that only one <thead> and <tfoot> element can be used within a single HTML table, but multiple <tbody> elements are allowed as long as they are consecutive. This allows for the creation of multiple groups of rows within a single table, providing greater flexibility in organizing and structuring data. 16
When using a <thead> element in an HTML table, you should use a <tbody> element directly after it, otherwise the table may not render on all browsers correctly 5
If the <thead>, <tbody>, and <tfoot> tags are not used in an HTML table, <th> and <td> elements can be added directly as descendants of the <table> element. However, if direct <td> descendants are used and a <tbody> element is specified, the direct <td> elements will automatically be wrapped inside a <tbody> element by the browser.
To define the cells that a <th> element describes in an HTML table, you can use the scope attribute. While browsers can automatically infer this in simple cases, it is important to set the scope attribute in cases where it cannot be automatically inferred. This allows assistive technologies to accurately describe the table to users with disabilities. 912 The possible values are:
"col": Specifies that the header cell applies to some or all of the cells in the same column as the header cell.
"row": Specifies that the header cell applies to some or all of the cells in the same row as the header cell.
"colgroup": The header describes multiple columns.
"rowgroup": The header describes multiple rows.
In HTML tables, you can use the colspan and rowspan attributes on <th> or <td> elements to define a header that relates to multiple columns or rows, as shown in the example. The value describes the number of columns or rows it relates to. 910
To define an abbreviated description of the content of a <th> element in an HTML table, you can use the abbr attribute, as shown in the example. 9
While you can use the headers attribute on <th> or <td> elements to associate table cells with their corresponding header cells in an HTML table, it is generally not recommended because it is more manual and error-prone than using the scope attribute. Additionally, if a table is too complex to be easily understood through assistive technologies, using the headers attribute may not be effective in improving accessibility. 91012
To improve accessibility for users with low vision, it is recommended to let the browser window determine the width of the table whenever possible, in order to reduce the need for horizontal scrolling. If cell widths need to be defined, it is best to use relative values such as percentages, rather than pixel values. It is generally best to avoid defining cell heights so that the cells can expand downward to accommodate their content. 12
To improve accessibility, it is recommended to avoid using empty cells in tables, as this may not be effectively conveyed to blind users. Instead of using white space for formatting a single table, consider using multiple tables or spanning multiple rows or cells where it makes sense. This can help to ensure that the table is effectively communicated to all users, including those who rely on assistive technologies. 13
Examples
Example of a complex table using some some of the features mention above:
At least on the first use of an abbreviation or acronym.
Rules
When utilizing the <abbr> element, it is essential to provide a definition of the abbreviation and spell it out in plain text when it is initially used.
The <abbr> element can be utilized alongside the <dfn> element to define abbreviations or acronyms when they are initially used.
For subsequent uses of an abbreviation, it is advisable to provide a link to the paragraph, heading, or site glossary where it is defined. This is because users may not navigate the site strictly from top to bottom or may not remember a particular definition. 3
In addition, you can also include the title attribute in the <abbr> element to create a tooltip with the definition.
If it is not possible to define and spell out the abbreviation in full text at the same place, you can create an anchor (<a>) element instead that links to a site glossary. This glossary can be positioned, for example, at the end of your page. 3
If it‘s not possible to provide both a definition at the same place and a site glossary, make sure to include the definition of the abbreviation in the title attribute of the <abbr> element. 3
Do not use both a full text explanation and a definition through the title attribute as this can result in the definition being repeated unnecessarily. 3
To help screen readers pronounce abbreviations correctly when the letters should be spelled one by one and not as a word, you can use periods or add spaces between characters. For example, the abbreviation "ITS" should be pronounced as "I.T.S." and not as "It‘s".
To avoid overwhelming the user with too many links to the same definition, it is sufficient to link super-high-frequency abbreviations to their definition relatively infrequently. 3
When using Leetspeak you should use an <abbr> element to create a clear text name for the leetseak content. See code example below. 4
Examples
Define abbreviation at the same place (recommended):
<p>
<p>
<dfn id="html"><abbr>HTML</abbr></dfn> which stands for HyperText Markup Language is a
markup language used to create the semantics and structure of a web page.
</p>
</p>
Define abbreviation at the same place, but don‘t spell it out. Instead the title attribute is used (less recommended):
<p>
<dfn id="html"><abbr title="HyperText Markup Language">HTML</abbr></dfn> is a
markup language used to create the semantics and structure of a web page.
</p>
When some part of the page content possibly has different directionality (LTR = left-to-right, RTL = right-to-left) than the rest of the page. 1
Rules
Most of the time the browser can figure the correct directionality out on its own, but not always, see example. 1
Its better to use the <dbi> element than to use the CSS rule "unicode-bidi: isolate", since it the HTML is more semantic this way and because browsers can ignore CSS styling. 1
The newer <bdi> and older <bdo> elements perform similar functions, but the former isolates the directionality inside the element from the surrounding content, while the latter does not. This is demonstrated in the example.
You can choose <bdi> over <bdo> to make sure, that the directionality is always isolated as expected.
Examples
Non-automatically distinguishable text directionality: 1
<bdi class="name">الرجل القوي إيان</bdi>: 4th place // Without the <bdi> element, ": 4" would also be interpreted right-to-left, since those characters are treated as neutral.
<bdo class="name" dir="rtl">الرجل القوي إيان</bdo>: 4th place // Since the right-to-left directionality is not isolated, this the ": 4" part will still be rendered right-to-left.
To provide a title for a referenced piece of creative work. 1
Rules
If you want to include a direct quote in your content, it is recommended to use the <q> or <blockquote> element along with its cite attribute instead of using the <cite> element. 1
Used to identify a word or phrase as a term, that has a corresponding definition when its first used. 1
Rules
The ancestor <p> element or the closest <section> ancestor of the <dfn> element is regarded as the definition of the term. 1 Except when:
you include a title attribute that contains the non-abbreviated term that is being defined (and nothing else). This attribute is then considered as the primary term being defined, rather than the text within the <dfn> element. However, the <dfn> element still requires text inside, which may be another variation of the term or an abbreviation. 1
the <dfn> element contains only an <abbr> element with a defined title attribute, then that title is regarded as the term being defined. 1
By incorporating an id attribute on the <dfn> element, you can establish a link to it using <a> elements. This should be done when the defined term reappears in the document. If the term appears frequently, link to its definition relatively infrequently. 14
It is possible to combine <dfn> elements and <abbr> elements. For examples of this, please refer to the HTML Element Abbreviation article. 1
In a <dl> list, the <dt> element does not solely represent something that is being defined. Rather, it signifies an association list with name-value pairs, such as questions and answers. Therefore, if you intend to define something within a <dl> list, you can include the <dfn> element within the <dt> element. 32
Examples
<p><dfn>ARIA</dfn> defines semantics that can be added elements.</p>
Use <del> elements to denote text as deleted from a document. 1
Use <ins> elements to denote text as added to a document. 2
Use <s> elements to denote text as no longer relevant or accurate. 5
Rules
It is recommended to use the <s> element in many situations instead of the <del> element, as the <del> element is specifically designed to indicate changes made to a document. Conversely, the <s> element can be used more generally. For instance, one can use the <s> element to indicate menu items that are sold out in a restaurant menu. 3
The <del> and <ins> elements both provide support for attributes that allow for the definition of the time of an edit and the URI of the resource that explains the edit. The "datetime" attribute can be used to specify the date and time of the edit, while the "cite" attribute can be used to provide a URI to a resource that provides further information about the edit. 2
It is not recommended to use the <del> and <ins> tags on multiple paragraphs simultaneously. Instead, it is better to use these tags to indicate edits, deletions, or insertions on each paragraph individually. This approach provides greater clarity and specificity regarding the edits being made to the content. 1
It is not recommended to wrap the <del>, <ins>, or <s> elements around a <li> or <tr> element to indicate the deletion, insertion, or strike-through of an entire list item or table row. Rather, it is best practice to place the <del>, <ins>, or <s> elements inside the <li> or <tr> elements to specify the specific changes made to the item or row. This approach provides greater accuracy and clarity about the edits being made. 1
Don‘t use CSS "line-through", since this is less semantic and is never conveyed to screen reader users. 3
Most screen readers do not announce the <del>, <ins>, and <s> elements by default. There is however a technique to let these elements get announced. This technique is added to the examples below.
It is important to note that some users may intentionally disable the announcement of certain content that creates unnecessary verbosity. While this technique will still provide an announcement for these users, it is best to use this method only when it is absolutely necessary to understand the content. This ensures that users who do not want the extra verbosity will not be burdened with unnecessary announcements. 6
The quality of the code may decrease with the use of this method as it involves adding content to the CSS. 4
Also users who deactivate CSS do not get these elements announced to them.
Use <strong> and <b> to set importance to text. This text is often rendered as bold text. 1
Use <em> and <i> to change articulation or tonality of the text. This text is often rendered as italic text. 1
Use <mark> to
supplement "pasted" text (like a quote, or code snippet) to highlight parts that are important in the context that surrounds this "pasted" text. 8
emphasize information that is pertinent to the user‘s ongoing activity, such as words that correspond with a search query. 7
Use <small>, according to the specification, for side comments like disclaimers, caveats, copyrights and so on.
At the time of writing the <small> tag is not exposed to the accessibility tree. Therefore the current use is only for styling purposes,
in which case you may be better of using CSS in order to differentiate between semantics and styling. 10
Rules
In theory, the <strong> and <em> tags are semantically meant for emphasizing text, whereas the <b> and <i> tags lack that semantic meaning. 1
Although in theory, screen readers could pronounce <strong> and <em> tags in a distinct voice or style, this is infrequently observed in practice (the same is applicable for <b> and <i> tags). 1
This is why it is not that critical which tag you use.
While some sources recommend not using <b> and <i> all together 2, other sources recommend the following 1:
Utilize <strong> and <em> tags when emphasizing text that is not only visually significant but also carries semantic importance. Like for:
Use <strong> tags for warning labels or other content that requires a high level of seriousness or urgency.
Use <strong> or <em> tags to emphasize a few crucial concepts or significant vocabulary items (if emphasized text is used in nearly every sentence, consider using <b> tags instead, as illustrated in the examples below).
Use <b> and <i> in these examples:
Use <b> tags to assist users of a visual browser in scanning for essential concepts within sentences.
Use <i> tags for academic conventions such as book and movie titles, foreign words, and variables in math.
Use <b> or <i> for design-related purposes.
It is possible to substitute both <b> and <i> tags with other HTML elements such as divs, which can have their styles set through CSS. The decision to do so depends on the preferred coding style. 2
Rather than relying solely on design elements, it is often better to use wording to highlight important concepts. This can be achieved by repeating or rephrasing important information or by explicitly using words like "important". The reason for this is that design elements may not be picked up by assistive technologies, potentially resulting in a loss of information. 2
You should also make sure to use the most fitting semantic element. Other options could also be: <cite> or <dfn>.
The <mark> element serves a different purpose than the <strong> and <b> elements. While <strong> and <b> are used to emphasize text by making it bold, the <mark> element is used to visually highlight important text within the original content. For instance, in a document describing exam content, an excerpt from a textbook that originally used <strong> to emphasize a warning could be marked with the <mark> element to indicate its relevance to the exam. 8
To increase the accessibility of the <mark> element you can add a announcements for assistive technologies to the element if it increases the usability in your specific use-case.
To do that add visibly hidden content via pseudo elements as Adrian Roselli suggests and as shown in the code below: 9
The <kbd> element denotes user input like keyboard buttons ("Ctrl + C") or voice commands. 1
The <samp> element in HTML is used to contain text that represents sample or quoted output from a computer program. 2
The <output> element is used to represent an output of a calculation by the website. 4
Rules
These <dbd> and <samp> elements does not seem to have any impact on assistive technologies. Therefore you may use them if you see fit, but they will not impact the accessibility of your website.
The <output> element is meant for dynamic calculations in contrast to the <samp> element which only represents static output. 4
The <output> element is often times implemented by user agents as a aria-live region. This means that changes inside the element are automatically announced by screen readers. 3
Use the <p> element to create a block of text that semantaically belongs together. Correctly used <p> elements can help assistive technology users navigate text. 1
Use the <br> element to introduce a line break in text that requires a particular format, such as a poem or an address, as a means of ensuring the desired layout. 3
Rules
Don‘t use the <p> element if a more suiting, more semantic elements exists. 2
Don‘t use <p> elements solely for styling purposes. The use should always be semantically meaningful. For example don‘t implement an empty <p> element just to create whitespace.
Don‘t use the <br> element to create space between independent text (text that does not belong together like an address or poem) or for other styling reasons. Use the <p> element or CSS styling instead. 4
For some notes about text layout, like text alignment, margins, line length see this sentence source. 5
Use the <pre> element for preformatted text that should be displayed exactly as formatted. Use-cases are formatted Code-snippets or ASCII art. 1
Rules
Always think about how the preformatted text will be presented to users for which the formatting gets lost. 1
For example ASCI art should probably be presented for assistive technology users as an image.
Two ways of present preformatted content that represents an image
Preformatted text content that represents an image could be represented as an image in two ways:
Using a <div> element with the aria role="img" and an aria-label and a <pre> inside: 3
Denotes a thematic break at the paragraph level, such as a shift in the setting of a narrative or a shift to a different subject within a section of a scholarly work. 1
Rules
It is intended to differentiate paragraphs or bocks of text from another. If another element already groups these blocks together (like a <section> element), then an <hr> element is not semantically needed. 1