Closed aardrian closed 9 months ago
Thanks, fixed to use a 0.5 opacity, and set to 1 if the link is focused (this is done in the Permalink directly, the a tag, so no need to have a focus-within)
@eric-burel This is a great start! Because the link is visually presented as an icon, it would fall under 1.4.11 Non-Text Contrast.
If I open the page today and only change the opacity from 0 to 0.5, then the link icon appears but its color is #524F51
, only has a 1.9:1 contrast ratio with the page's background of #272325
. If I change the opacity to 0.84, then I get #706D6F
for the icon, which gets it to the 3:1 minimum required for WCAG conformance.
Describe the bug
For sections that have a permalink in the heading, it has no visible focus indicator and the icon itself remains hidden when it has focus.
Steps to reproduce the bug
Expected Behavior
Actual Behavior
Related code
The permalink is made up of this elided HTML:
The following CSS hides the permalink by default using
opacity: 0
:The following CSS changes the icon's opacity only when the user has used a mouse to hover over the heading's container:
Additional Context
The code as shown violates the following WCAG 2.1 Success Criterion:
Consider never hiding the icon. Visually it is a great clue to users that they can take that action at any section heading. When I first visited on mobile, I had no idea I could link a section and so had to share the page URL and instructions on where to go in the page.
A less ideal approach is to make the icon itself appear only when it has focus (but this is likely the bare minimum you need to do):
An even less ideal approach is to amend a
:focus-within
pseudo-class to the original selector:It will appear when keyboard users put focus on it as long as their browser supports
:focus-within
(I imagine it would). The catch is that testing by forcing the node to be focused in the dev tools may not trigger this, and that can make devs frowny when they don't understand why.Voice and touch users will still not know it is there with either of these approaches, hence my suggestion to never hide it.