Cách kiểm tra khả năng hỗ trợ tiếp cận

Rob Dodson

Việc xác định xem trang web hoặc ứng dụng của bạn có thể truy cập được có vẻ giống như một nhiệm vụ quá tải. Nếu đây là lần đầu tiên bạn tiếp cận tính năng hỗ trợ tiếp cận, độ bao quát của chủ đề có thể khiến bạn không biết bắt đầu từ đâu. Rốt cuộc, nỗ lực hỗ trợ nhiều khả năng đồng nghĩa với việc có nhiều loại vấn đề tương ứng cần xem xét.

Bài đăng này chia nhỏ những vấn đề này thành một quy trình hợp lý, từng bước để xem xét một trang web hiện có về khả năng tiếp cận.

Bắt đầu với bàn phím

Đối với những người dùng không thể hoặc chọn không sử dụng chuột, điều hướng bằng bàn phím phương tiện chính để tiếp cận mọi nội dung trên màn hình. Đối tượng này bao gồm người dùng bị suy giảm vận động, chẳng hạn như chấn thương do căng thẳng lặp đi lặp lại (RSI) hoặc liệt, cũng như người dùng trình đọc màn hình.

Để có trải nghiệm bàn phím tốt, hãy cố gắng sắp xếp tab hợp lý và rõ ràng kiểu tiêu điểm rõ ràng.

  • Bắt đầu bằng cách truy cập các thẻ thông qua trang web của bạn. Thứ tự lấy tiêu điểm của các phần tử phải tuân theo thứ tự DOM. Nếu bạn không chắc nên chọn phần tử nào hãy tham khảo mô-đun này trong khoá học Tìm hiểu về tính năng Hỗ trợ tiếp cận về tiêu điểm. Tốt nhất là bất kỳ chế độ kiểm soát nào mà người dùng có thể tương tác hoặc cung cấp dữ liệu đầu vào phải có thể lấy tiêu điểm và hiển thị chỉ báo lấy nét (chẳng hạn như vòng lấy nét).

  • Bạn có thể lấy các thành phần điều khiển tương tác tuỳ chỉnh làm tâm điểm. Nếu bạn sử dụng JavaScript để bật <div> vào trình đơn thả xuống yêu thích, quảng cáo này sẽ không tự động được chèn vào thứ tự tab. Để một chế độ điều khiển tuỳ chỉnh có thể làm tâm điểm, hãy đặt tabindex="0" cho chế độ điều khiển đó. Giá trị tabindex lớn hơn 0 sẽ thay đổi thứ tự thẻ và có thể gây nhầm lẫn người dùng trình đọc màn hình.

  • Chỉ đặt nội dung tương tác có thể làm tâm điểm. Đang thêm tabindex vào không phải các yếu tố tương tác như tiêu đề làm chậm người dùng bàn phím, vì họ có thể xem và không trợ giúp người dùng trình đọc màn hình vì trình đọc màn hình đã biết để thông báo về điều này.

  • Nếu bạn thêm nội dung mới vào một trang, hãy hướng người dùng tập trung vào nội dung đó trước tiên để họ có thể hành động. Xem Quản lý trọng tâm ở cấp trang để có các ví dụ.

  • Thiết kế trang web sao cho người dùng luôn có thể tập trung vào phần tử tiếp theo khi họ muốn. Cảnh giác với các tiện ích tự động hoàn thành và ngữ cảnh khác có thể mắc bẫy tiêu điểm bàn phím. Bạn có thể tạm thời giữ tiêu điểm khi muốn người dùng tương tác với một cửa sổ phụ chứ không phải với phần còn lại của trang, nhưng bạn luôn phải cho phép người dùng thoát khỏi chế độ này bằng bàn phím. Xem Modals và bẫy bàn phím để xem ví dụ.

Làm cho chế độ điều khiển lấy nét trở nên dễ sử dụng

Nếu bạn đã tạo một chế độ kiểm soát tuỳ chỉnh, hãy cho phép người dùng sử dụng tất cả các tính năng của chế độ đó chỉ bằng bàn phím. Đã đọc Quản lý tập trung vào các thành phần để biết kỹ thuật cải thiện khả năng truy cập bằng bàn phím.

Quản lý nội dung ngoài màn hình

Nhiều trang web có nội dung ngoài màn hình xuất hiện trong DOM nhưng không hiển thị, chẳng hạn như đường liên kết bên trong trình đơn ngăn thích ứng hoặc nút bên trong cửa sổ phụ chưa được hiển thị. Việc để lại các phần tử này trong DOM có thể tạo ra khó hiểu, đặc biệt là đối với trình đọc màn hình, thông báo nội dung ngoài màn hình như thể nó là một phần của trang.

Xem phần Xử lý nội dung ngoài màn hình để biết các mẹo xử lý các yếu tố này.

Kiểm thử bằng trình đọc màn hình

Việc cải thiện khả năng hỗ trợ chung của bàn phím đặt ra một số nền tảng cho bước tiếp theo, đó là là kiểm tra trang để xem có gắn nhãn và ngữ nghĩa phù hợp cũng như bất kỳ trở ngại nào không điều hướng trình đọc màn hình.

Nếu bạn không quen với cách bộ phận hỗ trợ diễn giải đánh dấu ngữ nghĩa công nghệ, đọc Cấu trúc nội dung.

  • Kiểm tra tất cả hình ảnh để tìm văn bản alt phù hợp. Ngoại lệ của phương pháp này là khi hình ảnh chủ yếu dùng cho mục đích trình bày và không phải là phần thiết yếu nội dung. Để cho biết trình đọc màn hình nên bỏ qua một hình ảnh, hãy đặt thành một chuỗi trống: alt="".
  • Kiểm tra tất cả các chế độ kiểm soát cho một nhãn. Đối với chế độ điều khiển tuỳ chỉnh, thao tác này có thể yêu cầu aria-label hoặc aria-labelledby. Xem Nhãn ARIA và mối quan hệ để có các ví dụ.
  • Kiểm tra tất cả chế độ điều khiển tuỳ chỉnh để tìm một role thích hợp và mọi ARIA bắt buộc các thuộc tính truyền đạt trạng thái của chúng. Ví dụ: hộp đánh dấu tuỳ chỉnh cần role="checkbox" và aria-checked="true|false" để truyền tải đúng cách trạng thái. Xem phần Giới thiệu về ARIA để biết thông tin chung thông tin tổng quan về cách ARIA có thể cung cấp ngữ nghĩa còn thiếu cho các thành phần điều khiển tuỳ chỉnh.
  • Làm cho luồng thông tin qua trang của bạn trở nên có ý nghĩa. Vì màn hình người đọc điều hướng trang theo thứ tự DOM, họ sẽ thông báo bất kỳ phần tử nào bạn đã đặt lại vị trí trực quan bằng cách sử dụng CSS theo một thứ tự vô nghĩa. Nếu bạn cần điều gì đó xuất hiện trước đó trên trang, di chuyển nó sớm hơn trong DOM.
  • Cố gắng hỗ trợ thao tác của trình đọc màn hình cho tất cả nội dung trên trang. Đảm bảo không có phần nào của trang web bị ẩn hoặc chặn vĩnh viễn khỏi màn hình quyền truy cập của độc giả.
    • Nếu nội dung nên ẩn khỏi trình đọc màn hình, ví dụ: ngoài màn hình hoặc chỉ ở dạng trình bày, hãy đặt nội dung đó thành aria-hidden="true". Để xem nội dung giải thích sâu hơn, hãy tham khảo Ẩn nội dung.

Làm quen với trình đọc màn hình

Mặc dù có vẻ khó khăn khi học trình đọc màn hình, nhưng trình đọc màn hình thực sự rất đẹp thân thiện với người dùng. Nhìn chung, hầu hết các nhà phát triển đều có thể thực hiện chỉ với một vài thao tác đơn giản các lệnh chính.

Nếu bạn đang dùng máy Mac, hãy xem video này về VoiceOver, trình đọc màn hình đi kèm với Mac OS. Nếu bạn đang sử dụng máy tính, hãy xem video về NVDA, một trình đọc màn hình nguồn mở, hỗ trợ tính năng đóng góp cho Windows.

aria-hidden không ngăn chặn việc lấy tiêu điểm bằng bàn phím

Bạn cần hiểu rằng ARIA chỉ có thể ảnh hưởng đến ngữ nghĩa của một element; nó không ảnh hưởng đến hành vi của phần tử đó. Bạn có thể tạo một phần tử bị ẩn đối với trình đọc màn hình bằng aria-hidden="true", nhưng điều này không thay đổi hành vi tâm điểm cho phần tử đó. Đối với nội dung tương tác ngoài màn hình, Đối với nội dung tương tác ngoài màn hình, hãy dùng thuộc tính inert để đảm bảo ghi chú thực sự được xoá khỏi luồng bàn phím. Đối với các trình duyệt cũ, kết hợp aria-hidden="true" với tabindex="-1".

Các phần tử tương tác phải cho biết mục đích và trạng thái

Đưa ra gợi ý bằng hình ảnh hoặc âm thanh để mô tả chức năng của chế độ kiểm soát có rất nhiều người sử dụng nhiều loại thiết bị cùng thao tác và khám phá của bạn.

  • Các thành phần tương tác, như đường liên kết và nút, phải dễ phân biệt với các phần tử không tương tác. Người dùng sẽ gặp khó khăn khi di chuyển trên một trang web hoặc ứng dụng khi chúng không thể biết liệu một phần tử có thể nhấp vào hay không. Có nhiều cách hợp lệ để biểu thị các yếu tố tương tác. Một phương pháp phổ biến là gạch chân các đường liên kết đến để phân biệt chúng với văn bản xung quanh.
  • Tương tự như yêu cầu về tiêu điểm, các phần tử tương tác như đường liên kết và nút cần có trạng thái hover để thông báo cho người dùng chuột khi con trỏ của họ nằm phía trên mục nào đó có thể nhấp. Tuy nhiên, để các phương thức nhập khác có thể truy cập vào các phần tử này, chúng phải dễ phân biệt mà không cần trạng thái hover.

Tận dụng các tiêu đề và điểm mốc

Tiêu đề và phần tử mốc sẽ cung cấp cấu trúc ngữ nghĩa cho trang, và tăng đáng kể hiệu quả điều hướng của người dùng công nghệ hỗ trợ. Nhiều người dùng trình đọc màn hình báo cáo rằng khi họ lần đầu truy cập một trang lạ, họ thường cố gắng điều hướng theo tiêu đề.

