Chrome 137 से CSS `reading-flow` की शुरुआत: visual order का पालन करने वाला keyboard navigation

• Chrome 137 से नए CSS reading-flow और reading-order properties उस समस्या को हल करते हैं, जहाँ visual layout और keyboard focus order आपस में मेल नहीं खाते
• मौजूदा flex/grid layouts में DOM order और visual order अलग हो सकते हैं, जिससे accessibility tools या keyboard navigation के दौरान users में भ्रम पैदा होता है
• reading-flow visual layout order के आधार पर focus movement को नियंत्रित करता है, और reading-order हर item के लिए manual order सेट करने देता है
• मौजूदा tabindex तरीके की तुलना में यह अधिक intuitive है और accessibility के लिए बेहतर है, साथ ही layout के अंदर navigation को local scope में सीमित करता है
• अलग-अलग examples और hands-on अभ्यास chrome.dev पर उपलब्ध हैं

---

reading-flow क्या है?

• layout में elements को navigation order के अनुसार focus मिलने का क्रम तय करता है
• default value: normal → जैसा मौजूदा DOM order है वैसा ही
• उपयोग के उदाहरण:
  • Flex: flex-visual, flex-flow
  • Grid: grid-rows, grid-columns, grid-order

  .box {  
    reading-flow: flex-visual;  
  }  
  

• DOM order के बजाय visual position के आधार पर focus movement संभव होता है

reading-order: manual order सेट करना

• reading-flow: source-order सेट होने पर हर item को numeric order दिया जा सकता है

  .wrapper {  
    reading-flow: source-order;  
  }  
  .top {  
    reading-order: -1;  
  }  
  

• दिए गए order values के आधार पर navigation order priority को समायोजित किया जा सकता है

मौजूदा tabindex तरीके से तुलना

• tabindex में accessibility tools के साथ mismatch की समस्या पैदा होने की आशंका रहती है
• duplicate values या बाहरी elements के बीच focus jump की समस्या हो सकती है
• reading-flow focus scope को define करके internal navigation को सीमित करता है और bidirectional navigation को स्पष्ट बनाता है
• positive tabindex को ignore किया जाता है, जबकि internal elements पर अब भी अलग से tabindex सेट किया जा सकता है

सारांश

• reading-flow layout-केंद्रित focus order तय करने का एक आधुनिक तरीका है
• visual order और keyboard navigation के मेल से accessibility बेहतर होती है और user confusion कम होता है
• वास्तविक उपयोग में यह मौजूदा tabindex की तुलना में अधिक predictable और consistent experience प्रदान करता है