-
Notifications
You must be signed in to change notification settings - Fork 0
Accessibility Cheatsheet
JessicaOPRD edited this page Jun 23, 2023
·
13 revisions
Documentation has improved greatly in the past few years especially on MDN. As I review practices I will keep a list of shorthand notes.
🔗 MDN: HTML Content Categories
🔗 MDN: Using ARIA Roles, States, and Properties
- Use implicit roles over explicit ones whenever possible
- Use landmarks and "skipnavs"
| Tag Name | Number | Common Uses | ARIA Role (implicit) | Role Type | Notes |
|---|---|---|---|---|---|
<body> |
1️⃣ | generic |
| Tag Name | Number | Common Uses | ARIA Role (implicit) | Role Type | Notes |
|---|---|---|---|---|---|
<nav> |
♾️ | Menus, tables of content, indexes | navigation |
Landmark | ⚪ Primary navigational elements only, a footer index does not need it ⚪ Parent to ol/li navigational menus ⚪ Can be used around paragraph navigation ("Welcome to my page, where you can see my art, my photos...") |
<article> |
♾️ | Independent potentially distributable/syndicated unit — Forum post, blog entry, item card, widget — can have child sections |
article |
Document structure | ⚪ If self-contained and could be used similarly in more than one place, it is an article ⚪ Should have a heading tag ⚪ Should have time tag ⚪ Can be nested where relationships exist: 1️⃣ Blog Post ♾️ Blog Post Comments |
<section> |
♾️ | Generic sectioning typically with a header |
region if given name |
Landmark | ⚪ Many potential uses, serves as a fallback sectioning element when a better one does not exist ⚪ Use div for style-only elements |
<aside> |
♾️ | Sidebars, callouts | complementary |
Landmark | ⚪ Nothing in documentation specifies this is a good use for sidebar navigation? ⚪ Also flow content |
| Tag Name | Number | Common Uses | ARIA Role (implicit) | Role Type | Notes |
|---|---|---|---|---|---|
<header> |
♾️ | Container for logo, nav, search, or nested in sectioning content (article) |
banner if not nested in sectioning content |
Landmark | ⚪ Seen on first website |
<footer> |
♾️ | Document footer, or nested in sectioning content (article) |
contentinfo |
Landmark | ⚪ Use role="contentinfo" as bugfix for Safari 13 |
| Tag Name | Number | Common Uses | ARIA Role (implicit) | Role Type | Notes |
|---|---|---|---|---|---|
<main> |
1️⃣ | Flow content such as article, aside, h1, table
|
main |
Landmark | ⚪ Do not include child elements that will repeat across pages, such as navigation — page-level content only |
Testing what this does?