WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: JP Jamous
Date: Oct 13, 2018 5:15PM

Glen,

I agree with all that you said except to tabindex="-1". JAWS in IE11 will set focus on it. Be careful of that one. I have witnessed many developers in my company that use it and it created lots of problems. They blamed it on JAWS, but once the -1 index was removed JAWS behaved as expected.

You are correct that keyboard only users won't be able to set focus on it, but not JAWS users.

I would prefer using disabled="disabled". It still works better than anything else I have witnessed.



--------------------
JP Jamous
Senior Digital Accessibility Engineer
E-Mail Me |Join My LinkedIn Network
--------------------


-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of glen walker
Sent: Saturday, October 13, 2018 1:51 PM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Tried to make it accessible; now it doesn't look good

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