У меня есть альтернативный ответ, который, я думаю, еще не был упомянут. Недавно я читал Документы разработчика Mozilla Документы MDN, формы , в особенности раздел «Доступность» Документы MDN, доступный HTML (5) , для получения информации о доступности клавиатуры и форме. структура.
Одним из конкретных упоминаний в разделе «Специальные возможности» является использование элементов HTML5, когда и где это возможно, - они часто имеют кросс-браузерную и более доступную поддержку по умолчанию (не всегда верно, но ясная структура содержимого и правильные элементы также помогают экрану чтение вместе с доступностью клавиатуры).
В любом случае , вот JSFiddle: JSFiddle :: Keyboard Accessible Forms
По сути, я сделал следующее:
- беспардонно копирует часть исходного кода из исходного кода Mozilla в JSFiddle (источник в комментариях скрипки)
- создайте TEXT-тип и присвойте ему атрибут HTML5 " readonly "
- добавить атрибут tabindex = "0" в readonly
- Измените «readonly» CSS для этого элемента ввода, чтобы он выглядел «пустым» или скрытым *
HTML
<title>Native keyboard accessibility</title>
<body>
<h1>Native keyboard accessibility</h1>
<hr>
<h2>Links</h2>
<p>This is a link to <a href="https://www.mozilla.org">Mozilla</a>.</p>
<p>Another link, to the <a href="https://developer.mozilla.org">Mozilla Developer Network</a>.</p>
<h2>Buttons</h2>
<p>
<button data-message="This is from the first button">Click me!</button>
<button data-message="This is from the second button">Click me too!
</button>
<button data-message="This is from the third button">And me!</button>
</p>
<!-- "Invisible" HTML(5) element -->
<!-- * a READONLY text-input with modified CSS... -->
<hr>
<label for="hidden-anchor">Hidden Anchor Point</label>
<input type="text" class="hidden-anchor" id="hidden-anchor" tabindex="0" readonly />
<hr>
<h2>Form</h2>
<form name="personal-info">
<fieldset>
<legend>Personal Info</legend>
<div>
<label for="name">Fill in your name:</label>
<input type="text" id="name" name="name">
</div>
<div>
<label for="age">Enter your age:</label>
<input type="text" id="age" name="age">
</div>
<div>
<label for="mood">Choose your mood:</label>
<select id="mood" name="mood">
<option>Happy</option>
<option>Sad</option>
<option>Angry</option>
<option>Worried</option>
</select>
</div>
</fieldset>
</form>
<script>
var buttons = document.querySelectorAll('button');
for(var i = 0; i < buttons.length; i++) {
addHandler(buttons[i]);
}
function addHandler(button) {
button.addEventListener('click', function(e) {
var message = e.target.getAttribute('data-message');
alert(message);
})
}
</script>
</body>
CSS Styling
input {
margin-bottom: 10px;
}
button {
margin-right: 10px;
}
a:hover, input:hover, button:hover, select:hover,
a:focus, input:focus, button:focus, select:focus {
font-weight: bold;
}
.hidden-anchor {
border: none;
background: transparent!important;
}
.hidden-anchor:focus {
border: 1px solid #f6b73c;
}
Кстати, вы можете отредактировать правило CSS для .hidden-anchor: focus , чтобы убрать выделение для скрытого якоря, если хотите. Я добавил его только для того, чтобы «доказать» эту концепцию, но она все еще работает невидимо, как и было запрошено.
Надеюсь, это поможет!