Add unique aria labels to landmarks

This commit is contained in:
Helen Chong 2024-07-14 10:52:19 +08:00
parent 8d8a6f01ad
commit eb5f26348a
5 changed files with 13 additions and 10 deletions

View File

@ -12,7 +12,12 @@ const markdownItAnchor = require("markdown-it-anchor");
module.exports = function (eleventyConfig) {
// Installed Plugins
eleventyConfig.addPlugin(pluginTOC, { tags: ['h2', 'h3', 'h4', 'h5'] });
eleventyConfig.addPlugin(pluginTOC, {
tags: ['h2', 'h3', 'h4', 'h5', 'h6'],
wrapper: function (toc) {
return `<nav class="toc" aria-label="Table of contents">${toc}</nav>`;
},
});
eleventyConfig.addPlugin(embedEverything, { add: ['soundcloud'] });
// Configure slug filter

View File

@ -1,7 +1,6 @@
<header class="main__header">
{% if isArticle or hasBreadcrumbs %}
<nav>
<h2 class="visually-hidden">Breadcrumbs</h2>
<nav aria-label="Breadcrumbs">
<ol class="breadcrumbs">
{% set breadcrumbNavPages = collections.all | eleventyNavigationBreadcrumb(articleTitle or pageTitle or title) %}
{%- for entry in breadcrumbNavPages %}
@ -48,8 +47,7 @@
{{ content | safe }}
{% if tags and tags.includes("posts") %}
<nav class="blog__post--pagination">
<h2 class="visually-hidden">Next and Previous Blog Posts</h2>
<nav class="blog__post--pagination" aria-label="Next and Previous Blog Posts">
{%- if collections.posts %}
{%- set previousPost = collections.posts | getPreviousCollectionItem %}
{%- set nextPost = collections.posts | getNextCollectionItem %}

View File

@ -14,7 +14,7 @@ https://kalechips.net/projects/snippets/burger #}
{%- endif -%}
{% endset %}
<nav class="navbar">
<nav class="navbar" aria-label="Top level">
<details class="navbar__burger">
<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">
@ -22,7 +22,7 @@ https://kalechips.net/projects/snippets/burger #}
</svg>
Navigation
</summary>
<nav class="navbar__menu">
<nav class="navbar__menu" aria-label="Top level hamburger menu">
<ul class="navbar__menu--links">
{{ navLinksEl | safe }}
<li class="skip"><a href="#toggle">Close Menu</a></li>

View File

@ -1,4 +1,4 @@
<aside class="left-sidebar">
<aside class="left-sidebar" aria-label="Left sidebar">
<details-utils force-open="(min-width: 60rem)" force-restore>
<details class="toc__wrapper sidebar--sticky">
<summary class="toc__heading">

View File

@ -1,5 +1,5 @@
<aside class="right-sidebar">
<nav class="content__nav sidebar--sticky">
<aside class="right-sidebar" aria-label="Right sidebar">
<nav class="content__nav sidebar--sticky" aria-label="Sidebar">
<h2 class="content__nav--title">My Contents</h2>
<ul class="content__nav--links">
{% for archive in collections.archive %}