Блог

Главная - Вопросы по программированию - проблема доступности для роли списка таблиц

проблема доступности для роли списка таблиц

#c# #html #keyboard #screen-readers

Вопрос:

 <uib-tabset role="tablist"  >
    <uib-tab  ><uib-tab-heading>
        <div role="tab">One
    </div></uib-tab-heading>
    </uib-tab>
    <uib-tab  ><uib-tab-heading>
        <div role="tab">Two
    </div></uib-tab-heading>
    </uib-tab>
    <uib-tab  ><uib-tab-heading>
        <div role="tab">Three
    </div></uib-tab-heading>
    </uib-tab>
</uib-tabset>

получение ошибки доступности, как требуется Родительская роль ARIA отсутствует: список таблиц и требуемая дочерняя роль ARIA отсутствует: вкладка

Ответ №1:

Как добавить отсутствующие родительские роли

Вариант 1. Поместите дочерние элементы внутри родительского элемента в DOM

Вариант 2. Свяжите дочерние роли с родительской ролью с помощью aria-owns

Источник

Информация о доступности

Рассмотрите возможность использования LIGHTHOUSE для аудита соответствия ARIA.

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

1. для динамичного использования ,

2. <body> <uib-tabset role=»tablist»> <uib tab=»» ng-repeat=»tabItem in TabGroup»> <uib-tab-heading> <div role=»tab»> <span>{{элемент tabitem.tabGroupName}} </span> </div> </uib-tab-heading> </uib-tab-heading> </uib-tabset> </body>

Ответ №2:

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

 <body>
<uib-tabset role="tablist"  >
    <uib tab ng-repeat="tabItem in TabGroup">
        <uib-tab-heading>
            <div role="tab">
                <span>{{tabItem.tabGroupName}}</span>
            </div>
        </uib-tab-heading>
    </uib-tab-heading>
</uib-tabset>
</body>
Метки: