Examine and resolve accessibility findings

[CharlotteDowns]

What

Examine and resolve accessibility findings from accessibility specialist report

Why

To ensure the Navigation component is accessible for as many users as possible.

Who needs to be involved

Developers, Designers (to help with decisions)

Who needs to review

Accessibility specialist

Done when

• Resolve: Navigation landmark missing in mobile view
• Resolve: Unlabelled breadcrumbs confusing Update Breadcrumb component to improve screen reader accessibility govuk-frontend#4995
• Resolve: Position of phase banner makes service name less clear
• Resolve: Navigation difficult to discover when magnified
• Resolve: All items highlighted when changing colours
• Resolve: Menu chevron missing in High Contrast Mode
• Resolve: NVDA in Chrome behaving weird
• Resolve: 'unclear service name' accessibility issue Move service name and navigation into section govuk-frontend#5092

[querkmachine]

I have a PR for the breadcrumb labelling open here: alphagov/govuk-frontend#4995

[CharlotteDowns]

Designer suggestions / decisions

Unlabelled breadcrumbs confusing

We could advise in guidance not to use Navigation and Breadcrumbs together, due to known issues like this.

Position of phase banner makes service name less clear

The phase banner being between the logo and the service name makes it harder to understand what the service name is. It previously would have read (simplified): "GOV.UK - Manage company information - Alpha This is a new service – your feedback will help us to improve it." Now it reads (simplified): "GOV.UK - Alpha This is a new service – your feedback will help us to improve it. - Manage company information". The service name seems "lost" at a later point.
I have made a few screenshots with CSS disabled (and the landmarks showing) to hopefully make the issue more visible.

Is it possible to put the phase banner (full width) between the service name and the navigation, so it could read: "GOV.UK - Manage company information - Alpha This is a new service – your feedback will help us to improve it - Navigation"

A similar approach to this mock up of an organisation switcher, which is taking space between the service name and navigation.

Navigation difficult to discover when magnified

The navigation is currently right-aligned when it comes after the service name (in desktop view). That will make it harder for magnification users to discover. The horizontal lines help a bit. But I'd suggest thinking about left-aligning them instead.

I agree with this. There doesn't seem to be a single solution without trade offs.

If we left align the navigation (which will occur if the Navigation takes a new line, for example if the service name is long or there is a phase banner ) the vertical space of the header will increase, pushing page content down. If a service wishes to include additional service specific components, for example, a search box and account links this will be extended even more.

We are prioritising the behaviour on smaller screens where the Navigation is left aligned.

[patrickpatrickpatrick]

Designer suggestions

Unlabelled breadcrumbs confusing

We could advise in guidance not to use Navigation and Breadcrumbs together, due to known issues like this.

Position of phase banner makes service name less clear

The phase banner being between the logo and the service name makes it harder to understand what the service name is. It previously would have read (simplified): "GOV.UK - Manage company information - Alpha This is a new service – your feedback will help us to improve it." Now it reads (simplified): "GOV.UK - Alpha This is a new service – your feedback will help us to improve it. - Manage company information". The service name seems "lost" at a later point.
I have made a few screenshots with CSS disabled (and the landmarks showing) to hopefully make the issue more visible.

Is it possible to put the phase banner (full width) between the service name and the navigation, so it could read: "GOV.UK - Manage company information - Alpha This is a new service – your feedback will help us to improve it - Navigation"

A similar approach to this mock up of an organisation switcher, which is taking space between the service name and navigation.

(more thoughts to follow)

for the proposed "Position of phase banner makes service name less clear" fix, would this only be the case if there was a phase banner present or would it only be the case if a phase banner was present? I mocked up what this could look like:

We would need to move the phase banner into the component itself for this to work. Either we could have a 'slot' that could pass any component into the 'slot' where the phase banner would be or we could take phase banner parameters as input so that only a phase banner could be put in the slot.

[selfthinker]

Is it possible to put the phase banner (full width) between the service name and the navigation

That wouldn't solve the issue when what's in between is other things in the global header, like the One Login menu.

[CharlotteDowns]

@selfthinker Is the phase banner issue still unsolved if we use option H. Generic landmark for the whole service header in this google document and suggested the phase banner live within this landmark?

[selfthinker]

@selfthinker Is the phase banner issue still unsolved if we use option H. Generic landmark for the whole service header in this google document and suggested the phase banner live within this landmark?

@CharlotteDowns, that particular accessibility issue with the phase banner would be solved by option H, using a generic landmark for the service header. It might still be visually or structurally confusing to have the phase banner between global and service header, but that's then a potential usability, not accessibility issue.

[CharlotteDowns]

With the help of @patrickpatrickpatrick I've been looking at putting the phase banner between the service name and the navigation in a hope that this, role="region" and aria-label="Service information and navigation" resolve the issue 'Position of phase banner makes service name less clear'

