DEV Community

Cover image for Crazy Tabbing !!
Lakshya Thakur
Lakshya Thakur

Posted on

Crazy Tabbing !!

This video is for all the web devs/enthusiasts who might be interested in knowing how basic keyboard accessibility using tab/shift+tab work across different sites.

This is more of a walkthrough through many sites where we will see some issues and some UX/accessibility blend.

Technical content :-

๐Ÿ“Œ How order or flex-direction for display:flex elements impacts accessibility ?

๐Ÿ“Œ What are skip links that you see on some websites ?

๐Ÿ“Œ Why outline:none alone impacts visualization of focused elements ?

๐Ÿ“Œ How box-shadow can be used in for more flexible focus ?

Sites covered

Dev : -

๐Ÿ“Œ GitHub

E-commerce : -

๐Ÿ“Œ Amazon
๐Ÿ“Œ Walmart
๐Ÿ“Œ Flipkart
๐Ÿ“Œ Myntra

Social media : -

๐Ÿ“Œ Twitter
๐Ÿ“Œ Facebook
๐Ÿ“Œ LinkedIn

Streaming : -

๐Ÿ“Œ YouTube
๐Ÿ“Œ Netflix
๐Ÿ“Œ Amazon Prime

Bonus : -
๐Ÿ“Œ Animeccha ๐Ÿ˜‰

P.S. - Pardon me for using accessibility word where instead usage of outline would be better. It's a long video but I hope it's fairly insightful. Also this was created just for fun. There are people who work dedicatedly to tackle accessibility issues in much depth.

Top comments (0)