Personal blogging by Steph Gray, former digital agency founder and erstwhile bureaucrat

Making WordPress accessible to AAA

eaccessibility forum

At Simon’s recent WordUp Whitehall event, I presented on the process I went through on a project with BIS/DCMS to create a discussion platform for the eAccessibility Forum. The site went live yesterday, thanks to the sterling efforts of the DCMS Digital Comms team and their WordPress-smart IT colleagues – with a press release from the minister, no less.

I’ve also contributed a post to the site which describes my journey from ‘not very much’ to ‘still pretty minimal’ knowledge:

The challenge with accessibility guidance is seeing the wood for the trees. As a developer, you need detail about specific colour contrast ratios for example, and suggestions of tools and code samples that might help you. But you also need to retain a sense of what the general principles are too – why accessibility rules are written the way they are, as well as whether or not a particular piece of code meets a checkpoint.

The key point from a developer’s point of view, as I made at WordUp, is that WordPress can be made as accessible as you need it to be – it’s just PHP, HTML and Javascript after all. And even for non-gurus like me, it’s doable.

Related posts on this blog

3 comments on “Making WordPress accessible to AAA

  1. Karl Dawson says:

    Hi Steph,

    I’m sure someone already pointed this out but using display:none for a hidden form field that the user isn’t supposed to fill in is OK (I suspect this is only for lack of a better example though).

    These are the 3 CSS rules I apply when hiding content:

    /* Hide from both screenreaders and browsers */

    /* Hide, but preserve layout */

    /* Hide only visually */
    .vis-hide {position:absolute;overflow:hidden;margin:-1px;padding:0;width:1px;height:1px;border:0;clip:rect(0 0 0 0)}

    You might need to handle cases where the content is hidden but focussable (if that’s a word?) but I’ve not used it…

    Hope this helps.

    Regards, Karl

    1. Steph says:

      Thanks Karl – that’s interesting. Wonder why Akismet wraps the hidden input in a <p> though? Still, I guess you’re right that it doesn’t affect the user experience.

      Also, what’s the thinking behind your unusually-complex .vis-hide rules: is off-screen absolute positioning not enough for some user agents?

  2. Karl says:

    Hi Steph,

    Trying to find my reference to clip (which acts like a mask on an absolutely-positioned element), but the classes are from my derivative of HTML5 Boilerplate styles – if I recall, it’s a more robust version of overflow:hidden that you see in Webaim’s page on invisible content.

    Regards, Karl