lists

…if your divs list content and have classnames like “list” or “list-item”, you want to use a proper list like <ol> or <ul> instead.
<div class=”list”> <div class=”list-item”>HTML</div> <div class=”list-item”>CSS</…


This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović

…if your divs list content and have classnames like “list” or “list-item”, you want to use a proper list like <ol> or <ul> instead.

<div class="list">
  <div class="list-item">HTML</div>
  <div class="list-item">CSS</div>
  <div class="list-item">JS?</div>
</div>

More accessible alternative:

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JS?</li>
</ul>

Explanation

Using lists can have many advantages for screen reader users:

  • They can get the total number of items before they interact with the items.
  • They may use shortcuts to jump from list item to list item.
  • They may use shortcuts to jump from list to list.
  • The screen reader may announce the index of the current item (for example, "list item, two of four").
  • The elements convey their "list" role

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.


This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović


Print Share Comment Cite Upload Translate Updates
APA

Manuel Matuzović | Sciencx (2023-04-22T09:46:54+00:00) lists. Retrieved from https://www.scien.cx/2023/04/22/lists/

MLA
" » lists." Manuel Matuzović | Sciencx - Saturday April 22, 2023, https://www.scien.cx/2023/04/22/lists/
HARVARD
Manuel Matuzović | Sciencx Saturday April 22, 2023 » lists., viewed ,<https://www.scien.cx/2023/04/22/lists/>
VANCOUVER
Manuel Matuzović | Sciencx - » lists. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/04/22/lists/
CHICAGO
" » lists." Manuel Matuzović | Sciencx - Accessed . https://www.scien.cx/2023/04/22/lists/
IEEE
" » lists." Manuel Matuzović | Sciencx [Online]. Available: https://www.scien.cx/2023/04/22/lists/. [Accessed: ]
rf:citation
» lists | Manuel Matuzović | Sciencx | https://www.scien.cx/2023/04/22/lists/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts