Use visually hidden and aria-labelledby to label landmarks
This commit is contained in:
parent
5ee21f512c
commit
4d7ff32c81
|
@ -1,6 +1,7 @@
|
||||||
<header class="main__header">
|
<header class="main__header">
|
||||||
{% if isArticle or hasBreadcrumbs %}
|
{% if isArticle or hasBreadcrumbs %}
|
||||||
<nav aria-label="Breadcrumbs">
|
<nav aria-labelledby="breadcrumbs-title">
|
||||||
|
<h2 class="visually-hidden" id="breadcrumbs-title">Breadcrumbs</h2>
|
||||||
<ol class="breadcrumbs">
|
<ol class="breadcrumbs">
|
||||||
{% set breadcrumbNavPages = collections.all | eleventyNavigationBreadcrumb(articleTitle or pageTitle or title) %}
|
{% set breadcrumbNavPages = collections.all | eleventyNavigationBreadcrumb(articleTitle or pageTitle or title) %}
|
||||||
{%- for entry in breadcrumbNavPages %}
|
{%- for entry in breadcrumbNavPages %}
|
||||||
|
@ -47,7 +48,8 @@
|
||||||
{{ content | safe }}
|
{{ content | safe }}
|
||||||
|
|
||||||
{% if tags and tags.includes("posts") %}
|
{% if tags and tags.includes("posts") %}
|
||||||
<nav class="blog__post--pagination" aria-label="Next and Previous Blog Posts">
|
<nav class="blog__post--pagination" aria-labelledby="nextprev-title">
|
||||||
|
<h2 class="visually-hidden" id="nextprev-title">Next and Previous Blog Posts</h2>
|
||||||
{%- if collections.posts %}
|
{%- if collections.posts %}
|
||||||
{%- set previousPost = collections.posts | getPreviousCollectionItem %}
|
{%- set previousPost = collections.posts | getPreviousCollectionItem %}
|
||||||
{%- set nextPost = collections.posts | getNextCollectionItem %}
|
{%- set nextPost = collections.posts | getNextCollectionItem %}
|
||||||
|
|
|
@ -4,8 +4,8 @@
|
||||||
{% endblock -%}
|
{% endblock -%}
|
||||||
|
|
||||||
{%- if tags and tags.includes("shrine pages") %}
|
{%- if tags and tags.includes("shrine pages") %}
|
||||||
<nav class="footer__shrines">
|
<nav class="footer__shrines" aria-labelledby="backto-title">
|
||||||
<p>Back to:</p>
|
<p id="backto-title">Back to:</p>
|
||||||
<ul class="footer__links">
|
<ul class="footer__links">
|
||||||
<li><a href="/shrines/">Shrine Directory</a></li>
|
<li><a href="/shrines/">Shrine Directory</a></li>
|
||||||
<li><a href="/">{{ sitemeta.siteName }}</a></li>
|
<li><a href="/">{{ sitemeta.siteName }}</a></li>
|
||||||
|
|
|
@ -14,7 +14,8 @@ https://kalechips.net/projects/snippets/burger #}
|
||||||
{%- endif -%}
|
{%- endif -%}
|
||||||
{% endset %}
|
{% endset %}
|
||||||
|
|
||||||
<nav class="navbar" aria-label="Top level">
|
<nav class="navbar" aria-labelledby="top-level-nav-title">
|
||||||
|
<h2 class="visually-hidden" id="top-level-nav-title">Top Level Navigation Bar</h2>
|
||||||
<details class="navbar__burger">
|
<details class="navbar__burger">
|
||||||
<summary class="navbar__toggle" id="toggle">
|
<summary class="navbar__toggle" id="toggle">
|
||||||
<svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
@ -22,7 +23,8 @@ https://kalechips.net/projects/snippets/burger #}
|
||||||
</svg>
|
</svg>
|
||||||
Navigation
|
Navigation
|
||||||
</summary>
|
</summary>
|
||||||
<nav class="navbar__menu" aria-label="Top level hamburger menu">
|
<nav class="navbar__menu" aria-labelledby="hamburger-nav-title">
|
||||||
|
<h3 class="visually-hidden" id="hamburger-nav-title">Hamburger Menu</h3>
|
||||||
<ul class="navbar__menu--links">
|
<ul class="navbar__menu--links">
|
||||||
{{ navLinksEl | safe }}
|
{{ navLinksEl | safe }}
|
||||||
<li class="skip"><a href="#toggle">Close Menu</a></li>
|
<li class="skip"><a href="#toggle">Close Menu</a></li>
|
||||||
|
|
|
@ -3,7 +3,8 @@
|
||||||
{% set nextLabel = "Older" %}
|
{% set nextLabel = "Older" %}
|
||||||
{% set lastLabel = "Oldest" %}
|
{% set lastLabel = "Oldest" %}
|
||||||
|
|
||||||
<nav aria-label="pagination" class="pagination__wrapper">
|
<nav aria-labelledby="pagination-title" class="pagination__wrapper">
|
||||||
|
<h2 class="visually-hidden" id="pagination-title">Pagination</h2>
|
||||||
<ul class="pagination">
|
<ul class="pagination">
|
||||||
<li>
|
<li>
|
||||||
{% if pagination.href.first %}
|
{% if pagination.href.first %}
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
<aside class="right-sidebar">
|
<aside class="right-sidebar" aria-label="Right sidebar">
|
||||||
<div class="shrine__info sidebar--sticky">
|
<div class="shrine__info sidebar--sticky">
|
||||||
<h2>About</h2>
|
<h2>About</h2>
|
||||||
{% block shrineAbout %}
|
{% block shrineAbout %}
|
||||||
|
|
|
@ -5,8 +5,8 @@ articleElement: true
|
||||||
|
|
||||||
{% set currentUrl %}{{ page.url }}{% endset %}
|
{% set currentUrl %}{{ page.url }}{% endset %}
|
||||||
|
|
||||||
<nav class="changelog__nav">
|
<nav class="changelog__nav" aria-labelledby="changelog-nav-title">
|
||||||
<p class="changelog__nav--title">Changelog Archive:</p>
|
<p class="changelog__nav--title" id="changelog-nav-title">Changelog Archive:</p>
|
||||||
<ul class="changelog__nav--links">
|
<ul class="changelog__nav--links">
|
||||||
<li><a
|
<li><a
|
||||||
{% if currentUrl === "/changelogs/" %}aria-current="page"{% endif %}
|
{% if currentUrl === "/changelogs/" %}aria-current="page"{% endif %}
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<aside class="right-sidebar" aria-label="Right sidebar">
|
<aside class="right-sidebar" aria-label="Right sidebar">
|
||||||
<nav class="content__nav sidebar--sticky" aria-labelledby="my-contents">
|
<nav class="content__nav sidebar--sticky" aria-labelledby="my-contents-title">
|
||||||
<h2 class="content__nav--title" id="my-contents">My Contents</h2>
|
<h2 class="content__nav--title" id="my-contents-title">My Contents</h2>
|
||||||
<ul class="content__nav--links">
|
<ul class="content__nav--links">
|
||||||
{% for archive in collections.archive %}
|
{% for archive in collections.archive %}
|
||||||
<li><a href="{{ archive.url }}">{{ archive.data.title }}</a></li>
|
<li><a href="{{ archive.url }}">{{ archive.data.title }}</a></li>
|
||||||
|
|
|
@ -14,7 +14,8 @@ isContentDivided: true
|
||||||
<h2>Links by Category</h2>
|
<h2>Links by Category</h2>
|
||||||
|
|
||||||
<p>Use the following tabs to view my link collection by category.</p>
|
<p>Use the following tabs to view my link collection by category.</p>
|
||||||
<nav>
|
<nav aria-labelledby="tabs-title">
|
||||||
|
<h3 class="visually-hidden" id="tabs-title">Tabs Group</h3>
|
||||||
<ul class="tabs">
|
<ul class="tabs">
|
||||||
{% for group in linkGroups %}
|
{% for group in linkGroups %}
|
||||||
<li><a class="tab__btn" href="#{{ group.data.title | slugify }}">{{ group.data.title }}</a></li>
|
<li><a class="tab__btn" href="#{{ group.data.title | slugify }}">{{ group.data.title }}</a></li>
|
||||||
|
|
Loading…
Reference in New Issue