USWDS - Header: Secondary nav a11y improvements #4963
Conversation
- Use code for pipe character - Add empty alt text for pseudoelement to prevent character being read on screenreaders Based on guidance https://www.w3.org/TR/css-content-3/#alt
|
Caniuse indicates this this feature doesn't have great support yet — perhaps since it's still functionality that's only in a draft spec? That said, it this issue in the JAWS repo makes it look like JAWS does support it? |
|
@thisisdano we were able to test in JAWS thanks to @amycole501. She confirmed this fixes the issue. I'm happy to change it to border if we want to avoid introducing features that are still in draft. |
|
Firefox doesn't render correctly, so this solution won't work. From @nick-mon1:
|
| & + .usa-nav__secondary-item { | ||
| border-left: 1px solid color("base-lighter"); | ||
| margin-left: px-to-rem(5px); | ||
| padding-left: units(1); |
There was a problem hiding this comment.
Alternative
Alternate solution keeps the pseudo element, but creates the shape. I liked that it's similar to the current, but it's more CSS.
& + .usa-nav__secondary-item::before {
background-color: color("base-lighter");
display: inline-block;
width: units("1px");
height: units(2);
content: "";
margin-right: units(0.5);
vertical-align: middle;
}There was a problem hiding this comment.
I noticed that this solution causes some slight content shift brought on by the height setting. Here's a video of me clicking back and forth between the development build and local
Screen.Recording.2023-02-03.at.1.18.03.PM.mov
| & + .usa-nav__secondary-item { | ||
| border-left: 1px solid color("base-lighter"); | ||
| margin-left: px-to-rem(5px); | ||
| padding-left: units(1); |
There was a problem hiding this comment.
I noticed that this solution causes some slight content shift brought on by the height setting. Here's a video of me clicking back and forth between the development build and local
Screen.Recording.2023-02-03.at.1.18.03.PM.mov
| padding-right: units(0.5); | ||
| & + .usa-nav__secondary-item { | ||
| border-left: 1px solid color("base-lighter"); | ||
| margin-left: px-to-rem(5px); |
There was a problem hiding this comment.
@mejiaj
I am curious about why the value is 5px here instead of matching the padding-left value of units(1). I did a little digging, and when I set the margin-left to units(1), I saw that the horizontal alignment between the elements was a bit off. Is this the reason for the 5px? If so, the misalignment seemed to resolve itself when I replaced float:right with display:flex on .usa-nav__secondary-links. Doing so also had the added benefit of making the border height a little smaller. What do you think? Am I making too many assumptions here?
There was a problem hiding this comment.
@amyleadem this is to make up for the lost whitespace from initial styling. I wasn't completely satisfied with the 5px, but it seemed like the most straightforward based on alternatives.
I'd prefer to avoid floats and messing with the layout too much, but I can see if there are any flexbox properties that could help.
Description
Secondary nav separator is no longer read on screenreaders. The
|pseudoelement is no longer read on screen readers. Closes #4944.Preview link
Additional information
This solution converts the separator from a pseudoelement to a border. This simplifies styles and prevents the screenreaders from reading this element.
Old
Header extended in Chrome.
New
Chrome
Firefox
Safari
Previous solution
Firefox
The separator uses an empty string for the pseudoelement's alt text.
Based on W3 Guidance
Before you hit Submit, make sure you’ve done whichever of these applies to you:
npm testand make sure the tests for the files you have changed have passed.