WAI-AREA Landmark roles

All content should be within ARIA landmark roles. Roles should not be repeated on a single page.

Header

<!-- One / page -->
<header role="banner">

</header>

"h5_header": {
  "prefix": "h5_header",
  "body": [
    "<!-- One / page -->",
    "<header role=\"banner\">",
    "",
    "</header>"
  ],
  "description": "header"
}

Nav

<!-- One / page -->
<nav role="navigation">

</nav>

"h5_nav": {
  "prefix": "h5_nav",
  "body": [
    "<!-- One / page -->",
    "<nav role=\"navigation\">",
    "",
    "</nav>"
  ],
  "description": "nav"
}

Main

<!-- One / page -->
<main role="main">

</main>

"h5_main": {
  "prefix": "h5_main",
  "body": [
    "<!-- One / page -->",
    "<main role=\"main\">",
    "",
    "</main>"
  ],
  "description": "h5_main"
}

Contentinfo / Footer

<!-- One / page -->
<footer role="contentinfo">

</footer>

"h5_contentinfo": {
  "prefix": "h5_footer",
  "body": [
    "<!-- One / page -->",
    "<footer role=\"contentinfo\">",
    "",
    "</footer>"
  ],
  "description": "h5_contentinfo"
}

Search Form

<!-- One / page -->
<form role="search">

</form>

"h5_search": {
  "prefix": "h5_search",
  "body": [
    "<!-- One / page -->",
    "<form role=\"search\">",
    "",
    "</form>"
  ],
  "description": "h5_search"
}

Complementary Aside

<!-- One / page -->
<aside role="complementary">

</aside>

"h5_complementary": {
  "prefix": "h5_aside",
  "body": [
    "<!-- One / page -->",
    "<aside role=\"complementary\">",
    "",
    "</aside>"
  ],
  "description": "h5_complementary"
}

Extra info

aria-label

Assign non-visible text to enhance the description of an element. Can be used on any element to add more description. Also consider aria-labelledby to point to another element that holds the label text.

<a href="" aria-label="Read more about of Mystical Animals">Read more</a>
<h2 aria-label="Unicorns seen during ancient times">Unicorns</h2>

"h5_arial-label": {
  "prefix": "h5_aria-label",
  "body": [
    "<!--",
    "Assign non-visible text to enhance the description of an element.",
    "Can be used on any element to add more description.",
    "Also consider aria-labelledby to point to another element that holds the label text.",
    "-->",
    "<a href=\"\" aria-label=\"Read more about of Mystical Animals\">Read more</a>",
    "<h2 aria-label=\"Unicorns seen during ancient times\">Unicorns</h2>"
  ],
  "description": "h5_arial-label"
}

aria-details

Assign the description of an element to other elements on the page.

<img aria-details="#infographic-desc" src="big-complex-infographic.jpg" alt="">

<div id="infographic-desc">
  <h2>All about unicorns</h2>
  <h3>Horns</h3>
  <ul>
    <li></li>
    <li></li>
</div>

"h5_aria-details": {
  "prefix": "h5_aria-details",
  "body": [
    "<!--",
    "Assign the description of an element to other elements on the page.",
    "-->",
    "<img aria-details=\"#infographic-desc\" src=\"big-complex-infographic.jpg\" alt=\"\">",
    "",
    "<div id=\"infographic-desc\">",
    "  <h2>All about unicorns</h2>",
    "  <h3>Horns</h3>",
    "  <ul>",
    "    <li></li>",
    "    <li></li>",
    "</div>"
  ],
  "description": "h5_aria-details"
}

role="presentation"

Force the browser to ignore the element because it’s not necessary for understanding the content. Good for hiding images that are purely decoration.

<img src="…" alt="" role="presentation">

"h5_role-presentation": {
  "prefix": "h5_role-presentation",
  "body": [
    "<!--",
    "Force the browser to ignore the element because it’s not necessary for understanding the content.",
    "Good for hiding images that are purely decoration.",
    "-->",
    "<img src=\"\" alt=\"\" role=\"presentation\">"
  ],
  "description": "h5_role-presentation"
}

aria-hidden="true"

Force the browser to completely ignore an element from the accessibility tree. Usually paired with the hidden attribute.

<div aria-hidden="true" hidden>

</div>

"h5_aria-hidden": {
  "prefix": "h5_aria-hidden",
  "body": [
    "<!--",
    "Force the browser to completely ignore an element from the accessibility tree.",
    "Usually paired with the hidden attribute.",
    "-->",
    "<div aria-hidden=\"true\" hidden>",
    "",
    "</div>"
  ],
  "description": "h5_aria-hidden"
}

HTML Semantics cheatsheet

`<title>`

Second most important piece of content. Shown in the browser tab & search results. Should be unique for every page on the site

`<header>`

When inside <body> it's the website masthead. When inside <article> it's the most important information.

`<footer>`

When inside <body> it's the website footer. When inside <article> it's the least important information.

`<main>`

Primary content of the page.

`<nav>`

Defines a group a navigation links.

jhahspu/html_acc-snippets.md