आप ऐसी चीज कैसे design करते हैं जो screen reader वाले users के लिए अच्छी चले?

सिर्फ तस्वीर नहीं, ढांचा design कीजिए। page को headings का तार्किक क्रम और landmarks दीजिए, पक्का कीजिए कि हर control का एक अर्थपूर्ण accessible name हो, और alt text तस्वीर के ब्योरे की जगह उसके मकसद के हिसाब से लिखिए। तय कीजिए कि सामग्री बदलने पर क्या बोला जाना चाहिए, focus को अंदाजे लायक रखिए, और पक्का कीजिए कि जो कुछ mouse से हो सकता है वह keyboard से भी हो सके।

मैं सोचता हूं कि यह चीज सुनने में कैसी है, सिर्फ दिखने में कैसी नहीं। तो पहला दौर ढांचे का है: एक ही h1 है क्या, हिस्से समझदारी से एक दूसरे के अंदर बैठे हैं क्या, कोई main landmark है क्या, और दोबारा जमने के बाद पढ़ने का क्रम दिखने वाले क्रम से मेल खाता है क्या। फिर नाम। मेरी कसौटी यह है कि कोई control बिना आसपास के संदर्भ के जोर से पढ़े जाने पर भी समझ आता है या नहीं। दस rows वाली ऐसी table जिसमें हर link पर देखें लिखा है, screen पर ठीक है और सुनने में बेकार, तो वह बन जाती है invoice 4021 देखें, जिसमें अतिरिक्त हिस्सा दिखने से छिपा रहता है। alt text मैं मकसद के हिसाब से लिखता हूं। किसी laptop की वही तस्वीर marketing वाले page पर सजावटी है और किसी support वाले लेख में, जो दिखा रहा है कि कौन सा port कहां है, उसे असली ब्योरा चाहिए। घोषणाएं वह हिस्सा हैं जिसे लोग भूल जाते हैं: अगर कोई filter बिना page load किए नतीजे बदल देता है, तो screen reader वाले user को कुछ नहीं मिलता जब तक हम बताएं न, इसलिए मैं एक polite live region और ठीक ठीक क्या बोला जाएगा, यह लिखता हूं। और मैं VoiceOver चालू करके बने हुए flow से खुद गुजरता हूं। यह अहंकार तोड़ता है और हर बार कुछ न कुछ पकड़ लेता है।