Блог

Главная - Вопросы по программированию - VoiceOver в iOS 14.2 говорит «забавные вещи» при необычном оформлении упорядоченного списка элементов li (a11y)

VoiceOver в iOS 14.2 говорит «забавные вещи» при необычном оформлении упорядоченного списка элементов li (a11y)

#css #ios #accessibility #html-lists #voiceover

#css #iOS #Специальные возможности #html-списки #закадровый голос

Вопрос:

следуйте коду :

HTML :

 <div class="list-container">
  <ol>
    <li value="1" class="list-element">
      car
    </li>
    <li aria-label="2" value="2" class="list-element">
      house
    </li>
    <li value="3" class="list-element">
      boat
    </li>

  </ol>

</div>

css :

 .list-container .list-element {
  margin-bottom: 32px;
  color: blue;
}
ol {
  list-style: none;
  counter-reset: item;
  margin-left: 0;
}

ol li {
  counter-increment: item;
  font-family: FSAlbertBold;
  color: #222944;
  font-size: 20px;
}

ol li:before {
  margin-right: 10px;
  content: counter(item);
  background: #4682b4;
  max-height: 32px;
  max-width: 22px;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  display: inline-block;
  font-family: FSAlbertRegular;
  font-size: 14px;
}

смотрите и тестируйте в codepen https://codepen.io/iani/pen/VwKeKpq

safari на iOS 14 с озвучкой объявляет при пролистывании списка вперед: «1 список начинается с ночного неба», «автомобиль», «2 ночное небо», «дом», «3 ночное небо», «лодка»

ожидаемый результат: «1 начало списка», «автомобиль», «2», «дом», «3», «лодка»

полурешение: смог убедить команду перейти к более простому стилю и использовать «‘li:: marker»‘, как показано здесь https://codepen.io/iani/pen/rNMxzgK который не поддерживается в IE (согласно https://caniuse.com/css-marker-pseudo )

Комментарии:

1. Отлично работает в предоставленной скрипке на iOS 14, с которой мне так сложно помочь. Вы уверены , что в нем говорится «ночное небо», а не что-то еще, поскольку, возможно, у вас установлена высокая детализация? Единственное, что я мог подумать, это то, что у меня нет шрифта «FSAlbertRegular», и там может быть что-то странное. Надеюсь, кто-то еще сможет повторить проблему.

2. иногда встречается «голубое небо»… иногда работает так, как ожидалось, но редко

3. Можете ли вы установить совершенно другое название и сообщить нам, как оно звучит?

4. я подозреваю, что это названия цветов CSS, и, скорее всего, неверное представление «Небесно-голубой» или «Темно-синий». (Посмотрите, влияет ли изменение значений цвета). Если это так, я не знаю, почему VO их считывает — он этого не делает на Mac — но это может быть как-то связано с тем, что content: счетчик (элемент) объявляется немного неправильно — возможно, там ошибка. Можете ли вы подтвердить, что используете Safari?

5. да, safari на iOS 14 (iPadOS)