वर्डप्रेस का त्योहार
22 जनवरी, 2021

एक भाषा चुनें

This is an archive of the January 2021 event

तो मुझे कैसे पता चलेगा कि मेरी वर्डप्रेस वेबसाइट सुलभ है या नहीं?

डिजाइनरों, डेवलपर्स और सामग्री लेखकों को सुलभ वेबसाइट बनाने में मदद करने के लिए कई संसाधन उपलब्ध हैं। हम पूर्ण WCAG2.1 विनिर्देशों को देख सकते हैं, लेकिन कई मामलों में लोगों को सभी पहुंच अवधारणाओं को समझने से पहले यह सब की भावना संभव है की जरूरत है । व्यक्तिगत ब्लॉग पोस्ट इन पहुंच दिशानिर्देशों को रहस्यमय करने में मदद कर सकते हैं, लेकिन ये संसाधन खंडित हैं।

कैसे के बारे में अगर वहां सबसे आम और सबसे अहम पहुंच मुद्दों है कि हां की एक श्रृंखला के शामिल करने के लिए एक त्वरित गाइड था/

इस प्रस्तुति में मैं सिर्फ इस तरह के सवालों की एक सूची के माध्यम से चलाते हैं, और आसान तकनीकों का पालन करें कि लोगों को पहुंच के लिए अपनी वेबसाइटों का परीक्षण करने के लिए उपयोग कर सकते है पर चर्चा ।

समय: 1:00 बजे यूटीसी
क्षेत्र: ईएमईए
स्टेज: GoDaddy प्रो स्टेज

हाय हर कोई, मेरा नाम ग्राहम आर्मफील्ड से है

कूलफील्ड्स परामर्श और मेरी प्रस्तुति

कहा जाता है 'तो मुझे कैसे पता चलेगा कि मेरे वर्डप्रेस

वेबसाइट सुलभ है?

यह एक प्रस्तुति मैं कई बार दिया है

इससे पहले, लेकिन मैंने हाल ही में इसे अपडेट किया है ताकि आप हो

नया संस्करण प्राप्त करने जा रहा है।

इससे पहले कि मैं शुरू, मेरे बारे में थोड़ा । मैं एक वेब हूँ

एक्सेसिबिलिटी कंसल्टेंट और इसका क्या मतलब है

मेरा दिन काम संगठनों के साथ काम कर रहा है

उन्हें की पहुंच में सुधार करने में मदद करने के लिए

उनके डिजिटल प्रसाद - चाहे वह वेबसाइटें हों

या क्षुधा। मैं पहुंच परीक्षण करते हैं, और काम

डिजाइनरों और डेवलपर्स के साथ सुधार करने के लिए

स्‍थान। मैं बहुत सारे प्रशिक्षण पाठ्यक्रम भी चलाता हूं,

वेब डेवलपर्स के लिए, एक और कंपनी के साथ।

मैं वास्तव में एक वेब डेवलपर हूं और मैंने बनाया है

वर्डप्रेस का उपयोग करके कई सुलभ वेबसाइटें

वर्षों। तो यहां हम जाते हैं, कि थोड़ा के बारे में है

मुझे।

इससे पहले कि मैं वास्तव में मुख्य सामग्री पर शुरू

मैं क्यों पहुंच के बारे में थोड़ा बात करने जा रहा हूं

महत्वपूर्ण है। मुझे यकीन है कि आप में से ज्यादातर समझ जाएगा हूं

यह वैसे भी है, लेकिन वास्तव में उद्देश्य, वेबसाइटों के साथ

उन्हें यथासंभव सुलभ बनाना है।

क्योंकि अगर आपके पास कोई ऐसी वेबसाइट है जो बेच रही है

उत्पादों या सेवाओं, यह महत्वपूर्ण है कि

आप जितना संभव हो उतने लोगों को बेच सकते हैं।

और जनसंख्या का 20 से 25% की तरह कुछ

जब आता है तो अलग-अलग पहुंच की आवश्यकता हो सकती है

वेबसाइटों के लिए। यह शर्तों के कारण हो सकता है

जैसे अंधापन या खराब दृष्टि, रंग-गुलाल,

डिस्लेक्सिया, एडीएचडी, ऑटिज्म, बहरापन, लोग जो

सुनवाई के कठिन हैं या जो लोग पसंद कर रहे हैं

मेरे माता-पिता, जो सिर्फ बूढ़े हो रहे हैं ।

और यह महत्वपूर्ण है कि एक बहुत होने whilst

सुलभ वेबसाइट महान है, यहां तक कि सिर्फ छोटा

सुधार हर किसी के लिए एक फर्क कर सकते हैं ।

यह तस्वीर यहां - आपको आश्चर्य हो सकता है कि क्यों

मैं आपको दिखा रहा हूं कि - यह पहाड़ी से ऊपर है

मिलेनियम ब्रिज का उत्तरी छोर

लंदन में, कि सेंट पॉल कैथेड्रल तक जाता है

जिसे आप वहां दूरी में देख सकते हैं।

और यह प्रभावी रूप से एक लंबी पहाड़ी है, और यह है

एक सीढ़ी रास्ते के सबसे अधिक। लेकिन जब वे

यह बनाया वे इस रैंप है कि आप देख सकते है डाल

वहां के रूप में अच्छी तरह से । और मुझे यकीन है कि लोगों को कर रहा हूं

जो यह लगा कि होगा कि डिजाइन

जो लोग व्हीलचेयर का उपयोग कर रहे हैं द्वारा इस्तेमाल किया जा सकता है,

या जो लोग बुग्गी का उपयोग कर रहे हैं।

लेकिन वास्तव में, अगर तुम यहां खड़े हो, जैसा कि मैंने पर किया था

यह कुछ साल पहले नम दिन,

आप देख सकते हैं कि वास्तव में ज्यादातर लोग हैं, जो

इस पहाड़ी पर चलना, या इस पहाड़ी के नीचे, होगा

वास्तव में उपयोग करने के लिए वरीयता में रैंप का उपयोग करें

सीढ़ियां। और यह दिखाता है कि कैसे सुलभ

ऐसी विशेषताएं जिन्हें आप अपनी वेबसाइटों में जोड़ सकते हैं

वास्तव में हर किसी की मदद कर सकते हैं, बजाय

लोगों को कि वे सिर्फ उद्देश्य के थे ।

तो, मैं क्या कवर करने जा रहा हूं ।

मैं परिचित हूं, मैं के लिए पहुंच में किया गया है

अब लगभग 20 साल । मैं से परिचित हूं

वेब कंटेंट एक्सेसिबिलिटी दिशानिर्देश - ज्ञात

कम करने के लिए WCAG के रूप में। हम वर्तमान में संस्करण 2.1 पर हैं

और ये वेब के लिए एक अच्छा संसाधन हैं

पहुँच। लेकिन बहुत सारी सामग्री है

वहां, और यदि आप से परिचित नहीं हैं

क्षेत्र वे व्याख्या करने के लिए काफी मुश्किल हो सकता है।

यह एक नज़र रखने लायक है, लेकिन आप जानते हैं

वे वास्तव में थोड़ा अभेद्य हो सकते हैं।

तो कैसे के बारे में अगर आप एक साधारण हां कोई चेकलिस्ट था?

चीजें हैं जो आप आसानी से अपने पर जांच कर सकता है

कुछ मुफ्त उपकरणों के साथ अपनी वेबसाइट? और वह है

क्या इस प्रस्तुति के बारे में सब है ।

आधे घंटे में है कि मेरे लिए उपलब्ध है

हालांकि, मैं केवल कुछ आम पहुंच को कवर कर सकता हूं

मुद्दे। मुझे सब कुछ कवर करने का समय मिल गया है,

तो मैं बाहर खींच लिया है कुछ आम है, और कुछ महत्वपूर्ण

एक्सेसिबिलिटी समस्याएं जो मुझे वेबसाइटों में मिली हैं

पिछले कुछ वर्षों में । लेकिन अगर आप सभी का जवाब कर सकते हैं

प्रश्न सफलतापूर्वक, तो अपनी वेबसाइट

एक बहुत अधिक सुलभ होने जा रहा है की तुलना में

वहां से बाहर कई वेबसाइटों ।

तो चलो शुरू हो जाओ।

पहले कुछ सवाल मैं बात करने जा रहा हूं

के बारे में कीबोर्ड बातचीत के साथ क्या करना है।

यह पहुंच का एक बहुत महत्वपूर्ण पहलू है

क्योंकि कुछ लोग माउस या ट्रैकपैड का उपयोग नहीं कर सकते हैं

या स्पर्श आदेश, शायद इसलिए कि वे है

उनके साथ मोटर हानि के कुछ प्रकार मिला

ऊपरी अंग। तो वे वास्तव में हो सकता है

वास्तव में अपनी मशीनों का उपयोग करने के लिए कीबोर्ड पर भरोसा करें,

ब्राउज़िंग वेबसाइटों सहित।

इसके अलावा, जो लोग स्क्रीन पाठकों का उपयोग करते हैं, और वह

आम तौर पर नेत्रहीन लोग हैं, लेकिन विशेष रूप से नहीं

नेत्रहीन लोग, अगर मैं एक स्क्रीन रीडर का उपयोग कर रहा हूं

एक डेस्कटॉप या एक लैपटॉप मशीन पर, तो मैं हूं

यह भी वास्तव में कीस्ट्रोक का उपयोग करने जा रहा है

स्क्रीन रीडर को आदेश जारी करें

समय। तो यह महत्वपूर्ण है कि आप कीबोर्ड प्राप्त करें

पहुंच सही है।

तो पहले कुछ सवाल है, और जैसा कि यह कहते हैं,

वहां, आपको इन दोनों के लिए हां का जवाब देने की आवश्यकता है।

क्या मैं आसानी से देख सकता हूं कि कीबोर्ड फोकस कहां है?

और दूसरा एक, मैं आसानी से सभी का उपयोग कर सकते है

केवल कीबोर्ड का उपयोग करके साइट के कुछ हिस्से।

कि एक अपने के बीच नेविगेशन के बारे में है

पृष्ठों।

लेकिन पहले एक - मैं आसानी से देख सकते हैं, जहां

कीबोर्ड फोकस है? अगर मैं एक देखा कीबोर्ड हूं

उपयोगकर्ता मैं टैब कुंजी का बहुत उपयोग करने जा रहा हूं,

एक पृष्ठ के भीतर चारों ओर ले जाने के लिए, लिंक करने के लिए और

पृष्ठ के भीतर बटन जो मुझे सक्षम करते हैं

कहीं और जाएं, या किसी प्रकार की कार्यक्षमता करें।

यह वास्तव में महत्वपूर्ण है कि मैं आसानी से देख सकता हूं

जहां कीबोर्ड फोकस वर्तमान में है। कई में

वेबसाइटों है कि सिर्फ मामला नहीं है ।

दूसरा। हां, मैंने उल्लेख किया है इसके बारे में

नेविगेशन। मैं सभी का उपयोग करने में सक्षम होना चाहता हूं

साइट के कुछ हिस्से अगर मैं एक कीबोर्ड उपयोगकर्ता हूं।

और अफसोस की बात है वेबसाइटों का एक बहुत पर, नेविगेशन

हमेशा कीबोर्ड उपयोगकर्ताओं के लिए पूरा नहीं करता है। इसलिए

हम उदाहरण के एक जोड़े पर एक नज़र होगा

इनमें से अब।

तो gov.uk ब्रिटेन में एक बहुत ही प्रसिद्ध साइट है।

करने के लिए चीजों के बारे में जानकारी का खजाना

सरकार और कर के साथ, और ड्राइविंग लाइसेंस,

पासपोर्ट आदि आदि। महान चीजों में से एक

इसके बारे में है, इसमें बहुत अच्छा कीबोर्ड फोकस है

संकेत। तो यहां मैं के शीर्ष पर आ गया हूं

पृष्ठ, और मैं एक बिट के आसपास टैब्ड है और मैं कर रहा हूं

अब यहां इस लिंक पर - एक है कि मिल गया है

एक पीली पृष्ठभूमि।

इस साइट पर सभी ध्यान संकेत बहुत है

स्पष्ट है, जो देखा कीबोर्ड उपयोगकर्ताओं को होगा

वास्तव में उन्हें धन्यवाद। ठीक है, तो यह एक उदाहरण है

एक बहुत अच्छा ध्यान संकेत की ।

यहां एक और वेबसाइट है, और यह एक कंपनी है

कि मैं बहुत काम करता हूं - हैसेल समावेश।

हर जगह अच्छा, स्पष्ट कीबोर्ड फोकस है

इस साइट पर। इसके अलावा, नेविगेशन पूरी तरह से है

सुलभ के रूप में अच्छी तरह से। मैं इन उपmenus मिल गया है

कि यहां से बाहर पॉप, तीर के साथ संकेत दिया

यहां, और ये पूरी तरह से कीबोर्ड सुलभ हैं

के रूप में अच्छी तरह से। तो कीबोर्ड उपयोगकर्ताओं को हर जगह प्राप्त कर सकते हैं

साइट में।

एक वेबसाइट है कि यह सही नहीं मिलता है. यह है

बेशक एक वर्डप्रेस साइट नहीं है, लेकिन यहां

ओडियन सिनेमा साइट। अगर मैं इस पर मंडराता

यहां लिंक करें - क्या है, मुझे यह पैनल मिलता है

बाहर चबूतरे, और यह एक खोज सुविधा मिल गया है और

मुझे विभिन्न फिल्मों में ले जाने के लिए बहुत सारे लिंक

और आपके पास और सब कुछ क्या है। यह बढ़िया है

तो मैं साइट के चारों ओर काफी आसानी से प्राप्त कर सकते हैं।

हालांकि, अगर मैं इसके बजाय उस लिंक पर टैब करता हूं, तो मैं

उस पैनल को देखने के लिए नहीं मिलता है, और इसलिए मैं नहीं है

वहां खोज सुविधा के लिए उपयोग हो गया, और

इन विभिन्न लिंक और क्या आप है। ठीक है

इसलिए यह कीबोर्ड के लिए एक अच्छा अनुभव नहीं है

उपयोगकर्ताओं।

अगले कुछ सवाल । कीबोर्ड टैब करता है

आदेश समझ में आता है? और मैं आसानी से उपयोग कर सकते हैं

केवल कीबोर्ड के साथ सभी कार्यक्षमता?

वहां पहला - कीबोर्ड टैब ऑर्डर।

ब्राउज़र टैब ऑर्डर सेट करता है जब यह लोड होता है

पृष्ठ, और आदर्श रूप से इसका पालन करना चाहिए

सामग्री आदेश। और अगर आपके पास टैब ऑर्डर है

ऊपर और नीचे पृष्ठ यह वास्तव में प्राप्त कर सकते है कूद

लोगों के उपयोग के लिए भ्रामक। एक बार फिर आप

टैब कुंजी का उपयोग करके इसका परीक्षण किया जा सकता है।

वहां दूसरा - प्रश्न चार - कर सकते हैं

मैं आसानी से कीबोर्ड के साथ सभी कार्यक्षमता का उपयोग

केवल? यह नेविगेशन के बारे में बात नहीं कर रहा है,

यह आपके पृष्ठों में अन्तरक्रियाशीलता के बारे में बात कर रहा है।

और यह मोडल खिड़कियां, आदि जैसी चीजें हैं।

तो चलिए अब उसका एक उदाहरण देखते हैं । इस

एक वर्डप्रेस साइट है जो लाइटबॉक्स प्लगइन का उपयोग करती है।

और अगर तुम क्या है कि क्या से परिचित नहीं हो

है, मैं छवियों के इन छोटे संस्करणों मिल गया है

यहाँ। अगर मैं छवि पर क्लिक करता हूं, या उस पर टैब,

प्रेस दर्ज कुंजी यह वास्तव में मुझे पता चलता है एक

इस तरह की छवि का पूर्ण आकार संस्करण,

अंतर्निहित पृष्ठ के ऊपर एक ओवरले में।

इस विशेष प्लगइन के साथ यहां समस्या

यह है कि कीबोर्ड ध्यान वास्तव में पर रहता है

नीचे पृष्ठ। तो अब कीबोर्ड उपयोगकर्ता जा रहे हैं

पर इन बटनों को पाने के लिए संघर्ष करने के लिए

नीचे, जो मुझे पिछले और अगले दिखाने के लिए

श्रृंखला में छवि, या छवि को पूरी तरह से बंद करें।

मैं सिर्फ वहां नहीं मिल सकता है अगर मैं एक कीबोर्ड उपयोगकर्ता हूं,

तो यह एक वास्तविक समस्या है।

इसके अलावा जेटपैक वेबसाइट पर। ज्यादातर, यह

वेबसाइट एक पहुंच से बहुत अच्छा है

परिप्रेक्ष्य। हालांकि, यह इस भाषा मिल गया है

यहां चयनकर्ता, और अगर मैं उस पर टैब, प्रेस

दर्ज कुंजी, यह भाषा चयनकर्ता खोलता है ।

लेकिन एक बार फिर कीबोर्ड फोकस अभी भी पर है

अंतर्निहित स्क्रीन, और इसलिए देखे गए कीबोर्ड

उपयोगकर्ता वास्तव में चयन करने के लिए संघर्ष करेंगे

इस साइट पर विभिन्न भाषाएं। तो यह है कि

एक अच्छी बात नहीं है।

ठीक है, कीबोर्ड बातचीत से दूर जा रहा है,

चलो लिंक के बारे में बात करते हैं। यहां पहले एक,

और आपको इस पर हां में जवाब देने की आवश्यकता है - क्या

अपने लिंक स्पष्ट रूप से लिंक?

अब यह की सुबह से एक संमेलन है

वेब कि लिंक को रेखांकित के साथ चिह्नित किया जाएगा।

हालांकि, यह विशेष वर्डप्रेस थीम वास्तव में

ऐसा करने के लिए नहीं चुनता है । यह रेखांकित किया है

सभी लिंक से दूर है, और आप इसे देख सकते हैं

एक्ज़ेटर के बारे में यहां बाईं ओर पाठ का पैराग्राफ

इसमें बहुत सारे लिंक हैं। वहां के साथ चिह्नित

हरे रंग का पाठ। कितना आसान है यह देखने के लिए इन

लिंक जब मैं रेखांकित वापस वापस आ गया है

पर फिर से?

क्योंकि ऐसे उपयोगकर्ता जो रंग अंधे हैं, या जिनके पास है

गरीब दृष्टि लिंक देखने के लिए संघर्ष करेंगे

बाएं हाथ की ओर, क्योंकि हरे रंग का पाठ

ग्रे टेक्स्ट से काफी मिलता-जुलता है। ठीक है, तो

वहां से बचने के लिए चीजें ।

लिंक पर अगला - अपने सभी लिंक करें

जहां राज्य के लिए पर्याप्त जानकारी प्रदान

वे नेतृत्व करते हैं?

यहां हम स्क्रीन रीडर के लिए मुद्दों को देख रहे हैं

उपयोगकर्ता - आमतौर पर नेत्रहीन लोग जैसा कि मैंने पहले कहा था।

तो यहां मुझे एक वर्डप्रेस साइट मिली है, इसके बारे में

एक प्लगइन जो उपलब्ध है। मेरे पास एक लिंक है

यहां कहते हैं कि ' यहां क्लिक करें ' कि खोजने के लिए है

अधिक से अधिक। मैं एक और लिंक है कि कहते हैं, मिल गया है

'यहां क्लिक करें' कि शर्तों को पढ़ने के लिए है और

शर्तों। अब मुझे कोई समस्या नहीं हो रही है

यहां क्रिया पर, क्योंकि जाहिर है हर कोई नहीं है

क्लिक करते हुए, वे छू सकते हैं या कीबोर्ड

यह करने के लिए टैबिंग ।

समस्या स्क्रीन रीडर उपयोगकर्ताओं के लिए है, है

कि अक्सर स्क्रीन रीडर उपयोगकर्ताओं कार्यक्षमता का उपयोग करेंगे

इस तरह - जो सभी लिंक की एक सूची है

पृष्ठ पर है कि वे पर एक नज़र हो सकता है।

और यह एनवीडीए स्क्रीन रीडर का उपयोग कर रहा है जो

विंडोज के लिए उपलब्ध है और यह उन मिल गया है

वहां दो लिंक । अब वे मुझे दो अलग करने के लिए ले

स्थानों, लेकिन वहां में स्पष्ट कुछ भी नहीं है

लिंक पाठ मुझे बताने के लिए कि वे कहां जा रहे है

मुझे ले लो। और कारण है कि महत्वपूर्ण है

यहां है क्योंकि मैं इस बॉक्स का उपयोग यहां कर सकते है

