Category: CSS

The Genesis Framework is my favorite tool to build a WordPress website. And with the next update (version 2.2) a lot of accessibility features and fixes will be added. But a framework is no child theme.
The HTML5 themes you can purchase with StudioPress have a beautiful responsive menu for the primary navigation. And that menu is completely inaccessible for keyboard and screen reader users.

What’s wrong?

The HTML code to show the responsive menu is:

<div class="responsive-menu-icon"></div>

A div is not focusable, if you tab though a page the menu is skipped and you have no way to open it, only by using a mouse. And also the div is an empty container, with no content.

What needs to be changed?

Change the <div> to a <button>, a button is focusable and clickable

Add some text inside the <button></button> to tell a screen reader user what the button is about. You can make this visibly hidden by using the screen-reader-text class

Tell a screen reader user if the menu is open or closed by adding dynamically aria-expanded=”false” or aria-expanded=”true”

You have to add the screen-reader-text class and maybe change the CSS .responsive-menu-icon to style the button so it fits your theme.

So: by changing a few lines of JavaScript and adding a few lines of CSS you turn your responsive menu into a perfectly accessible awesome responsive menu.

Discussion

Yes, this is a quick and dirty fix. There’s now untranslatable hardcoded text in the JavaScript, this could be done way better and cleaner. But you’ve got the picture of what needs to be changed. If you are a JavaScript pro: all help is welcome 🙂

Imagine you are blind, how do you understand a website? You would use a screen reader. All the text in a website is read out loud for you, from top to bottom. To navigate a site you can call a link list and a headings list.

The headings list you can use to navigate inside the page. Jump to a heading of interest and read from there. With the link list you can choose where to go next. There are more ways to navigate a site, but links and headings are most commonly used by screen reader users.

How can you decide where to go, when a lot of the links in a page are called “Read more”. Read more about what?

So, if you are a web developer, how can you help your blind visitor to understand your website? First of all: use headings that make sense. And second: use link texts that tell where they are linking to. And here the screen reader text comes in: it hides text from screen, but not from a screen reader.

For example links with the text “Read more”, “Continue reading” or a plain “>” or a font awesome icon. Looks neat and small and is incomprehensible for your blind visitor. But writing the whole post title in the read more link is long and ugly.

Labels in forms

A form input field needs a label. It’s just good practice and it tells a screen reader user what to fill out. A placeholder is no label, screen readers don’t read them well. But a label takes up space and maybe you don’t want that in your theme. So hide it with screen-reader-text.
For example in the WordPress search form:

Hiding links

As a service to screen reader users and keyboard only users you can add skip links at the top of a page. That way a visitor can quickly jump to e.g. the content, without having to tab though the navigation.

The screen reader text in more detail

Clip versus absolute positioning

.screen-reader-text {
position: absolute !important;
left: -999em;
}

This technique is pretty solid and works in all browsers however there are two main issues with this technique – its relatively easy to break, and it can cause a page “jump” if applied to focusable elements (like skip links and read more links), which can be very confusing to sighted keyboard users. [Reference: Jeff Burnz and Jonathan Snook]

Different ways of doing it

Gary Jones collected a few different ways of hiding text with clip. And there are more variations. Pick the one that suits your theme or adjust it to your needs.

What about:

clip: rect(1px, 1px, 1px, 1px);

versus

clip: rect(0, 0, 0, 0);

I couldn’t find a specific reason to use 0 or 1px, they both seem valid.

Back and forward compatibility

Clip is deprecated in CSS3, but supported by most browsers, it’s replaced by clip-path. Internet Explorer below version 8 doesn’t want a comma as separator and up to version 11 it doesn’t support clip-path yet, so you end up with:

The other way around: hide from a screen reader

The other way around is also possible. If you have an element that’s not relevant for screen reader users, you can hide it by adding aria-hidden=”true“.
This is used for example in the WordPress Admin for hiding a separator in the main menu.

WordPress and the screen-reader-text

The name of the class is up to you, but “screen-reader-text” is the standard name for WordPress, and is used by WordPress core in the Admin and the front end and in the bundled themes like Twenty Fifteen. As from version 4.2 this class is WordPress generated CSS, so it’s important that you add it to your theme before updating to WordPress 4.2.

A web page can be perfectly WCAG 2 proof, but if it doens’t tell a story, it’s still a puzzle for people that depend on a braille line or a screen reader.
Set yourself in the place of someone who get’s your web page read out loud linearly and the only clue she has on what the structure is, are headings and links.

For my work I build sites for blind people. They use a braille line and screen reader to read and navigate a website. During the development of those websites I learned that blind people read a web page differently than I do.

Blind web users read a page linearly and depend on headings and links to navigate.