Step summaries

[danchamp]

The accessibility of the show/hide mechanism for step summaries can be improved.

Using an anchor element with a null (#) href to hide and show step summaries has these implications:

• Semantically, an anchor indicates a hyperlink that takes the user somewhere else, either on the same page via a valid fragment identifier, or to another location via a valid URL.
• For keyboard users, hyperlinks once focussed are activated with the enter key, while the space bar will scroll the view down one page. Buttons are activated with either key. If the link was styled like a button this could cause user confusion.
• Links will be announced by most screen readers as 'Link' + link text, with the possibility of multiple 'Link: show step summaries' links. These links will also be collected by most SR software into the list of page links.

Using button elements will provide the same functionality as anchors, without these accessibility issues.

CSS will present the buttons as links, as per GOV.UK pattern

Buttons will display the same visible text as present - 'Show summaries', 'Hide summaries', 'Show step summary', 'Hide step summary' - but will make use of aria-labelled-by attributes to qualify the actions to the relevant step summary or 'all summaries'.

The state of each step summary should be communicated with the aria-expanded attribute.

[danchamp]

On a closer look, aria-labelled-by doesn't make sense, since it will just assign the step title to the button.

An aria-label attribute for each button will be generated instead, with the format '[Show|Hide] {step__title} summary'

[danchamp]

The behaviour of the show/hide all summaries links currently differs from the GDS pattern, and is buggy:

• The link text and function is set on load, showing by default 'Show summaries' on overview pages, and 'Hide summaries' on step pages. It only changes if the function is triggered, toggling the states.
• If one or more summaries is visible on an overview page, the link text remains as 'Show summaries' but triggering it actually hides all summaries.
• Similarly, on a step page, if all summaries are closed, the link text remains as 'Hide summaries', but triggering it shows all summaries.

Examples:

• LocalGov Drupal UAT
• Croydon
• BHCC

On gov.uk (example):

• The link text and function is always 'Show all' unless all step summaries are visible, when it toggles to 'Hide all'.
• i.e. the 'all' link state is dependent on summary visibility, and will always be 'Show all' unless all summaries are visible.

I propose to align the behaviour with the gov.uk pattern, unless there are any contrary views? @willguv @cjstevens78 @andybroomfield

[andybroomfield]

Step by step not widly used at BHCC right now, I would generally prefer to follow the GDS pattern where possible.