The permalink for all templates in a directory can be set in a template directory data file. This can be used along with data variables to generate the ideal URLs.
For example, if you have pages in a posts subdirectory, but you want those pages to be at the root of the generated site, you might use something like this:
File: posts/posts.json
{
"permalink": "/.html"
}
Source: GitHub thread
Sometimes a website that seems clear and easy to use for sighted users can cause some confusion for those who rely on a screen reader for navigation.
In addition to semantic elements, we need to label regions to make a page easier to navigate.
When content is added for screen readers that would seem redundant to sighted users, or otherwise disrupt the design, it should be visually hidden. These styles are recommended by WebAIM for hiding content off-screen:
.sr-only {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
In CSS in Action WebAIM covers this and several other techniques for visually hiding content.
Nunjucks' Whitespace Control doesn't work the way I expected it to. So, I tried every variation of the syntax I could think of to see how it would render.