The digital platform is designed to generate accessible websites that meet the latest accessibility standards. However, that doesn't mean that all of the things you build will be totally accessible. You have the tools in the platform to create almost anything you want to, so it's always worth running the things you build through some of the freely available accessibility checking tools.
This article looks at the forms designer and highlights some common accessibility issues that can easily be fixed. There's guidance for other types of content in the Creating Accessible Content article. Accessibility Features provides a general overview, and describes some of the standard behaviour of our websites.
Focus Order
Browsers will generally automatically focus (ie place the cursor) on the first input field on a page. That's not an issue if you only have a single field on your page, or if the first field is an input field.
Where it can be a problem is if your form has a lot of text at the top of the page with an input field some way down. A browser will focus onto the input field, skipping all of the text above.
To resolve this issue, disable auto-focus in the form settings.
Headings
Several form fields, like the guidance text or Handlebars templates, let you enter HTML directly into the forms designer. If you do, check that any headings tags you use are nested correctly. There's guidance on https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#accessibility_concerns
Tables
Similar to headings, if you build your own tables in HTML, make sure they have all of the correct markup, including headers.
Legends and Labels
All of the fields in the forms designer let you enter a label. While it's natural to enter a label for input fields, we sometimes see labels not being entered for non-visible fields, like layouts. Make sure you give all of your fields meaningful labels, because even though you might hide them on the page, they will be found by screen readers and other assistive technology.
We've also seen some designs where guidance text is used above a field to explain what information is needed, or to ask a question, rather than adding a long label directly to the field. That's fine to do, but make sure the field itself also has a label, even if that label is then set as hidden (it'll still be there in the page source).
Descriptive Button Labels
This one sometimes comes up when you are building things like a "check your answers" page, or using Handlebars to generate your own buttons.
You might have a set of buttons on your form that let a user edit something they previously entered. For a sighted user, a series of buttons or links that all say "edit" will make sense if the button is close to the thing that will be edited. However, a screen reader will just read out "edit", "edit", "edit". Make your labels more descriptive if you have several buttons on the same page.
Button Positions
The main buttons used to navigate through and submit your form should generally be placed outside of the layout fields.
Important Text
This is another one if you are writing your own HTML. The <b> tag only makes text visually bold, so doesn't provide any meaning to assistive technologies. If you want to emphasise text as important, only use <strong> tags.
Validation and Formatting
If you have input fields that need data to be entered in a particular format, make sure you explain what that format should be.
For example, you might have an input field for a telephone number. If you want the number to be entered without any spaces, make sure you say that on the form. Also add that information into any error messages the field displays.
Links
This one is true for all of your content, not just forms. If you include links, make sure the link text includes what this link is for. Content like "follow this link", or "terms and conditions can be found here" should be rewritten as "see our terms and conditions".
Also make sure that any links you do add clearly state that they open in a new tab or window.
Autocomplete
All of the input fields let you set an autocomplete attribute.
Make sure you use these on appropriate fields so that things like virtual keyboards use their best layout and so that browsers can populate fields with saved data.
Alert Boxes
The Alert Box field is used to display information, warnings and success messages on your form. So that you are not relying on colour alone to convey the meaning of the message, make sure you add meaningful titles too.
Share this page
