Khả năng truy cập web cho người mới bắt đầu

Ngày nay, việc xây dựng các ứng dụng hoặc trang web có thể truy cập không phải là chuẩn mực. Điều này là do ý tưởng về khả năng truy cập được hầu hết các nhà phát triển biết đến, trong khi trên thực tế, nó thường bị bỏ qua và không phải là một thực tế phổ biến ngày nay trong thế giới phát triển web. Theo Thống kê của Ngân hàng Thế giới, khoảng 15% dân số thế giới gặp phải một số dạng khuyết tật. Con số này chiếm gần một nửa dân số của web.

Trong hướng dẫn này, bạn sẽ tìm hiểu về ý nghĩa của khả năng truy cập web đối với các nhà phát triển, cách nó ảnh hưởng đến user web và cũng như các cách cải thiện ứng dụng và công cụ để tận dụng và cải thiện khả năng truy cập trong quy trình làm việc của bạn.

Khả năng truy cập Web là gì?

Khả năng truy cập web hay còn gọi là Trợ năng web như nó thường được gọi là một thực tiễn theo đó các trang web, công cụ và công nghệ được thiết kế và phát triển để người khuyết tật có thể sử dụng chúng.

“Khả năng tiếp cận” thường được ký hiệu là “a11y” vì có 11 chữ cái nằm giữa “A” và “Y” trong từ “Khả năng tiếp cận”. Mẫu này được gọi là Numeronym.

Khả năng truy cập là tất cả về việc làm cho mọi người có thể truy cập web. Điều này bao gồm những người có tất cả các dạng khuyết tật bao gồm những người sau đây:

Nhận thức
Thần kinh
Vật lý
Phát biểu
Trực quan
Khuyết tật thính giác

Khả năng truy cập bao gồm khuyết tật và vẫn giải thích cho các trường hợp mà những người sử dụng web có những hạn chế sau:

Kết nối Internet kém.
Thương tích tạm thời, ví dụ như gãy tay
Những người sử dụng thiết bị có màn hình nhỏ hơn như Đồng hồ thông minh hoặc TV thông minh

Nguyên tắc POUR

Nguyên tắc POUR là những gì hướng dẫn xây dựng các trang web có thể truy cập. Nguyên tắc này giúp đặt con người vào trung tâm của quá trình. Mọi trang web phải đáp ứng các nguyên tắc sau:

Có thể hiểu được: Nội dung trên web phải có thể hiểu được. Điều này nghĩa là web phải có sẵn cho các giác quan (thị giác, xúc giác và thính giác) thông qua trình duyệt hoặc thông qua các công nghệ hỗ trợ như trình đọc màn hình, trình phóng to màn hình và các công nghệ khác.

Có thể hoạt động: Nội dung trên web phải có thể hoạt động. Điều này nghĩa là user có thể tương tác với tất cả các điều khiển và các yếu tố tương tác bằng chuột, bàn phím hoặc thiết bị hỗ trợ. Nếu nội dung không thể chuyển thì không thể truy cập được.

Dễ hiểu: Nội dung trên web phải rõ ràng, ngắn gọn và dễ hiểu. Cố gắng hết sức có thể để cắt giảm các lỗi chính tả và ngữ pháp phức tạp. Điều này là do là nhà phát triển web, ta không bao giờ nên thừa nhận kiến thức cho user .

Mạnh mẽ: Điều thực sự quan trọng là phải có tính nhất quán trên toàn bộ web. Điều này nghĩa là bạn đang tối đa hóa khả năng tương thích với các công cụ mà bạn đang xây dựng? Trang web có hoạt động theo cùng một cách trên tất cả các nền tảng, chẳng hạn như Trình duyệt, Hệ điều hành và Kích thước thiết bị, v.v.?

Mẹo để làm cho trang web có thể truy cập được trên web

Có một số cách để giúp kết hợp khả năng truy cập vào thói quen thông thường của bạn khi xây dựng trang web. Hầu hết các mẹo này có thể được thực hiện mà không ảnh hưởng đến giao diện tổng thể của trang web .

Thêm văn bản thay thế cho hình ảnh: Khi sử dụng hình ảnh trong trang web , một điều quan trọng mà mọi người bỏ lỡ là thêm thuộc tính alt="" vào hình ảnh. Đây là một ví dụ về thẻ hình ảnh có thể truy cập.

Con mèo ngồi trên ghế

<img src="./cat.png' alt="A cat sitting on a chair">

Sự khác biệt lớn giữa việc có thuộc tính alt trong tất cả các hình ảnh và không bao gồm nó là trình đọc màn hình có thể thông báo các thẻ alt cho những người bị khuyết tật về thị giác và nhận thức. Một nguyên tắc quan trọng là đảm bảo mô tả alt có liên quan, nghĩa là nó phải mô tả nội dung và mục đích của hình ảnh thực tế. Trong ví dụ trên, A cat sitting on a chair mô tả toàn bộ nội dung của hình ảnh, thay vì chỉ cat cho phần mô tả.

