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, 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: gậy chụp đầ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 mắt, bàn phím/chuột thích ứng
- Phần cứng: nút chuyển đổi, 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ể.
Thông tin cơ bản về thử nghiệm trình đọc màn hình
Trong học phần này, chúng ta sẽ 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 đó, tính năng này sẽ chuyển đổi thông tin đó thành lời nói hoặc chữ nổi đầu ra cho người dùng.
Trình đọc màn hình rất cần thiết đối với những người khiếm thị và người bị mất thị lực, nhưng cũng có thể mang lại lợi ích cho những người có thị lực kém, chứng rối loạn đọc hoặc 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 hiện nay 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ể 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 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 hiệu chỉnh, bạn có thể gặp nhiều "lỗi" khác hoặc hành vi không mong muốn. Trình đọc màn hình hoạt động tốt nhất khi được sử dụng theo các cách kết hợp sau đây.
Các lệnh của trình đọc màn hình
Sau khi thiết lập đúng cách phần mềm trình đọc màn hình cho 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à xem qua một số lệnh thiết yếu của trình đọc màn hình để làm quen với công nghệ này. Nếu trước đây bạn đã sử dụng trình đọc màn hình, hãy cân nhắc việ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 ả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 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 rất nhiều) thực hành.
Nếu cần hiểu thêm 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ể trao đổi 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ã dựa trên một bộ quy tắc và hỏi người dùng về trải nghiệm của họ thường 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 những sản phẩm toàn diện.
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 trên 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 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 một số lỗi có thể khác với cách được mô tả trong mô-đun này.
Bước 1
Hãy truy cập CodePen đã cập nhật á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 ở chế độ gỡ lỗi để tiếp tục với
các thử nghiệm tiếp theo. Thao tác này rất quan trọng vì thao tác này sẽ xoá <iframe> xung quanh
trang web minh hoạ, có thể ảnh hưởng đến một số công cụ thử nghiệm. 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 việc điều hướng 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 qua 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 điều hướng 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 khó chịu. Nếu thử 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 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ì 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ể.
Hãy khắc phục vấn đề này.
Nếu chỉ xem trang web, không thể quan sát một số phần tử không truy cập được. Bạn có thể còn nhớ tầm quan trọng của 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ể trông giống như tiêu đề, nhưng thực chất nội dung được bao bọc trong một <div> cách điệu.
Để khắc phục vấn đề với tiêu đề và điểm 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ứ chính xác thì 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ể.
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 một đườ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 đã sửa 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 số đường liên kết bổ sung về nhiều bệnh hiếm gặp có thể có lợi từ bối cảnh bổ sung, đặc biệt là khi các đường liên kết đó 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ông tin mà không ảnh hưởng đến phần tử hình ảnh. Hoặc, để hỗ trợ 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 nhận thức và khả năng đọc, chúng tôi có thể thêm văn bản bổ sung bằng hình ảnh.
Chúng tôi có thể xem xét nhiều mẫu khác nhau để bổ sung thông tin 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ữ, nhãn ARIA là 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, nên 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>
Vấn đề 3: Hình ảnh trang trí
Trong mô-đun kiểm thử tự động của chúng tôi, Lighthouse không thể chọn hình ảnh SVG cùng dòng hoạt động như hình ảnh chờ chính trên trang minh hoạ, nhưng trình đọc màn hình sẽ tìm thấy và thông báo hình ảnh đó là "hình ảnh" mà không có thông tin bổ sung. Điều này luôn đú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>
Để khắc phục vấn đề này, trước tiên chúng tôi 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ế phù hợp cho hình ảnh (hình ảnh cung cấp thông tin) hoặc ẩn hình ảnh đó để người dùng trình đọc màn hình không nhìn thấy (dùng để trang trí).
Chúng tôi đã cân nhắc ưu 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 hình ảnh đó mang tính chất trang trí, tức là chúng tôi muốn thêm hoặc sửa đổi mã để ẩn hình ảnh. Một phương thức 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 dưới các bệnh hiếm. Mặc dù đây không phải là loại hình ảnh truyền thống, như đã thảo luận trong mô-đun Hình ảnh, 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ể làm người dùng trình đọc màn hình mất tập trung hoặc bối rối.
<p class="bullet">...</p>
Tương tự như ví dụ về hình ảnh trang trí được 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 lớp đó khỏi trình đọc màn hình. Tương tự, role="none" cũng hoạt động. Bạn 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 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 biểu mẫu
Trong mô-đun Biểu mẫu, chúng ta đã biết rằng tất cả các dạng các trường dữ liệu cũng phải có nhãn trực quan và có lập trình. Nhãn này phải duy trì luôn hiển thị.
Trong bản minh hoạ, chúng tôi thiếu cả nhãn hình ảnh 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ì phần tử này không cố định về mặt hình ảnh và không tương thích hoàn toàn với mọi 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 toàn bộ bước 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 bản Codepen đã 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.
Mục tiêu của tất cả thử nghiệm hỗ trợ tiếp cận này là giải quyết càng nhiều càng tốt các 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à trang web hoặc ứng dụng của bạn hoàn toàn dễ dàng truy cập được 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 những thử nghiệm này với thử nghiệm trước khi ra mắt khác.
Kiểm tra kiến thức
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 thử khả năng hỗ trợ tiếp cận?
Mục đích của việc thử nghiệm bằng công nghệ hỗ trợ là gì?