Back to Question Center
0

रिअल वर्ल्ड ऍक्सेसिबिलिटी: HTML5, ARIA आणि आधुनिक वेब            रिअल वर्ल्ड ऍक्सेबिलिटी: HTML5, ARIA आणि आधुनिक वेबसंबंधित विषय: फ्रेमवर्क्स HTML सीएसएस मिमल

1 answers:
रियल वर्ल्ड ऍक्सेसिबिलिटी: HTML5, ARIA आणि आधुनिक वेब

वेब डिझाइनर आणि विकासकांना तंत्रज्ञानाची गरज आहे जे पुढे काय आहे यावर लक्ष ठेवतानाच कार्य करतात. असे करण्यासाठी, साप्ताहिकने प्रत्येक कार्यशाळेत एक लक्ष केंद्रित केला आहे ज्यायोगे गेल्या सात वर्षांपासून साम्लाट शिकलो: विकसक आणि डिझायनर्सच्या सुलभ वेबसाइट्स आणि ऍप्लिकेशन्स तयार करण्यासाठी सर्वोत्तम वास्तविक समाधान मिळवणे.

खरं जग म्हणजे काय? हे अगदी सोपे आहे: व्हॅक्यूममध्ये मिश्ॅमॉल नसावे आणि अस्तित्वात नसावे. वास्तविक जग गोंधळात टाकणारे आहे - frei transporter. हे काळा आणि पांढरे नसले तरी दरम्यानचे सर्व रंगीबेरंगी हे प्रवेशयोग्यतेवर लागू होते परंतु सर्वसाधारणपणे आमच्या क्राफ्टला देखील लागू होते. आम्हाला तडजोड करावी लागतील आपल्याला पर्याय निवडाव्या लागतात. आम्हाला मध्य-प्रवाहांची डावपेच बदलण्याची गरज आहे. आणि आपण ते उद्याच संपवावे लागेल.

आणि म्हणूनच आपण रिअल वर्ल्ड ऍक्सेसिबिलिटीवर लक्ष केंद्रित करतो. आपण आता काय करता हे जाणून घेणे आवश्यक आहे जेणेकरुन आपण आधुनिक वेब तंत्रज्ञानाचे अंमलबजावणी करताना आपण माहितीपूर्ण निर्णय घेऊ शकाल गेल्या दोन वर्षांपासून, आम्ही HTML5, CSS3 आणि ARIA साठी रिअल वर्ल्ड ऍक्सेसेबिलिटीवर लक्ष केंद्रित केले आहे- आम्ही या महिन्यासाठी साम्बाल्ट लावणार्या कार्यशाळेत आहोत.

2011 च्या संध्याकाळी @ फेदर टूर डाउन टिपसाठीची तयारी (Twitter वर मिमल @ चेहरण) आम्ही सामग्रीवर प्रकाश टाकणारा पृष्ठ आणि आपण काय मिळवू याची माहिती काढली. हे आम्ही बांधले पहिले HTML5 साइट / पृष्ठ नाही, परंतु आम्हाला अशी एखादी गोष्ट करायची होती जिने एक अनोखी रचना तयार केली, प्रवेशयोग्य होती आणि आम्हाला वेब डिझाइन आणि विकासासाठी काही आधुनिक तंत्रांची चाचणी करण्याची संधी दिली.

आम्ही HTML5 सह काहीतरी तयार केलेले सममूल्य वेळ, आम्हाला आता हे कसे शक्य आहे ते जवळून पाहण्याची संधी मिळते आणि आपल्याला नवीन तंत्रज्ञानासह प्रवेशयोग्यता कशी असेल याची एक झलक मिळते.

HTML5 सिमेंटिक्स

मी नवीन सिमेंटिक्सचा एक चाहता आहे जो HTML5 आमच्यासाठी आणतो, बहुतांश भागांसाठी. आमच्यासाठी नवीन दारे उघडून आहेत- जगभरातील लेखक HTML5 मध्ये प्रस्तुत केलेल्या आवृत्तीत ध्वनी घटक वापरण्यासाठी उत्साहित आहेत

आणि प्रत्येकाला माहीत आहे की प्रवेशयोग्यताचा पाया म्हणजे सिमेंटिक, बरोबर? उजवे

मग जेव्हा आपण HTML5 सारख्या तर्कशास्त्रापूर्वी लिहिलेल्या ब्राउझर आणि सहाय्यक तंत्रज्ञानासह तर्कशुद्धपणे अर्थपूर्ण समृद्ध भाषेचा एकत्रित केला तर काय होते?

काहीही नाही आणि ही समस्या आहे

