A collection of tips, guidance and practical suggestions in developing accessible websites
Form elements provide a decent range of accessibility options: label elements match up label text with their corresponding field elements, fieldsets group together similar input elements and the legend provides a succinct title for these groupings of fields. With those elements alone, forms are fairly simple to mark up in an accessible manner.
The difficulty comes when you need to add some supplementary information to an input field, or you need to provide a text equivalent to a non-text way of labelling a form field. Sometimes having one label per form field is a little messy, and can create accessibility problems when a visual requirement needs to be met.
The title attribute is mostly overlooked and underused. It is little known, but screenreaders read out the title attribute on form fields when in forms mode, even if titles are not read out by default. It’s an exception to the general configuration.
Many surveys offer a list of multiple choice questions where the possible answers are the same for each question. This type of form is normally marked up in a tabular-looking fashion, where the question is a row header, and the possible answers are labeled by a column header.
Marking this up as a table may be the correct semantic way, but the implicit association is not available to a screenreader in forms mode. The only elements that are available in forms mode are form elements (and their attributes). Thus, a form with a tabular structure needs additional markup to make it accessible to screenreader users.
One downside of labels is that one label can only be associated with one input field, so it proves a challenge to markup such a form without resorting to duplicate labels which then need to be hidden from view (and creating a unique id to map each label to its corresponding input field).
Hiding most of the form labels brings another problem to the fore. When column and row headers are used visually to label a field it is visually fairly obvious that a relationship applies horizontally or vertically. There’s a visual cue going on, and sighted people grok this cue almost immediately.
Unfortunately, this cue fails when the entire table cannot be seen in one go. People using screen magnifiers, or very large text sizes, only see a portion of this tabular form. They may not be able to make the visual connection because the column or row header may not be within the viewing region of the screen magnifier when the focus is on a particular form element. The further separated the form element is from its column and row headers, the more difficult it is for the screen magnifier user to figure out what information is being requested by the current form field. Scanning to find the column and row headers for a form field is prone to error, and makes the form more difficult to fill out.
The overlooked title attribute provides a neat solution to this problem. Screenreaders will read out the title attribute on form elements in forms mode. Every form field with a title has a label that can explicitly identify a particular form field.
Screen magnifiers have the feature of displaying the title attribute when an element receives focus, so when a form field has focus, the title is presented as a tooltip adjacent to the form element. This alleviates the problem of the screen magnifier user scrolling around to determine the purpose of a form field.
Another use of a form field title attribute is to provide supplementary information to a particular field. This can be, for example, a more descriptive variant of an existing label, a reminder that a field is mandatory, an example of a valid input (like the format of a date), or brief help text.
This supplementary information appears as a tooltip when that input field receives focus. This tooltip can be progressively enhanced, or stylistically improved, using JavaScript. The Content Management System Plone makes excellent use of the title attribute and JavaScript to present a visual cue for each for field on a form. This makes a form a little more usable, with very little cost, and that content is available to screenreader users too.
The title attribute offers an extra avenue for associating text to a form field. It should not be used as the first means of associating a label text with a corresponding form field. In situations where supplementary information is useful, the title attribute is helpful. In some situations where using labels results in masses of duplicated and redundant text that need to be hidden offscreen, it makes sense to use a title attribute instead. As with all accessibility problems, use the solution that best serves the needs of your visitors.
I was interested in using this method to provide users with some error warnings but alas it seems that in most cases the label takes presedence over any title. Thus they are ignored.
Fantastic! I’ve coded many surveys with Likert scales where I’ve repeated the label ad nauseum to address the one-label-per-input issue, and it does create a lot of visual noise.
Your point small viewports is important and applicable beyond screen magnifiers to people with small screens or a browser not opened to full screen. The title will not help people in these instances if they are not using a screen reader, so it’s still a good idea to repeat the labels every bunch of rows in combination with using the title attribute.
[…] isn’t a new suggestion, as others have made the same recommendation. It’s also part of the WCAG 2.0 techniques (H65: Using the title attribute to identify […]