0

the following tag works, except it adds heading level 4 at the end of the entries on aria-tab

<h4 ng-if="voiceOver" class="keep-it-classy" ng-bind="getCurrentText()" aria-label="{{getCurrentText}}"></h4>

is there some way to stop it reading the header size outloud?

XLE_22
  • 5,124
  • 3
  • 21
  • 72
Erik
  • 2,782
  • 3
  • 34
  • 64
  • 1
    Why would you want it to? What's the purpose of hiding information from the user? If it's an h4, it's an h4. If you're using the h4 for styling purposes only, you shouldn't be. – MobA11y Aug 20 '15 at 20:58
  • the h4 seems like useless information to transmit to the user. Indeed it's being used for style it seems. Should this be pushed into the CSS instead you think? – Erik Aug 25 '15 at 18:32
  • 1
    posted response as an answer. – MobA11y Aug 25 '15 at 20:12

1 Answers1

2

Headings allow for more structural, simpler navigation. Telling a user that something is a heading, is telling them that if they use heading navigation, they can easily return to this spot.

So the announcement:

heading level 4

Is very useful. It tells them that they are at a structurally important part of the page. It also tells them, that if they set the rotor to "headings" they can easily return to this spot by flicking up/down.

Now, this is all assuming that your tag is structurally important, and behaving as an actual heading, and not just pretty text. In this case you should use a different tag, and adjust with CSS to fit the styling you want. This is the most accessible solution.

You could also consider using the ARIA attribute role="presentation" on the element.

<h4 role="presentation" ng-if="voiceOver" class="keep-it-classy" ng-bind="getCurrentText()" aria-label="{{getCurrentText}}"></h4>

though I'm not sure if VoiceOver respects this for heading type elements or not!

MobA11y
  • 18,425
  • 3
  • 49
  • 76