एचटीएमएल 5 च्या अर्थसंकल्प आम्हाला आणण्यासाठी जे फायदे आहेत ते प्रवेशयोग्यतेसाठी खरोखर वरदानच नाहीत- अद्याप . (जे HTML5 घटक पूर्णपणे ब्राऊझरद्वारे उघड करतात आणि विविध ऑपरेटिंग सिस्टिमच्या ऍक्सेबिबिलिटी एपीआयमध्ये प्रवेश करतात, HTML5 उपकरणाची तपासणी करण्याचे सुनिश्चित करण्यासाठी.)

HTML5 मध्ये प्रवेशयोग्यता विकसित होत आहे डब्ल्यू 3 सीमध्ये HTML5 प्रवेशयोग्यतेसाठी समर्पित एक संघ आहे आणि HTML5 च्या विकासासाठी प्रवेशयोग्यता सुरूच राहिली तर, मी प्रवेश करण्याकरिता जे काही करत आहे ते भविष्यात काय करणार आहे याबद्दलच नाही तर "येथे आणि येथे काय कार्य करते याबद्दल माझी सर्वोत्कृष्ट कारवाई करणार आहे. आता " का? कारण ब्राउझरमध्ये HTML5 साठी आम्ही "समर्थन" आहे आता . आणि याचा अर्थ लोक (3 9) आता वापरणार आहेत. याचा अर्थ असा की हे प्रवेशयोग्य आता .

मूळ लिखाण म्हणून एचटीएमएल 5 प्रवेशयोग्यतेसह जगाची स्थिती:

  1. आत्ता आपण आमच्या वेबसाइट्स आणि अॅप्समध्ये नवीन घटक (लेख, विभाग, बाजूला, शीर्षलेख, तळटीप, nav काही नाव) वापरू शकता.
  2. (4 9) आम्ही HTML5 shiv वापरुन अस्तित्त्वात असलेल्या घटकांना प्रामुख्याने समझू नये अशा ब्राऊझरची युक्ती करू शकतो. होय हे JavaScript वापरते आणि नाही, ते वापरण्याचे काही कारण नाही. होय, आपण "JavaScript बंद" स्थितीचा विचार करणे आवश्यक आहे, परंतु आम्ही त्याबद्दल नंतर अधिक बोलू. (4 9) आम्हाला माहित असणे आवश्यक आहे की HTML5 च्या सिमेंटिक सध्या अस्तित्वात असलेल्या सहाय्यभूत तंत्रज्ञानाद्वारे अभिव्यक्त किंवा निष्कर्षित नाहीत.
  3. आम्ही HTML5 सारख्या उदयोन्मुख तंत्रज्ञानाच्या समर्थनाची प्रतीक्षा करत आहोत, तेव्हा आम्हाला आता कार्य करणारे समाधान शोधण्याची आवश्यकता आहे.

वेब सामग्री प्रवेशयोग्यता मार्गदर्शक तत्त्वे

मला आनंद होत आहे की आम्ही WCAG 1. वरुन हलवलं आहे. 0, पण मला त्याची एक आकर्षणे दिसतात: अंतरिम सोल्यूशन्स मिमल ते आम्हाला सांगितले:

"अंतरिम उपाय वापरा"

अंतरिम प्रवेशयोग्यता समाधानाचा वापर करा जेणेकरून सहायक तंत्रज्ञाने आणि जुन्या ब्राऊजर हे योग्यरितीने ऑपरेट करतील "

मला स्पष्ट करा: मला डब्ल्यूसीएजी 1 मध्ये विशिष्ट वस्तूंवरील सोल्यूशन्स आवडत नाहीत. हे चेकपॉईंट सर्व "युझर एजंट्स" पर्यंत किंवा X ला करण्याची परवानगी देतात, या तंत्रांचा वापर करतात. वापरकर्ता एजंट आता या गोष्टी करतात, म्हणून आम्हाला WCAG 2 सह काळजी करण्याची आवश्यकता नाही. 0. ते इतके महत्त्वपूर्ण आहेत की मिल्ठलने त्यांना येथे उल्लेख करण्याबद्दलही जात नाही.

पण (30) अंतरिम उपाय वापरण्यामागे विचार काही विशिष्ट तंत्रज्ञानाच्या जुन्या सहाय्यक तंत्रज्ञान किंवा ब्राऊझर्समध्ये पूर्ण समर्थन नसल्याची जाणीव होती आणि आम्ही (3 9) त्या परिस्थितीनुसार विचार करणे आवश्यक आहे.

आणि हे आत्ताच HTML5 सह झाले आहे.

