WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Tried to make it accessible; now it doesn't look good

for

From: glen walker
Date: Oct 13, 2018 12:50PM

The easiest way to indicate a table is for layout is by setting the role to
presentation. I would strongly not recommend messing with the CSS display
property with tables. It quickly confuses things.

So you could have something like this:

<table role="presentation">
<tr>
<td>
<table role="presentation">
<tr>
<td>

Note that only the table element needs the role="presentation". The <tr>
and <td> elements don't need it. But if you have a nested table that is
also used for layout, the nested table needs its own role="presentation".

For your specific questions:
1. Yes, setting display:table on <div> tags can make the element be treated
as a table, but it's not consistent on all browser/AT combinations. It's
not a reliable way to make a table. If you can't use real table elements,
then you have to use the table roles (table, row, cell, colheader,
rowheader).
2. Sorry, can't help with CSS for icons. But a side question for your
language buttons is if the language you present to the user is in the
native language for that language. That is, if the user wants to change to
French, does your button say "French" or does it say "Français"? Hopefully
the latter, and if so, make sure you have lang="fr" set on the element so
that the screen reader can switch dialects/accents.
3. Yes, it's correct that the "disabled" attribute does not work for anchor
tags. To disable a link, you'd have to set tabindex="-1" so that the user
cannot tab to it, and set aria-disabled="true" so that the screen reader
tells the user about the state. You may want to visually style it
differently too. Whether you consider those "hacks" is up to you.

Glen