Chrome игнорирует метку, когда она содержит сильный элемент - PullRequest
Новая
       19

Chrome игнорирует метку, когда она содержит сильный элемент

0 голосов
/ 31 марта 2020

У меня есть форма, которая включает в себя элемент label с элементом strong внутри. 

<input id="priceCheck" type="checkbox">
<label for="priceCheck">
    <strong> Price Check </strong>
</label>

Насколько я понимаю, spe c соответствует , так как метка может содержать фразировочный контент, а strong определен как таковой.

Однако в Google Chrome (как Android и Desktop) содержимое label игнорируется в дерево доступности, делающее элемент формы без метки (и, следовательно, недоступным для программ чтения с экрана). В Firefox все работает как положено.

Это предполагаемое / известное поведение? Должен ли я подать ошибку Chrome для этого, или я что-то упустил?

(Я исправил это, просто стилизовав label с помощью CSS, но я все еще хотел знать, было ли это как-то запрещено по спец. c.)

1 Ответ

1 голос
/ 31 марта 2020

Оригинальный ответ - смотрите заголовок следующего уровня для обновления.

Проблема не в <strong>, а в том, как chrome выставляет метки в дереве доступности на флажке.

Вы заметите, что если вы проверяете дерево доступности для фактического ввода флажка, а не для метки, то оно действительно связывается правильно.

Это не изменится, если вы переместите стиль на CSS, метка будет по-прежнему отображаться как 'generi c', но у входа есть метка (From label (for): label "Price Проверка ") Проверка цены.

Фактически это не изменится, если вы удалите <strong> и не добавите CSS.

Он отлично работает в программе чтения с экрана, поскольку он выставлен на самом входе это самое главное!

Я думаю, что путаница заключается в том, что при «нормальном» вводе текста метка действительно предоставляет эту информацию.

В следующем примере показано такое поведение, я добавил, как каждый из них представлен в комментариях. 

.priceCheckBold{
   font-weight: bold;
}
<p>All checkbox labels are exposed as 'WebArea > Generic > Ignored'</p>
<label for="priceCheckBoldInline"><strong>Price Check</strong></label>  <!--WebArea > Generic > Ignored-->
<input id="priceCheckBoldInline" type="checkbox"/> 
<br/>
<label for="priceCheckBold" class="priceCheckBold">Price Check</label>  <!--WebArea > Generic > Ignored-->
<input id="priceCheckBold" type="checkbox"/> 
<br/>
<label for="priceCheck">Price Check</label>  <!--WebArea > Generic > Ignored-->
<input id="priceCheck" type="checkbox"/> 
<br/>
<hr/>
<p>All text input labels are exposed as 'WebArea > Generic > Label > Text "Price Check"'</p>
<label for="priceCheckTextBoldInline"><strong>Price Check</strong></label>  <!--WebArea > Generic > Label > Text "Price Check" -->
<input id="priceCheckTextBoldInline" type="text"/> 
<br/>
<label for="priceCheckTextBold" class="priceCheckBold">Price Check</label>  <!--WebArea > Generic > Label > Text "Price Check" -->
<input id="priceCheckTextBold" type="text"/> 
<br/>
<label for="priceCheckText">Price Check</label>  <!--WebArea > Generic > Label > Text "Price Check" -->
<input id="priceCheckText"/>

Обновление после тестирования.

Похоже, это ошибка с Chrome после обсуждения с OP и тестирования.

Не использовать <strong>, <em> et c. вместо меток вместо этого введите CSS

Еще одно решение - вернуться к <b> вместо <strong>. Это все еще работает.

Во всяком случае, этот элемент лучше использовать, поскольку он только меняет внешний вид и не добавляет никакого значения слову.

...