Mô-đun này tập trung vào việc sử dụng công nghệ hỗ trợ (AT) để kiểm tra 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, 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ông nghệ thấp: que lấy đầu/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 bằng mắt, bàn phím/chuột thích ứng
- Phần cứng: nút chuyển đổi, bàn phím tiện dụng, 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ể.
Thông tin cơ bản về việc kiểm thử trình đọc màn hình
Trong học phần này, chúng ta sẽ tập trung vào trình đọc màn hình, một trong những trình đọc màn hình kỹ thuật số phổ biến nhất. Trình đọc màn hình là một phần mềm đọc mã cơ bản của trang web hoặc ứng dụng, sau đó 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 rất cần thiết cho những người khiếm thị và khiếm thị, nhưng cũng có thể hữu ích với những người có thị lực kém, chứng rối loạn đọc hoặc khuyết tật nhận thức.
Khả năng tương thích với trình duyệt
Hiện có nhiều tuỳ chọn trình đọc màn hình. Các trình đọc màn hình phổ biến nhất hiện nay là JAWS, NVDA và VoiceOver cho máy tính, còn VoiceOver và Talkback dành cho thiết bị di động.
Tuỳ thuộc vào hệ điều hành (hệ điều hành), 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ể là lựa chọn phù hợp nhất. Hầu hết trình đọc màn hình đều chú trọng đến phần cứng và trình duyệt web cụ thể. Khi dùng trình đọc màn hình với một trình duyệt chưa được hiệu chỉnh trình duyệt, 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 những cách kết hợp sau.
Các lệnh của trình đọc màn hình
Sau khi thiết lập đúng phần mềm trình đọ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 (đường liên kết trong bảng trước) và thực hiện 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 trước đó bạn đã từng sử dụng trình đọc màn hình, hãy cân nhắc việc dùng thử trình đọc mới!
Khi sử dụng trình đọc màn hình để kiểm tra 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ã ả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 rất 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à thực hành một chút hoặc rất nhiều.
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 để 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 tra 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 các kết quả khác nhau. Cả hai đều là những khía cạnh quan trọng để tạo ra sản phẩm có tính hoà nhập đầy đủ.
Các lệnh chính cho trình đọc màn hình máy tính
Các lệnh chính cho trình đọc màn hình thiết bị di động
Bản minh hoạ thử nghiệm trình đọc màn hình
Để kiểm tra bản minh hoạ, chúng tôi đã sử dụng một Safari trên một máy tính xách tay chạy MacOS và thu âm. 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 được mô tả trong mô-đun này.
Bước 1
Truy cập CodePen đã cập nhật. Bản cập nhật này đã á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.
Hãy xem mã này ở chế độ gỡ lỗi để tiếp tục với các hoạt động kiểm thử tiếp theo. Điều này rất quan trọng vì nó sẽ xoá <iframe> xung quanh trang web minh hoạ. Điều này có thể ảnh hưởng đến 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 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 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 xem 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à mọi người điều hướng bằng trình đọc màn hình. Nếu không có những thông tin 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. Việc này có thể tốn nhiều thời gian và gây khó chịu. Nếu cố gắng sử dụ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ó bất kỳ thay đổi nào về hình ảnh, nhưng trải nghiệm đọc màn hình của bạn sẽ được cải thiện đáng kể.
Hãy khắc phục vấn đề này.
Chỉ cần xem trang web, bạn sẽ không thể nhận thấy một số thành phần không thể truy cập. 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 đoạn nội dung có thể giống như tiêu đề, nhưng nội dung thực ra được bao bọc trong một <div> cách điệu.
Để khắc phục vấn đề với tiêu đề và mốc, 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. Hãy nhớ 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ứ đúng cách thì sẽ không có bất kỳ thay đổi nào về hình ảnh, nhưng trải nghiệm đọc màn hình của bạn sẽ được cải thiện đáng kể.
Vấn đề 2: Ngữ cảnh của đường liên kết
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ó 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 đã sửa hầu hết các đường liên kết khi cập nhật phần văn bản thay thế cho hình ảnh đang hoạt động, nhưng vẫn còn một số đường liên kết bổ sung về các bệnh hiếm gặp khác nhau có thể hưởng lợi nhờ bối cảnh bổ sung — đặc biệt là khi 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ã để bổ sung thêm thông tin mà không ảnh hưởng đến thành phần hình ảnh. Hoặc để giúp ích cho 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 bằng hình ảnh.
Có nhiều mẫu mà chúng tôi có thể xem xét để thêm thông tin bổ sung về đường liên kết. Dựa trên môi trường đơn giản chỉ hỗ trợ một ngôn ngữ của chúng tôi, 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 nhãn ARIA sẽ thay thế văn bản đường liên kết gốc, do đó, hãy nhớ đưa thông tin đó vào nội dung cập nhật của bạn.
<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 thử nghiệm tự động của chúng tôi, Lighthouse không thể chọn SVG cùng dòng hoạt động như hình ảnh chờ chính trên trang minh hoạ của chúng tôi – nhưng trình đọc màn hình sẽ tìm thấy và thông báo SVG là "hình ảnh" mà không có thông tin bổ sung. Điều này là đúng, ngay cả khi không thêm thuộc tính role="img" một cách rõ ràng 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 xác định xem hình ảnh mang tính thông tin hay trang trí. Dựa trên quyết định đó, chúng tôi cần thêm văn bản thay thế hình ảnh thích hợp (hình ả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 các ưu và nhược điểm của cách tốt nhất để phân loại hình ảnh và quyết định rằng đó là hình ảnh trang trí, có 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 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 đó 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 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ù 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 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 nhầm lẫn.
<p class="bullet">...</p>
Giống 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 mã đó khỏi trình đọc màn hình. Tương tự, role="none" 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 đoạ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 tôi đã biết rằng tất cả các trường biểu mẫu cũng phải có nhãn trực quan và có 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 trực quan và nhãn có lập trình trong 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 ổn định về mặt hình ảnh và không tương thích hoàn toàn 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 phương thức lập 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 mới được cập nhật cho bản minh hoạ này.
Giờ đây, bạn có thể sử dụng những điều đã học để xem xét khả năng truy cập của các trang web và ứng dụng của mình.
Mục tiêu của tất cả hoạt động kiểm thử khả năng hỗ trợ tiếp cận này là giải quyết nhiều vấn đề mà người dùng có thể gặp phải. Tuy nhiên, điều này không có nghĩa là bạn có thể truy cập hoàn toàn vào trang web hoặc ứng dụng của mình sau khi hoàn tất. Bạn sẽ đạt được 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 quy trình, đồng thời 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.
Kiểm tra mức độ hiểu biết của bạn
Kiểm tra kiến thức của bạn về tính năng kiểm thử khả năng hỗ trợ tiếp cận tự động
Bạn nên dùng trình đọc màn hình nào tốt nhất để kiểm tra khả năng hỗ trợ tiếp cận?
Mục đích của việc kiểm thử bằng công nghệ hỗ trợ là gì?