จุดสังเกตที่เข้าถึงได้

เกณฑ์ความสำเร็จของ WCAG 2.4.1ระบุว่าเทคโนโลยีช่วยเหลือ เช่น โปรแกรมอ่านหน้าจอต้องอนุญาตให้ผู้ใช้นำทางผ่านจุดสังเกตเพื่อข้ามบล็อกเนื้อหาที่ซ้ำกันบนหน้าเว็บหลายหน้า

จำเป็นอย่างยิ่งที่จะต้องกำหนดโครงสร้าง HTML ในเชิงความหมายอย่างถูกต้องและแม่นยำ จุดสังเกตมีบทบาทเชิงนามธรรมและสำคัญในการช่วยผู้ใช้สำรวจเนื้อหาของหน้าโดยใช้เทคโนโลยีอำนวยความสะดวก โดยโปรแกรมจะระบุส่วนต่างๆ ของหน้าและอนุญาตให้ผู้ใช้รับรู้เนื้อหาในลักษณะที่มีความหมายมากขึ้น

คีย์คือการระบุโครงสร้างเชิงตรรกะของเพจและใช้บทบาทจุดสังเกตที่เหมาะสมหรือองค์ประกอบที่กำหนดโดย HTML5 เพื่อสร้างเพจที่ถูกต้องตามความหมาย

หน้า เกือบ ทั้งหมดมีโครงสร้างมาตรฐาน: header , main , navigation , region , footerและ side

<header>ระบุแบนเนอร์บนหน้า ซึ่งโดยทั่วไปจะอยู่ที่ด้านบนสุด โดยส่วนใหญ่ประกอบด้วยการค้นหา โลโก้แบรนด์ และการนำทางหลัก ตามหลักการแล้ว แต่ละหน้าควรมีจุดสังเกตของแบนเนอร์เพียงจุดเดียว

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
กด Insert + Control + R => List of Landmarks
Q => Go to main Landmark
R => Go to next Landmark
shift+ R => Go to Previous Landmark

NVDA
Press Insert + F7 => List of Landmarks
D => Go to main Landmark
shift + D => ไปที่ Landmark

Voiceover
ก่อนหน้า กด Control + Option + U => รายการ Landmarks
W => ไปที่ Landmark
Shift ถัดไป + W => ไปที่ Landmark ก่อนหน้า