herb miller

In this report I look at the accessibility of websites I am personally able to influence. I’ve been looking into accessibility for a few months now, searching for the silver bullet for accessibility and WordPress. I haven’t found it yet. For each website I work on I discover more about fixing accessibility errors to make WAVE happy. Here’s what I’ve found so far.

Background to WAVE

A group in Utah State University called WebAIM – web accessibility in mind – produce a number of services for automatically evaluating the accessibility of your websites. One of the services, that anyone can use for free, is available at WAVE Web Accessibility Evaluation Tools. Using the form found on this page you enter the web page address to be evaluated and click enter. If, for example, you choose to evaluate example.com you will get a report at https://wave.webaim.org/report#/example.com that shows:

• 0 Errors
• 0 Contrast Errors
• 1 Alerts
• 1 Features
• 1 Structure
• 0 ARIA

The page gets an overall AIM Score of 10 out of 10.

• AIM scores below 10 are given with one decimal place.
• Values from 5.0 to 5.9 are grouped as 5.
• 5 is considered average.

In WAVE reports the AIM score is shown with a coloured slider.

• 1-2 are shown in RED indicating that they’re very bad,
• 3-7 are shown in AMBER
• 8-10 are shown in GREEN

Analysis of WordPress sites

Earlier this year, working with my ex boss Chris Winter, we looked at the very poor accessibility scores for 5 sites from the top one million websites. His brief report was published as What impact does WordPress have on the web? Although we didn’t come up with anything particularly useful, with regards to WordPress front end, we did get a few insights into the problems. I decided to investigate further.

I wanted to answer these questions.

• Do WordPress websites have better or worse accessibility than other, non WordPress based, websites?
• If worse, what can we do to improve their accessibility?
• Is it something that WordPress core might be able to address?

Using the WAVE API ( a paid service, with 100 free credits to start ) I attempted to compare the top 200 WordPress sites with .uk domains against the top 200 sites not running WordPress.

Top 200 .UK WordPress sites vs other sites

The results from this sample indicated that WordPress sites were worse than non-WordPress sites.

A closer look at Errors, Contrast Errors and Alerts

The chart and table show the average number of Errors, Color Contrast errors and Alerts by AIM score.

They also showed that for sites with lower scores (1 to 5) the average number of Color Contrast errors were double the average number of Errors.

Should we name and shame the bad guys?

I was considering naming and shaming the worst sites, but have decided to wait until I have a much better idea of

• the fixes that can be applied
• how best to achieve these
• and more importantly, how to go about recommending the improvements

The next section summarises the WAVE reports I ran against sites that I can directly influence, some of which I have already started working on.

Analysis of my sites

Percentage of sites by AIM score

Stacked Average by AIM Score for Errors, Color Contrasts and Alerts

Total Errors: 111, Total Color Contrast Errors: 340, Total Alerts: 511

Error type percentages

The chart and table below summarise the types of errors reported for my sites.

Color Contrast Errors

Unfortunately WAVE reports only have one type of error in the Color Contrast category: Very low contrast. In total WAVE reported 340 errors, but experience has shown that fixing these is the quickest way of improving your AIM score. And, if you’re lucky, you’ll find that addressing one specific color contrast error will fix several more.

Alert Type Percentages

The chart and table below summarises the types of alert reported for my sites.

Name and shame for my sites

The table below shows the AIM scores, Errors, Color Contrast Errors and Alerts for the sites in my sample analysis, sorted by AIM score from worst to best.

Actions taken so far

The WAVE reports for my sites were run on the 18th of December. Prior to producing this analysis I’d already worked on several of the sites which now have reasonable AIM scores ( 8-10 ).

Below are summaries of the GitHub issues I’ve classified as a11y.

Theme related accessibility issues

URL	Theme issue / Parent	Areas addressed
cookie-cat.co.uk	genesis-cc0512 / Genesis	Color contrast Missing form label
seriouslybonkers.com	sb ( block theme )	Color contrast – links & social media links
oik-plugins.com oik-plugins.co.uk	genesis-oik / Genesis	Color contrast Alert: Possible heading Alert: Skipped heading level Alert: Suspicious link text Alert: Redundant link
anchorgolf.com	genesis-tags / Genesis	Color contrast
rowlands-castle-bnb.co.uk	sorebay / Sorbet	See Sorebay below
herbmiller.me	written ( block theme )	Alert: Suspicious link text Alert: Redundant link Alert: Noscript element

Plugin related accessibility issues

Plugin issue	Areas addressed
oik-clone	Missing form label – 1 per checkbox
oik-fields	Redundant title text Empty link
oik-bwtrace	see oik
oik-bob-bing-wide	see oik
oik	Alert: Redundant title text: Remove title attr from img tags Alert: Select missing label. Alert: Missing label for textarea Low Color Contrast on screen reader text Missing form label: Checkboxes without labels in tables Alert: Redundant link – when both featured image and post title are links
oik-unloader	Missing label
oik-a11y	Missing alt text – wrote WP-CLI snippet

Other accessibility issues

Other accessibility problems discovered manually include:

• ISBAT: Paste a table with Header from Word with the header cells tagged using <th>
• ISBAT: Use down / up arrow keys to leave blocks with non Default styles.

Accessibility fixes for rowlands-castle-bnb.co.uk

When I started looking at rowlands-castle-bnb.co.uk the AIM score was 2.1.

• It was using a classic theme called Sorbet
• Sorbet was created by Automattic, for wordpress.com
• It was last updated on wordpress.org in June 2017
• The home page got the following:
  • Errors: 2
  • Color Contrast errors: 71
  • Alerts: 31
  • ARIA: 279
• Clearly the bad AIM score was mostly down to the Color Contrast errors.

The table below summarises the changes I made and the effect on the AIM score and errors

Errors	Color Contrast	Alerts	ARIA	AIM score	Improvement	Coding required?
2	71	31	279	2.1	First report	n/a
1	71	31	279	2.3	Fixed Linked image missing alternative text	No. Set the Alternative text field for a post’s featured image.
1	41	31	279	4.1	Fixed: Color contrast on links #f45145 to #e71c0d. Done using Additional CSS	No. Done using Customizer > Additional CSS
1	18	31	279	6.2	Fixed: Color contrast on meta data #9ba2af to #6b7785.	No. Done using Customizer > Additional CSS
1	16	31	279	6.2	Fixed: Removed 2 span tags with style:”color=#ff0000″;	No. I converted the Classic block to blocks then edited the offending paragraph block’s HTML.
1	0	31	279	9.5	Implemented a child theme called sorebay using sorbet as the template.	Yes. In style.css, I fixed the Low contrast errors taking into account the default background light grey color. ie I made the foreground colors slightly darker.
0	0	29	279	9.5	Removed empty heading.	No. Using the block editor

Notes:

• Who would have thought that red ( #ff0000 ) on white ( #ffffff ) would produce a low contrast error?

Further work planned

I intend to continue to work to improve the AIM scores for each of the sites in my list.

In time I should be able to create a Top 10 WordPress accessibility problems and how to fix them post.

For the 200 .uk WordPress sites in my sample the totals were:

• Errors: 3148
• Color Contrast: 6683
• Alerts: 12228

It should be obvious that Color Contrast Errors are the worst offenders. The top 10 Error types, by percentage of Errors are shown below.