सुलभ स्थलों

डब्लुसीएजी 2.4.1 बायपास ब्लॉक सफलता मानदंड बताता है कि स्क्रीन रीडर जैसी सहायक तकनीकों को उपयोगकर्ताओं को कई वेब पेजों पर बार-बार सामग्री के ब्लॉक को बायपास करने के लिए लैंडमार्क द्वारा नेविगेट करने की अनुमति देनी चाहिए।

HTML संरचना को शब्दार्थ की दृष्टि से सही और सटीक रूप से परिभाषित करना आवश्यक है। सहायक तकनीकों का उपयोग करके पृष्ठ की सामग्री को नेविगेट करने में उपयोगकर्ताओं की मदद करने में लैंडमार्क एक सार और महत्वपूर्ण भूमिका निभाते हैं। यह पृष्ठ के अनुभागों को प्रोग्रामेटिक रूप से पहचानता है और उपयोगकर्ताओं को सामग्री को अधिक सार्थक तरीके से समझने की अनुमति देता है।

कुंजी पृष्ठ की तार्किक संरचना की पहचान करना और पृष्ठ को सिमेंटिक रूप से मान्य बनाने के लिए उपयुक्त लैंडमार्क भूमिकाओं या HTML5-परिभाषित तत्वों का उपयोग करना है।

लगभग सभी पृष्ठों में एक मानक संरचना होती है: शीर्ष लेख , मुख्य , नेविगेशन , क्षेत्र , पाद लेख और एक तरफ ।

<शीर्षलेख> पृष्ठ पर एक बैनर की पहचान करें, जो आम तौर पर शीर्ष पर स्थित होता है। इसमें मुख्य रूप से खोज, ब्रांड लोगो और मुख्य नेविगेशन शामिल हैं। आदर्श रूप से, प्रत्येक पृष्ठ में केवल एक बैनर लैंडमार्क होना चाहिए।

Using the HTML5 element

<header>
  <div>
    company logo..brand name
  </div>
  <nav>
    main navigation of the website
  </nav>
</header>

Using the Aria Technique

<div role=“header”>
    company logo.. brand name or navigation 
</div>

Using the HTML5 element

<main>
  <h1> main heading for the page </h1>
  <div> main content goes here </div>
</main>

Using the Aria Technique

<div role=“main”>
  <h1> main heading of the page </h1>

   ........main content goes here.......

</div>

Using the HTML5 element 

<nav id="primary-nav" aria-label="primary navigation">
  <ul>
    <li><a href="page-link-1">page link 1</a></li>
    <li><a href="page-link-2">page link 2</a></li>
    <li><a href="page-link-3">page link 3</a></li>
    <li><a href="page-link-4">page link 4</a></li>
  </ul>
</nav>

More than one <nav> tag in the same page

<nav aria-labelledby="pagination-nav">
  <h2 id="pagination-nav">heading content</h2>
  <ul>
    <li><a href="page-link-1">page link 1</a></li>
    <li><a href="page-link-2">page link 2</a></li>
    <li><a href="page-link-3">page link 3</a></li>
  </ul>
</nav>

Using the Aria Technique

<div role="navigation">
  <ul>
    <li><a href="page-link-1">page link 1</a></li>
    <li><a href="page-link-2">page link 2</a></li>
    <li><a href="page-link-3">page link 3</a></li>
  </ul>
</div>

HTML structure

<header>
  <a href="#main" id="skip-links" class="offscreen">
    skip to main
  </a>
</header>
<main id="main"></main>
CSS

.offscreen{
    position: absolute;
    left: -999px;
    width: 1px;
    height: 1px;
    top: auto;
    overflow: hidden;

  &:focus {
    position: static;
    margin: auto;
    width: auto;
    height: auto;
    }
}

Using the HTML5 element

<section aria-labelledby="heading_id">
  <h2 id="heading_id"> heading goes here</h2>
  .....region content goes here.....
</section>

Using the Aria Technique 

<div role="region" aria-labelledby="heading_id">
  <h2 id="heading_id"> heading goes here</h2>
   .........region content goes here.........
</div>

Using the HTML5 element

<footer>
  <p>......footer content goes here....</p>
  <ul>
    <li><a href="page_link_1.html">page link 1</a></li>
    <li><a href="page_link_2.html">page link 2</a></li>
  </ul>
</footer>

Using the Aria Technique 

<div role="contentinfo">
  <p>......footer content goes here......</p>
</div>

Using the HTML5 element 

<aside aria-labelledby="heading_id">
  <h2 id="heading_id">.......heading content goes here....</h2>
  ........region content goes here.......
</aside>


Using the Aria Technique 

<div role="complementary" aria-labelledby="heading_id">
  <h2 id="heading_id">heading content goes here</h2>
  ......region content goes here......
</div>

JAWS
प्रेस इन्सर्ट + कंट्रोल + R => लैंडमार्क्स की सूची
Q => मुख्य लैंडमार्क पर जाएं
R => अगले लैंडमार्क
शिफ्ट पर जाएं + R => पिछले लैंडमार्क पर जाएं

NVDA
प्रेस इन्सर्ट + F7 => लैंडमार्क्स की सूची
D => मुख्य पर जाएं लैंडमार्क
शिफ्ट + डी => पिछले लैंडमार्क

वॉयसओवर
पर जाएं कंट्रोल + विकल्प + यू => लैंडमार्क की सूची
डब्ल्यू => अगले लैंडमार्क पर जाएं
शिफ्ट + डब्ल्यू => पिछले लैंडमार्क पर जाएं