Address notification banner accessibility concerns

[vanitabarrett]

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:

• Users may miss a notification banner at the top of a page if they skip straight to the H1
• Positioning of banner and length of content may mean more scrolling for users on smaller devices/screen magnifiers to reach the main page content
• Autofocus behaviour: remove tabindex on blur so the banner is not focusable on click
• 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
• Styling a paragraph as a heading may cause confusion for users who override styles or disable CSS

[hannalaakso]

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

We need more research to understand ...

section in the guidance.

[hannalaakso]

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 Test notification banner with assistive technologies #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 Remove tabindex attribute from notification alert banner on blur #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.