Making this blog more accessible: the checklist

It is difficult for me to ignore the many a11y problems of this website. As a designer learning about inclusive practices and writing accessibility articles, I’m really concerned about this.

And yet, I’m not a developer. Which means I cannot write a full blog from scratch that meets all accessibility requirements. The easiest path for me to launch a self-hosted blog was to do it with WordPress and try to find a good enough theme. Accessible WordPress themes are rare and I couldn’t find one that suited my needs.

But I can tweak some HTML and CSS, and I can definitely try to learn a bit of PHP. So I bought this very nice theme from an independant developer, and I take a commitment to making it better overtime!

Here is a list of all identified accessibility issues that I intend to solve next. It will be updated regularly with new problems spotted, and solved ones.

Current identified issues

  • Provide enough spacing between lines of text
  • Ensure keyboard focus order is logical regarding visual layout
  • Provide clear, unambiguous focus styles
  • Link images should have a title
  • Size of body text should be bigger
  • Ensure PDF content is accessible (for PDF slide decks shared)
  • Provide a skip navigation link
  • Warn users of links that have unusual behaviors, like linking off-site, or loading a new tab
  • Use aria-hidden="true" for decorative elements

  • Social media icons should have text alternatives
  • Link of social media icons in footer and sidebar should have a title
  • Hide the decorative letter tag in categories for screen reader users
  • Get rid of the double menu in header

Solved issues

November 10, 2019

  • Text that appears on image overlays in list of articles should have sufficient contrast

November 8, 2019

  • “Reply” button under comments should be more obviously affordant
  • Make sure the purpose of a link is clearly described: “read more” vs. “read article”
  • “Read More” buttons should be links
  • All texts meet WCAG AA minimum contrast rating
  • All images should have an alt attribute
  • Zooming the text doesn’t break the layout
  • Remove underline styling on elements that are not links
  • Get rid of scroll to top button
  • Use well-established, therefore recognizable, icons and symbols. Remove cryptic icon that indicates a comment is from the post author.

November 7, 2019

  • Standard button green background color should meet WCAG AA contrasts requirements
  • Links in body copy should be correctly underlined
  • Links in body copy should have a purple :visited state

References used to build this checklist:

Did you spot more accessibility issues? Comment this article or contact me directly.

Leave a Reply

Your email address will not be published. Required fields are marked *