Best markup for unordered lists

[jessegreenberg]

From phetsims/molecules-and-light#351 @terracoda said

I have actually been wondering for a long time, how to get rid of the undesireable voicing of "bullet" and sometime "bullet, bullet" that VoiceOver says on all list items.

We do not use nested lists very often, and in a couple of cases I decided against it because the non-visual experience sounded unpleasant to me.

We do use lists (legitimately) often, and I think this fix makes lists (nested or not) sound better.

It was discovered that

<ul role="list">

with

ul {list-style: none;}

stopped screen readers from saying "bullet" when reading about itemized lists. This issue is to discuss whether we should do this for all unordered lists.

[jessegreenberg]

I think it makes a lot of sense to do this in phetsims/molecules-and-light#351 because it resolves the Safari bug found in that issue.

This will effectively remove all semantics for list items. So for example, the output (on NVDA) for

<style>
  .hidden-list {
    list-style: none;
  }
</style>
<ul class="hidden-list" role="list">
    <li>Pizza</li>
    <li>Popcorn</li>
    <li>Ice Cream</li>
</ul>

is
"List with three items. Pizza. Popcorn. Icecream."

Note that the output for this example isn't so different

<ul class="hidden-list" role="list">
    <li>Pizza. Popcorn.</li>
    <li>Ice Cream.</li>
</ul>

"List with two items. Pizza. Popcorn. Icecream."

Admittedly this is a nefarious example, but I think it demonstrates the potential case. I just want to make sure we really want to remove "bullet" before working on a solution in common code.

[terracoda]

We may need some follow-up discussion in this issue on how widely we would like to implement this code for lists.

For example,

1. Do we want a common-code option to remove "bullets" from being announced? Or,
2. Do we never want to read out the bullets?

I think for short lists, e.g. 5 or fewer items, a counting of the items may not be necessary as long as the learner knows there are 5 items.

Another question in my mind is do we want to use the no-bullet pattern for State Descriptions, alone, or is this pattern helpful for interactive items such as comboboxes.

[terracoda]

We have lists in several sims that we can compare and contrast.

[terracoda]

In phetsims/gravity-force-lab-basics#289 we discovered that Apple has fixed the "bullet" issue in their latest OS Big Sur.

This fix would now only be relevant to older versions of MacOs.

Closing.