Thử nghiệm trong Công nghệ hỗ trợ

Mô-đun này tập trung vào việc sử dụng công nghệ hỗ trợ (AT) để kiểm thử khả năng hỗ trợ tiếp cận. Người khuyết tật có thể sử dụng thiết bị hỗ trợ để tăng cường, duy trì hoặc cải thiện khả năng thực hiện một nhiệm vụ.

Trong không gian kỹ thuật số, AT có thể là:

  • Không có hoặc công nghệ thấp: gậy chụp đầu và miệng, kính lúp cầm tay, thiết bị có nút lớn
  • Công nghệ cao: thiết bị kích hoạt bằng giọng nói, thiết bị theo dõi chuyển động của mắt, bàn phím và chuột thích ứng
  • Phần cứng: nút chuyển, bàn phím công thái học, thiết bị chữ nổi tự động làm mới
  • Phần mềm: chương trình chuyển văn bản sang lời nói, phụ đề trực tiếp, trình đọc màn hình

Bạn nên sử dụng nhiều loại AT trong quy trình kiểm thử tổng thể.

Kiến thức cơ bản về kiểm thử trình đọc màn hình

Trong mô-đun này, chúng ta tập trung vào một trong những công cụ hỗ trợ kỹ thuật số phổ biến nhất, đó là trình đọc màn hình. Trình đọc màn hình là một phần mềm đọc mã cơ bản của một trang web hoặc ứng dụng. Sau đó, trình đọc màn hình sẽ chuyển đổi thông tin đó thành lời nói hoặc đầu ra chữ nổi cho người dùng.

Trình đọc màn hình là thiết bị cần thiết cho người khiếm thị và khiếm thính, nhưng cũng có thể mang lại lợi ích cho những người có thị lực kém, rối loạn đọc và khuyết tật nhận thức.

Khả năng tương thích với trình duyệt

Có nhiều lựa chọn trình đọc màn hình. Các trình đọc màn hình phổ biến nhất là JAWS, NVDA và VoiceOver cho máy tính để bàn, cũng như VoiceOver và TalkBack cho thiết bị di động.

Tuỳ thuộc vào hệ điều hành (OS), trình duyệt yêu thích và thiết bị bạn sử dụng, một trình đọc màn hình có thể nổi bật hơn cả và là lựa chọn tốt nhất. Hầu hết trình đọc màn hình đều được thiết kế dành riêng cho một số phần cứng và trình duyệt web. Khi sử dụng trình đọc màn hình với một trình duyệt không được hiệu chỉnh, bạn có thể gặp nhiều "lỗi" hơn hoặc hành vi không mong muốn. Trình đọc màn hình hoạt động hiệu quả nhất khi được sử dụng theo các tổ hợp sau.

Trình đọc màn hình Hệ điều hành Khả năng tương thích với trình duyệt
Job Access With Speech (JAWS) Windows Chrome, Firefox, Edge
Non-Visual Desktop Access (NVDA) (Truy cập không nhìn thấy trên máy tính) Windows Chrome và Firefox
Người dẫn chuyện Windows Edge
VoiceOver macOS Safari
Orca Linux Firefox
TalkBack Android Chrome và Firefox
VoiceOver (dành cho thiết bị di động) iOS Safari
ChromeVox ChromeOS Chrome

Lệnh của trình đọc màn hình

Sau khi thiết lập đúng cách phần mềm đọc màn hình cho máy tính hoặc thiết bị di động, bạn nên xem tài liệu về trình đọc màn hình (được liên kết trong bảng trước) và chạy một số lệnh cần thiết của trình đọc màn hình để làm quen với công nghệ này. Nếu bạn đã từng sử dụng trình đọc màn hình, hãy cân nhắc việc thử một trình đọc màn hình mới!

Khi sử dụng trình đọc màn hình để kiểm thử khả năng hỗ trợ tiếp cận, mục tiêu của bạn là phát hiện các vấn đề trong mã gây ảnh hưởng đến việc sử dụng trang web hoặc ứng dụng, chứ không phải mô phỏng trải nghiệm của người dùng trình đọc màn hình. Do đó, bạn có thể làm được nhiều việc với một số kiến thức cơ bản, một vài lệnh của trình đọc màn hình và một chút (hoặc nhiều) thực hành.

Nếu cần tìm hiểu thêm về trải nghiệm người dùng khi sử dụng trình đọc màn hình và các công cụ hỗ trợ tiếp cận khác, bạn có thể tham gia với nhiều tổ chức và cá nhân để có được thông tin chi tiết có giá trị này. Hãy nhớ rằng việc sử dụng AT để kiểm thử mã theo một bộ quy tắc và hỏi người dùng về trải nghiệm của họ thường sẽ mang lại kết quả khác nhau. Cả hai đều là những khía cạnh quan trọng để tạo ra các sản phẩm hoàn toàn phù hợp.