मग सहाय्यक तंत्रज्ञानाला अर्थशास्त्र समजण्यासाठी मदत करण्यासाठी आम्ही HTML5 सह "Semaltेट निराकरण" वापरू शकतो काय?

वाय-एआरआयए

वापरणे

एआरआयए (ऍक्सेसिब रिच इंटरनेट Semaltलेट) एक तंत्रज्ञान आहे जो प्रोग्रामॅटीने प्रोग्रम निर्दिष्ट करण्यास मदत करतो जे यूजर इंटरफेस घटकास (किंवा "विजेट") अधिक स्पष्टपणे काय आहे, जेणेकरुन सहायक तंत्रज्ञानामुळे त्याच्या वापरकर्त्यांना अधिक अर्थ प्राप्त होईल.

हा सहसा "ब्रिज टेक्नॉलॉजी" म्हणून ओळखला जातो, ज्यायोगे तो भूतकाळातील, वर्तमान आणि भविष्यातील फरक पुर्ण करण्यास मदत करतो. थोडक्यात, आमच्याकडे जुने मार्कअप आणि कोडींग पद्धतींचा वापर करणारे विद्यमान लेगसी वेब अनुप्रयोग असल्यास, आम्ही अधिक आधुनिक भाषांसह संपूर्ण अनुप्रयोग पुन्हा सिंहासन न करता मार्कअपवर ARIA गुणधर्मांचा वापर करून अधिक प्रवेशयोग्य बनविण्यात मदत करू शकतो.

ARIA ने कसा मदत करतो हे नमूद करा.

या साम्प्रदायिक नकाशे अंमलबजावणीवर विचार करा: http: // उदाहरणे. फोर्चहेअरहेड कॉम / अरिया / स्लाइडर / इंडेक्स -3 html

(9 1)

लक्षात घ्या की आम्ही नकाशावर सानुकूल नियंत्रणे वापरली आहेत जे उत्कृष्ट कीबोर्ड प्रवेशासाठी अनुमती देतात मानक Semalt नकाशा नियंत्रण बदलण्यासाठी आम्ही सानुकूल स्लायडर नियंत्रण देखील लागू केले आहे.

आमच्याकडे एचटीएमएलमध्ये मुळ स्लायडर घटक नाही (किमान सध्याचे नाही), म्हणून आम्ही एचटीएमएल, सीएसएस आणि Semaltेट यासारख्या स्लाइडरची रचना केली ज्यामुळे हे स्लाइडर कंट्रोलच्या दृश्यमान स्वरूप आणि कार्यक्षमतेची तुलना करते. समस्या अशी आहे की जेव्हा आपण असे करतो तेव्हा आम्ही खरोखरच एक जटिल वापरकर्ता इंटरफेस घटक तयार करतो जे अर्थपूर्ण अर्थहीन divs, spans, प्रतिमा, दुवे आणि बटणे यांचा समावेश आहे.

  1. कोणत्याही जटिल यूजर इंटरफेस घटकासाठी, आम्हाला माहितीचे तीन तुकडे माहित असणे आवश्यक आहे:
  2. ही गोष्ट काय आहे? (त्याची भूमिका)
  3. (4 9) त्यात कोणते सामान्य लक्षण आहेत? (त्याच्या गुणधर्म)
  4. आत्ता मला याबद्दल काय सांगाल? (त्याचे राज्य)

संपूर्ण, त्याच्या भागांच्या बेरजेपेक्षा जास्त आहे; एकत्र घेतले, त्या divs, spans, प्रतिमा आणि दुवे काहीतरी अधिक तयार (एक स्लायडर). एआरआयएमुळे आम्हाला संपूर्ण अर्थ स्पष्टपणे सांगता येतो जेणेकरून सहायक तंत्रज्ञानामुळे तो खाली खंडित करण्याऐवजी आणि त्याच्या वैयक्तिक घटकांना समजून घेण्याचा प्रयत्न करण्याने संपूर्णपणे चांगल्या प्रकारे समजून घेता येईल.

सेमॅटने आपण असे काही मार्कअप वापरले असेल:

        11        

लिंक आम्हाला एक लक्षणीय नियंत्रण प्रदान करते जे आम्ही स्लाइडरच्या "थंब" साठी वापरू शकतो जे रेल्वेच्या बाजूने स्लाइड करेल. लिंक टेक्स्ट आपल्याला सद्य झूम स्तर

सांगते, जे स्क्रीनवरदेखील प्रदर्शित केले जाते. आम्ही तो "स्लायडर" बनवण्यासाठी "रेल्वे" साठी अग्रभूमी किंवा पार्श्वभूमी प्रतिमा वापरतो, आणि मग आम्ही योग्य थांबा आणि माउससह थंब हाताळण्याची अनुमती द्यावी.दुवा कशाबद्दल आहे किंवा त्याचा काय संबंध आहे याची चिन्हे म्हणून नाही.

