Home 'text' is not a valid value of attribute 'role'
Reply: 0

'text' is not a valid value of attribute 'role'

user1328 Published in June 19, 2018, 2:42 pm

As part of the project I'm working on I'm required to make my site ADA compliant. I'm attempting to making my pages tabbable and for all text to be read properly by a reader like JAWS. However, I've been failing at getting certain elements to read their aria-labels.


Take the below example:

<div class="clearfix" tabindex="0">
    <span role="text" class="bold text-left text-primary" ng-bind="$ctrl.helloMessage" aria-label="{{ $ctrl.helloMessage }}"></span>
    <span role="heading" class="bold pull-right" ng-if="$ctrl.id.length" ng-bind="$ctrl.label + ': ' + $ctrl.id" aria-label="{{ $ctrl.getAdaCompliantText($ctrl.label) }} {{ $ctrl.getAdaCompliantText($ctrl.id) }}"></span>

Both of the spans above read properly, however, this element is not a heading and I get an error in Visual Studio as well as the tool my client is using to check ADA compliance states that that role does not exist.

What do I need to do to force my aria-labels to be read? Is there another role type I should use here? Is using a role of heading the correct way? Is there something else I'm missing in order to get it to read properly?

Thanks in advance.

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.325463 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO