Проблема веб-доступности и проверка веб-сайта wordpress

Я запускаю сайт через Web Accessibility и получаю следующее предупреждение:

Убедитесь, что регионы ARIA, ориентиры и разделы HTML идентифицируемы.

Код, на который он ссылается, приведен ниже:

<aside style="position: absolute; left: 0px; top: 0px;" class="widget widget_text masonry-brick" id="text-2">
   <h3 class="widget-title">My Website</h3>
   <div class="textwidget">
      <p>Address Line 1<br>Address Line 2<br>Telephone: 123-456-7890<br></p>
   </div>
</aside>

Я не очень хорошо разбираюсь в вопросах доступности веб-сайтов, поэтому я не уверен, какие изменения необходимо внести. Фрагмент кода находится в области виджетов, который затем помещается в нижний колонтитул веб-сайта.

Любая помощь приветствуется, если мне нужно добавить метку id или aria. Поскольку он размещается внутри нижнего колонтитула, уже установлен «нижний колонтитул», а затем внутри него создается «в стороне».


wordpress web-accessibility wai-aria
person Axwell    schedule 13.04.2021    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Я смог найти подходящий ответ здесь

Как назначить метку aria боковой панели в сторону

Добавление арии-метки в функцию боковой панели позволило мне добавить их туда динамически и удалить ошибки.

person Axwell    schedule 13.04.2021

arrow_upward
0
arrow_downward

Вместо использования aria-label лучше использовать aria-labelledby и присвойте заголовку aside идентификатор.

<!-- add `aria-labelledby` to the aside, pointing it to the ID of the heading. -->
<aside aria-labelledby="aside-title" style="position: absolute; left: 0px; top: 0px;" class="widget widget_text masonry-brick" id="text-2">
   <!-- add a corresponding ID to the aside heading -->
   <h3 id="aside-title" class="widget-title">My Website</h3>
   <div class="textwidget">
      <p>Address Line 1<br>Address Line 2<br>Telephone: 123-456-7890<br></p>
   </div>
</aside>

Это связано с некоторым странным поведением некоторых программ чтения с экрана, где aria-label перезаписывает содержимое чего-либо внутри текстом aria-label. Это особенно важно для предметов, внутри которых нет фокусируемых элементов.

Взято из MDN на aria-label:

Атрибут aria-label используется для определения строки, обозначающей текущий элемент. Используйте его в тех случаях, когда текстовая метка не видна на экране. Если есть видимый текст, обозначающий элемент, используйте вместо него aria-labelledby.

Взято из MDN на aria-labelledby:

В дополнение к элементам формы вы можете использовать атрибут aria-labelledby, чтобы связать статический текст с виджетами, группами элементов, панелями, областями с заголовком, определениями и другими типами объектов. Раздел «Примеры» ниже содержит дополнительную информацию о том, как использовать атрибут таким образом.

person Graham Ritchie    schedule 13.04.2021