Блог

Я использую элемент label для создания флажка в пользовательском стиле. По сути, я использую его как кнопку, чтобы позже выполнить некоторый стиль с помощью селектора :checked . Я не отправляю значение в форму.

 <input type="checkbox" id="agree" style="display:none" />
.......
<!-- few more divs here -->
.......
<label for="agree" role="button">Click here</label>
<div>This div will be styled if the checkbox is ticked</div>
  

Мой вопрос в том, правильно ли это с точки зрения доступности?
Есть ли более семантический способ сделать это? (должен упоминаться только css)

Мне нужен флажок в пользовательском стиле.

Я думаю, что правильным семантическим способом будет использование a <button> , но тогда он не будет работать как ярлык и не будет устанавливать флажок..

Стандартный способ сделать это — получить прибыль от aria-checked role=checkbox атрибутов и, но для этого требуется Javascript:

 <label for="agree">Click here</label>
<div id="agree" role="checkbox" aria-checked="true" tabindex="0">
       This div will be styled if the checkbox is ticked</div>
  

Сбоев в доступности в ваших примерах несколько:

• метка ссылается на недоступный ввод, который не позволит вспомогательной технологии просмотреть связанный элемент
• элемент не работает с помощью клавиатуры
• Вы используете role атрибут для семантического элемента «Не изменять собственную семантику, если только это действительно не необходимо».

Обратите внимание, что вы можете прекрасно использовать стандартный checkbox элемент и применить к нему некоторый css, не скрывая его полностью.

 <label>
    <input type="checkbox" id="agree" value="1" />
    <div>I agree with the above elements</div>
</label>

-----
/* the input would be hidden but still focusable */
#agree {width: 0px; margin-left: 2px; overflow: hidden;}

/* when focusing the element, we will outline the text to make the focus visible */
#agree:focus   div {outline: dotted 2px blue}

/* default when unticked */
#agree   div {background-image: url("ko.png") no-repeat; border: solid transparent 2px;}

/* default when ticked */
#agree:checked   div {background-image: url("ok.png") no-repeat; border: solid green 2px;}
  

Для этого требуется, чтобы ваш CSS делал видимую разницу, не полагаясь только на использование цветов.

Основываясь на ответе @Adam, он связался с ресурсом 2.2 Второго правила использования ARIA, которое дало мне хороший намек на то, как решить мою проблему.

Вместо того, чтобы делать это

<label for="agree" role="button">Click here</label>

Правильный способ будет

<label for="agree"><span role="button">Click here</span></label>

Поскольку я не могу использовать a <button> (это будет конфликтовать с меткой, отмечающей флажок), я использую span with role="button" .

Только используя CSS и HTML, я могу предложить следующее решение:

 <label for='checkbox'>
     <span style='cursor:pointer;border:1px solid red; background:yellow;padding:5px;border-radius:5px;'>Click</span>
</label>
<input id='checkbox' type='checkbox' />
  

Так что вам не нужна кнопка. Вы можете настроить диапазон.

Проверьте скрипку https://jsfiddle.net/an0tcLmc /