Các lệnh chính cho trình đọc màn hình trên máy tính

Phần tử NVDA (Windows) VoiceOver (macOS)
Phím lệnh chung Chèn Ctrl+Option
Dừng âm thanh Chế độ kiểm soát Nhóm đối chứng
Đọc tiếp theo/trước hoặc Control+Option+ hoặc
Bắt đầu đọc Chèn Ctrl+Option+A
Danh sách phần tử/Rôto NVDA + F7 Ctrl+Option+U
Địa danh D Ctrl+Option+U
Tiêu đề H Ctrl+Option+Command+H
Liên kết K Control+Option+Command+L
Thành phần điều khiển biểu mẫu Khắc phục Ctrl+Option+Command+J
Bảng T Ctrl+OptionCommand+T
Trong bảng ChènAlt + Ctrl+Option+

Các lệnh chính cho trình đọc màn hình trên thiết bị di động

Phần tử TalkBack (Android) VoiceOver (iOS)
Khám phá Kéo một ngón tay xung quanh màn hình Kéo một ngón tay xung quanh màn hình
Chọn hoặc kích hoạt Nhấn đúp Nhấn đúp
Di chuyển lên hoặc xuống Vuốt lên hoặc xuống bằng 2 ngón tay Vuốt lên hoặc xuống bằng ba ngón tay
Thay đổi trang Vuốt sang trái hoặc phải bằng 2 ngón tay Vuốt sang trái hoặc phải bằng 3 ngón tay
Tiếp theo/trước Vuốt sang trái hoặc phải bằng một ngón tay Vuốt sang trái hoặc phải bằng một ngón tay

Bản minh hoạ kiểm thử trình đọc màn hình

Để kiểm thử bản minh hoạ, chúng tôi đã sử dụng Safari trên máy tính xách tay chạy macOS và ghi lại âm thanh. Bạn có thể thực hiện các bước này bằng bất kỳ trình đọc màn hình nào, nhưng cách bạn gặp phải một số lỗi có thể khác với cách mô tả trong mô-đun này.

Bước 1

Truy cập vào CodePen đã cập nhật, trong đó đã áp dụng tất cả các bản cập nhật hỗ trợ tiếp cận tự động và thủ công.

Xem ứng dụng ở chế độ gỡ lỗi để tiếp tục các bài kiểm thử tiếp theo. Điều này rất quan trọng vì sẽ xoá <iframe> bao quanh trang web minh hoạ, có thể gây cản trở một số công cụ kiểm thử. Tìm hiểu thêm về chế độ gỡ lỗi của CodePen.

Bước 2

Kích hoạt trình đọc màn hình mà bạn chọn rồi chuyển đến trang minh hoạ. Bạn có thể cân nhắc việc di chuyển từ trên xuống dưới qua toàn bộ trang trước khi tập trung vào các vấn đề cụ thể.

Chúng tôi đã ghi lại trình đọc màn hình cho từng vấn đề, trước và sau khi áp dụng bản sửa lỗi cho bản minh hoạ. Bạn nên chạy bản minh hoạ bằng trình đọc màn hình của riêng mình.

Vấn đề 1: Cấu trúc nội dung

Tiêu đề và mốc là một trong những cách chính để mọi người di chuyển khi sử dụng trình đọc màn hình. Nếu không có những yếu tố này, người dùng trình đọc màn hình phải đọc toàn bộ trang để hiểu được ngữ cảnh. Quá trình này có thể mất nhiều thời gian và gây phiền toái.

Nếu cố gắng điều hướng theo một trong các phần tử trong bản minh hoạ, bạn sẽ nhanh chóng phát hiện ra rằng các phần tử đó không tồn tại.

  • Ví dụ về địa danh: <div class="main">...</div>
  • Ví dụ về tiêu đề: <p class="h1">Join the Club</p>

Nếu bạn đã cập nhật mọi thứ chính xác thì sẽ không có bất kỳ thay đổi nào về hình ảnh nhưng trải nghiệm trình đọc màn hình của bạn sẽ được cải thiện đáng kể.

Nghe trình đọc màn hình hướng dẫn bạn giải quyết vấn đề này.
Hãy cùng khắc phục vấn đề này.

Bạn không thể quan sát một số thành phần không truy cập được chỉ bằng cách xem trang web. Bạn có thể nhớ tầm quan trọng của các cấp tiêu đề và HTML ngữ nghĩa trong mô-đun Cấu trúc nội dung. Một phần nội dung có thể trông giống như một tiêu đề, nhưng nội dung đó thực sự được gói trong một <div> được cách điệu.

