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.
