LessFussDesign blog

Posts Tagged ‘Accessibility’

Using aria-describedby for form help text

Last August I wrote a piece about using CSS to overcome a common problem for screen reader users with web forms – where help text associated with a field isn’t announced by screen readers when in Forms Mode. The CSS solution was convoluted and flaky in IE6. Fortunately there’s a better way: use aria-describedby. Continue reading »

Form validation & screen readers

For screen reader users it can be both disorienting and frustrating if your form validation reloads the page when there’s an error on a field, and little (or no) feedback is given to the unsighted user. There’s many things you can do to make your error handling friendlier to screen reader users, but the easiest is probably also one of the most effective – add a “skip to errors” link right in front of your “skip navigation” link. Continue reading »

BBC Glow 2.0

I’m a big fan of the BBC Glow javascript library (as I may have mentioned earlier), so it’s good news that Version 2.0 of the library is available as an Alpha release (the current stable download is version 1.7.2), promising enhanced features, improved performance and even better accessibility. Continue reading »

WebAIM screen reader users follow up survey

Last week the WebAIM team published the results of their latest Screen Reader User Survey [external link] (a follow up to the last one carried out at the end of 2008). As with the first WebAIM survey [external link], the results confirm that many of the things we have assumed are problematic for screen reader users (e.g. Flash – or rather how developers implement Flash – is a massive pain in the backside) are true. They also reinforce that just as there’s no typical web browser user, there’s also no typical screen reader user. Continue reading »

Web form help text & accessibility

In the last piece I did on accessible web forms, I mentioned that in Forms Mode the JAWS screen reader won’t announce any content in a form that isn’t marked up in a form HTML tag. 90% of the time you can make forms more accessible by using labels for each field, but sometimes you want to provide more information than can fit nicely into the label (e.g. some extra help text) without making a meal of the layout and styling. Here’s a way of styling content in an HTML label tag so it looks like it’s separate from the label, but will still get read out by screen readers. Continue reading »

Accessible Twitter: how it should have been done to start with

One day the next big thing on the web that has everyone all worked up will be accessible and built to web standards from day one. Until that day, we have people like Dennis Lembree (the man behind Web Axe [external link]) to thank for making what many take for granted freely available to an even wider audience. With the help of some friends [external link], and the Twitter API, Dennis has created an accessible version of Twitter called, unsurprisingly, Accessible Twitter [external link]. Continue reading »

BBC Glow

When Alan Partridge asks Tony Hayers what he thinks of regional detective dramas Shoestring, Taggart, Spender, Bergerac and Morse, and Tony Hayers says “There’s too many of them”, Alan replies “That’s one way of looking at it. Another way of looking at it is, ‘People like them, let’s make some more of them’”. The BBC has a similar attitude when it comes to javascript libraries, it seems. A few weeks ago they released Glow [external link] under the Apache license, giving us all a chance to spread some of the magic dust that goes into the BBC site over our own creations. But far from being another framework for wow-effects, Glow has the edge in two important areas: cross-browser support and accessibility. Continue reading »

Screen readers and radio buttons: using HTML fieldset and legend

You can go a long way to making a web form accessible by making sure every input field has a label. But with a set of radio buttons this ain’t enough. Use labels for each of your radio buttons and the various options will be read out, but how does a screen reader user get the question they’re supposed to be answering? Easy. Use fieldset and legend HTML tags, a simple – yet underused – way of getting your forms to make sense for screen reader users. Continue reading »

Skip links + tabindex = confusion

Adding features that help improve the accessibility of a website is a good thing. But sometimes accessibility features can conflict with each other when used inappropriately. Providing skip links while also setting the tab index on links is a good example of two common accessibility techniques which, if you’re not careful, can end up doing more harm than good. Continue reading »

Flash window mode and accessibility

Making a Flash movie accessible can be tricky enough, but before you can allow screen reader users to find their way around your Flash movie, they first have to know its even there. Setting the window mode (wmode) parameter to transparent or opaque is a common practice when embedding Flash – so it behaves itself on-screen – but the setting also renders the movie completely invisible to screen readers and keyboard controls. Continue reading »