So you need to add a span within the element and put role=”text” in that span.Īpple, if you’re listening, please fix this. Every element inside the role=”text” will lose it’s semantics. This would erase the h1-semantics, so it would not appear as a heading in a screen reader. I want it to read the whole heading to me at once.īeware! Don’t put role=”text” in the heading-element. Here I’ve got an h1-element that looks like this in the code: Digital accessibility, Īs you can see in the video below, the br-tag causes the screen reader to interpret the title as two separate objects, just like the span did in the previous example. We had a similar problem on our site with headings, but the solution I used will work for links as well. While we wait for Apple, there’s an easy workaround for developers to fix this on your sites. But I reported this error in 2012 and it’s still not fixed, so my hopes aren’t great. It should be read as one object, as the link-element is wrapping both the link name and the icon-span.īut VoiceOver interprets it as two different objects if I touch the right span, rendering me confused. In the code, the icon is placed in its own span-element. It’s made up of two parts: The name “Arkiv” and the link icon. What’s going on here? Well, let’s take the last link in the example above. If I touch the left side of the links, I get to hear the names together with the type of element – a good user experience. Notice how it just reads “Link” if my finger is on the right side of the elements – a bad user experience.
0 Comments
Leave a Reply. |