Browse Source

change anchor rendering for better screen-reader compat

main
Noah Hall 2 years ago
parent
commit
76841963a6
3 changed files with 61 additions and 9 deletions
  1. +3
    -6
      .eleventy.js
  2. +2
    -3
      README.md
  3. +56
    -0
      _includes/markdown-it-accessible-anchor.js

+ 3
- 6
.eleventy.js View File

@ -5,7 +5,7 @@ const pluginRss = require("@11ty/eleventy-plugin-rss");
const pluginSyntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
const pluginNavigation = require("@11ty/eleventy-navigation");
const markdownIt = require("markdown-it");
const markdownItAnchor = require("markdown-it-anchor");
const markdownItAccessibleAnchor = require("./_includes/markdown-it-accessible-anchor.js");
module.exports = function(eleventyConfig) {
eleventyConfig.addPlugin(pluginRss);
@ -60,11 +60,8 @@ module.exports = function(eleventyConfig) {
html: true,
breaks: true,
linkify: true
}).use(markdownItAnchor, {
permalink: true,
permalinkClass: "direct-link",
permalinkSymbol: "#"
}).use(require('markdown-it-footnote'));
}).use(markdownItAccessibleAnchor, {
}) .use(require('markdown-it-footnote'));
eleventyConfig.setLibrary("md", markdownLibrary);
// Browsersync Overrides


+ 2
- 3
README.md View File

@ -10,12 +10,11 @@ Render with `gulp` or check the list of exports in `gulpfile.js` for individual
## TODO:
- Specific/soon:
- [ ] update git hook for more granular gulp execution (most notably, don't run `deps` if no changes to `package.json`
- [ ] better text contrast (accessibility concern)
- [X] update git hook for more granular gulp execution (most notably, don't run `deps` if no changes to `package.json`
- [ ] post more haha
- [ ] december birding trip
- General/someday:
- [ ] consider automated deploy via gitea?
- [ ] better thumbnail generation via ML thumbnail package?
- [ ] improve webmention support?
- [ ] [improve anchor-link accessibility](https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/)
- [X] [improve anchor-link accessibility](https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/)

+ 56
- 0
_includes/markdown-it-accessible-anchor.js View File

@ -0,0 +1,56 @@
/*
* original from Amber Wilson - no license information available.
* original file: https://github.com/ambrwlsn/website/blob/da2056c316fa45fa58b443b07be1ac4c5080912e/helpers/markdown-anchor-wat.js#L1
* more info: https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
* file has been modified!!
*/
const slugify = (s) =>
encodeURIComponent(
String(s)
.trim()
.toLowerCase()
.replace(/\s+/g, '-')
);
const defaultOptions = {
divClass: 'heading-wrapper',
anchorClass: 'anchor-link',
linkIcon: '#',
};
const targets = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
const anchor = (md, options) => {
options = Object.assign({}, defaultOptions, options);
md.renderer.rules.heading_open = function(tokens, index) {
const contentToken = tokens[index + 1];
const slug = slugify(contentToken.content);
if (targets.indexOf(tokens[index].tag) > -1) {
return `
<div class="${options.divClass}">
<${tokens[index].tag} id="${slug}">`;
}
return `<${tokens[index].tag}>`;
};
md.renderer.rules.heading_close = function(tokens, index) {
const contentToken = tokens[index - 1];
const slug = slugify(contentToken.content);
if (targets.indexOf(tokens[index].tag) > -1 ) {
return `
</${tokens[index].tag}>
<a class="${options.anchorClass}" href="#${slug}">
<span aria-hidden="true">${options.linkIcon}</span>
<span class="hidden">Section titled ${contentToken.content}</span>
</a>
</div>`;
}
return `</${tokens[index].tag}>`;
};
};
module.exports = anchor;

Loading…
Cancel
Save