Nano Hash - криптовалюты, майнинг, программирование

ВАИ-АРИЯ HTML. Как заставить 2 div считываться как один?

Я новичок в ARIA, и у меня возникли проблемы с объединением двух элементов div (оба только текста) в один вывод. Макет представляет собой таблицу, похожую на iOS, с двумя текстовыми метками в одной строке. Идея состоит в том, чтобы считывать строку целиком, а не метки одну за другой. Я обнаружил, что метка арии работает только в том случае, если установлена ​​роль (кнопка «Нравится»), но тогда вы читаете дополнительные слова. У кого-нибудь есть идея?

Пример HTML:

<div id="block">
  <div id="foo" class="half" style="float:left">Date of birth</div>
  <div id="bar" class="half" style="float:right">1/01/1970</div>
</div>

на этикетке 1 следует читать: «Дата рождения 01.01.1970».

html accessibility voiceover wai-aria
22.06.2015

  • Попробуйте вместо этого использовать span и, если требуется для визуального представления, добавьте display:block для экрана. 22.06.2015
  • Развивая комментарий выше, веб-семантика важна, когда речь идет о доступности. С помощью тега div вы выделяете область документа. Для ваших целей вам нужен элемент prasing. Так что span может подойти вам больше. 22.06.2015
  • Спасибо, вроде без разницы. aria-label по-прежнему игнорируется. 22.06.2015
  • Зачем вам aria-label вся информация доступна визуально. 22.06.2015
  • Хорошо, я могу запутаться, так как у вас нет aria-label в коде, который вы предоставили. У меня сложилось впечатление, что вы использовали это как обходной путь. Так что же такое label 1? 23.06.2015

Ответы:


1

Во-первых, позвольте мне сказать, что вам действительно не нужно этого делать. Пользователи программ чтения с экрана привыкли иметь дело с такой структурой HTML и могут легко ее обойти.

Однако, если вы хотите сделать это:

Создайте закадровый стиль.

.offscreen {
    border: 0;
    clip: rect(0 0 0 0);
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    width: 1px;
    position: absolute;
}

Затем скройте визуальный контент с помощью aria-hidden и добавьте текст за пределами экрана.

<div id="block">
  <div aria-hidden="true" id="foo" class="half" style="float:left">Date of birth</div>
  <div aria-hidden="true" id="bar" class="half" style="float:right">1/01/1970</div>
  <div class="offscreen">Date of birth: January 1, 1970</div>
</div>
22.06.2015
Новые материалы
Кластеризация: более глубокий взгляд
Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
Как написать эффективное резюме
Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
Частный метод Python: улучшение инкапсуляции и безопасности
Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
Как я автоматизирую тестирование с помощью Jest
Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..