/ / Hiểu các kỹ thuật HTML để cải thiện khả năng truy cập web

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.


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ư

, không có ngữ nghĩa, trong khi các thẻ HTML khác có ngữ nghĩa. Mặc dù có thể không thể ngừng sử dụng các yếu tố phi ngữ nghĩa này, nhưng điều quan trọng là bạn phải kết hợp càng nhiều yếu tố ngữ nghĩa càng tốt vào tác phẩm của mình. Dưới đây là danh sách các yếu tố ngữ nghĩa phổ biến:

  1. <article>
  2. <aside>
  3. <footer>
  4. <header>
  5. <main>
  6. <nav>

Hãy xem xét ví dụ này từ Taaskly:

Trang chủ của Taaskly hiển thị hai người lớn nắm tay nhau ở bên trái và một số văn bản mô tả ở bên phải

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

thẻ để sắp xếp các yếu tố trên màn hình. Khi xem xét kỹ hơn các mã, bạn sẽ nhận thấy rằng họ đã sử dụng sáu thẻ ngữ nghĩa để thay thế. Mã đơn giản hóa trông như thế này:

 <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> &mdash; 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:

  1. Các hình ảnh, văn bản và các nút nằm trong một yếu tố.
  2. Các phần tử chia đều phần tử.
  3. Các phần tử giữ

    ,

    phần tử.

  4. 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.

Trang chủ của Apple hiển thị các địa danh

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 chứa một và một <điều hướng> yếu tố. Đáng chú ý, hình ảnh cho thấy “dẫn đường”, “vùng đất”“thông tin nội dung”. Chúng được gọi là các vai trò mà chúng ta sẽ xem xét sau.

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:

  1. 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ò.
  2. 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.

Thanh điều hướng của Taskly hiển thị logo của Taskly và một số liên kết điều hướng

Đố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.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *