ARIA DevTools - वेबसाइट accessibility tree का visualization

• ARIA DevTools एक Chrome extension है जो web application को उस structure में दिखाता है जिसे screen reader interpret करता है, ताकि accessibility issues को development stage में ढूंढना आसान हो
• यह page elements को explicit और implicit ARIA roles के आधार पर दिखाता है, और headings, images, tables, form items आदि को साथ में check करने देता है
• इसका focus missing ARIA labels, गलत role assignment, और अधूरे keyboard support जैसे उन issues की जांच पर है जो actual assistive technology usage experience को नुकसान पहुंचा सकते हैं
• Chrome Web Store के अनुसार इसके 10,000 users, 4.9/5 rating और 33 reviews हैं, और यह Developer Tools category में listed है
• developer ने disclose किया है कि वे user data collect या use नहीं करते, और GitHub repository व issues page के जरिए project status देखा जा सकता है

---

Screen reader के perspective से accessibility tree की जांच

• ARIA DevTools accessible web applications के development और testing में मदद करने वाला developer tools extension है
• यह website को उस तरीके से दिखाता है जिस तरह screen reader उसे visually impaired users तक पहुंचाता है
• page elements explicit या implicit ARIA roles के आधार पर organized होते हैं
  • headings
  • images
  • tables
  • form items
  • अन्य page elements

जिन accessibility issues की जांच की जा सकती है

• missing ARIA labels को ज्यादा आसानी से identify किया जा सकता है
• गलत तरीके से इस्तेमाल किए गए ARIA roles खोजने में मदद मिलती है
• अधूरे keyboard support की भी साथ में जांच की जा सकती है
• इसका उद्देश्य accessible websites को develop और test करने की प्रक्रिया को छोटा करना है

Chrome Web Store listing information

• यह Chrome Web Store पर listed extension है और Developer Tools category में आता है
• listing information के अनुसार user count 10,000 है
• rating 4.9/5, और reviews की संख्या 33 है
• version 1.4.3 है, और size 156KiB है
• project GitHub पर public open source है
  • aria-devtools GitHub repository
  • support और issues page

Privacy handling

• developer ने disclose किया है कि यह extension user data collect या use नहीं करता
• data third parties को बेचा नहीं जाता
• data extension की core functionality से unrelated purposes के लिए use या transfer नहीं किया जाता
• data creditworthiness assessment या lending purposes के लिए use या transfer नहीं किया जाता

[GN⁺]

Hacker News की राय

• बहुत अच्छा लग रहा है। क्या आप इसे iframe के अंदर भी चलने लायक बना सकते हैं? अगर इसे Storybook/Playroom में इस्तेमाल कर सकें तो वाकई अच्छा होगा
  Firefox लिंक: https://addons.mozilla.org/en-US/firefox/addon/aria-devtools...

  • खुशी है कि आपको पसंद आया। अभी तक iframe सपोर्ट न जोड़ने की सबसे बड़ी वजह यह है कि permission scope काफ़ी ज़्यादा बढ़ जाता है
    अभी की तरह "ARIA DevTools" आइकन क्लिक करने के बाद सिर्फ मौजूदा tab तक access की अनुमति देने के बजाय, हर वेबसाइट के सभी data तक access की permission देनी पड़ेगी। फिर भी, पिछली बार जांचने के बाद स्थिति बदली है या नहीं, इसे फिर से देखूंगा
  • सोच रहा/रही हूँ कि क्या iframe को नए tab में खोलकर उस पर extension इस्तेमाल किया जा सकता है

• यह quick checks और education, दोनों के लिए बहुत उपयोगी tool है। यह visualization गैर-technical stakeholders को accessibility, खासकर screen readers के बारे में कैसे सोचना चाहिए, यह दिखाने में मदद कर सकता है
  WCAG की मुश्किलों में से आधी मुश्किल stakeholders को सिर्फ compliance checkbox भरने से आगे ले जाने में है

  • "यह तो पहले से text है, क्या screen reader बस इसे पढ़ नहीं सकता?"
  • कुछ हद तक बात सही है। अगर 98% users बिना accessibility वाली site भी बिना दिक्कत इस्तेमाल कर सकते हैं, खासकर यह देखते हुए कि computer ज़्यादा इस्तेमाल करने वाले लोग आम तौर पर युवा होते हैं, तो checkbox से आगे क्यों जाएं? यह expected value negative वाला choice लगता है