वास्तव में यहां से लिंक का पालन करें, बल्कि

अंतर्निहित पृष्ठ पर वापस जाने से।

ठीक है, इसलिए वास्तव में ठीक करना काफी आसान है। काफी

परीक्षण करने में आसान है, और ठीक करने में काफी आसान है। तुमसे हो सकता है

सामग्री को बदलकर कुछ कहना है जैसे 'खोजें

बाहर कैसे हम प्लगइन अद्यतन ' और ' शर्तों और

स्थितियां '।

तो अब जब मैं एक स्क्रीन रीडर का उपयोग कर रहा हूं और

मैं लिंक की सूची मिलता है यह बहुत अधिक है

स्पष्ट है कि इन लिंक के लिए क्या कर रहे हैं ।

तो यह एक बहुत सही हाथ पर लोगों के लिए आसान है

एक स्क्रीन रीडर उपयोगकर्ता के लिए पक्ष।

ठीक है, हम इससे बचना चाहते हैं, बहुत सारे 'क्लिक करें

यहां है और ' अपने सभी पृष्ठों पर और अधिक पढ़ें ।

चलो छवियों और वीडियो के बारे में थोड़ा बात करते हैं। इस

अगला प्रश्न - क्या आपकी सभी छवियां उपयुक्त हैं

वैकल्पिक पाठ? और आप इसका परीक्षण कर सकते हैं

वेव नामक ब्राउज़र एक्सटेंशन का आसानी से उपयोग करना,

जो आपको दिखाएगा कि वैकल्पिक पाठ क्या है

छवियों के लिए है।

यह स्क्रीन उपयोगकर्ताओं के लिए महत्वपूर्ण है, जो हो सकता है

अंधा हो, क्योंकि वे जानते हैं कि वहाँ है

वहां एक छवि, संभावित है, लेकिन वे चाहते है

यह जानने के लिए कि छवि का मतलब ठीक है। तो जब आप कर रहे हैं

क्लासिक में अपने वैकल्पिक पाठ की स्थापना

संपादक आप इस बॉक्स का उपयोग यहां चाहते हैं । और यह एक है

अच्छा विचार है, भले ही आप कैप्शन की आपूर्ति कर रहे हैं,

वास्तव में वैकल्पिक पाठ के रूप में अच्छी तरह से सेट करने के लिए।

और यह वही है जो यह गुटेनबर्ग का उपयोग करने जैसा दिखता है

संपादक के रूप में अच्छी तरह से - बात की एक ही तरह। आप कर रहे हैं

यहां स्क्रीन रीडर उपयोगकर्ताओं की मदद करना।

यदि आपको ऐसी छवियां मिली हैं जो लिंक हैं, और अक्सर

अपने ब्लॉग इंडेक्स पेज पर आप ऐसा करेंगे,

आपका वर्डप्रेस थीम वास्तव में इन्हें बना सकता है

छवियां जो ब्लॉग इंडेक्स पेज पर यहां हैं

वास्तव में ब्लॉग पोस्ट के लिए एक लिंक. और यह

एक वर्डप्रेस थीम है जिसका उपयोग मैंने अपने लिए किया है

खुद की संगीत वेबसाइट और वर्डप्रेस थीम

क्या है कि मेरे लिए स्वचालित रूप से । यह वास्तव में

लिंक गंतव्य को वैकल्पिक के रूप में रखता है

इस छवि के लिए पाठ के बजाय यह कह

' मुझे गिटार बजाना ', जो बहुत अधिक है

सहायक।

और तुम यहां देख सकते है कि मैं अंतर्निहित मिल गया है

कोड। मैं इस लिंक यहाँ मिल गया है, और केवल

उस लिंक में बात यह छवि है । और

वैकल्पिक पाठ, इस मामले में, तो हो जाता है

उस छवि के लिए लिंक पाठ। तो यह अच्छा है ।

अब सभी विषयों है कि दुख की बात है । यह विशेष रूप से

विषय ऐसा नहीं करता है। तो यहां मुझे एक सूची मिली है

मेरी स्क्रीन रीडर में लिंक की और यह है

इस विशेष ब्लॉग पोस्ट के लिए विशेष रुप से प्रदर्शित छवि

जिसे आईएसटीसी दक्षिणी क्षेत्र कहा जाता है। और वह है

ब्लॉग पोस्ट, कि ब्लॉग पोस्ट के लिए एक कड़ी है,

लेकिन यह भी एक ही ब्लॉग पोस्ट के लिए एक कड़ी है

लेकिन वैकल्पिक पाठ कोआला भालू है। यह है

महान वैकल्पिक पाठ नहीं है, क्योंकि यह वास्तव में है

वास्तव में कोआला भालू के बारे में नहीं। यह सिर्फ मैं है

विशेष रुप से प्रदर्शित के रूप में इस छवि को चुनने के लिए हुआ

उस ब्लॉग पोस्ट के लिए छवि.

अगले एक वीडियो के आसपास है । प्रश्न आठ

- क्या आपके सभी वीडियो में कैप्शन हैं?

यह मुझे यह बहुत प्रस्तुति कुछ कर रही है

समय पहले और यूट्यूब पर इसका एक वीडियो है।

और मुझे यकीन है कि सभी कैप्शन थे बनाया है

