Đây là bài đăng thứ 3 trong loạt bài nhỏ mà chúng tôi đang thực hiện về khả năng truy cập biểu mẫu. Nếu bạn bỏ lỡ bài thứ 2, hãy xem Quản lý tiêu điểm người dùng với :focus-visible. Trong bài đăng này, chúng ta sẽ xem xét việc sử dụng trình đọc màn hình khi điều hướng biểu mẫu cũng như một số phương pháp hay nhất.
Trình đọc màn hình là gì?
Bạn có thể đã nghe thấy thuật ngữ “trình đọc màn hình” khi di chuyển trên web. Bạn thậm chí có thể đang sử dụng trình đọc màn hình tại thời điểm này để chạy thử nghiệm khả năng tiếp cận thủ công trên những trải nghiệm bạn đang xây dựng. Trình đọc màn hình là một loại AT hoặc công nghệ hỗ trợ.
Trình đọc màn hình chuyển đổi văn bản kỹ thuật số thành giọng nói tổng hợp hoặc đầu ra chữ nổi, thường thấy ở đầu đọc chữ nổi.
Trong ví dụ này, tôi sẽ sử dụng Mac VO. Mac VO (VoiceOver) được tích hợp sẵn cho tất cả các thiết bị Mac; Hệ thống iOS, iPadOS và macOS. Tùy thuộc vào loại thiết bị bạn đang chạy macOS, việc mở VO có thể khác nhau. Macbook Pro đang chạy VO mình đang viết bài này không có touch bar nên mình sẽ sử dụng phím tắt tùy theo phần cứng.
Quay lên VO trên macOS
Nếu bạn đang sử dụng Macbook Pro được cập nhật, bàn phím trên máy của bạn sẽ trông giống như hình ảnh bên dưới.
Bạn sẽ bắt đầu bằng cách giữ phím cmd rồi nhấn nhanh Touch ID ba lần.
Nếu bạn đang sử dụng MBP (MacBook Pro) có TouchBar, bạn sẽ sử dụng phím tắt cmd+fn+f5 để bật VO. Nếu bạn đang sử dụng bàn phím truyền thống với máy tính để bàn hoặc máy tính xách tay của mình, các phím phải giống nhau hoặc bạn sẽ phải bật VO trong cài đặt Trợ năng.. Sau khi bật VO, bạn sẽ được chào đón bằng hộp thoại này cùng với giọng nói được phát âm giới thiệu về VO.
Nếu bạn nhấp vào nút “Sử dụng VoiceOver”, bạn đang dần sử dụng VO để kiểm tra các trang web và ứng dụng của mình. Một điều cần lưu ý là VO được tối ưu hóa để sử dụng với Safari. Như đã nói, hãy đảm bảo khi bạn chạy kiểm tra trình đọc màn hình rằng Safari là trình duyệt bạn đang sử dụng. Điều đó cũng đúng với iPhone và iPad.
Có hai cách chính để bạn có thể sử dụng VO ngay từ đầu. Cá nhân tôi sử dụng nó bằng cách điều hướng đến một trang web và sử dụng kết hợp các tab, control, option, shift và các phím mũi tên, tôi có thể điều hướng trải nghiệm một cách hiệu quả chỉ bằng các phím này.
Một cách phổ biến khác để điều hướng trải nghiệm là sử dụng Cánh quạt VoiceOver. Rotor là một tính năng được thiết kế để điều hướng trực tiếp đến nơi bạn muốn trong trải nghiệm. Bằng cách sử dụng Rotor, bạn loại bỏ việc phải đi qua toàn bộ địa điểm, hãy coi đó như một “Hãy chọn cuộc phiêu lưu của riêng bạn”.
Modifier Keys
Phím bổ trợ là cách bạn sử dụng các tính năng khác nhau trong VO. Phím bổ trợ mặc định hoặc VO is control + option nhưng bạn có thể thay đổi thành mũ khóa hoặc chọn cả hai tùy chọn để sử dụng thay thế cho nhau.
Sử dụng rôto
Để sử dụng Rotor, bạn phải sử dụng kết hợp (các) phím bổ trợ và chữ cái “U”. Đối với tôi, phím bổ trợ của tôi là caps lock. tôi nhấn caps lock + U và Rotor quay tròn cho tôi. Khi Rotor xuất hiện, tôi có thể điều hướng đến bất kỳ phần nào của trải nghiệm mà tôi muốn bằng cách sử dụng mũi tên trái và phải.
Điều hướng theo cấp độ tiêu đề
Một cách gọn gàng khác để điều hướng trải nghiệm là theo cấp độ tiêu đề. Nếu bạn sử dụng tổ hợp các phím bổ trợ + cmd + H bạn có thể duyệt qua cấu trúc tài liệu dựa trên các cấp độ tiêu đề. Bạn cũng có thể di chuyển sao lưu tài liệu bằng cách nhấn shift theo trình tự như vậy, các phím bổ trợ + shift + cmd + H.
Lịch sử & các phương pháp hay nhất
Biểu mẫu là một trong những thành phần gốc mạnh mẽ nhất mà chúng tôi có trong HTML. Cho dù bạn đang tìm kiếm thứ gì đó trên một trang, gửi biểu mẫu để mua thứ gì đó hoặc gửi bản khảo sát. Biểu mẫu là nền tảng của web và là chất xúc tác giúp mang lại tính tương tác cho trải nghiệm của chúng ta.
Lịch sử của biểu mẫu web bắt đầu từ tháng 1995 năm XNUMX khi nó được giới thiệu trong Thông số HTML 2.0. Một số người nói rằng thời kỳ tốt đẹp của web, ít nhất là tôi nói vậy. Stephanie Stimac đã viết một bài báo tuyệt vời về Tạp chí Smashing có tiêu đề, “Tiêu chuẩn hóa Select And Beyond: Quá khứ, hiện tại và tương lai của các điều khiển biểu mẫu HTML gốc".
Sau đây là 5 phương pháp hay nhất cần tuân theo khi xây dựng biểu mẫu có thể truy cập được cho web.
- Đảm bảo rằng bạn đang sử dụng phần tử biểu mẫu. Theo mặc định, các biểu mẫu có thể truy cập được và phải luôn được sử dụng trên div.
<form>
<!-- Form controls are nested here. -->
</form>
- Hãy chắc chắn sử dụng
forvàidthuộc tính trênlabel'cátinputđể chúng được liên kết với nhau. Bằng cách này, nếu bạn nhấp/nhấn vào nhãn, tiêu điểm sẽ chuyển sang đầu vào và bạn có thể bắt đầu nhập.
<label for="name">Name:</label>
<input type="text" id="name" name="name" required aria-required/>- Nếu một trường là bắt buộc để hoàn thành biểu mẫu, hãy sử dụng thuộc tính bắt buộc và thuộc tính aria-required. Những điều này sẽ hạn chế việc gửi biểu mẫu. Thuộc tính aria-required cho công nghệ hỗ trợ biết rõ ràng rằng trường này là bắt buộc.
<input type="text" id="name" name="name" required aria-required/>- Sử dụng,
:focus,:focus-withinvà:focus-visibleCác lớp giả CSS để quản lý và tùy chỉnh cách người dùng nhận được tiêu điểm.
form:focus-within {
background-color: #cfffcf;
}
input:focus-within {
border: 10px solid #000000;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid crimson;
border-radius: 3px;
}- A
buttonđược sử dụng để gọi một hành động, như gửi biểu mẫu. Sử dụng nó! Không tạo nút bằng cách sử dụngdiv'S. MỘTdivtheo định nghĩa là một bộ chia. Nó không có thuộc tính khả năng tiếp cận vốn có.
Demo
Nếu bạn muốn kiểm tra mã, hãy điều hướng đến Kho lưu trữ GitHub bản demo VoiceOver. Nếu bạn muốn thử bản demo ở trên bằng trình đọc màn hình mà bạn chọn, hãy xem Điều hướng biểu mẫu web bằng VoiceOver.
Phần mềm đọc màn hình
Dưới đây là danh sách các loại phần mềm đọc màn hình khác nhau mà bạn có thể sử dụng trên hệ điều hành nhất định của mình. Nếu máy Mac không phải là máy bạn lựa chọn thì vẫn có các tùy chọn dành cho Windows và Linux cũng như cho các thiết bị Android.
NVDA
NVDA là một trình đọc màn hình của NV Access. Nó hiện chỉ được hỗ trợ trên PC chạy Microsoft Windows 7 SP1 trở lên. Để có thêm quyền truy cập, hãy xem Trang tải NVDA phiên bản 2024.1 trên website NV Access!
THÁNG 7
“Chúng tôi cần một trình đọc màn hình tốt hơn”
- Ẩn danh
Nếu bạn hiểu tài liệu tham khảo ở trên, bạn đang ở trong một công ty tốt. Theo trang web JAWS, tóm lại nó như thế này:
“JAWS, Job Access With Speech, là trình đọc màn hình phổ biến nhất thế giới, được phát triển cho người dùng máy tính bị suy giảm thị lực khiến họ không thể nhìn thấy nội dung trên màn hình hoặc điều hướng bằng chuột. JAWS cung cấp đầu ra giọng nói và chữ nổi cho các ứng dụng máy tính phổ biến nhất trên PC của bạn. Bạn sẽ có thể điều hướng Internet, viết tài liệu, đọc email và tạo bài thuyết trình từ văn phòng, máy tính để bàn từ xa hoặc từ nhà.”
Hãy tự mình kiểm tra JAWS và nếu giải pháp đó phù hợp với nhu cầu của bạn, hãy thử xem!
Kể chuyện
Trình tường thuật là một giải pháp trình đọc màn hình tích hợp sẵn đi kèm với WIndows 11. Nếu bạn chọn sử dụng giải pháp này làm trình đọc màn hình mà mình chọn thì liên kết bên dưới là tài liệu hỗ trợ về cách sử dụng nó.
Hướng dẫn đầy đủ về Trình tường thuật
Orca
Orca là trình đọc màn hình có thể được sử dụng trên các bản phân phối Linux khác nhau chạy Gnome.
“Orca là một trình đọc màn hình miễn phí, mã nguồn mở, linh hoạt và có thể mở rộng, cung cấp quyền truy cập vào màn hình đồ họa thông qua giọng nói và chữ nổi có thể làm mới.
Orca hoạt động với các ứng dụng và bộ công cụ hỗ trợ Giao diện nhà cung cấp dịch vụ công nghệ hỗ trợ (AT-SPI), đây là cơ sở hạ tầng công nghệ hỗ trợ chính cho Linux và Solaris. Các ứng dụng và bộ công cụ hỗ trợ AT-SPI bao gồm bộ công cụ Gnome Gtk+, bộ công cụ Swing của nền tảng Java, LibreOffice, Gecko và WebKitGtk. Hỗ trợ AT-SPI cho bộ công cụ KDE Qt đang được theo đuổi.”
TalkBack
Google TalkBack là trình đọc màn hình được sử dụng trên các thiết bị Android. Để biết thêm thông tin về cách bật và sử dụng nó, hãy xem bài viết này trên Trang web hỗ trợ khả năng truy cập của Android.
Hỗ trợ trình duyệt
Nếu bạn đang tìm kiếm sự hỗ trợ trình duyệt thực tế cho các thành phần HTML và thuộc tính ARIA (Ứng dụng Internet phong phú có thể truy cập), tôi khuyên bạn nên sử dụng caniuse.com cho HTML và Hỗ trợ khả năng truy cập cho ARIA để nhận được thông tin hỗ trợ 4-1-1 mới nhất về trình duyệt. Hãy nhớ rằng, nếu trình duyệt không hỗ trợ công nghệ thì rất có thể trình đọc màn hình cũng không hỗ trợ.
Kỹ thuật sốA11Y có thể giúp tóm tắt thông tin về trình duyệt và trình đọc màn hình bằng bài viết của họ, Trình đọc màn hình và trình duyệt! Sự kết hợp nào tốt nhất để kiểm tra khả năng tiếp cận?
Liên kết
https://support.apple.com/guide/voiceover/with-the-voiceover-rotor-mchlp2719/mac
https://www.w3.org/TR/wai-aria/
https://www.w3.org/WAI/standards-guidelines/aria/
https://support.google.com/accessibility/android/answer/6283677?hl=en
https://support.google.com/accessibility/android/answer/6283677?hl=en
- Phân phối nội dung và PR được hỗ trợ bởi SEO. Được khuếch đại ngay hôm nay.
- PlatoData.Network Vertical Generative Ai. Trao quyền cho chính mình. Truy cập Tại đây.
- PlatoAiStream. Thông minh Web3. Kiến thức khuếch đại. Truy cập Tại đây.
- Trung tâmESG. Than đá, công nghệ sạch, Năng lượng, Môi trường Hệ mặt trời, Quản lý chất thải. Truy cập Tại đây.
- PlatoSức khỏe. Tình báo thử nghiệm lâm sàng và công nghệ sinh học. Truy cập Tại đây.
- nguồn: https://css-tricks.com/demystifying-screen-readers-accessible-forms-best-practices/
