Khả năng truy cập trên Web

Khám phá những điều cơ bản về khả năng truy cập trong HTML

Điều quan trọng là chúng tôi thiết kế HTML của mình với khả năng truy cập.

Có HTML có thể truy cập được có nghĩa là người khuyết tật có thể sử dụng Web. Có những người mù hoàn toàn hoặc khiếm thị, những người có vấn đề về thính giác và vô số những khuyết tật khác nhau.

Thật không may, chủ đề này không có tầm quan trọng mà nó cần, và nó có vẻ không thú vị như những chủ đề khác.

Điều gì sẽ xảy ra nếu một người không thểxemtrang của bạn, nhưng vẫn muốn xem nội dung của nó? Đầu tiên, họ làm điều đó như thế nào? Họ không thể sử dụng chuột, họ sử dụng một thứ gọi làđọc màn hình. Bạn không cần phải tưởng tượng điều đó. Bạn có thể thử ngay bây giờ: Google cung cấp miễn phíChromeVox Chrome Extension. Khả năng truy cập cũng phải quan tâm đến việc cho phép các công cụ dễ dàng chọn các phần tử hoặc điều hướng qua các trang.

Các trang web và ứng dụng web không phải lúc nào cũng được xây dựng với khả năng truy cập là một trong những mục tiêu đầu tiên của chúng và có thể phiên bản 1 được phát hành không thể truy cập được nhưng thực tế là có thể làm cho một trang web có thể truy cập được. Sớm hơn thì tốt hơn, nhưng không bao giờ là quá muộn.

Điều quan trọng và ở quốc gia của tôi, các trang web do chính phủ hoặc các tổ chức công cộng khác xây dựng phải có thể truy cập được.

Điều này có nghĩa là gì để làm cho HTML có thể truy cập được? Hãy để tôi minh họa những điều chính bạn cần suy nghĩ.

Lưu ý: có một số điều khác cần quan tâm, có thể nằm trong chủ đề CSS, như màu sắc, độ tương phản và phông chữ. Hoặc làcách làm cho hình ảnh SVG có thể truy cập được. Tôi không nói về chúng ở đây.

Sử dụng HTML ngữ nghĩa

HTML ngữ nghĩa rất quan trọng và đó là một trong những điều chính bạn cần quan tâm. Hãy để tôi minh họa một vài tình huống phổ biến.

Điều quan trọng là sử dụng đúng cấu trúc cho các thẻ tiêu đề. Quan trọng nhất làh1và bạn sử dụng các số cao hơn cho những tiêu đề ít quan trọng hơn, nhưng tất cả các tiêu đề cùng cấp phải có cùng ý nghĩa (hãy nghĩ về nó giống như một cấu trúc cây)

h1
	h2
		h3
	h2
	h2
		h3
			h4

Sử dụngstrongemthay vìbi. Nhìn bề ngoài chúng trông giống nhau, nhưng 2 cái đầu tiên có nhiều ý nghĩa hơn liên quan đến chúng.bilà các yếu tố trực quan hơn.

Danh sách rất quan trọng. Trình đọc màn hình có thể phát hiện danh sách và cung cấp thông tin tổng quan, sau đó cho phép người dùng chọn có tham gia danh sách hay không.

Một cái bàn nên cócaptionthẻ mô tả nội dung của nó:

<table>
  <caption>Dogs age</caption>
  <tr>
    <th>Dog</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Roger</td>
    <td>7</td>
  </tr>
</table>

Sử dụngaltthuộc tính cho hình ảnh

Tất cả các hình ảnh phải cóaltthẻ mô tả nội dung hình ảnh. Đây không chỉ là một phương pháp hay mà còn theo tiêu chuẩn HTML và HTML của bạn không có nó sẽ không được xác thực.

<img src="dog.png" alt="picture of my dog">

Nó cũng tốt cho các công cụ tìm kiếm, nếu đó là một động lực để bạn thêm nó.

Sử dụngrolethuộc tính

Cácrolethuộc tính cho phép bạn chỉ định các vai trò cụ thể cho các phần tử khác nhau trong trang của bạn.

