So you want to make an accessible WordPress website? Congratulations – your site will be available to the widest possible audience!
Not sure why accessibility is valuable? Accessible sites have benefits including faster load speed, better SEO and being good for PR. Plus making an accessible site is just the right thing to do.
15% of the population worldwide have disabilities. So thinking about accessibility is not just the webmaster’s responsibility. Everyone from website owners to digital project managers, designers, editors, content writers and anyone else involved in the website should think about web accessibility.
Some common issues that need to be addressed when creating an accessible website include making text screen reader-friendly, including appropriate alt text for images, ensuring optimal color contrast, adding captions to videos, and making sure that your website is keyboard navigable.
As you read on, keep in mind that there is more to WordPress accessibility than compliance, and the following tips will help ensure you are well on your way.
Accessibility-Ready WordPress Themes
A great place to start for accessibility-ready WordPress themes is the WordPress Theme Directory on wordpress.org.
WordPress Theme Directory (WordPress.org)The WordPress Theme Directory provides a Feature Filter that allows users to search through its database of free themes for accessibility-ready themes.
Use the WordPress Theme Directory’s Feature Filter to find accessibility ready themes.A search of ‘Accessibility Ready’ themes in the WordPress Theme Directory bring up dozens of accessible-ready themes. You can also use the Feature Filter to search for ‘Accessibility Ready’ themes sorted by Layout, Features, or Subject and further refine and narrow your search using other filter parameters, or by typing in keywords into the search bar, such as “WCAG”.
WordPress Theme Directory results for accessibility-ready WordPress themes.For WordPress themes to be included in the Theme Directory with the “Accessibility Ready” tag, the theme must comply with over a dozen accessibility requirements set by the WordPress Theme Review team.
Themes must meet WordPress Theme Directory accessibility requirements to use accessibility tag.Required and recommended accessibility guidelines include keyboard navigation, controls, skip links, content links, forms, headings, contrasts, images, media, and screen reader text (discussed further below).
WordPress theme handbook accessibility requirements.Themes that do not meet the Theme Review team’s criteria, are not given the ‘accessibility ready’ tag in the WordPress Theme Directory.
If you choose to use freemium, premium, or paid WordPress themes, make sure that your theme has built-in accessibility features. And if you decide to build a custom website for your business or organization, consult with the web developer first to make sure that any accessibility concerns are discussed and reviewed before starting your project. A good starting point if you are building your own theme is the Underscores starter theme, which follows web standards and has a number of accessibility features built-in.
It’s important to note that while themes tagged as being accessibility-ready on WordPress.org have not only fulfilled the usual theme review guidelines but passed additional accessibility checks, such as those modeled on the Web Content Accessibility Guidelines 2.0 (WCAG 2.0) level AA, using an accessible theme does not absolve you of the responsibility of making your content, site navigation and other areas of your site accessible.
WordPress Theme Review Team’s accessibility notice.As highlighted by the Theme Review team in the Accessibility section of their handbook,
“Themes labeled as accessibility-ready have met the required guidelines listed here, and should not be construed to meet any level of formal accessibility requirements.”
WordPress Theme Accessibility Features Checklist
So what features should a good accessibility-ready WordPress theme have?
Here’s everything we’re going to cover. Click on the link to be taken to that specific section.
Appropriate Alt Text for Images
Keyboard Accessible Links and Menus
Visible Focus Styles
Color Contrast
Native HTML for Buttons and Links
Skip Links
Semantic HTML Headings
Screen Reader Text
No Autoplaying Media
Explicit Form Labels
ARIA Landmark Roles
Clear Typography
Things Not Allowed In Accessibility Themes
Positive Tabindex Values
Accesskeys
Useful Resources and Accessibility Testing Tools
Appropriate Alt Text for Images
Screen readers need alt text to help visually impaired or users with learning disabilities understand images included in the content.
Any inline images included in your theme should have alt text. This includes featured images. Even if the code is present to display alt attributes, however, appropriately crafted alternative text still needs to be input for those images.
Background images do not require an alt attribute. Purely decorative images like background images and other non-text content should be added via CSS so assistive technologies can ignore it.
Alt Text: Yes
The default WordPress theme comes with built-in accessibility-ready features.
In the Twenty Nineteen theme, for example, when you specify a page as your site’s home page, WordPress automatically creates an alternative text using the page title.
WordPress Theme 2019 with Featured Image alt tag highlighted.In the Twenty Seventeen theme, the header image alt text matches the site title.
The Featured image alt text is whatever the user has inputted.
Twenty Seventeen theme’s implementation of alt text.If there’s no alt text present, the alt text defaults to alt =””. This is actually quite sensible, because a blank alt attribute is better than irrelevant alt text.
To learn more about using alt tags for accessibility, check out our comprehensive guide on how to create perfect image alt tags for accessibility in WordPress.
Some users with mobility impairments can’t use a mouse. They rely on the keyboard (or keyboard-like devices) to navigate the interactive features of a page. The Tab key is used to move forward through elements., and Shift+Tab to go back.
You should be able to access the following by tabbing through the page:
- Links
- Menus
- Buttons
- Form fields
Often with menus, the top-level menu items will be keyboard accessible, but dropdown submenus will not!
Example: Accessible Drop-Down Menus
Gently theme implements dropdown menus in an accessible way, as they can be reached by keyboard as well as mouse.
Gently theme has a keyboard accessible dropdown menu showing keyboard focus.If creating your own theme, Underscores has keyboard accessible drop-down menus built-in, or you can try this tutorial: Creating Accessible Drop-Down Menus.
Visible Focus Styles (Focus Indicators)
Keyboard users need something visual to show them where they are on the page when tabbing through. If there’s no focus style, it’s hard for them to tell what they are interacting with.
Try using the keyboard to tab through the next web page you visit.
Can you tell which link is which?
Themes often reset the default focus style. You will often see this in style.css files:
Unfortunately, this code reduces accessibility and developers often don’t think to set their own focus style.
The focus style may include a color background – but it must also meet color contrast guidelines.
Visible Focus Styles: Yes
The Penguin theme implements focus styles in different ways, but it’s easy to tell which link is the current one.
Penguin accessibility ready theme showing white on blue postmeta keyboard focus style.
Penguin accessibility ready theme with link keyboard focus style showing an outline.Sufficient Color Contrast
People with a vision impairment may struggle to read text on a low contrast background. Even reading on a laptop in bright sunlight can prove tricky for someone without sight problems.
The recommendation is the same as that in WCAG 2.0 level AA: a contrast ratio of 4.5:1 for normal text and 3:1 for large text (defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger), and a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders). Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.
Colour Contrast: No
The WAVE WebAIM web accessbility tool reveals that ZBlackbeard theme has many areas of low color contrast.
ZBlackbeard theme colour contrast errors highlighted in red by WebAIM’s WAVE tool.Native HTML for Buttons and Links (Or Equivalent Markup to Behave As Native Controls Do)
Incorrect markup will disable your users from using custom controls. For example, a user might not be able to tab to or press a custom button.
If you want to make a button behave like a button, the simplest way is to use the <button> element! It’s understood by all assistive technologies.
Here is a video on using the button element to improve web accessbility:
Skip Links
Skip links save screen reader users or keyboard users from having to pore through long lists of links repeatedly.
Skip links can be made invisible to sighted users through CSS. They will only be visible if the user tabs through the page, or if a screen reader is used.
Skip links: Yes
Twenty Sixteen uses a “Skip to content” link, which allows the user to bypass the navigation and go straight to the page content.
Twenty Sixteen theme showing a Skip to Content link.Some accessibility ready themes have a skip to sidebar link as well.
Semantic HTML Headings
Good heading structure benefits everyone. Sighted users can easily scan down the page to see what’s important. Screen reader users can navigate by heading level to the section they want.
Headings: Yes
A theme like Twenty Seventeen marks up headings in a logical order, as seen using VoiceOver.
Form Labels: No
In the Inspirez theme, a VoiceOver user can hear a description of the comment form fields if they open the Rotor to the Form Controls menu.
However, using the Tab key to access the fields does not reveal their purpose. Also, as soon as the field is chosen, the placeholder text disappears.
The Inspirez theme comment form name field. VoiceOver reads ‘required, edit text with autofill menu’.A user might think: “What do I fill in here? Name or Email?” and subsequently type in the wrong thing, with all the frustration this entails.
ARIA Landmark Roles
As with headings, ARIA landmark roles help screen reader users navigate to particular parts of the page.
Roles to use are:
- banner
- main
- complementary
- contentinfo
- search
- navigation
ARIA Roles: Yes
The Some theme implements ARIA roles throughout the page structure. VoiceOver users can switch to the different areas marked with roles.
The main role corresponds to the main content area.
VoiceOver ARIA Landmarks menu for some theme, showing the main role.Clear Typography
Fancy fonts can look cool but make your site harder to read for all users. Nielsen Norman Group specifies that content legibility is a key indicator of usability.
This is not a requirement for an accessibility ready theme, but is recommended.
Guidance:
- Use at least 16px font size for body text.
- Go for serif or sans serif fonts, not cursive or fantasy types.
- Avoid large swathes of text in uppercase.
Typography: No
The Germaine theme uses the Great Vibes font for headings. It’s pretty, but this script font is less legible than a serif or sans-serif font.
Germaine theme with post headings in Great Vibes font.Things That Should NOT be in an Accessibility Ready Theme
Links That Open in New Windows/Tabs Without Warning
Some users will be confused if links open unexpectedly in a new window or tab, because they can’t use the Back button to return to where they were.
Watch for target="_blank" in links.
It’s best to avoid opening links in new windows altogether, but if you must, provide a warning.
The simplest and best way to do this is through text. Add (opens in new window) after the link text.
Links: No
The Dream Spa theme has a button in the Customizer to add slides to a slider. This opens in a new window, but there’s nothing to let the user know beforehand.
Dream Spa theme Customizer; a button link opens in a new window.Links: Yes
Tiny Framework uses a combination of the Font Awesome external link icon and screen reader text to indicate that a link opens in a new window.
Tiny Framework external link icon with screen reader text to indicate the link opens in a new window.Positive Tabindex Values
Tabindex values of 1 or above mess up the natural tab order and confound keyboard-only users’ expectations.
Adrian Roselli shows why you shouldn’t do this in his article: Don’t Use Tabindex Greater than 0.
Accesskeys
Accesskeys are a good idea in principle, but implementation across websites is inconsistent. There is also the problem of assistive technology using some of the same keyboard shortcuts.
Resources:
Tools:
Conclusion
Using an accessibility-ready theme is essential to having an accessible website but it’s not a guarantee of accessibility, because this requires everyone involved with the website and processes such as adding content to the site to remain compliant with accessibility standards.
Accessibility is ultimately determined by the user, not the theme author. Testing against a formal accessible standard such as WCAG 2.0 AA can only be done when the website is finished.
Using an analogy, you could design a beautifully accessible office building, but ruin it with poor choices when it comes to furnishing it, such as using illegible signage, loose rugs, uncomfortable furniture, inadequate spacing between desks, and other occupational health hazards.
Similarly, your best efforts to make your website accessible can be derailed by choosing to add inaccessible content, such as:
- Not adding headings to articles
- Adding “click here” links
- Using jargon in sentences
- Adding autoplaying videos with no controls
It’s important, therefore, not only to build an accessibility-ready website, but also to keep accessibility in the front and center of your mind at all times, especially when creating web content or training anyone tasked with updating the content on your site.
Implementing accessibility is an ongoing process. Start thinking in terms of accessibility sooner rather than later and you will be on the right path to deliver users a truly inclusive website.
1.6 million WordPress Superheroes read and trust our blog. Join them and get daily posts delivered to your inbox – free!
Tags:
Keep reading the article at WPMU DEV Blog. The article was originally written by Martin Aranovitch on 2017-04-16 09:00:20.
The article was hand-picked and curated for you by the Editorial Team of WP Archives.