WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Looking for very lightweight, accessible responsive static web templates - possibly a question for Jeremy Echols

for

From: Jeremy Echols
Date: May 26, 2020 10:47AM

I'm not sure why you called me out directly, but I've run into the same problems. I've been trying to figure out a nice Hugo theme for technical documentation, and even the simplest ones seem to be doing ridiculous things like disabling link focus.

The "Zen" theme, tagged as being accessible, is immediately busted when you start tabbing through the page - keyboard focus is lost for a bit somewhere in the main navigation, and even when you can find it, the difference in grays from a link to its focus state is barely perceptible to me (it goes from hex #333 to #666, which is a contrast ration of 2.2:1).

On the other hand, at a cursory glance, the "Cupper" theme appears to have accessibility built into the CSS. The demo isn't amazing (they failed to specify an alt attribute for the linked logo), but it's a lot better than Zen, and probably a great starting point for a simple static site.

-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Jonathan H
Sent: Monday, May 25, 2020 11:03
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: [WebAIM] Looking for very lightweight, accessible responsive static web templates - possibly a question for Jeremy Echols

I'm having a rather fruitless search for very small, lightweight, clean templates, possibly for use with HUGO static generator.

I just need a four-page static informational site for VI and sighted visitors alike.

While I'm reasonable with the accessibility part, I have a terrible eye for design, and every time I find what looks like a great template, it comes bundled with a ridiculous amount of bloat - why would I want jquery and 6 libraries?!?

I see that Yahoo's PureCSS has had a recent major update and this looks fairly clean: https://urldefense.com/v3/__https://purecss.io/layouts/marketing/__;!!C5qS4YX3!SnyeYEVj1ePmMVcCe_cNZJ3GV4ozeYxRIkc7PbKxLantxztM7AkfUxVlbX8f_ExF2A$

Or as an alternative, this is the list of Hugo themes tagged with
Accessible: https://urldefense.com/v3/__https://themes.gohugo.io/tags/accessible/__;!!C5qS4YX3!SnyeYEVj1ePmMVcCe_cNZJ3GV4ozeYxRIkc7PbKxLantxztM7AkfUxVlbX_KtWlLOQ$

Or there's even PureCSS-based Hugo themes: https://urldefense.com/v3/__https://themes.gohugo.io/tags/purecss__;!!C5qS4YX3!SnyeYEVj1ePmMVcCe_cNZJ3GV4ozeYxRIkc7PbKxLantxztM7AkfUxVlbX9xQK0uZQ$

So, I have a sort of shortlist, but my eye for design always thinks the basic text-only ones must be the most accesible, which isn't always true of course. So, do any of these stand out? Or does anyone have any other very lightweight go-to responsive accessible templates they'd recommend?

Many thanks.