DEV Community

Cover image for Crazy Tabbing !!
Lakshya Thakur
Lakshya Thakur

Posted on

2 1

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.

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

๐Ÿ‘‹ Kindness is contagious

Please leave a โค๏ธ or a friendly comment on this post if you found it helpful!

Okay