hugo-theme-terminal
hugo-theme-terminal copied to clipboard
A11y check
I did a quick accessibility check for this theme. It is usable but sub-optimal with assistive technologies (AT):
- Each page should have one level-one heading (
<h1>
) to describe the individual page. Right now, home-pages have one<h1>
per featured article and possibly another one for the homepage blurb. This makes it harder to grasp the page/section hierarchy. Proposed fix: Make one<h1>
on the page, use a<h2>
for the full article list, and make each article heading a<h3>
. - The "menu" and "show more" toggles should be
button
elements (or perhaps checkboxes). A button would be ideal. There's also the option of using a<details>
element (a<summary>
has button semantics), or simply making the menu always-visible. - Article tags should be de-emphasized by altering their color values, not by reducing their opacity. Using
opacity
causes them to appear faded even when using forced-color modes (e.g. Windows High Contrast Mode, Firefox's color overrides in its "manage colors" preferences dialog). Ideally, the de-emphasis would respond to aprefers-contrast: more
media query. - "Read More" links don't look interactive. An underline (ideal), a border, or removal (since the titles are already links) could work.
- Typo: the
aria-label
attribute was spelled asarialabel
. The labels should ideally be unique, but a plain "Anchor" is usable enough for most. - Each article should be an
<article>
(or equivalent sectioning element) to help navigate lists of posts or identify the main textual part of the page. - Very minor issue: timestamps should be
<time>
elements.
Some issues that aren't strictly related to accessibility, but I encountered anyway:
- The menu doesn't work without JS; it remains always-expanded on mobile, covering parts of the page. The "show more" button on wide-viewports also doesn't work without JS. This hurts compatibility with the Tor Browser, among other things. A good fix would be to use progressive enhancement: make all menu links always-visible, and overriding that with JS for users who have scripts enabled.