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 ‘Using aria-describedby for form help text’ »
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 ‘Form validation & screen readers’ »
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 ‘Web form help text & accessibility’ »
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 ‘Screen readers and radio buttons: using HTML fieldset and legend’ »
© 2007 - 2012 Andy Bryant, LessFuss Design