Cột mốc có thể truy cập

Tiêu chí thành công của WCAG 2.4.1 Bỏ qua khối nêu rõ rằng các công nghệ hỗ trợ như trình đọc màn hình phải cho phép người dùng điều hướng theo các mốc để bỏ qua các khối nội dung lặp lại trên nhiều trang web.

Điều cần thiết là xác định cấu trúc HTML đúng và chính xác về mặt ngữ nghĩa. Các mốc đóng một vai trò trừu tượng và quan trọng trong việc giúp người dùng điều hướng nội dung của trang bằng các công nghệ hỗ trợ. Nó xác định theo chương trình các phần của trang và cho phép người dùng cảm nhận nội dung theo cách có ý nghĩa hơn.

Chìa khóa là xác định cấu trúc logic của trang và sử dụng các vai trò mốc thích hợp hoặc các phần tử do HTML5 xác định để xây dựng trang hợp lệ về mặt ngữ nghĩa.

Hầu như tất cả các trang đều có cấu trúc tiêu chuẩn: tiêu đề , chính , điều hướng , vùng , chân trang và một bên .

<header> xác định một Biểu ngữ trên trang, thường nằm ở trên cùng. Nó chủ yếu chứa tìm kiếm, logo thương hiệu và điều hướng chính. Lý tưởng nhất là mỗi trang chỉ nên có một mốc Biểu ngữ.

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
Nhấn Insert + Control + R => Danh sách Mốc
Q => Chuyển đến Mốc chính
R => Chuyển đến Mốc tiếp theo
shift+ R => Chuyển đến Mốc trước

NVDA
Nhấn Chèn + F7 => Danh sách Mốc
D => Chuyển đến chínhmốc
+ D => Chuyển đến mốc trước

Thuyết minh
nhấn Control + Option + U => Danh sách các mốc
W => Chuyển đến mốc tiếp theo
Shift + W => Chuyển đến mốc trước đó