Improve accordion with summary line semantics and presentation when JS loads but CSS doesn't

[hannalaakso]

What

We should consider the semantics and presentation of the accordion with the summary line if the CSS fails to load and JS doesn't. As was pointed out at the accessibility clinic, this is what a screen reader user will hear when navigating the component.

This is also unlikely to be considered a good arrangement of content:

“If you showed this to a content designer and said ‘is this good content for a button’, I’m pretty sure they would say it’s not.”

This is related to #2336 - changing the design so that the button doesn't contain the summary line is likely to fix this issue.

If we don't change the design, the visual presentation when JS loads but CSS doesn't could be improved by not transforming the sections to buttons if CSS hasn't loaded - but this is will not help with the semantics when JS does load.

Why

We should ensure that the component follows good practise and makes sense semantically. Also, in the somewhat edge case where JS loads but CSS doesn't, the buttons end up with a large amount of content that isn't visually ordered.

Who needs to know about this

Developer, designer

Done when

• We've either resolved Review the accordion summary line design #2336 which will hopefully help with this card too, or considered (and created a card for) a potential alternative solution

[hannalaakso]

New design

Current design

[hannalaakso]

General improvements

We're going to mitigate against related issues raised at the accessibility clinic, see 'Next steps' #2295 (comment) for full write up.

Improve the semantics of the summary in the button by adding punctuation

Another thing we should try to do is to insert a comma after the summary line in the markup. This is because we had the slightly unexpected (but very logical) feedback from the accessibility clinic that the punctuation symbol which was originally introduced to improve NVDA announcements (83c8b57 - if the link breaks with rebasing, it's the commit titled "Add pause") also improves the semantics of the button text in general by dividing up its content thematically, as demonstrated here:

Next steps

I'm going to leave this issue open for now so that we can track the work to:

• add a comma character after the summary line markup with JavaScript, and test that change in screen readers
• check if we can remove the non-breaking space character before the existing comma (as seen in the above screenshot), it seems redundant

[hannalaakso]

This now renders as the following which is a slight improvement:

[hannalaakso]

Reviewed by @vanitabarrett, moving to done.

[hannalaakso]

In addition, the decision to add the commas in was based on a previous investigation done by GOV.UK Publishing Frontend: https://accessibility.blog.gov.uk/2017/12/18/what-working-on-gov-uk-navigation-taught-us-about-accessibility/