How does your site work?
When a user visits your WordPress site there are a lot of things happening behind the scenes: WordPress gets the content of the page which is then passed-on to any plugins you may have installed that filter it, and finally the theme takes the filtered content and displays it.
Plugins that don’t affect your front-end will not play any part in this process, however all other steps have a role to play.
It all starts with the content. If your post for example only contains a video, then visually impaired visitors will not get the whole story. If you are using all caps, then screen readers will read them letter-by-letter instead of words. If you’re selling an audio book without including the actual text of the book, then people with hearing disabilities will not be able to get your product. If you are writing a blog post and include images, the images should have
alt tags defined for screen readers. If you are writing an article, then you should not use extremely long sentences as people with cognitive and neurological disabilities may not be able to understand what you are saying. If you use colour in your text to differentiate some parts, then colour-blind individuals may not be able to tell the difference.
Assuming your content is accessible, it is then a matter of presenting that content in a manner that is just as accessible. And that’s where the theme comes into play.
A WordPress theme will usually include the following parts:
- Header including the site branding and menus.
- The post title and featured image.
- Some extra post-meta such as the post-categories, tags, publish date, information about the author etc.
- The post-content.
- Perhaps a section with related posts, links to the previous/next post etc.
Each part in that list will have to be accessible.
- Users should be able to navigate the menus using a keyboard for people with visual disabilities.
- There should be sufficient contrast between the background of the menus and the menu links.
- Links should not be nested in multiple levels.
- The hover and click areas should not be too small and navigation with a mouse should require precision so that people with mobility disabilities can still navigate your site
- Breadcrumbs should only include relevant items. For example there is no reason to include the tags of a post in the breadcrumbs, a single category will do.
- Breadcrumbs should be marked as navigation items.
Post title and featured image
- The post-title should be marked using an
h1tag when viewing a single post, and its size should make it stand-out.
- Featured images are usually decorative-only, so they should be marked as such using a blank
alt tag and using.
Not everything belongs to the top of your post. The post-author name, the publish date and the category can be at the top but not tags. Tags should be at the end of the post – especially it there are many of them.
Users using a screen reader should be able to get to your content from the very beginning of the page with a “Skip to Content” link.
If there is a “Related Posts” section, titles should not be as prominent as the main post title. Using
h3 tags is usually suitable for these. If there are featured images, they should have
role="presentation" set so that screen readers ignore them.
Footers usually contain useful links, other info about your site and a copyright notice. If there is a menu in the footer it should be marked as navigation. Avoid including too many links in the footer as that will make it more difficult to locate the information your users are looking for.
One of the most important things for a theme is the way it styles the page and presents the content. A theme’s styling should not only be functional but also visually appealing and respecting the WCAA rules for accessibility:
- Font-sizes should not be small
- The colour of your text content should have a minimum of 7:1 contrast with the background
- Links should have a minimum of 7:1 contrast with the background
- Links should have a minimum of 3:1 contrast with their surrounding text
- Colour should not be the only way a hovered or active link differs from other links. There should be other visual cues as well (for example underlined).
Popups should be avoided. They are a source of confusion and are almost never necessary. Most times you can find other means of driving attention to offers. In the rare occasion that you absolutely must have a popup, make sure that your users can easily close it using the escape key on their keyboard.
It is statistically proven that sliders and carousels do not have a positive impact on websites. Other than eye-candy, their usefulness is debatable and should be avoided. Sliders pose significant accessibility challenges and you should not use them. Ever. We are not the only ones that believe this. Check out this article from SEO-Experts Yoast to learn why.