Существуют ли проблемы доступности для удаления пробелов между двумя текстовыми элементами? (например, span, a)
Мне интересно, не мешает ли доступность каким-либо образом иметь этот HTML:
<a href="privacy.html">Privacy</a><a href="terms">Terms</a>
вместо этого:
<a href="privacy.html">Privacy</a> <a href="terms">Terms</a>
или это:
<a href="privacy.html">Privacy</a>
<a href="terms">Terms</a>
Я думаю в контексте программы чтения с экрана: правильно ли она распознает, что это два разных слова, а не "PrivacyTerms"? Есть ли разница, если я использую <span> или любой другой элемент вместо <a>?
Причина, по которой я иногда удаляю пустое пространство, заключается в том, что мне нравится указывать точный зазор между элементами с помощью CSS (margin), а сохранение пустого пространства в исходном коде добавляет визуальное пространство в зависимости от размера шрифта, что тоже можно выбрать (особенно раздражает когда элементы кликабельны, так как курсор меняется с pointer в text в default как вы переместите его от элемента к следующему). Если есть более эффективные способы решения этой проблемы, я хотел бы услышать их.
2 ответа
В вашем примере со ссылками в настоящее время вряд ли возникнет проблема для программ чтения с экрана. Они будут распознаны как отдельные ссылки и объявлены как таковые. Обычно пользователь слышит роль "ссылка" для каждого из них: "Конфиденциальность, ссылка. Условия, ссылка".
В случае смежных пролётов результат зависит от разных комбинаций браузера, ОС и программы чтения с экрана. Пролеты объединяются в одно слово, что иногда приводит к необычному произношению. Я бы посоветовал пробел между соседними интервалами, где бы обычно не было пробела между словами.
Например, в недавнем выпуске Drupal, <button> содержал два пролета, но без пробелов:
<button><span>Collapse</span><span>Development</span></button>
Доступное имя кнопки было вычислено как "CollapseDevelopment", и некоторые программы чтения с экрана объявили его как "Collaps-ey Development" с дополнительным слогом. В конце концов я обнаружил, что все сводится к тому, какой голос использует программа чтения с экрана (некоторые программы чтения с экрана могут использовать несколько механизмов преобразования текста в речь).
Историческая справка: WCAG 1.0 (устаревший, используйте WCAG 2...) советовал следующее. Обратите внимание на акцент "До".
До тех пор, пока пользовательские агенты (включая вспомогательные технологии) не будут четко отображать смежные ссылки, включайте несмежные печатные символы (окруженные пробелами) между смежными ссылками. ( Контрольная точка WCAG 1.0 10.5)
В настоящее время это не проблема: предложение "до" было выполнено несколько лет назад. Программы чтения с экрана по-разному относятся к смежным ссылкам.
Визуально ваш первый пример будет выглядеть как одна ссылка, но они будут отдельными табуляциями, поэтому программа чтения с экрана будет читать их отдельно. Два других примера будут выглядеть как отдельные ссылки. Программа чтения с экрана будет относиться ко всем трем примерам одинаково.
Если у вас есть два <span> элементы без пробела, тогда программы чтения с экрана ПК, такие как JAWS и NVDA, объединят текст и будут прочитаны как единое целое. Но на VoiceOver на iOS они будут рассматриваться как отдельные элементы.