| Subject | Code | Description | Example |
|---|---|---|---|
| Semantic Meaning | <main>, <header>, <footer>, <nav>, <article>, <aside>, etc. | Using these tags introduced in HTML5 indicates the type of information the element contains. Asistive technologies use this information for better page summaries and navigation options. | |
| Alternate Text | <alt=""> | Provide a text alternative for an image in case an image fails to load, or for a screen reader. | <img src="my-cat.png" alt="My cat, Mr. Fluff"> |
| Headings | <h1>, <h2>, etc. | Screen readers can use headings to summarize, so it's important to use them orderly, and style as needed with CSS. Good example of semantic meaning. |
Good: <h1></h1>...<h2></h2> Bad: <h1></h1>...<h4></h4> |
| Figures | <figure>, <figcaption> | Using these two elements provides greater accessibility through semantic grouping and a text alternative. |
<figure> <img...>... <figcaption>... </figure> |
| Fieldset | <fieldset>, <legend> | Used to group radio buttons. <legend> is often used to provide a description. |
<fieldset> <legend>... ... </fieldset> |
| Tabindex | tabindex | Used to indicate an element can be focused on, i.e. tabbed to. '0' flows with other elements, positive values give a hierarchy, and negative values are complicated. Take care before using positive values, as they interrupt the flow of the page. tabindex also enables the CSS pseudo-class :focus. |
<div tabindex="1"> <div tabindex="0"> <div tabindex="2" :focus> |