Does having a data table without cell borders affect accessibility and usability in any way? I can't seem to find an answer online. Having borders definitely increases readability. Can we say it is a concrete WCAG violation?
-
Tables without borders is how websites were designed for a long time - up until about 10 years ago - before CSS columns became more common (which are very similar to tables without borders). This doesn't necessarily mean that they're good, but I do think it means there's a good chance screen readers will support them natively or have special support for them, since the screen reader would break on many many many older sites.– JonDec 22, 2020 at 22:22
Add a comment
|
3 Answers
Does it fail any WCAG criteria?
I don't think it would be a violation of any WCAG rules (surprisingly, I did run through them all in my head trying to think if one applied), but that doesn't mean you should do it.
Tables without borders (as you have already indicated) are harder to read and consume the data from, it may also introduce accessibility issues for certain users.
Who could it affect?
screen magnifier users - when you are zoomed in to a section of a page that may only be 100px by 100px table borders make it a lot easier to ensure you are looking in the correct column.
people with cognitive disorders - people with learning deficits / association disorders may not associate a borderless table as a table and think it is just oddly spaced text.
people with dyslexia - people with dyslexia may find the columns of white space distracting and find it difficult to follow along a row or column.
sighted screen reader users - screen readers are not only used by people who are visually impaired, they are also used by people who require additional assistance understanding the content of a page. If a sighted user sees your data and does not associate it with tabular data then they may not realised that they can jump to that table / navigate that table using standard table controls.
Other considerations
You don't want to add any cognitive load unnecessarily, making things harder to use than is necessary.
This will result in users leaving your site to go elsewhere / frustration / lower conversions (if this is a sales process).
-
5There's not many sources in this answer. If there's no WCAG rule for this, perhaps it's because they couldn't find any proof that borders would increase readability for the group of users you mentioned?– laurentDec 22, 2020 at 0:22
-
Interesting argument, I would imagine that the issue is just lack of ability to cover every scenario. WCAG can't cover everything as it is already 50000+ words with all the examples etc. The only thing I can say is to try using a borderless table with a screen magnifier at 8x magnification, I am sure you will see what I mean. Dec 22, 2020 at 1:27
-
A good question is, if a table border should be zoomed or should have a max thickness.– alloDec 22, 2020 at 18:46
-
1This is definitely the problem! Not having the concrete criteria to go by user studies and analysis(perception). That makes Accessibility something that is hard to enforce! If I take this argument to my designers, they are going to be like, these are just analysis and since it’s not a requirement, I’m gonna stick with what I have! But this is exactly what I was looking for. Great insights and perspective! Dec 24, 2020 at 23:35
Borders are only one way of showing that tables are "tables".
Shading
Another way, which I often use, is shading. This is quite common for rows - either two alternate background colors (one white, one non-white; or any two colors with sufficient contrast) or a series of colors (I often use 5 shades of one primary color as this makes it easy to count through sections of a table - 5, 10, 15, etc.).
Text Styling
Columns get a little trickier, but alternate background colors can work there too. Another option is text styling. For example, the first column might be bold, then the other columns can alternate between regular and italics.
All of these methods - borders, varying colors, varying fonts - can make it easy to distinguish between cells in a table.
One I generally don't recommend is colors of text. I prefer to use colors of text (as opposed to the background) to indicate meaning - e.g., green = "good", red = "problem".
answered Dec 22, 2020 at 3:01
-
Depending on the content, text alignment might be enough to identify the columns. I would not recommend mixing fonts.– BergiDec 22, 2020 at 17:20
-
The problem that I have found is that text alignment for columns is often very dependent on data and/or display (size/orientation of display, user zooming in - which is often done for accessibility (make all the text bigger = easier to read), unless you artificially pad with a lot of blank space (which causes other complications). Dec 22, 2020 at 17:24
-
1Thanks a lot for your perspective @manassehkatz-Moving2Codidact - these are really good inputs. As accessibility evangelists, these forums help us to learn from each other for future recommendations when working with different clients! Dec 24, 2020 at 23:38
It is all about how you can bring a better experience to everyone regardless of ability, context, or situation. How can you arrange and visualize the data in a better format that is easily accessible regardless of ability?
The first step is to understand how people with disabilities use digital content. Many people believe that “accessibility” is just a checklist. It’s just about meeting legal or project requirements. That is one perception we need to change.
Because truly accessibility is not about a checklist, it’s about people. It’s about real people with disabilities being able to use your websites, apps, and digital technologies are called the user experience. It is our responsibility to create an inclusive platform for people regardless of their ability.
-
100%! As I mentioned earlier, Accessibility is a nebulous monster making it hard to enforce! It is a cultural change and everyone should feel the need for Accessibility more than looking it from a perspective that it’s a checklist! Dec 24, 2020 at 23:37