जी हाँ। जाहिर है कैप्शन महत्वपूर्ण हैं

उन लोगों के लिए जो बहरे या सुनने में कठिन हैं,

लेकिन वास्तव में कई अन्य लोग कैप्शन का उपयोग करते हैं

वीडियो भी देखते समय - शायद इसमें

एक शोर वातावरण।

अगले खंड के आसपास चीजों का एक समूह है

अपनी सामग्री को साइनपोस्ट करना। और मुख्य रूप से यहां

हम स्क्रीन रीडर उपयोगकर्ताओं की मदद कर रहे हैं।

तो अगला सवाल - क्या आपके पेज के शीर्षक हैं

अद्वितीय और सार्थक? और जाहिर है, आप

इस के लिए हां जवाब देने की जरूरत है ।

आम तौर पर, यह आपके लिए ध्यान रखा जाता है

वर्डप्रेस थीम। यहां मुझे पेज टाइटल मिल गया है।

यह वही है जो ब्राउज़र टैब में दिखाया गया है

यहां ऊपर, और आम तौर पर यह जो कुछ भी होगा

पेज शीर्षक आपके वर्डप्रेस में सेट है

संपादक। और इसलिए यह बहुत अच्छा है। यह क्यों महत्वपूर्ण है

शीर्षक तत्व यहाँ सेट है, और जब

एक स्क्रीन रीडर उपयोगकर्ता के लिए एक पृष्ठ पर आता है

पहली बार बहुत पहली बात यह है कि हो जाता है

उन्हें बाहर पढ़ें पृष्ठ शीर्षक है। तो यह

उन्हें यह जानने में मदद करता है कि वे सही में हैं

जगह। और आप परीक्षण कर सकते हैं कि जांच करके

यहां शीर्ष पर ब्राउज़र टैब।

अगला - क्या आपके पेज उचित उपयोग करें

शीर्षक और उपसिरने?

एक बार फिर स्क्रीन रीडर के लिए काफी महत्वपूर्ण

उपयोगकर्ताओं। ठीक है, आप ब्राउज़र का उपयोग करके इसका परीक्षण कर सकते हैं

विस्तार वेव कहा जाता है, और यहां मैं एक मिल गया है

शीर्षक स्तर 1, क्योंकि वेव भी आपको दिखाता है

यहां शीर्षक का स्तर । शीर्ष स्तर शीर्षक,

और दूसरा स्तर यहां शीर्षक । ठीक है, और यह

एक अच्छी बात है कि आप वास्तव में उपयोग कर रहे है

ठीक से शीर्षक।

कारण यह स्क्रीन रीडर के लिए एक अच्छी बात है

उपयोगकर्ता इसलिए है क्योंकि एनवीडीए में एक बार फिर, आप कर सकते हैं

इस तत्व सूची का उपयोग यहां जो वास्तव में

आप एक पर शीर्षकों की एक सूची दिखाएगा

पृष्ठ। तो अगर मैं एक शीर्षक मैं दिलचस्पी रहा हूँ पा सकते हैं

में, मैं जल्दी से उस शीर्षक के लिए कूद सकते हैं और

यह मुझे उस खंड में ले जाएगा

पृष्ठ।

ध्यान देने वाली महत्वपूर्ण बात यह है कि एनवीडीए उजागर करता है

शीर्षक पदानुक्रम, चाहे मैं देख रहा हूं

यह यहां या सुनवाई यह मेरे लिए घोषणा की । और

तो यह मुझे कैसे की एक तस्वीर बनाने में मदद मिलेगी

पृष्ठ संरचित है। तो यह महत्वपूर्ण है

कोशिश करते हैं और सटीक के रूप में अपने शीर्षक पदानुक्रम पाने के लिए

संभव के रूप में।

एक और तरीका है कि स्क्रीन रीडर उपयोगकर्ता स्थानांतरित कर सकते हैं

पृष्ठों के आसपास स्थलों का उपयोग कर रहा है। तो क्या कर रहे हैं

स्थलों मैं आपको कहते सुना हो सकता है ।

खैर, स्थलों के भीतर पूर्वनिर्धारित क्षेत्र हैं

पृष्ठों। उदाहरण के लिए बैनर, नेविगेशन,

मुख्य सामग्री, पाद लेख, एक साइडबार अगर आप मिल गया

एक। और स्क्रीन रीडर उपयोगकर्ता चारों ओर कूद सकते हैं

इन विभिन्न वर्गों के लिए पृष्ठ।

ठीक है, ठीक है तुम उन का उपयोग कैसे करते हो?

वास्तव में, अब अधिकांश वर्डप्रेस थीम हैं

HTML5 अनुभागीय तत्वों का उपयोग करना। और यह क्या है

वे के लिए कर रहे हैं, वे वास्तव में स्थलों प्रदान

स्क्रीन रीडर उपयोगकर्ताओं के लिए। यही कारण है कि वे कर रहे है

वहां, एक पहुंच सुविधा।

तो मुझे मिल गया <header> <nav>है, <main>, <footer> </main> </nav> </header>

और <aside>. और ये स्थलों के बराबर है ।</aside>

लेकिन आप कैसे परीक्षण करते हैं कि मैं आपको पूछते हुए सुन सकता हूं।

खैर, इसके लिए एक ब्राउज़र एक्सटेंशन है

