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 AT để giúp 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à:
- Công nghệ thấp hoặc không có công nghệ: gậy đầu và gậy 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 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ị đọc 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ể.
Thông tin 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 AT 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 đó, phần mềm này 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à công cụ cần thiết cho người khiếm thị và người vừa khiếm thị vừa khiếm thính, nhưng cũng có thể mang lại lợi ích cho người thị lực kém, người mắc chứng rối loạn đọc và người khuyết tật về 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 là lựa chọn tốt nhất. Hầu hết trình đọc màn hình được xây dựng dựa trên phần cứng và trình duyệt web cụ thể. Khi sử dụng trình đọc màn hình với một trình duyệt không được điều chỉnh cho phù hợp, bạn có thể gặp phải nhiều "lỗi" hoặc hành vi không mong muốn hơ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) | Windows | Chrome và Firefox |
| Narrator | 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 cho phần mềm trình đọc màn hình trên máy tính để bàn 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 trình đọc màn hình cần thiết để làm quen với công nghệ này. Nếu đã từng sử dụng trình đọc màn hình, hãy cân nhắc dùng 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 cản trở 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 trình đọc màn hình và một chút (hoặc nhiều) thời gian luyện tập.
Nếu cần hiểu rõ hơn về trải nghiệm người dùng của những người sử dụng trình đọc màn hình và các AT khác, bạn có thể tương tác với nhiều tổ chức và cá nhân để thu thập 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ã dựa trên một tập hợp quy tắc và hỏi người dùng về trải nghiệm của họ thường 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 toàn diện.
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 | Insert | Control+Option |
| Dừng âm thanh | Control | Control |
| Đọc tiếp theo/trước | ↓ hoặc ↑ | Control+Option+→ hoặc ← |
| Bắt đầu đọc | Insert↓ | Control+Option+A |
| Danh sách phần tử/Rô-to | NVDA + F7 | Control+Option+U |
| Địa danh | D | Control+Option+U |
| Tiêu đề | H | Control+Option+Command+H |
| Liên kết | K | Control+Option+Command+L |
| Nút điều khiển biểu mẫu | F | Control+Option+Command+J |
| Bảng | T | Control+OptionCommand+T |
| Trong bảng | Insert Alt + ↓ ↑ ← → | Control+Option+↓ ↑ ← → |
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 quanh màn hình | Kéo một ngón tay 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 3 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ột 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, nơi áp dụng tất cả các bản cập nhật về khả năng hỗ trợ tiếp cận tự động và thủ công.
Xem ở 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ì nó 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 và chuyển đến trang minh hoạ. Bạn có thể cân nhắc di chuyển qua toàn bộ trang từ trên xuống dưới 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 của mình cho từng vấn đề, trước và sau khi áp dụng các 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à địa danh là một trong những cách chính để mọi người di chuyển bằng trình đọc màn hình. Nếu không có các phần tử này, người dùng trình đọc màn hình phải đọc toàn bộ trang để hiểu ngữ cảnh. Quá trình này có thể mất nhiều thời gian và gây khó chịu.
Nếu cố gắng di chuyển bằng một trong hai phần tử trong bản minh hoạ, bạn sẽ nhanh chóng phát hiện ra rằng chúng 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ứ đúng cách, thì sẽ không có thay đổi nào về mặt hình ảnh, nhưng trải nghiệm trình đọc màn hình sẽ được cải thiện đáng kể.
Hãy cùng khắc phục vấn đề này.
Bạn không thể quan sát một số phần tử không hỗ trợ tiếp cận chỉ bằng cách nhìn vào 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ư tiêu đề, nhưng thực tế nội dung đó được gói trong một <div> có kiểu.
Để khắc phục vấn đề với tiêu đề và địa danh, trước tiên, bạn phải xác định từng phần tử cần được đánh dấu là như vậy và cập nhật HTML liên quan. Hãy nhớ cập nhật cả CSS 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ứ đúng cách, thì sẽ không có thay đổi nào về mặt hình ảnh, nhưng trải nghiệm trình đọc màn hình sẽ được cải thiện đáng kể.
Vấn đề 2: Ngữ cảnh liên kết
Điều quan trọng là cung cấp nội dung cho người dùng trình đọc màn hình về mục đích của một đường liên kết và liệu đường liên kết đó có chuyển hướng 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ế hình ảnh đang hoạt động, nhưng có một vài đường liên kết bổ sung về nhiều bệnh hiếm gặp có thể hưởng lợi từ ngữ cảnh bổ sung – đặc biệt là vì chúng 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>
Để khắc phục vấn đề này cho người dùng trình đọc màn hình, chúng tôi cập nhật mã để thêm thông tin khác mà không ảnh hưởng đến phần tử hình ảnh. Hoặc để giúp đỡ nhiều người hơn nữa, 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 hình ảnh bổ sung.
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 ban đầu, vì vậy, hãy nhớ đưa thông tin đó vào bản 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>
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 màn hì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 tìm thấy và thông báo là "hình ảnh" mà không có thông tin bổ sung.
Điều này đúng, ngay cả khi không thêm rõ ràng thuộc tính role="img" vào
SVG.
<div class="section-right">
<svg>...</svg>
</div>
Để khắc phục vấn đề này, trước tiên, chúng ta cần quyết định xem hình ảnh đó có mang tính 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 mang tính 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 tôi đã cân nhắc những ưu điểm và nhược điểm của cách phân loại hình ảnh tốt nhất và quyết định rằng đó là hình ảnh trang trí, nghĩa là chúng tôi 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 role="presentation" trực tiếp 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 đó trong nhóm hình ảnh.
<div class="section-right">
<svg role="presentation">...</svg>
</div>
Vấn đề 4: Trang trí dấu đầu dòng
Bạn có thể nhận thấy rằng trình đọc màn hình đọc hình ảnh dấu đầu dòng CSS trong các phần bệnh hiếm gặp. Mặc dù hình ảnh này không giống với hình ảnh 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ể khiến người dùng trình đọc màn hình bị phân tâm hoặc bối rối.
<p class="bullet">...</p>
Tương tự như ví dụ về hình ảnh trang trí đã thảo luận trước đó, bạn có thể thêm a
role="presentation" vào HTML bằng lớp dấu đầu dòng để ẩn hình ảnh đó khỏi the
trình đọc màn hình. Tương tự, một role="none" cũng sẽ hoạt động. Chỉ cần đảm bảo không sử dụng aria-hidden: true nếu không, bạn sẽ ẩn tất cả thông tin đ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 biểu mẫu
Trong mô-đun 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 trực quan và nhãn theo chương trình. Nhãn này phải luôn hiển thị.
Trong bản minh hoạ, chúng tôi thiếu cả nhãn trực quan và nhãn theo chương trình trên trường email đăng ký 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 tồn tại về mặt hình ảnh và không hoàn toàn tương thích 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>
Để khắc phục vấn đề này, hãy thay thế phần giữ chỗ văn bản bằng một phần tử nhãn tương tự. Phần tử nhãn đó được kết nối theo chương trình với trường biểu mẫu và chuyển động được thêm vào 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>
Tóm tắt
Xin chúc mừng! Bạn đã hoàn thành tất cả các bài kiểm thử cho bản minh hoạ này. Bạn có thể xem tất cả những thay đổi này trong Codepen đã cập nhật cho bản minh hoạ này.
Giờ đây, bạn có thể sử dụng những gì đã học để xem xét khả năng hỗ trợ tiếp cận của trang web và ứng dụng của riêng mình.
Mục tiêu của tất cả các bài kiểm thử khả năng tiếp cận này là giải quyết càng nhiều vấn đề có thể xảy ra 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 hoàn toàn hỗ trợ tiếp cận sau khi bạn hoàn tất. Bạn sẽ đạt được thành công cao 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 bài kiểm thử này với các bài kiểm thử khác trước khi ra mắt.