Sunday, December 31, 2017

accessibility - What would be more accessible : Un-ordered lists or tables?


I have a page listing the latest blog posts in a pretty standard format, you'd expect to see on any typical blog. At the foot of each post, I have a list showing 'views', 'comments' and 'shares'.


I have marked these up with UL and LI elements respectively. It's all great, but I am wondering if it could be improved / be more suited to a table; seeing as this could be seen as 'tabular data' and I am basically concerned with best practices here, especially with regards to accessibility and screen readers.


My current markup:



  • 28 Comments


  • 31 Views

  • 6 Shares



Answer



I recommend going with a list approach since as per your current code you are just providing the content in a linear order which can be read by a screen reader without issues. However if you did use Lists for indenting then, accessibility would become an issue as highlighted from the W3C guidelines



The HTML list elements DL, UL, and OL should only be used to create lists, not for formatting effects such as indentation.



With regards to using tables, though tables can be made accessible, You will need to follow some specific guidelines as highlighted below from this article on UX Movement :




Most tables are difficult for users to read. But they’re even more difficult for disabled users to read if they’re not screen reader accessible. When you make your tables accessible, disabled users will get the table information read to them in a proper, understandable order. Start your tables off with the summary attribute and tag. These elements give users an overview of the table contents. The summary attribute gives users a broad description of the table, and the caption tag gives users the title of the table. They’re the first thing that comes after the table tag. Designate your row and column headers using tags and data cells using tags. After that, you’ll need to associate the cells with the right headers. Use the scope attribute for this. The scope attribute tells the screen reader that everything under a column relates to the header at the top, and everything to the right of a row header relates to that header.


enter image description here



Since I dont see any scope of perhaps adding a summary tag or header attributes, you are better off using lists.


No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...