Question 174923 in Html Question posted in
Some basic documentation can be found here.

Can we improve our communication skills?

I have the below HTML where part of the text is colored red. This is to visually draw attention to the text.

<div>
    <span style="color:red">Note: </span>
    <span>Don't forget your appointment.</span>
</div>

When I swipe right through this using VoiceOver it’s read as:

swipe note

swipe don’t forget your appointment

However, it doesn’t make sense to make someone swipe twice to hear this message.

What I want is for this text to be read as a single element by Voiceover, the same as if the HTML was:

<div>
    Note: Don't forget your appointment.
</div>

Other styles, such as bolding a word in the middle of a sentence, also cause this issue.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I figured out one possible solution. The way to fix this is to add the non-standard text role:

    <div role="text">
    <span style="color:red">Note: </span>
    <span>Don't forget your appointment.</span>
</div>

    This is, apparently, only recognized by iOS. However, I found that Android's TalkBack doesn't have this issue to begin with. It knows to read the line as a single item.

    CAREFUL: this will also read across embedded links so they can't be activated.


  2. 0

    There is nothing accessible about your html.
    To make this accessible firstly use semantic html – ie html elements that describe their function, like p for paragraph, or h1 – h6 for heading and so on.

    example.html

    <h4>Note:</h4>
<p>Don't forget your appointment.</p>

    You can use styles to make it more visually appealing for most users, but visually impaired users may not see the colour, especially if they are using a screen reader.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search