search

alphagov / govuk-frontend

GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.
https://frontend.design-system.service.gov.uk/
MIT License
1.18k stars 325 forks source link

Address notification banner accessibility concerns #2011

Closed vanitabarrett closed 4 years ago

vanitabarrett commented 4 years ago

What

Follow up on the feedback we got from the accessibility clinic and our own accessibility testing.

Done when

We've taken some action on all of the concerns below or documented why we don't think changes are needed:

hannalaakso commented 4 years ago

One possible course of action is to add some of these under the

We need more research to understand ...

section in the guidance.

hannalaakso commented 4 years ago

Update:

  1. Users may miss a notification banner at the top of a page if they skip straight to the H1. Action: ~We'll be testing for this as part of https://github.com/alphagov/govuk-frontend/issues/2010~ Done, we've added to the 'Research' section of the guidance that we need more research to understand if this is an issue
  2. Positioning of banner and length of content may mean more scrolling for users on smaller devices/screen magnifiers to reach the main page content Action: We'll be including an example of a banner with long content in our upcoming accessibility research prototype. We've also added this to the research questions.
  3. Autofocus behaviour: remove tabindex on blur so the banner is not focusable on click Action: Addressed by https://github.com/alphagov/govuk-frontend/pull/2014.
  4. Should an error summary and notification banner ever be used together? An action link in the error summary means it's more likely a user will skip past the banner Action: We've explained in the guidance that teams shouldn't place an alert notification banner and an error summary on the same page.
  5. Styling a paragraph as a heading may cause confusion for users who override styles or disable CSS Action: We'll be including an example of a banner with paragraph styled as a heading in our upcoming accessibility research prototype. We've also added this to the research questions.