DEV Community

Discussion on: Hiding Content Accessibly

 
jessbudd profile image
Jess Budd • Edited

I agree we should all be having conversations about making designs more accessible and that should be the goal!

dta.gov.au/ is an example of a skip-link. If you tab from your browser address bar, a "skip to main content" link appears top left. If you keep tabbing, it will dissapear and your keyboard focus will tab through all the header navigation items.

If you activate the skip-link (by pressing enter) your keyboard focus will be moved to the main content (skipping the navigation). The skip-link is positioned offscreen (making it invisible) until you tab to it, when it becomes visible. If we didn't have css to bring it on screen when focused, a sighted keyboard user would still be tabbing to that link, but they wouldn't be aware of it because they couldn't see it.

Thread Thread
 
moopet profile image
Ben Sinclair

That's actually really neat! Thank you.