Bullet Lists
What is a bullet list?
In a webpage, lists are intended to perform and behave in specific ways. When we present a list in our layout that is visually formatted, we must offer the non-sighted user a comparable experience. A screen reader will enable the non-sighted user to navigate between lists in the content and reveal the number of items in a list.
Why bullet lists are important?
It is important that a webpage use a formatted bullet list so the screen reader can read the number of items related to specific content. Without a bullet list, the screen reader user can not know how many items will be read without going through all of them. This can be exhausting, especially if the content is a reference list or some other optional content. So, to solve that, the bullet list has to be present and also be programmatically formatted, with means that there must be a code under the hood of the bullet lists.
Examples
Here is an example of what should not be done:
-> Fruits
– apple
– banana
– some long sentence about orange, which is probably going to wrap over the line without an indent in a confusing and not particularly attractive manner and will confuse the reader and will not be clear at all
-> Vegetables
-> Dairy
Why is this example wrong?
By looking at the visual layout, a sighted user can determine that the content is a list and estimate its length. Also, they are more likely to notice formatting mistakes.
But, since those bullets were not programmatically formatted, the screen reader cannot inform the user that this is a list, how many things are in it, or which items were indented, therefore, it will announce the items as unrelated paragraphs. Another thing is that, at the beginning of each new line, it will also confusingly announce the names of the symbols: “bullet! bullet! dash! dash!”
And now, the same example using a programmatically formatted bulleted list:
- Fruits
- apple
- banana
- A very long sentence about oranges, which is going to wrap over the line with its indent preserved, reinforcing its position in the list. I’m continuing this text just to go over the next line so we can see that the position in the bullet list is preserved
- Vegetables
- Dairy
In this example, a screen reader will read aloud this bulleted list as a list of three items and will recognize the sublists as a nested list of three items.
Attention, don’t forget to put the references as bullet lists
It is a common mistake to forget to put the references in a bullet list format. Whenever the references have more than one item, it should be formatted as a bullet list.
Exercise
References:
- HTML lists. (n.d.). Retrieved December 13, 2022, from https://www.w3schools.com/html/html_lists.asp
- The Trustees of Princeton University. (n.d.). Lists | digital accessibility at Princeton. Princeton University. Retrieved December 13, 2022, from https://accessibility.princeton.edu/how/content/lists