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.
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 */
.full-hide{display:none;visibility:hidden}
/* Hide, but preserve layout */
.invisible{visibility:hidden}
/* 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
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?
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