Change label for custom unordered list character for screen readers

Question

If you implement a custom unordered list character, screen readers (or at least VoiceOver) will announce the name of that character you used before it announces each list item. If instead you didn't change the bullet character, VoiceOver will announce "bullet".

How can you change the label screen readers announce for this character, set it back to "bullet" for example?

ul li:before {
    content: '○';
}

<ul>
    <li>You are a beautiful human being</li>
</ul>

VoiceOver announces "white circle you are a beautiful human being."

@GoldPearl What if you wanted some other crazy custom unicode character like a star or an umbrella? — Jordan H, Dec 23 '14 at 06:30

score 0 · Answer 1 · answered Dec 23 '14 at 14:50

You cannot change the announcement of the character, but by placing it inside another element and putting a aria-label on that element, you can get the screen reader to override the announcement of all the text inside the element. Here is an example:

<!doctype html>
<html>
    <head>
        <title>Bullet list examples</title>
        <style>
        ul {
            list-style-type: none;
        }
        ul.justcontent li:before {
            content: 'x';
        }
        ul.withspan li:before {
            content: '';
        }
        ul.withspan li span:before {
            content: 'x';
        }
        </style>
    </head>
    <body>
        <ul class="justcontent">
            <li>You are a beautiful human being</li>
        </ul>
        <ul class="withspan">
            <li><span aria-label="bullet"></span>You are a beautiful human being</li>
        </ul>
    </body>
</html>

This kind of works, but it results in undesirable behavior. VoiceOver focuses the bullet and says it is a group inside a list item, and allows interacting with the group. It'd be preferred to behave exactly like the default bullet - it treats the entire list item as one element and announces "bullet" followed by the text instead of treating them like two different elements. — Jordan H, Dec 24 '14 at 18:34

score -1 · Answer 2 · answered Dec 23 '14 at 08:49

ul.a {
    list-style-type: circle;
}

ul.b {
    list-style-type: square;
}

ol.c {
    list-style-type: upper-roman;
}

ol.d {
    list-style-type: lower-alpha;
}

<p>Example of unordered lists:</p>
<ul class="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<ul class="b">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<p>Example of ordered lists:</p>
<ol class="c">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="d">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

Change label for custom unordered list character for screen readers

2 Answers2