Tôi đang vật lộn để thực hiện một đầu vào có thể truy cập bằng các hành vi tăng / giảm, sử dụng một <input type="text" role="spinbutton" />yếu tố trong HTML / JavaScript. Nhưng có vẻ như với VoiceOver có các sự kiện đầu vào tùy chỉnh (giả?) Để tăng / giảm làm thay đổi giá trị của đầu vào theo những cách không mong muốn.
Làm cách nào để đảm bảo người dùng điều hướng trang bằng công nghệ hỗ trợ không nhận được hướng dẫn xấu từ VoiceOver trong khi cố gắng tương tác với tiện ích của tôi?
Ví dụ: sử dụng mã siêu rút gọn như thế này:
function logIt(...args) {
document.getElementById('output').appendChild(
document.createTextNode(`${args.join(', ')}\n`)
);
}
document.getElementById("myInput").addEventListener('input', (e) => {
debugger;
logIt(e.type, e.data, String(e));
e.target.setAttribute('aria-valuenow', e.target.value);
}, false);
document.getElementById("myInput").addEventListener('keydown', (e) => {
logIt(e.type, e.data, String(e));
}, false); <input
id="myInput"
type="text"
role="spinbutton"
autocomplete="off"
defaultValue="1"
aria-valuenow="1"
aria-valuemin="0"
aria-valuemax="100"
/>
</div>
<pre id="output"></pre>... VoiceOver sẽ mô tả đầu vào dưới dạng "bước" và đưa ra hướng dẫn về cách tăng / giảm bằng bàn phím. Nhưng việc sử dụng các lệnh bàn phím đó dẫn đến một số phép toán kỳ lạ, như đã thấy trong nắp màn hình này:
Bạn cũng có thể nhìn thấy (từ "khai thác gỗ" trong nắp màn hình) mà khi người dùng nhập vào, một InputEventđược kích hoạt với event.typeviệc input- nhưng khi lệnh bàn phím VoiceOver cho tăng / giảm được sử dụng, cơ sở-type Eventđược kích hoạt với event.typemột lần nữa thiết lập để input.
Và điều này dường như không phải là duy nhất đối với việc triển khai của tôi role="spinbutton". Trình tạo giao diện người dùng jQuery không hoạt động tốt khi tăng / giảm bằng các lệnh bàn phím VoiceOver:
Tôi thậm chí đã thử một số ví dụ của w3c cho role="spinbutton":
- Tiện ích kích thước phông chữ trên https://www.w3.org/TR/wai-aria-practices/examples/toolbar/toolbar.html
- Công cụ chọn ngày trên https://www.w3.org/TR/wai-aria-practices/examples/spinbutton/datepicker-spinbuttons.html
... và mặc dù VoiceOver đã mô tả từng điều khiển UI đó là "bước" và đưa ra hướng dẫn về cách tăng / giảm chúng bằng bàn phím, những hướng dẫn đó dường như không hoạt động. Các hành vi bàn phím khác đã hoạt động - nhưng những hành động mà VoiceOver đề xuất là không.
Tôi có thể làm gì để đảm bảo rằng role="spinbutton"đánh dấu hoạt động chính xác với các lệnh bàn phím tăng / giảm của VoiceOver?