search

x-govuk / govuk-components

Lightweight Ruby on Rails components for developing with the GOV.UK Design System.
https://govuk-components.netlify.app
MIT License
149 stars 19 forks source link

SummaryList output for screenreaders #402

Closed paulodeon closed 9 months ago

paulodeon commented 1 year ago

We had some feedback from the Digital Accessibility Centre regarding the output of GovukComponent::SummaryListComponent::ActionComponent

Some link text was formatted in a way that weas difficult for screen reader users to understand.

The ‘change’ link within the ‘Your name’ row within the summary list is formatted such that screen reader software does not reliably interpret it. The space between the link text and the hidden text is not recognised by some screen reader software, and thus will not be announced properly to screen reader users. For example, ‘Change your name’ is interpreted as ‘Changeyour name’.

Current output

<a class="govuk-link" href="/referrals/3/referrer 
name/edit?return_to=%2Freferrals%2F3%2Freferrer"> 
Change <span class="govuk-visually-hidden">your name</span> 
</a>

Solution

For reliable screen reader parsing of link text, we recommend placing a non-breaking space character in the visually-hidden text using the HTML entity “ ”. Placing the non breaking space within the visually hidden text prevents a space from being placed at the end of the visible link. The trailing space before the visually hidden can then be removed to prevent some browsers from interpreting two spaces adjacent to each other. 

<a class="govuk-link" href="/referrals/3/referrer 
name/edit?return_to=%2Freferrals%2F3%2Freferrer"> 
Change<span class="govuk-visually-hidden">&nbsp;your name</span> </a>

Is this something we'd accept into the library?

Happy to create a PR if so

peteryates commented 1 year ago

Ah, interesting!

Yeah I'd be more than happy to accept it - having to do it manually definitely feels a bit clunky. I think it should at least be a global config option, but perhaps should be an argument too?

paulodeon commented 1 year ago

It feels to me like a project setting i.e. either you care about it or you don't for the whole project.

How should I contribute - it seems I don't have write access to the repo - should I fork and create the PR that way?

Or is it better to add me to the repo?

frankieroberto commented 1 year ago

This is also being tracked upstream here by the Design System team: https://github.com/alphagov/govuk-frontend/issues/2547

peteryates commented 9 months ago

I think this is solved now.