• बहुत शानदार है। हाल ही में मैंने अपना खुद का accessibility tree visualization implement किया था [1], और यह tool दिलचस्प है क्योंकि यह tree से अलग हटकर individual units की grouping पर ज़्यादा focus करने वाला visualization है
  मेरा विचार पूरी structure दिखाने और उसके ज़रिए page के logical flow पर ध्यान केंद्रित कराने का था। इसके उलट, tree को individual blocks के collection के रूप में देखना, और हर block के अंदर cohesion को ज़्यादा महत्वपूर्ण मानना, काफ़ी दिलचस्प approach है। अगर आप तुलना करना चाहें तो बात करके खुशी होगी
  [1] https://polypane.app/blog/polypane-20-1-the-accessibility-tr...

• साफ-सुथरा दिखता है, और https://wave.webaim.org/ से कहीं ज़्यादा व्यवस्थित है

  • धन्यवाद। मुझे लगता है ARIA DevTools में बहुत potential है। मेरे हिसाब से यह काफ़ी popular है, लेकिन web accessibility को गहराई से देखने वाले लोगों से मेरा जुड़ाव नहीं रहा
    ऐसे tools में details अहम होती हैं, इसलिए fair कहें तो WAVE शायद अधिक accurate हो सकता है

• काफ़ी clean है और मुझे पसंद आया। मैंने इसे उस TV program metadata page पर test किया जिसे मैं develop कर रहा/रही हूँ
  एक element div group है जिसमें span हैं, जो अपने content को अलग-अलग aria-label से describe करते हैं। MacOS का VoiceOver इसे सही पढ़ता है और Chrome का accessibility tree भी इसे पकड़ता है, लेकिन यह tool aria-label नहीं दिखाता और values को string की तरह लगातार दिखा देता है। साथ ही इसने ::before { content: ", " / ""; } को , value के रूप में पकड़ लिया, जबकि इसका support कुल मिलाकर बहुत अच्छा नहीं है

  • क्या उस page का link मिल सकता है? मैं खुद test करके fix करना चाहूंगा

• अच्छा है। मुझे accessibility support में बहुत interest है
  अब websites मेरा main काम नहीं हैं, लेकिन पहले मैं हमेशा ध्यान रखता/रखती था कि जिन sites की जिम्मेदारी मेरे पास हो, वे बहुत accessible बनें

• ऐसे tools में मैं चाहूंगा कि ARIA logic को UI से अलग रखा जाए। जटिल ARIA-related processing को library में डालकर, अच्छी तरह tested common codebase के ऊपर कई UI बनाए जाएं तो अच्छा होगा
  थोड़ा promotion भी: https://github.com/xi/aria-api

• Chrome के built-in tool (https://developer.chrome.com/docs/devtools/accessibility/ref...) की तुलना में यह कैसा है?

  • इस tool को design करते समय मैंने सिर्फ ARIA roles और properties दिखाने के बजाय, screen reader user experience को reflect करने की कोशिश की
    उदाहरण के लिए, page को सिर्फ keyboard से navigate करना पड़ता है। अगर dropdown accessible नहीं है, तो user को तुरंत दिख जाता है। Tables भी एक बार में सिर्फ एक cell और उसका header दिखाती हैं। मुझे लगता है यह real screen reader user experience के काफ़ी करीब है

• बढ़िया idea और implementation है। side project में ज़रूर इस्तेमाल करूंगा। संयोग से मैं अभी Mandy Michael की HTML performance और accessibility talk [1] देख रहा/रही था/थी और सोच रहा/रही था/थी कि browser के built-in accessibility tree viewer से बेहतर tool है या नहीं

  1. https://youtu.be/cghb0VpCJqM?si=5pWNrkPOyUsohyGJ

• शानदार tool है। मैं हाल ही में accessibility में और गहराई से जा रहा/रही हूँ, खासकर screen reader user experience को बेहतर करने की कोशिश कर रहा/रही हूँ
  क्या अधिक अनुभवी लोगों में से किसी ने इस tool को बड़े forms या dynamic tables जैसी complex situations में test किया है? ऐसे cases में यह दूसरे accessibility tools से कैसे compare होता है, यह जानना चाहूंगा। कोई tips या insights हों तो आभारी रहूंगा