Here is a screenshot of an example where the phase banner is between the service name and the service navigation.

Will this change in landmarks also help resolve 'NVDA in Chrome behaving weird'?

[CharlotteDowns]

I just also found this accessibility concern Review the use of aria-label on a <ul> element in the site navigation menu
about sub navigation, will this be relevant in our work (incl. guidance)

[selfthinker]

I've been looking at putting the phase banner between the service name and the navigation in a hope that this, role="region" and aria-label="Service information and navigation" resolve the issue 'Position of phase banner makes service name less clear'

That generally looks good to me.

I would probably choose to use <section> instead of <div role="region"> as a section has the implicit role of 'region'. It's irrelevant for accessibility which of the two you use, but it would be more consistent with how we approach roles elsewhere (header, footer, etc).

Will this change in landmarks also help resolve 'NVDA in Chrome behaving weird'?

I doubt it.
I hadn't looked further into it, so have no idea why that happens. My hunch was that it has maybe something to do with flexbox. But we cannot know more until we investigate the issue.

[selfthinker]

I just also found this accessibility concern Review the use of aria-label on a <ul> element in the site navigation menu about sub navigation, will this be relevant in our work (incl. guidance)

That seems to be quite complicated. From what I can tell that is pretty unconventional code.
It's used for a (button) link to open and close a sub menu.

I don't think we use any such behaviour in the new component, so I don't think it is relevant.
But it would be good if someone who is currently working on the navigation could confirm that.
If you have access to the latest code (sorry, I couldn't find it), you can simply check if aria-label is used anywhere on a ul to know for sure.

[CharlotteDowns]

We can suggest the phase banner comes after the navigation but still included in the

'Service information and navigation'.

cc: @querkmachine @domoscargin for next cycle??

[CharlotteDowns]

Further to the discussion on Phase banner placement. We have come to the conclusion that the Phase banner should come after the service header and navigation component, ideally wrapped in a <section></section> that is labelled as 'Service information and navigation' so it is clear it relates to the service.

Here is a sketch plan for the order of things that could appear in both the GOV.UK header component and the Service header navigation component.

The possible objections to the approach have been that it could be deemed that a section of the website is at a certain phase rather than the service entirely. However, we wish to justify this by acknowledging that the Phase banner will persist across all pages of the service in this location and that the content within the component mentions it is service-wide.

This is a new service. Help us improve it...

[selfthinker]

NVDA in Chrome behaving weird

When using NVDA in Chrome it behaves a bit weird. It doesn't read the service name when arrowing. (It does read it when tabbing.) It also reads all the navigation items in one go, meaning I cannot navigate them individually via arrowing. (Again, it reads them when tabbing.) That is only the case for the desktop view, not for the mobile (or zoomed in) view.

I wonder if this has something to do with flexbox? It's possible it's a bug in NVDA (or Chrome?) rather than something wrong in our code.
NVDA is working as expected in Firefox, and JAWS is working as expected in Chrome in this regard.

I looked into this. It turns out that some of this was fixed in Chrome version 125, so was present until version 124.
I wrote back then that this didn't happen with NVDA and Firefox. But now that I re-tested it I found that's not true, it is also happening in Firefox. (I also re-tested with JAWS, which was working fine in both browsers.)

Due to the recent changes in the code, the service name is now read out, but all the navigation items are still read in one go up until version 124.

This problem appears whenever list items are set to display: inline-block.
And I found it could be fixed with setting whatever is inside (so, links in our case) to display: block.
If you think it's worth fixing, it would be good to check doing that doesn't have any unintended consequences.

An NVDA bug report suggests that this is intended behaviour. While I get their point that any elements in an inline-block look like they are in a paragraph and should therefore behave like text in a paragraph, I don't think it makes sense in this case. Most screen reader users will be used to a navigation reading differently, because the code for navigations is usually done differently. When it's done with float, for example, this might look the same but reads each item separately.

[querkmachine]

I made the change suggested above, and although it resolved the issue of NVDA reading all of the links out in one go, it introduced a new problem of NVDA announcing the empty text node between each nav item. This required users of arrow navigation to press twice in order to move from one link to the next.

Service information and navigation  region    link    Apply for a juggling license 
Menu  navigation landmark    list  with 4 items  link    Navigation item 1 
blank
link    current  Navigation item 2   
blank
link    Navigation item 3 
blank
link    Navigation item 4 

I've instead changed the navigation list to use a flexbox. This removes the empty text nodes, and also seems to prevent the navigation items from being read as a single unit.

@selfthinker Quickly devtesting this, I've not found any obvious issues created by making the list a flexbox. Do you think it's worth retesting the component due to this change?