How to create better, more accessible WordPress themes

Photo of author
Written By Sami Keijonen

25 thoughts on “How to create better, more accessible WordPress themes”

  1. Great article, Sami! Thanks! One slight issue – I’d actually recommend using “ instead of using CSS generated content directly on the button. Screen readers can read generated content, but will ignore information marked as aria-hidden. Since the information in an icon font isn’t really very usable as a character, it’s best to be able to prevent those from being read by screen readers.

    • Thanks for comment Joe!

      So screen readers read content from CSS generated :before and :after pseudo-elements? I definitely did not know that.

      It would be awesome if you could give small snippet how we should use Menu toggle button with font icon, text and aria-hidden combo.

      • Here’s an example:

        https://gist.github.com/joedolson/113e0dff30a77d8b9f3c

        In this example, I’ve chosen to hide the text using the .screen-reader-text class; but that’s mostly for demonstration. I’d actually encourage people *not* to hide that text – it’s useful for all users, not just users of screen readers. The important part is that the container for the dashicon is concealed from screen readers, so they don’t potentially read the empty content.

        What will be read in an icon font is very unpredictable; but yes, they can read it. Here’s a great article about it: https://css-tricks.com/html-for-icon-font-usage/

        Accompanying the menu toggle above, the JS that opens the menu should also change the value of the aria-expanded attribute to true and update the text of the button to ‘Close Menu’.

        • Found it in the spam.

          Thanks for the gist example. And I agree, it’s useful for all users to show Open menu / Close Menu text. In that case we probably don’t even need the menu icon. But that’s another story.

      • Hey, Sami – I did write up a reply; but it seems to have gone missing. I’m assuming it’s been marked for moderation, since it contained a couple links – hopefully this message will bring that to attention.

  2. Love that you tied in the business case for accessibility. It’s a much easier sell to say “we can make more money this way” than “do this just because it’s the right thing to do.”

  3. Thank you so much for this amazing article!

    Do we have a list of screen reader devices and how they render the website? What’s is the important things that we should know about the ability of parsing and reading CSS/HTML of screen readers?

  4. Great article Sami,
    Very useful, thank you for sharing this.
    I do think most of us have got a good grip on ‘mobile-friendly’ design now, but the time is right for us all to really embrace ‘human-friendly’ web development. From both a human and business point of view, inclusive is a win-win.

  5. Thank you for this comprehensive article!

    We are working to improve accessibility in our Federal University’s website and one of the recommendations of our Government’s web standards is the use of “accesskey” attributes for skip links. Could someone please elaborate on why is this practice not allowed by the WP accessibility team?

  6. Great post. Forging new habits is never easy – but I realize how important it is for me to incorporate accessibility into my design and development process.

    My question: What is the purpose of the title tag for images in the WordPress Media manager? I understand why alt text is important – not sure what the value of the title tag is?

  7. Very informative post, it would be great if we have many more great looking themes that are accessible, I often find that people tend to think accessibility mean poor design/user experience. And yes your social sharing icons are not accessible with screen reader. Jetpack sharing buttons are accessible.

    • Great looking themes can be accessible, there is no doubt about that.

      And yes your social sharing icons are not accessible with screen reader.

      If you’re referring to this site, Brian will make some improvements ūüôā

  8. Thanks for the write up on such an important topic. I worked at an agency that specialized in the senior living (retirement) market and realized very early on just how important it is to build sites that are accessible. Every day more and more people who are seniors are hopping on the internet, many of them who have degenerative conditions where a bad design can truly affect how well they can use a site.

    Some of the biggest issues we would see were low contrast, poor choice of colors ( pale yellows and blues), confusing site architecture which was difficult for users with memory difficulties, and sometimes even kludgy mobile interfaces that were hard to use if someone had arthritis.

    The way we design websites can directly affect the physical well being of someone physically and mentally, especially if the site is important because it relates to their health such as a doctors website, or mobile device that they rely on for communications (screen reader).

Comments are closed.

A2 Hosting
Elementor
GoDaddy
Gravity Forms
Pagely
WordPress.com