hugo-theme-terminal icon indicating copy to clipboard operation
hugo-theme-terminal copied to clipboard

A11y check

Open Seirdy opened this issue 1 year ago • 1 comments

I did a quick accessibility check for this theme. It is usable but sub-optimal with assistive technologies (AT):

  1. 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>.
  2. 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.
  3. 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 a prefers-contrast: more media query.
  4. "Read More" links don't look interactive. An underline (ideal), a border, or removal (since the titles are already links) could work.
  5. Typo: the aria-label attribute was spelled as arialabel. The labels should ideally be unique, but a plain "Anchor" is usable enough for most.
  6. 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.
  7. Very minor issue: timestamps should be <time> elements.

Some issues that aren't strictly related to accessibility, but I encountered anyway:

  1. 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.

Seirdy avatar Sep 27 '22 20:09 Seirdy