Tương tự, trình đọc màn hình cũng cho phép chuyển đến các mốc quan trọng như <main> và <nav>. Vì những lý do này, bạn cần xem xét cách cấu trúc của trang có thể được dùng để định hướng trải nghiệm người dùng.

  • Sử dụng hệ phân cấp h1-h6. Hãy coi tiêu đề là công cụ để lập dàn ý cho trang của bạn. Đừng dựa vào kiểu tiêu đề tích hợp sẵn. Thay vào đó, hãy đối xử với khách hàng như thể chúng có cùng kích thước và sử dụng mức độ thích hợp về mặt ngữ nghĩa cho nội dung chính, phụ và cấp ba. Sau đó, sử dụng CSS để tạo tiêu đề phù hợp với thiết kế của bạn.
  • Dùng các phần tử và vai trò mang tính bước ngoặt để người dùng có thể bỏ qua nội dung lặp lại. Nhiều công nghệ hỗ trợ cung cấp lối tắt để chuyển đến các phần cụ thể của trang, chẳng hạn như những mã được xác định bằng các phần tử <main> hoặc <nav>. Những phần tử này có ngầm ẩn các vai trò mang tính mốc. Bạn cũng có thể sử dụng thuộc tính role của ARIA để xác định rõ các vùng trên trang, như trong <div role="search">. Xem Ngữ nghĩa và cách điều hướng nội dung để tìm hiểu thêm ví dụ.
  • Tránh dùng role="application" trừ phi bạn có kinh nghiệm sử dụng ứng dụng này. Vai trò mốc application yêu cầu công nghệ hỗ trợ tắt và chuyển tất cả các lần nhấn phím để đến trang. Điều này có nghĩa là các khoá trình đọc màn hình mà người dùng thường sử dụng để di chuyển quanh trang không còn hoạt động nữa, và bạn cần tự triển khai tất cả cách xử lý bàn phím.

Xem lại tiêu đề và điểm mốc bằng trình đọc màn hình

Trình đọc màn hình, chẳng hạn như VoiceOver và NVDA, cung cấp trình đơn theo bối cảnh để bỏ qua đến vùng quan trọng trên trang. Khi kiểm thử khả năng hỗ trợ tiếp cận, bạn có thể sử dụng các trình đơn này để xem tổng quan về trang và xác định xem tiêu đề của bạn là phù hợp và mốc nào đang được sử dụng.

Để tìm hiểu thêm, hãy tham khảo những video hướng dẫn này về những khái niệm cơ bản của VoiceOver và NVDA.

Tự động hoá quy trình

Việc kiểm tra thủ công một trang web về khả năng truy cập có thể tẻ nhạt và dễ xảy ra lỗi. Bạn nên tự động thử nghiệm vì nhiều nhất có thể. Bạn có thể dùng các tiện ích của trình duyệt và khả năng hỗ trợ tiếp cận của dòng lệnh bộ kiểm thử của chúng tôi.

  • Trang có vượt qua tất cả các kiểm tra từ aXe hoặc WAVE tiện ích của trình duyệt? Có các tuỳ chọn khác, nhưng các tiện ích này có thể là sự bổ sung hữu ích cho bất kỳ quy trình kiểm tra thủ công nào vì chúng có thể tiếp tục các vấn đề tinh tế như tỷ lệ tương phản không thành công và thiếu ARIA .
    • Nếu muốn làm việc trên dòng lệnh, axe-cli cung cấp các tính năng tương tự dưới dạng tiện ích aXe của trình duyệt, nhưng có thể chạy trên thiết bị đầu cuối của bạn.
  • Để tránh sự hồi quy, đặc biệt là trong môi trường tích hợp liên tục, kết hợp một thư viện như axe-core vào bộ kiểm thử tự động. rìu-lõi cũng chính là công cụ hỗ trợ aXe Chrome mở rộng nhưng nằm trong tiện ích dòng lệnh.
  • Nếu bạn đang sử dụng một khung hoặc thư viện, khung hoặc thư viện đó có cung cấp khả năng hỗ trợ tiếp cận riêng không không? Ví dụ: protractor-accessibility-plugin cho Angular. Hãy tận dụng các công cụ có sẵn bất cứ khi nào có thể.

Dùng Lighthouse để kiểm thử PWA

Lighthouse là một công cụ đo lường hiệu suất của ứng dụng web tiến bộ (PWA). Đồng thời, công cụ này sử dụng thư viện axe-core để hỗ trợ các hoạt động kiểm thử khả năng hỗ trợ tiếp cận.

Nếu bạn đã sử dụng Lighthouse, hãy tìm lỗi hỗ trợ tiếp cận trong báo cáo của mình. Sửa lỗi để cải thiện trải nghiệm người dùng tổng thể của trang web của bạn.

Tài nguyên khác