Hiểu các kỹ thuật HTML để cải thiện khả năng truy cập web
Tạo một trang web không chỉ là tạo một trang web. Một khía cạnh quan trọng của phát triển giao diện người dùng là đảm bảo giao diện người dùng có thể truy cập được đối với mọi người trên internet, bao gồm cả những người khuyết tật về thị giác và thính giác. Bạn phải viết mã của mình với những người này trong tâm trí. Làm cách nào để bạn cung cấp cho những người bị thách thức về thị giác quyền truy cập bình đẳng vào trang web của bạn với tư cách là những người không bị thách thức về thị giác? Đọc bài viết này để tìm hiểu.
Mục Lục
Tại sao các nhà phát triển nên quan tâm đến khả năng truy cập web?
Khả năng truy cập web xoay quanh ý tưởng rằng mọi người nên có quyền truy cập web như nhau, bất kể tình trạng khuyết tật hoặc khuyết tật. Có một trang web có thể truy cập giúp dễ dàng tiếp cận nhiều đối tượng hơn (khoảng 16% thế giới bị khuyết tật này hay khuyết tật khác).
Khả năng truy cập kỹ thuật số không nên là một tùy chọn cho các nhà phát triển. Nó là một điều cần thiết cho bất kỳ thương hiệu chuyên nghiệp. Điều này được thực hiện nghiêm túc: theo báo cáo của Đa dạng, ai đó đã kiện Công ty Pokémon vào năm 2019 vì một trang web không thể truy cập được.
Khả năng truy cập web với HTML
Trong HTML, có các quy tắc để đảm bảo sự phát triển của các trang web có thể truy cập được. Phần này sẽ giải thích một số quy tắc đó.
Sử dụng các yếu tố ngữ nghĩa
Các phần tử ngữ nghĩa trong HTML là các phần tử có ý nghĩa. Trong HTML5, có khoảng 100 phần tử. Một số yếu tố, chẳng hạn như
-
<article>
-
<aside>
-
<footer>
-
<header>
-
<main>
-
<nav>
Hãy xem xét ví dụ này từ Taaskly:
Nhìn lướt qua hình ảnh trên sẽ tiết lộ các yếu tố sau:
- Một tiêu đề
- Một tấm ảnh
- Một đoạn văn
- ba nút
Thật dễ dàng để giả định rằng các nhà phát triển đã sử dụng
<section>
<img src="/hero.png" alt="hero">
<article>
<h1>Find the right Products and Services at the right time.</h1>
<p>
Handmade footwear, hair revamp, social media manager, sending errands, source of income</b> — you name it, Taaskly got it. Find every product or service you need today when you sign up and use Taaskly.
</p>
<a href="/main/home">Outsource a Task</a>
<a href="/main/services"> Find a service</a>
<a href="/main/marketplace" >Find a shop</a>
</article>
</section>
Từ đoạn mã HTML, bạn có thể quan sát những điều sau:
- Các hình ảnh, văn bản và các nút nằm trong một
yếu tố. - Các
phần tử chia đều Và phần tử.
- Các phần tử giữ
, Và phần tử. - Các nút được mã hóa thành phần tử; do đó, chúng là các liên kết, không phải các nút. Theo nguyên tắc chung, luôn sử dụng các liên kết để hướng người dùng đến một trang hoặc chế độ xem khác và sử dụng các nút khi bạn chỉ muốn người dùng thực hiện một hành động trong cùng một chế độ xem. Xem trang Nút của Angular để biết thêm thông tin về điều này.
Sử dụng các mốc để cung cấp cấu trúc trang rõ ràng
Cột mốc là các thẻ ngữ nghĩa giúp người dùng khiếm thị điều hướng trang web bằng trình đọc màn hình. Với các mốc, thật dễ dàng để xác định các phần khác nhau của trang web. Trang web của Apple sử dụng Cột mốc.
Hình ảnh trên cho thấy bốn điểm mốc khác nhau. Bạn có thể sử dụng tiện ích Thông tin chi tiết về khả năng tiếp cận để trực quan hóa các mốc này.
Trong hình ảnh, chúng ta có thể suy ra một <điều hướng> ở trên cùng, một
Bất cứ khi nào bạn phải sử dụng nhiều mốc cho một trang, hãy luôn phân biệt chúng bằng nhãn. Ví dụ, nếu bạn sử dụng nhiều <điều hướng> các yếu tố như Apple có, bạn phải gắn nhãn cho chúng. Bạn nên gắn nhãn chúng với aria-nhãn thuộc tính. Vì vậy, bạn có thể viết một cái gì đó giống như bất kỳ trong số này:
<nav aria-label = "global">
<nav aria-label = "local navigation">
<nav aria-label = "apple directory">
Việc sử dụng nhãn có thể giúp trình đọc màn hình bỏ qua bất kỳ điều hướng nào.
Sử dụng các thuộc tính vai trò, tên và giá trị
Đôi khi, có thể không sử dụng được các thành phần HTML với các tính năng trợ năng được tích hợp sẵn. Những trường hợp như vậy có thể là một trong hai trường hợp sau:
- Không có phần tử HTML riêng cho những gì bạn muốn đạt được. Ví dụ, nếu bạn phải sử dụng một
bởi vì không có yếu tố nào khác có vẻ phù hợp với vai trò.
- Bạn không thể sử dụng các phần tử ngữ nghĩa do sự cố kỹ thuật. Nếu bạn sử dụng một khung sử dụng
khi nó sẽ tốt hơn để sử dụng <điều hướng>nhiệm vụ của bạn là xác định điều khiển tùy chỉnh. Để xác định điều khiển tùy chỉnh, bạn cần có vai trò, tên và giá trị (đôi khi) cho phần tử của mình.
Vai trò
Theo mặc định, một <điều hướng> phần tử có vai trò điều hướng, trong khi một
phần tử có vai trò biểu ngữ. Bạn chỉ nên sử dụng các phần tử này cho các mục đích dự kiến của chúng để giúp các công nghệ hỗ trợ hiểu được cấu trúc của trang web. Nếu bạn phải sử dụng cái này thay cho cái kia, bạn nên chỉ định vai trò như sau: <header role = "navigation">
<nav role = "banner">
<div role = "navigation">Tên
Tên là một văn bản mô tả hoặc nhãn được liên kết với một phần tử HTML. Hình thức đơn giản nhất của tên là văn bản của một phần tử. Đây là một ví dụ:
<div role = "button">Click me!</div>
Trong đoạn trích trên, “Nhấp vào đây!” là tên của
yếu tố. Nó còn được gọi là tên có thể truy cập.Đối với các phần tử như điều hướng, trình đơn thả xuống, v.v., việc gán tên phức tạp hơn so với ví dụ trước. Nó khác bởi vì các phần tử này có các phần tử con trong đó. Để gán tên cho điều hướng ở trên, hãy sử dụng aria-nhãn thuộc tính. Nhìn vào ví dụ này:
<nav role = "navigation" aria-label = "global-navigation">...</nav>
Bạn nên lưu ý rằng một tên thuộc tính khác với tên có thể truy cập. Đoạn mã này giúp hiểu rõ hơn:
<nav role = "navigation" name = "global-navigation">...</nav>
<nav role = "navigation" aria-label = "global-navigation">...</nav>Xem bài viết về tên truy cập của TGPi để hiểu sâu hơn về điều này.
Giá trị
Trong HTML, thuộc tính giá trị có thể cung cấp thông tin bổ sung về một phần tử. Các giá trị cung cấp thông tin về trạng thái của thành phần cho các thành phần tùy chỉnh, chẳng hạn như đàn accordion. Ví dụ, một chiếc đàn accordion có thể được mở hoặc đóng.
Bạn có thể thêm giá trị cho các yếu tố của mình theo nhiều cách. Đoạn mã này cho thấy một số cách bạn có thể làm điều đó:
<button class="play-button" aria-label="Play audio" aria-valuenow="0"></button>
<audio src="audio-file.mp3"></audio>
<div role="button" aria-expanded="false">FAQ 1</div>
<input type="checkbox" name="product[]" value="1">Ưu tiên khả năng truy cập web để có trải nghiệm trực tuyến toàn diện
Khả năng truy cập web nằm ngoài các quy tắc sau; đó cũng là việc đảm bảo rằng mọi người đều có quyền truy cập bình đẳng vào trang web của bạn. Việc kết hợp các yếu tố ngữ nghĩa, mốc và thuộc tính như vai trò, tên và giá trị vào HTML của bạn có thể giúp người khuyết tật dễ truy cập trang web của bạn hơn. Đừng nghĩ khả năng truy cập web là một tùy chọn; coi đó là một điều tất yếu.
- Bạn không thể sử dụng các phần tử ngữ nghĩa do sự cố kỹ thuật. Nếu bạn sử dụng một khung sử dụng