Making this blog more accessible: the checklist

It is difficult for me to ignore the many accessibility 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

  • Ensure keyboard focus order is logical regarding visual layout
  • Provide clear, unambiguous focus styles
  • Link images should have a title
  • Ensure PDF content is accessible (for PDF slide decks shared)
  • Provide a “skip to main content” link for screen reader users
  • Warn users of links that have unusual behaviors, like linking off-site, or loading a new tab
  • Use aria-hidden="true" for all decorative elements

  • Social media icons should have text alternatives

  • Link of social media icons in footer and sidebar should have a title

Solved issues

January 31, 2020

  • Use aria-hidden="true" for decorative elements such as the decorative letter tag for categories and separator dots in the author meta.
  • Get rid of the inaccessible search bar

January 18, 2020

  • Get rid of the double menu in header

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 *