Создание упорядоченных списков с HTML5 и / или CSS, которые безопасны для программ чтения с экрана?

Question

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

У меня есть демонстрационная версия jsfiddle для ссылки на упорядоченный список с помощью счетчиков CSS, которые я хотел бы реализовать, но я не совсем уверен, насколько он доступен. Я получаю смешанные результаты из своего собственного исследования.

Я хотел бы использовать функцию HTML5, но важен десятичный аспект.

Если бы я пометил его с помощью только для чтения с экрана (то есть <li><span class="sr-only">3.5<span> ... </li>) тогда вполне вероятно, что цифры будут читаться дважды. Конечно, я также беспокоюсь о том, что их вообще не читают...

Есть ли лучшая практика, связанная с этой проблемой?

Answer 1

Я протестировал ваш jsfiddle с NVDA в Firefox, и он прочитал каждый элемент списка так, как я ожидал. Я согласен с FelipeAI, что вам следует тестировать и другие программы для чтения с экрана, поскольку они сильно различаются по своей интерпретации.

MDN показывает поддержку браузера для счетчика CSS, начиная с IE8: https://developer.mozilla.org/en-US/docs/Web/CSS/counter-reset

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