1. क्या मैं सही रास्ते पर हूं? अगर कोई कुछ बदलावों की सिफारिश नहीं कर सकता है?
हां, आपने बिल्कुल एक अच्छे तरीके से शुरुआत की है। यदि आप इसे सुधारना चाहते हैं तो कुछ टैब सामग्री को कुछ टैब-संबंधित भूमिकाएं दी जा सकती हैं, लेकिन यह कार्यात्मक है।
2. अगर मुझे AJAX के माध्यम से आलेखों में लोड करना होता है तो क्या मुझे परिवर्तन करने की आवश्यकता होगी?
नहीं। यह ठीक होना चाहिए। तथ्य यह है कि यह एक लाइव क्षेत्र है (केवल एनवीडीए के साथ परीक्षण किया जाना चाहिए) का मतलब है कि नई सामग्री की घोषणा की गई है। क्या यह व्यवहार आप के बाद है?
3. क्या मुझे नौसेना टैग की आवश्यकता है?
नहीं, लेकिन मुझे लगता है कि यह क्रिस्टल को स्पष्ट करने में मदद करता है कि दस्तावेज़ का वह हिस्सा क्या है। हालांकि, एक नोट हालांकि, यदि आप नीचे करते हैं और इसे एक टैबलेट के रूप में चिह्नित करते हैं, तो तथ्य यह है कि यह एक नेविगेशन तत्व है और अब घोषणा नहीं की जाती है।
4. क्या वाई-एआरआईए भूमिकाएं यहां पर्याप्त हैं?
यदि एआरआईए भूमिकाओं से आप राज्यों और गुणों सहित भी हैं, तो हां अनिवार्य रूप से आपको गतिशील सामग्री लोड करने के लिए कवर किया जाना चाहिए (यदि आप यही कर रहे हैं)। उपयोगकर्ता के कीबोर्ड फोकस या चीज़ों के साथ कुछ भी करने के लिए कोई मामला नहीं है। आईएमओ, आप वास्तव में ऐसा करना चाहते हैं यदि उपयोगकर्ता ने क्लिक किया और आप किस सामग्री को दे रहे हैं, उसके बीच बहुत सी नेविगेशन सामग्री है।
5. क्या ये सही वाईए-एरिया भूमिकाओं का उपयोग करने के लिए हैं?
आप बहुत दूर नहीं हैं। यदि आप वास्तव में एक टैब-स्टाइल अनुभव चाहते हैं, तो आपको टैबलेट, टैब और टैबपेनल भूमिकाओं की आवश्यकता है। मैं एक उदाहरण दूंगा।
मैंने आपका कोड लिया है और इसका परीक्षण करने के लिए एक योगदान दिया लेकिन कामकाजी उदाहरण बना दिया है। यह AJAX में कुछ भी लोड नहीं कर रहा है, बस सामान दिखा रहा है और छुपा रहा है। मैं यह जवाब देने से पहले सुनिश्चित करना चाहता था, लेकिन अगर यह मदद करता है तो मैं कोड भी यहां डाल दूंगा।
<html>
<head>
<title>Aria test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('nav a').on('click', function() {
hideArticles();
deslectAllTabs();
$(this).attr('aria-selected', true);
var tab = '#' + $(this).attr('aria-controls');
$(tab).show();
});
});
function hideArticles() {
$('article').hide();
}
function deslectAllTabs() {
$('nav a').attr('aria-selected', false);
}
</script>
<style type="text/css">
article { display: none; }
</style>
</head>
<body>
<section>
<nav role="tablist">
<a href="#tab" aria-controls="content1" id="tab1" role="tab">Stuff1</a>
<a href="#tab" aria-controls="content2" id="tab2" role="tab">Stuff2</a>
<a href="#tab" aria-controls="content3" id="tab3" role="tab">Stuff3</a>
</nav>
<section id="content" aria-live="polite" role="region">
<article id="content1" role="tabpanel">The lazy dog jumped over the quick fox</article>
<article id="content2" role="tabpanel">If you click this tab then your life will be better</article>
<article id="content3" role="tabpanel">Know your roles</article>
</section>
</section>
</body>
</html>
मुझे उम्मीद है कि इससे मदद मिलती है।
"सबसे अर्थपूर्ण मार्कअप" पर प्रश्न मुख्य रूप से राय आधारित हैं और ठोस उत्तरों के बजाय चर्चा और बहस को जन्म देते हैं। यदि आपने सबसे सुलभ मार्कअप के लिए कहा है, तो यह अधिक रचनात्मक होगा, खासकर अगर आपने समझाया कि आप किस तरह की विकलांगता के बारे में सोच रहे हैं। लेकिन आपको यह भी समझाया जाना चाहिए कि "टैब्ड सेक्शन" और "टैब्ड कंटेंट" (विशेष रूप से तकनीकी कार्यान्वयन बिंदु से, यानी टैब को कैसे काम करना चाहिए) से आपका क्या मतलब है। –