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) { module.exports = function (eleventyConfig) {
// Installed Plugins // 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'] }); eleventyConfig.addPlugin(embedEverything, { add: ['soundcloud'] });
// Configure slug filter // Configure slug filter

View File

@ -1,7 +1,6 @@
<header class="main__header"> <header class="main__header">
{% if isArticle or hasBreadcrumbs %} {% if isArticle or hasBreadcrumbs %}
<nav> <nav aria-label="Breadcrumbs">
<h2 class="visually-hidden">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 %}
@ -48,8 +47,7 @@
{{ content | safe }} {{ content | safe }}
{% if tags and tags.includes("posts") %} {% if tags and tags.includes("posts") %}
<nav class="blog__post--pagination"> <nav class="blog__post--pagination" aria-label="Next and Previous Blog Posts">
<h2 class="visually-hidden">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 %}

View File

@ -14,7 +14,7 @@ https://kalechips.net/projects/snippets/burger #}
{%- endif -%} {%- endif -%}
{% endset %} {% endset %}
<nav class="navbar"> <nav class="navbar" aria-label="Top level">
<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 +22,7 @@ https://kalechips.net/projects/snippets/burger #}
</svg> </svg>
Navigation Navigation
</summary> </summary>
<nav class="navbar__menu"> <nav class="navbar__menu" aria-label="Top level hamburger menu">
<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>

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-utils force-open="(min-width: 60rem)" force-restore>
<details class="toc__wrapper sidebar--sticky"> <details class="toc__wrapper sidebar--sticky">
<summary class="toc__heading"> <summary class="toc__heading">

View File

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