आपण हे कसे चांगले करू शकतो? आम्ही काही ARIA विशेषता जोडतो:

        11        

मार्कअप फारच सोपे आहे. आम्ही काही गोष्टी केल्या:

  1. घटक (1 111) भूमिका = "स्लायडर" ),
  2. वापरण्यात आले aria- orientation = "vertical" ते पृष्ठ मध्ये अनुलंब उन्मुख आहे हे निर्दिष्ट करणे, आणि,
  3. त्या स्लाइडरला अनेक गुणधर्म जोडला अरिया-व्हॅल्यूमिन = "0" , अरिया-व्हॅलॅमॅक्स = "17" , अरिया-व्हिक्टेटेड = "14" , आणि अरिया-व्हॅल्यूएनओ = "14" ).

आम्ही रेल्वेवर थंबच्या स्थितीत बदलण्यासाठी जावास्क्रिप्टचा वापर करतो तेव्हा आम्ही झूम स्तर जुळविण्यासाठी अरिया-व्हिलनॉओ आणि अरिया-व्हिक्लेटेक्स्ट चे मूल्य बदलू शकतो. ARIA गुणधर्म अद्ययावत केले जातात, आणि प्रदान केलेल्या सहाय्यभूत तंत्रज्ञानाच्या योग्य भागांचा वापर करीत असल्यास, आम्ही त्या इंटरफेस घटकासह योग्य घोषणा किंवा परस्परसंवाद प्राप्त करतो. स्क्रीन वाचक वापरकर्ता उदाहरणार्थ, ऐकू येईल की वापरकर्ता इंटरफेस घटक स्लाइडर आहे, आणि ते ऐकले असेल की मूल्य रेल्वेच्या बाजूने थंबने हलविण्याच्या प्रतिक्रियेत मूल्य बदलते.

ARIA आम्हाला काय देते: जटिल वापरकर्ता इंटरफेस घटकांसाठी प्रोग्रामेटिक प्रवेशयोग्यता प्रदान करण्याची क्षमता. त्यात खूप अधिक माहिती द्या, पण थोड्याच वेळात ARIA आहे.

आता तर मी तुम्हाला सांगण्यासाठी सांगतो की हे

ARIA आणि HTML5

लक्षात ठेवा की आम्ही अंतरिम सोल्यूशन्सच्या कल्पनांबद्दल बोललो होतो? अर्माल्ट जेथे ARIA आणि HTML5 एकत्र येतात.

एआरआयएला सहाय्यक तंत्रज्ञानामध्ये उत्तम आधार आहे. हे अचूक नाही, परंतु स्क्रीन रीडर आणि मॅग्निफायर आणि इतर तंत्रज्ञानामुळे एआरआयएला समर्थन देण्यापेक्षा ते HTML5 च्या सहाय्याने जास्त आहेत. का? खुपच अगदी ARIA तरीही "नवीन आहे," ते HTML5 पेक्षा जुने आहे सेरिअल तंत्रज्ञानातील विक्रेत्यांनी एआरआयएच्या काही भागांना पाठिंबा दिला आहे आणि हे समर्थन वाढू लागले आहे.

या स्तरावरील समर्थनाची क्षुल्लक तूम्ही एचआरडीएक्सला काही सीमेंट्स देण्यासाठी आम्हाला ARIA जोडू शकता, परंतु अद्याप सहाय्यक तंत्रज्ञानाच्या सहाय्याने हे उघड झाले नाही.

आम्ही बांधणी केलेल्या साइट्समध्ये HTML5 च्या अर्थशास्त्रांची पूर्तता करण्यासाठी आम्ही ARIA वापरतो. 2010 च्या तुलनेत फक्त सुलभतेने आम्ही ऍक्सेसिबिलिटी केंद्रित साइटला पुन्हा लाँच केले आणि कित्येक ARIA महत्त्वाच्या भूमिकांद्वारे परिभाषित केले जे अर्थास देण्यास मदत करतात जेथे ते HTML5 द्वारे अद्याप वितरित केले जाऊ शकत नाही.

पृष्ठावर मुख्य सामग्रीवर आम्ही भूमिका = "मुख्य" जोडले जे HTML5 च्या <लेख> घटकांसह चिन्हांकित केले आहे. आम्ही साइडबारमधील संबंधित सामग्रीसाठी भूमिका = "पूरक" घटक वापरले. आणि पृष्ठाच्या सर्वात वर आणि खाली दोन्ही

March 1, 2018