Доступный пользовательский стиль checkbox

Question

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

<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 только должен упомянуть)

Моя потребность - это особый стиль.

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

Answer 1

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

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

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

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

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

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

Answer 2

только с помощью 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/

Answer 3

Стандартный способ сделать это, чтобы получить прибыль от 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> 

Неудачи для доступности ваших примеров многообразны:

• ярлык относится к не доступному входу, который предотвратит доступ вспомогательной технологии к ассоциированной d элемент
• элемент не функционирует с помощью клавиатуры
• используется атрибут role на семантическом элементе "Do not change native semantics, unless you really have to."

Обратите внимание, что вы можете полностью использовать стандартный 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 имел заметную разницу, не полагаясь исключительно на использование цветов.