- Using accordions for information that can be first tried in other formats. -
- - -This example can happen when showing information about a user that they need to check.
- - - -Accordions hide key information that may be necessary for everyone. While there may be uses for accordions in some scenarios like caseworking systems, generally it is better to start by either no content and adding when there is a need, or all content and using headers, links and occasional details text.
- - -Showing information as a start helps everyone get the information - if there is too much information then the page needs to be redesigned.
- - - - - -- Input fields separated too far from the initial question cause barriers. -
- - -This example can happen when showing information about a user that they need to check.
- - -A complex question must have a header, information and then the question - without this it is difficult for screen readers to show that there is context or for people with memory issues to remember what is being asked.
- - -This example can happen when showing information about a user that they need to check.
- - -This example puts links between the fieldset and the radio buttons, meaning screen reader users are unlikely to get the link announced. It also causes issues for showing error messages.
- - -Structuring the page to have header, details and question helps screen readers, audio announcers and general ease of memory. Links will also be announced by a screen reader before the question.
- -This example reintroduced a clear fieldset header for the radio buttons, and also changes the existing fields to separate searching for an existing result with choosing one based on the previous information.
- - - - - -07700 900457
sarah.phillips@example.com
-- Using tables instead of definition lists creates noise for screen reader users. -
- - -This example can happen when showing information about a user that they need to check.
- - -This is coded as a table rather than a definition list. Table are far more 'noisy' for screen reader users as they read out row and columns, and the table caption doubling as a page title may also confuse sighted screen reader users.
- - -Using a definition list means that what is visually shown on the page is more aligned with what is read out on a screen reader.
- - - - - -| Name | - - - - -Sarah Philips | - - -
|---|---|
| Date of birth | - - - - -5 January 1978 | - - -
| Address | - - - - -72 Guild Street London SE23 6FH |
-
-
-
| Contact details | - - - - -07700 900457 sarah.phillips@example.com |
-
-
-
Last updated 1 January 2025.
-Your balance is £1,929.32
- - -Your balance is £532.43
- -This account has a 5% AER interest rate
- -Your balance is -£231.99
- -This account has a 9% AER interest rate
-- Tabs can often be used outside of their ideal use case. -
- - -Tabs can be mistakenly used for for scenarios where people need to compare details across tabs.
- - -Tabs, like accordions, can be a symptom of unstructured content design. It also does not act as a tab in mobile view so is a unequal experience.
- - -Using a definition list means that what is visually shown on the page is more aligned with what is read out on a screen reader.
- - - - - -Your balance is £1,929.32
-Last updated 1 January 2025.
- -Your balance is £532.43
-Last updated 1 January 2025.
-This account has a 5% AER interest rate
- -Your balance is -£231.99
-Last updated 1 January 2025.
-This account has a 9% AER interest rate
- -- Even when you design using the accessibility-focused GOV.UK Frontend (as documented in the GOV.UK Design System), how you implement the frontend can create accessibility issues. -
-You can contribute to the examples. -
-