Để khắc phục vấn đề về tiêu đề và điểm đánh dấu, trước tiên, bạn phải xác định từng phần tử cần được đánh dấu như vậy và cập nhật HTML có liên quan. Đừng quên cập nhật cả CSS có liên quan.

  • Ví dụ về địa danh: <main>...</main>
  • Ví dụ về tiêu đề: <h1>Join the Club</h1>

Nếu bạn đã cập nhật mọi thứ chính xác, thì sẽ không có thay đổi nào về hình ảnh, nhưng trải nghiệm của bạn khi sử dụng trình đọc màn hình sẽ được cải thiện đáng kể.

Giờ đây, chúng ta đã khắc phục cấu trúc nội dung, hãy nghe trình đọc màn hình điều hướng lại qua bản minh hoạ.

Bạn cần cung cấp nội dung cho người dùng trình đọc màn hình về mục đích của đường liên kết và liệu đường liên kết đó có đưa họ đến một vị trí mới bên ngoài trang web hoặc ứng dụng hay không.

Trong bản minh hoạ, chúng tôi đã khắc phục hầu hết các đường liên kết khi cập nhật văn bản thay thế của hình ảnh đang hoạt động, nhưng có một vài đường liên kết khác về nhiều bệnh hiếm có thể được hưởng lợi từ ngữ cảnh bổ sung, đặc biệt là vì các đường liên kết này chuyển hướng đến một vị trí mới.

<a href="https://rarediseases.org/rare-diseases/maple-syrup-urine-disease">
  Maple syrup urine disease (MSUD)
</a>
Nghe trình đọc màn hình hướng dẫn về vấn đề này.
Hãy khắc phục vấn đề này.

Để khắc phục vấn đề này cho người dùng trình đọc màn hình, chúng ta cập nhật mã để thêm thông tin mà không ảnh hưởng đến phần tử hình ảnh. Hoặc để giúp nhiều người hơn, chẳng hạn như những người mắc chứng rối loạn đọc và nhận thức, chúng tôi có thể chọn thêm văn bản trực quan.

Có nhiều mẫu khác nhau mà chúng ta có thể cân nhắc để thêm thông tin liên kết bổ sung. Dựa trên môi trường chỉ hỗ trợ một ngôn ngữ, nhãn ARIA là một lựa chọn đơn giản trong trường hợp này. Bạn có thể nhận thấy rằng nhãn ARIA ghi đè văn bản liên kết gốc, vì vậy hãy nhớ đưa thông tin đó vào nội dung cập nhật.

<a href="https://rarediseases.org/rare-diseases/maple-syrup-urine-disease"
  aria-label="Learn more about Maple syrup urine disease on the Rare Diseases website.">
  Maple syrup urine disease (MSUD)
</a>
Bây giờ, chúng ta đã chỉnh sửa ngữ cảnh của đường liên kết, hãy nghe trình đọc màn hình điều hướng qua bản minh hoạ một lần nữa.

Vấn đề 3: Hình ảnh trang trí

Trong mô-đun kiểm thử tự động, Lighthouse không thể nhận ra SVG nội tuyến đóng vai trò là hình ảnh chờ chính trên trang minh hoạ của chúng tôi. Tuy nhiên, trình đọc màn hình sẽ tìm thấy và thông báo đó là "hình ảnh" mà không có thêm thông tin nào. Điều này đúng ngay cả khi bạn không thêm thuộc tính role="img" vào SVG một cách rõ ràng.

<div class="section-right">
  <svg>...</svg>
</div>
Nghe trình đọc màn hình hướng dẫn giải quyết vấn đề này.
Hãy cùng khắc phục vấn đề này.

Để khắc phục vấn đề này, trước tiên, chúng ta cần xác định xem hình ảnh đó là thông tin hay trang trí. Dựa trên quyết định đó, chúng ta cần thêm văn bản thay thế hình ảnh thích hợp (hình ảnh cung cấp thông tin) hoặc ẩn hình ảnh khỏi người dùng trình đọc màn hình (hình ảnh trang trí).

Chúng ta đã cân nhắc những ưu và khuyết điểm của cách phân loại hình ảnh tốt nhất và quyết định hình ảnh đó là hình ảnh trang trí, nghĩa là chúng ta muốn thêm hoặc sửa đổi mã để ẩn hình ảnh. Một phương pháp nhanh chóng là thêm trực tiếp role="presentation" vào hình ảnh SVG. Thao tác này sẽ gửi tín hiệu đến trình đọc màn hình để bỏ qua hình ảnh này và không liệt kê hình ảnh này trong nhóm hình ảnh.

<div class="section-right">
  <svg role="presentation">...</svg>
