Site update: a new taxonomy index and a11y improvements

Just pushed an update to this site.

The Browse page is now mainly an index of taxonomies and archives (years, post formats, categories, tags). This new index replaces the opacity-based tag cloud. I kind of miss it, but it was problematic. Very hard to digest, and the lighter greys were way too low-contrast.

Besides the index, most of the changes are related to accessibility. I focused on making the tabbing experience a bit better, introducing a couple skip links. Note that I haven’t totally ironed out the tabbing… Most of my manual testing for this update was done in Chrome. I checked it briefly in Safari and it’s pretty weird, but I think it may have to do with the default Safari settings. I haven’t adjusted these yet, read more about Safari tab settings on a11yproject.com. Besides the tabbing, I also had a handful of links that weren’t suitably descriptive, particularly on the new term index. I added more aria-label attributes where I could. See the “Using aria-label for link purpose” page on the WCAG wiki for more info.

I’m trying to work on accessibility a bit more on an ongoing basis. Need to take a little dive in to this Hacker News thread, via this tweet.

See also:

There are probably a million a11y optimisations I can / should still make on this site. Suggestions are very welcome.

WordPress security resources

Links to a few of the security resources I find useful, some WordPress-specific and some more general.

A note about that “step-by-step” guide: it’s pretty decent, but IMO Wordfence is a better security plugin to go with. Sucuri is maybe more user-friendly, but Wordfence comes with more out-of-the-box (incl. two factor authentication and login limiting) and the settings seem more granular. Doesn’t hurt to try both though to see what’s the best fit.


Last edited 22 June 2019

WordPress function for images with ‘srcset’ attribute

Wrote a function returning an image element with srcset and sizes attributes. See this Gist for the function and this Gist for an example of the function in use (would need to be within the WP loop).

Wanted to give a front-end dev like Sam the ability to define the important bits, including the default image size for the src attribute, the media queries for the sizes attribute, and classes for the img element if necessary.

Edit 23 Jan 2019
This isn’t necessary anymore, responsive images have been part of WP core since v4.4. They’re implemented on wp_content automatically via a filter. Use their related functions if you need to do something custom. Responsive images are behaving a little erratically on my site though, so will have to take a look at why that might be happening.