Semantic HTML
Understand when and how to use semantic HTML to improve the experience of the largest number of users possible.
Semantic HTML provides meaning to the content of a web page. It involves using the correct HTML element for the job. Semantic HTML breaks the page up into meaningful sections.
Many groups of people benefit from properly used semantic HTML. Using the correct elements allows assistive technology to accurately convey the purpose of the content to the user. Without it, they will not be able to navigate easily. Other benefits of using semantic HTML are SEO and code readability.
HTML validators, automated tooling, unit tests, and linters are a few ways to test for proper HTML. Most automated tools can catch some incorrect usage of HTML elements. For example, if heading levels are out of order, it will be reported as a violation. Keep in mind that automated tools only catch around 20-25% of accessibility errors.
This is a subset of the tools available:
In your designs, annotate what HTML elements should be used for various parts of the design, if appropriate. Understand that most designs are achievable with CSS alone, agnostic of the HTML elements used.
Think about the content that will populate an element in order to determine what HTML element should be used. Are you building a navigation? Use the <nav> element instead of nested <div> elements. You may need to add interactivity to more complex elements, such as <dialog>. Some elements may require additional ARIA attributes to convey things such as state, but be careful to use these only when necessary.
<h1> tag for a heading that should be an <h3> because the visual style of the <h1> is desiredtitle attribute<div> instead of a <p>aria-label on a non-interactive element such as a <div>id="anchor"<hr> element not being marked as decorativerole="presentation" or aria-hidden="true" to elements that are for decorative purposes onlyScreen readers and other assistive technologies convey the information to the user in the order that it is marked up in the code, not necessarily how it looks on the page. Ensure the order matches a logical order of information presented. One way to verify this is to view the page without styles and see if the order of content is logical.