भी। ठीक है, कीबोर्ड के माध्यम से मील का पत्थर नेविगेशन

या पॉप-अप। यह क्रोम और फायरफॉक्स में उपलब्ध है,

और यह आपको सभी स्थलों पर दिखाएगा

एक पृष्ठ। जो जानना उपयोगी है, इसलिए आप कर सकते हैं

अपने खुद के पृष्ठों का परीक्षण जल्दी से करें। और वहां है

हालांकि इस वर्डप्रेस थीम के साथ एक प्रमुख समस्या,

यह किसी भी पृष्ठ पर मुख्य मील का पत्थर नहीं दिखाता है

या पोस्ट।

और वह शायद सबसे महत्वपूर्ण एक है

हर पृष्ठ में, मुख्य मील का पत्थर है, यह है

जहां मुख्य सामग्री है, लेकिन यह यहां नहीं है ।

ठीक है, अपनी सामग्री को साइनपोस्ट करने से दूर जाना,

चलो कुछ पाठ स्वरूपण के बारे में बात करते हैं ।

यह सवाल - क्या मैं किसी पेज पर टेक्स्ट का आकार ले सकता हूं

लेआउट तोड़ने के बिना? यह अभी भी होता है

काफी वेबसाइटों पर। यह महत्वपूर्ण है

गरीब दृष्टि वाले लोगों के लिए जो चाहते हैं

चीजें बड़ी हो, ठीक है ।

जहां यह सही नहीं है का एक उदाहरण.. । नहीं

एक वर्डप्रेस वेबसाइट यह एक है, और यह काफी है

पुराना। यह एक बॉक्स में लिंक की एक सूची है, और यह

क्या ऐसा लगता है जब मैं पाठ कर

बड़ा। लिंक बाहर गिरा दिया है क्योंकि

वे अधिक स्थान लेते हैं। वे बाहर गिरा दिया है

बॉक्स और दूसरे पर फैल शुरू कर दिया है

पृष्ठ पर बिट्स।

यह महसूस करना महत्वपूर्ण है कि पाठ का आकार घटाने

और ज़ूम करना एक ही बात नहीं है। वे कर रहे हैं

दोनों विशेषताएं जो सभी ब्राउज़र प्रदान करती हैं, और

लोग इनका इस्तेमाल अलग-अलग तरीकों से करते हैं। आमतौर पर

हम गरीब दृष्टि के साथ लोगों के बारे में बात कर रहे है

यहां, जो चाहते हैं कि चीजें बड़ी हों । कुछ लोग

ज़ूम करेंगे, कुछ लोग आकार का पाठ करेंगे। आप

अपनी वेबसाइटों के साथ, इसका परीक्षण करने की आवश्यकता है

यहां यह सुनिश्चित करने के लिए कि यह अंदर नहीं टूटता है

इस तरफ।

यहां कुछ और उदाहरण मैं काफी हाल ही में पाया है ।

तो वहाँ पर जा रहा टकराव के बहुत सारे, और वहाँ,

और कुछ ट्रंकेशन, जहां यह करने के लिए हो रही है

बिंदु जहां यह कुछ पढ़ने के लिए मुश्किल है

इस सामान की जब मैं पाठ बड़ा बना दिया है ।

अगले एक के बारे में बात करने जा रहा है स्वरूपण

पाठ पूरी तरह से जायज है।

ठीक है, तो यहां एक्ज़ेटर के बारे में पाठ का एक पैराग्राफ है

- यह गठबंधन छोड़ दिया है। यह वही है जो यह लग रहा है

जैसे जब यह पूरी तरह से उचित है ।

ब्राउज़र क्या कर रहा है यह खींच रहा है

शब्दों के बीच अंतराल, और यह बनाता है

हर किसी के लिए एक संज्ञानात्मक लोड का एक छोटा सा।

और क्या मैं यहां संकेत दिया है एक प्रभाव है

कि आप 'सफेद की नदियों' कहा जा सकता है

अंतरिक्ष', जो, यदि आप डिस्लेक्सिक हैं, तो आप हो सकता है

इस शब्द को पहचानें, क्योंकि पूरी तरह से उचित

पाठ जीवन कुछ के लिए बहुत मुश्किल बना सकते हैं

डिस्लेक्सिक्स।

मैं एक दोस्त है जो काफी डिस्लेक्सिक है ।

वह सिर्फ उस पाठ को पढ़ने में सक्षम नहीं होगा

दाहिने हाथ की ओर क्योंकि व्हाइटस्पेस

बस पर ले जाएगा ।

यह जनसंख्या का लगभग 8 से 10% है

डिस्लेक्सिया के कुछ फार्म, तो यह है कि एक बहुत कुछ है

लोग।

ठीक है उपयोगकर्ता इनपुट को देख रहे हैं। फ़ील्ड बनाएं। यह है

महत्वपूर्ण है कि आपके सभी फॉर्म फ़ील्ड में एक

लेबल के साथ।

अब यह स्क्रीन रीडर उपयोगकर्ताओं के लिए महत्वपूर्ण है

क्योंकि एक लेबल उन्हें बताता है कि इनपुट क्या

क्षेत्र के बारे में है । और यह महत्वपूर्ण है कि

लेबल प्रोग्रामेटिक रूप से इनपुट से जुड़ा हुआ है