</div>
Giờ đây, chúng ta đã khắc phục hình ảnh trang trí, hãy nghe trình đọc màn hình điều hướng qua bản minh hoạ.

Vấn đề 4: Trang trí dấu đầu dòng

Bạn có thể nhận thấy trình đọc màn hình đọc hình ảnh dấu đầu dòng CSS trong phần bệnh hiếm. Mặc dù đây không phải là loại hình ảnh truyền thống mà chúng ta đã thảo luận trong mô-đun Hình ảnh, nhưng hình ảnh này vẫn phải được sửa đổi vì nó làm gián đoạn luồng nội dung và có thể làm người dùng trình đọc màn hình mất tập trung hoặc nhầm lẫn.

<p class="bullet">...</p>
Nghe trình đọc màn hình hướng dẫn giải quyết vấn đề này.
Hãy cùng khắc phục vấn đề này.

Tương tự như ví dụ về hình ảnh trang trí đã thảo luận trước đó, bạn có thể thêm role="presentation" vào HTML bằng lớp dấu đầu dòng để ẩn hình ảnh đó khỏi trình đọc màn hình. Tương tự, role="none" cũng sẽ hoạt động. Chỉ cần nhớ không sử dụng aria-hidden: true, nếu không bạn sẽ ẩn tất cả thông tin về đoạn văn khỏi người dùng trình đọc màn hình.

<p class="bullet" role="none">...</p>

Vấn đề 5: Trường trên biểu mẫu

Trong mô-đun Forms (Biểu mẫu), chúng ta đã tìm hiểu rằng tất cả các trường biểu mẫu cũng phải có nhãn hình ảnh và nhãn lập trình. Nhãn này phải luôn hiển thị.

Trong bản minh hoạ, chúng ta thiếu cả nhãn hình ảnh và nhãn lập trình trên trường email đăng ký nhận bản tin. Có một phần tử giữ chỗ văn bản, nhưng phần tử này không thay thế nhãn vì không hiển thị liên tục và không tương thích đầy đủ với tất cả trình đọc màn hình.

<form>
  <div class="form-group">
    <input type="email" placeholder="Enter your e-mail address" required>
    <button type="submit">Subscribe</button>
  </div>
</form>
Nghe trình đọc màn hình hướng dẫn giải quyết vấn đề này.
Hãy cùng khắc phục vấn đề này.

Để khắc phục vấn đề này, hãy thay thế phần giữ chỗ văn bản bằng phần tử nhãn giống nhau. Phần tử nhãn đó được kết nối theo phương thức lập trình với trường biểu mẫu và chuyển động được thêm bằng JavaScript để giữ cho nhãn hiển thị ngay cả khi nội dung được thêm vào trường.

<form>
  <div class="form-group">
    <input type="email" required id="youremail" name="youremail" type="text">
    <label for="youremail">Enter your e-mail address</label>
    <button type="submit" aria-label="Subscribe to our newsletter">Subscribe</button>
  </div>
</form>
Giờ đây, chúng ta đã khắc phục xong biểu mẫu, hãy nghe trình đọc màn hình điều hướng qua bản minh hoạ.

Tóm tắt

Xin chúc mừng! Bạn đã hoàn tất tất cả các hoạt động kiểm thử cho bản minh hoạ này. Bạn có thể xem tất cả các thay đổi này trong Codepen mới cập nhật cho bản minh hoạ này.

Giờ đây, bạn có thể vận dụng những điều đã học để xem xét khả năng hỗ trợ tiếp cận của các trang web và ứng dụng của riêng bạn.

Mục tiêu của tất cả các hoạt động kiểm thử chức năng hỗ trợ tiếp cận này là giải quyết nhiều vấn đề nhất có thể mà người dùng có thể gặp phải. Tuy nhiên, điều này không có nghĩa là trang web hoặc ứng dụng của bạn sẽ hoàn toàn có thể truy cập được sau khi bạn hoàn tất. Bạn sẽ thành công nhất bằng cách thiết kế trang web hoặc ứng dụng có khả năng hỗ trợ tiếp cận trong suốt quá trình và kết hợp các thử nghiệm này với những thử nghiệm trước khi ra mắt khác.

Kiểm tra mức độ hiểu biết

Kiểm tra kiến thức của bạn về kiểm thử khả năng hỗ trợ tiếp cận tự động

Trình đọc màn hình nào phù hợp nhất để kiểm tra khả năng hỗ trợ tiếp cận?

Không có
VoiceOver
Cá kình
JAWS

Mục đích của việc kiểm thử bằng công nghệ hỗ trợ là gì?

Để kiểm tra các lỗi trong trang web hoặc ứng dụng của bạn.
Để trải nghiệm tương tự như những người sử dụng công nghệ hỗ trợ.