Semantic HTML

HTML (HyperText Markup Language) is a major part of building an accessible website. There are a ton of elements that provide behavior that works with the keyboard and screen readers for free.

Learn about the elements and use them! My favorite resource is MDN (opens in a new tab).

Each HTML tag you use becomes an object in the browser (i.e., part of the Document Object Model). Elements have names, properties, and attributes that are important and helpful to users of Assistive Technology. This is why it's important to avoid using generic elements for everything when more dedicated built-in elements exist.

Avoid DIV soup

Unfortunately, many sites overuse the <div> element rather than creating a semantic structure with landmarks, forms, buttons, etc.

When the DOM on a site shows DIVs all the way down, we call it "Div Soup" or "Divitis". It should really be avoided at all costs.

Use built-in functionality first

Use HTML first and benefit from all of its built-in functionality! Check MDN (opens in a new tab) for elements and attributes you might not know about.

There are numerous structural and grouping elements you can use to build a semantic outline. There are a ton of elements that provide interactive functionality accessibly, too!

Headings

• Use h1-h6 headings to create an overall page outline.
• Style headings with CSS so you can choose the right level for the content!
• Avoid the HTML5 heading algorithm (opens in a new tab) as it was never implemented for Assistive Tech (AT).

Landmark elements

• Landmark elements create structure, too (<nav>, <main>, <section>, <header>, etc.). They give semantic meaning and functionality in AT.
• Use aria-label or aria-labelledby to give unique labels to nav and section elements.
• You can still wrap lists of links in nav landmarks.

Lists

• Don‘t sleep on unordered and ordered lists: <ul> and <ol>
• Lists are automatically counted in AT. Safari might need a little help (opens in a new tab).
• Ensure lists have only listitems as direct descendants.

Forms

• There are some powerful elements for accessibility: <form> <fieldset> and <legend>, and so much more.
• Labels are essential for inputs/textareas/etc. in AT.
• Explicit labels use for and id. Implicit is when a label wraps an input.
• Form controls are getting easier to style!
• Only certain elements can be labeled/named.

Buttons and Links

• HTML buttons give a lot of behavior for free: focusability, built-in role, and keyboard click events.
• Links also have a ton of built-in behavior, like history.
• Links need href to be keyboard accessible.
• Buttons toggle things, while links navigate. Try to use them for their intended purpose!

Details and Summary

• The HTML details and summary elements are a built-in accordion-style disclosure widget.
• They work pretty well but be sure to test your implementation.