WebAIM - Web Accessibility In Mind

E-mail List Archives

An accessible WordPress theme

for

From: tee
Date: Oct 2, 2010 6:57PM

Hi,

First my confession: I am a lurker.

I'd just released a HTML5, Section 508 and WCAG 2.0 quality GPL license WordPress theme. There isn't really any free accessible WordPress theme in the WordPress-dom and I hope this theme can be of useful to some people.

I am particularly looking for feedback on how Screen Readers interpret HTML5 elements (if any) including the form attributes, and how I can improve the accessibility in the theme with the semantics that HTML5 brings.

http://lotusseedsdesign.com/temple-gate/

If most Screen Readers still can't interpret most HTML5 elements, please let me know too, and if any of the Screen Reader user in this list is interested to using the theme, I am more than happy to make a XHTML version for your need.


These are the HTML5 tags used in the theme:

• header
• nav
• footer
• aside
• section
• article
• time
• form attributes:
• search
• email
• url
• placeholder
• required



The major accessible issue that I find in WordPress that is not able to prevent unless one hacks the core code or don't use the Media feature, is that it adds title attribute to everything including image uploaded from the wp-admin/Media, and it adds a anchor tag to the image, so you will see nonsense like this:

<a href="/links" title="default to image name">
<img src="picture.png" att="default to image title" title="default to image name" />
</a>

I am aware that Screen Readers can ignore the Title attribute but it's very bad in Safari browser as the browser displays the full URL path (many blog sites usually have very long url) as tooltips and often .

Known issues:

1. Luminosity Contrast Ratio: 6 failures

4 are of decorative and 1 sets to display none. The only one that may cause issue is the "GO TOP" text, however a decorative arrow icon is used in conjunction (though the color contrast is much lower than the 'top' text), I think it can be safely ignore.


2. Success Criterion 2.4.10 - Section Headings

The HTML5 outlining algorithm probably can take care of it however I am torn whether to use more than one H1 and if any Screen Reader supports HTML5 yet.


Best Regards,


Tee Peng
Lotus Seeds Design