Bạn có thể gán nhiều vai trò khác nhau: bổ sung, danh sách, listitem, chính, điều hướng, khu vực, tab, cảnh báo, ứng dụng, bài viết, biểu ngữ, nút, ô, hộp kiểm, contentinfo, hộp thoại, tài liệu, nguồn cấp dữ liệu, hình, biểu mẫu, lưới, ô lưới, tiêu đề, img, hộp danh sách, hàng, nhóm hàng, tìm kiếm, chuyển đổi, bảng, bảng tab, hộp văn bản, bộ đếm thời gian.

Nó rất nhiều và để tham khảo đầy đủ về từng người trong số họ, tôi cung cấp cho bạnliên kết MDN này. Nhưng bạn không cần phải gán vai trò cho mọi phần tử trong trang. Trình đọc màn hình có thể suy ra từ thẻ HTML trong hầu hết các trường hợp. Ví dụ: bạn không cần thêm thẻ vai trò vào các thẻ ngữ nghĩa nhưnav,button,form.

Hãy lấynavví dụ về thẻ. Bạn có thể sử dụng nó để xác định điều hướng trang như sau:

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/blog">Blog</a></li>
  </ul>
</nav>

Nếu bạn làép buộcsử dụng mộtdivthẻ thay vìnav, bạn sẽ sử dụngnavigationvai trò:

<div role="navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/blog">Blog</a></li>
  </ul>
</div>

Vì vậy, ở đây bạn có một ví dụ thực tế:roleđược sử dụng để gán một giá trị có ý nghĩa khi thẻ chưa chuyển tải ý nghĩa.

Sử dụngtabindexthuộc tính

Cáctabindexcho phép bạn thay đổi thứ tự cách nhấn phím Tab để chọn các phần tử “có thể chọn”. Theo mặc định, chỉ các liên kết và phần tử biểu mẫu là "có thể chọn" bằng cách điều hướng bằng phím Tab (và bạn không cần đặttabindexvề họ).

Thêmtabindex="0"làm cho một phần tử có thể chọn được:

<div tabindex="0">
...
</div>

Sử dụngtabindex="-1"thay vào đó, xóa một phần tử khỏi điều hướng dựa trên tab này và nó có thể khá hữu ích.

Sử dụngariathuộc tính

ARIA là từ viết tắt có nghĩa là Ứng dụng Internet phong phú có thể truy cập và xác định ngữ nghĩa có thể được áp dụng cho các phần tử.

aria-label

Thuộc tính này được sử dụng để thêm một chuỗi để mô tả một phần tử.

Thí dụ:

<p aria-label="The description of the product">...</p>

Tôi sử dụng thuộc tính này trên thanh bên blog của mình, nơi tôi có một hộp nhập liệu để tìm kiếm mà không có nhãn rõ ràng, vì nó có thuộc tính giữ chỗ.

aria-labelledby

Thuộc tính này đặt mối tương quan giữa phần tử hiện tại và phần tử gắn nhãn nó.

Nếu bạn biết làm thế nào mộtinputphần tử có thể được liên kết với mộtlabelphần tử tương tự.

Chúng tôi chuyển id mục mô tả phần tử hiện tại.

Thí dụ:

<h3 id="description">The description of the product</h3>

<p aria-labelledby=“description”> … </p>

aria-describedby

Thuộc tính này cho phép chúng tôi liên kết một phần tử với một phần tử khác đóng vai trò mô tả.

Thí dụ:

<button aria-describedby="payNowDescription" >Pay now</button>

<div id=“payNowDescription”>Clicking the button will send you to our Stripe form!</div>

Sử dụng aria-hidden để ẩn nội dung

Tôi thích một thiết kế tối giản trong các trang web của mình. Ví dụ, blog của tôi chủ yếu chỉ là nội dung, với một số liên kết trong thanh bên. Nhưng một số thứ trong thanh bên chỉ là các yếu tố trực quan không bổ sung cho trải nghiệm của một người không thể xem trang. Như hình ảnh biểu trưng của tôi hoặc bộ chọn chủ đề tối / sáng.

Thêmaria-hidden="true"thuộc tính sẽ yêu cầu trình đọc màn hình bỏ qua phần tử đó.

Tìm hiểu thêm ở đâu

Đây chỉ là một phần giới thiệu về chủ đề. Để tìm hiểu thêm, tôi giới thiệu các tài nguyên sau:

Tải xuống miễn phí của tôiSổ tay HTML


Các hướng dẫn html khác: