Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
clip has been deprecated so you should also add clip-path: inset(50%); after it to account for modern browsers and future proof it.
Here is the class I use which has been battle tested to destruction:
.visually-hidden{border:0;padding:0;margin:0;position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px1px1px1px);/* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */clip:rect(1px,1px,1px,1px);/*maybe deprecated but we need to support legacy browsers */clip-path:inset(50%);/*modern browsers, clip-path works inwards from each corner*/white-space:nowrap;/* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */}
Another minor point is that ideally (as you mentioned briefly) you would just do <main id="main"> and have your skip link point at that to avoid the bookmark bit and keep your HTML tidy and remove the extra JS required.
Anyway, have a ❤ and a 🦄 for a great article that is well explained as those are very minor points!
We specialize in finding simple solutions to complex software problems. We value data-driven decisions and accessibility over this month's latest tech trends.
We specialize in finding simple solutions to complex software problems. We value data-driven decisions and accessibility over this month's latest tech trends.
Great, but your
.sr-onlyclass has a couple of issues.A negative margin can cause issues with VoiceOver so just delete it.
clip has been deprecated so you should also add
clip-path: inset(50%);after it to account for modern browsers and future proof it.Here is the class I use which has been battle tested to destruction:
Another minor point is that ideally (as you mentioned briefly) you would just do
<main id="main">and have your skip link point at that to avoid the bookmark bit and keep your HTML tidy and remove the extra JS required.Anyway, have a ❤ and a 🦄 for a great article that is well explained as those are very minor points!
Thanks again! Just updated the original blog post as well as the article here.
That is excellent feedback, thank you! That's what I get for shamelessly borrowing the
.sr-onlyclass from Tailwind without testing it heavily 😄I actually just pulled this hidden link out of the header element and into the main page layout, using a simple I'd on the main block is brilliant 👍