क्षेत्रों इतना है कि स्क्रीन रीडर बाहर पढ़ता है

उपयोगकर्ता के आने पर सही पाठ

एक इनपुट फ़ील्ड।

और यहां मैंने वेव ब्राउज़र के साथ इसका परीक्षण किया है

विस्तार और यह मुझे इन हरे रंग के प्रतीक देता है

इस फार्म पर यहां, जहां लेबल सही ढंग से कर रहे है

इनपुट फ़ील्ड के साथ सौंपा गया।

हालांकि, यह हमेशा मामला नहीं है । और यहां

मैंने एक वेबसाइट पर संपर्क फॉर्म 7 प्लगइन का उपयोग किया है,

बस इसे आजमाने के लिए। और यह डिफ़ॉल्ट के साथ है

सेटिंग्स, और दुर्भाग्य से लेबल हैं

इनपुट फ़ील्ड से ठीक से लिंक नहीं है, इसलिए

यह जीवन स्क्रीन के लिए बहुत कठिन कर देगा

पाठक उपयोगकर्ताओं। तो आप वेव के साथ परीक्षण कर सकते हैं।

ठीक है, पिछले खंड पर चल रहा है, और

रंग विपरीत के आसपास अंतिम प्रश्न।

यह मेरी मां की तस्वीर नहीं है, लेकिन मैं

उसे वेबसाइटों के बारे में शिकायत करते देखा है, जहां

सामान को बाहर करना असंभव है क्योंकि

रंग विपरीत अभी पर्याप्त स्पष्ट नहीं है ।

और यहां एक वर्डप्रेस वेबसाइट है जहां दुर्भाग्य से

उन्होंने ब्रांडिंग रंगों को चुना है जो प्रदान करते हैं

रंग विपरीत समस्याओं का एक बहुत, सही भर में

साइट।

और मैं यहां एक उपकरण का उपयोग कर रहा हूं रंग कहा जाता है

कंट्रास्ट एनालाइजर। मैं आपको लिंक दिखाऊंगा

के लिए है कि एक पल में । और आप चुन सकते हैं

अग्रभूमि और पृष्ठभूमि रंग और यह

आपको तुरंत बताएंगे कि क्या है

एक एल्गोरिदम के लिए पर्याप्त रंग विपरीत

कि WCAG दिशा निर्देशों निर्दिष्ट करें । और इस में

मामले में वास्तव में बहुत कम है कि मिलता है

आवश्यकता है।

आप अपने पृष्ठों का परीक्षण करने के लिए उस उपकरण का उपयोग कर सकते हैं या

आप इस अन्य ब्राउज़र एक्सटेंशन का उपयोग कर सकते हैं जिसे कहा जाता है

कुल्हाड़ी। यह क्रोम और फायरफॉक्स के लिए उपलब्ध है,

और यह वास्तव में आपको एक लेआउट करते हुए दिखाएगा

आपको काफी कुछ पहुंच समस्याओं को दिखाएं,

जिसमें रंग विपरीत मुद्दे शामिल हैं। और

समस्या यहां है हरी पाठ अपर्याप्त है

सफेद पृष्ठभूमि के खिलाफ विपरीत।

ठीक है, कि सभी प्रश्न, 15 प्रश्न है,

और कुछ उपयोगी संसाधन हैं।

पहला उस रंग के विपरीत का लिंक है

उपकरण है कि मैं सिर्फ के बारे में बात की थी। यह उपलब्ध है

मैक के लिए, साथ ही विंडोज मशीनों और

फिर मुझे दो ब्राउज़र एक्सटेंशन मिल गए हैं।

वेव क्रोम और फायरफॉक्स के लिए उपलब्ध है।

AXe क्रोम, फ़ायरफ़ॉक्स के लिए उपलब्ध है, और

एज, लेकिन वह नया माइक्रोसॉफ्ट एज है । और

मुझे उम्मीद है कि वेव टूल के लिए उपलब्ध होगा

बहुत लंबे समय से पहले बढ़त।

ठीक है, अन्य उपयोगी लिंक के एक जोड़े। मैंने लिखा है

पहुंच के बारे में ब्लॉग पोस्ट के बहुत सारे - नहीं

आश्चर्यजनक रूप से - और यहां 10 साल से एक है

के लिए अच्छा वैकल्पिक पाठ लिखने के बारे में पहले

अपनी छवियों। भले ही यह 10 साल पुराना है,

इस ब्लॉग पोस्ट में सामान अभी भी बहुत है

प्रासंगिक। ठीक है, तो आप पर एक नज़र हो सकता है

उस।

मैं भी चारों ओर कुछ ब्लॉग पोस्ट लिखा है

फार्म फील्ड सही ढंग से कर रही है। कुछ है

वहां पर तो आप का पालन कर सकते है कि और यह होगा

आप उन लोगों की एक सूची के रूप में अच्छी तरह से वहां दिखाओ ।

और वहां हम जाते हैं । उस पर मेरी प्रस्तुति है

मुझे कैसे पता चलेगा कि मेरी वर्डप्रेस वेबसाइट सुलभ है या नहीं?

इस सत्र को साझा करें

फेसबुक पर साझा करें
ट्विटर पर साझा करें
लिंक्डइन पर शेयर करें
Pinterest पर साझा करें
ईमेल पर साझा करें