Sử dụng HTML ngữ nghĩa: Đây là một luật quan trọng khác mà nhiều nhà phát triển bỏ qua. Hầu hết các nhà phát triển sử dụng div để đại diện cho mọi thứ và quên mất các thẻ thích hợp cho tiêu đề, danh sách và bảng. HTML5 cung cấp các phần tử bổ sung, chẳng hạn như <nav> , <section> và <aside> , để cấu trúc nội dung của bạn tốt hơn. Đây là một ví dụ về một trang có cấu trúc tốt sử dụng HTML ngữ nghĩa.

<body>   <header>     <h1>Shop</h1>   </header>   <main>     <article>       <h2>An inside look at the new Shop v2</h2>       <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>     </article>   </main>   <footer>     <p>© Shop Inc.</p>   </footer> </body>

Luôn cung cấp tùy chọn để bỏ qua Nội dung chính: Đối với user dựa vào trình đọc màn hình và bàn phím, tính năng này rất quan trọng vì nó cung cấp tùy chọn để bỏ qua nội dung chính. Kỹ thuật để đạt được điều này bằng cách thêm một liên kết để chuyển đến nội dung chính và ẩn nội dung đó cho đến khi phần tử nhận được tiêu điểm bàn phím. Một ví dụ về điều này là trang web chính thức BBC.com. Khi sử dụng bàn phím của bạn để chuyển , tùy chọn để chuyển đến nội dung chính được cung cấp khi bàn phím tập trung vào phần tử đó và phần tử đó hiển thị.
Xác định ngôn ngữ trang và các thay đổi ngôn ngữ: Luôn nhớ chỉ ra ngôn ngữ chính của mọi trang bằng cách sử dụng thuộc tính lang trong thẻ HTML . Ví dụ: <html lang="en"> . Sử dụng thuộc tính lang trên các phần tử cụ thể khi ngôn ngữ của phần tử khác với phần còn lại của trang.

<--here the language can either be switched to the default language used in the page.--> <html lang="en">  <head>   ... </head> <body>...</body> </html>

Liên kết nhãn với mọi phần tử biểu mẫu: Khi nào có thể, hãy sử dụng phần tử label để liên kết văn bản với các thành phần biểu mẫu một cách rõ ràng. Thuộc tính for của nhãn phải khớp chính xác với id của điều khiển biểu mẫu. Trong các tình huống cụ thể, có thể chấp nhận ẩn các phần tử <label> một cách trực quan, nhưng trong hầu hết các trường hợp, nhãn là cần thiết để giúp tất cả người đọc hiểu thông tin đầu vào được yêu cầu.

<form>   <label for="username">Username</label>   <input type="text" name="username" id="username">   <label for="email">Email</label>   <input type="email" name="email" id="email"> </form>

Các công cụ tận dụng khi xây dựng các trang web có thể truy cập

Có vô số công cụ có sẵn để giúp bạn xây dựng các trang web có thể truy cập. Dưới đây là một số mà bạn có thể sử dụng để làm cho các trang web của bạn dễ truy cập hơn và để tìm hiểu thêm về a11y nói chung:

Bạn có thể tìm thêm các công cụ để tận dụng từ Danh sách các công cụ đánh giá khả năng truy cập web đã biên dịch, cùng với một số tài nguyên chung khác:

Kết luận

Trong bài viết này, bạn đã tìm hiểu về khả năng truy cập web là gì và ý nghĩa của việc user có các khả năng khác nhau sử dụng một trang web có thể truy cập. Bạn cũng đã học về các phương pháp khác nhau mà bạn có thể sử dụng để làm cho các trang web có thể truy cập được cho tất cả user . Cuối cùng, bạn đã xem xét các ví dụ HTML có thể truy cập để hiểu cách triển khai từng đề xuất trong hướng dẫn này.

Tags:

Các tin liên quan

Cách tạo ứng dụng chuyển văn bản thành giọng nói với API giọng nói trên web
2019-12-12
Cách tạo băng chuyền image danh mục đầu tư với các thanh trượt được đồng bộ hóa trên trang web
2019-12-12
Cách tạo thông báo trên web bằng kênh Laravel và Pusher
2019-12-12
Cách cài đặt web server OpenLiteSpeed trên Ubuntu 18.04
2019-12-02
Sử dụng Phông chữ Google trong các Trang web của bạn
2019-08-22
Cách triển khai ứng dụng web Go bằng Nginx trên Ubuntu 18.04
2019-07-24
Biến Gatsby thành PWA: Service Worker và Web App Manifest
2019-07-18
Giới thiệu về Kiểm tra trực quan cho Ứng dụng Web
2019-06-11
Cách cài đặt ứng dụng web bằng Cloudron trên Ubuntu 18.04
2019-05-29
Cách triển khai ứng dụng web Go với Docker và Nginx trên Ubuntu 18.04
2019-04-23