WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Haim Roman
Date: Oct 14, 2018 1:06AM

First, I thank very much everyone who answered me. I'll be considering all
of the answers.

Regarding the presentation role: MDN's page on this role (
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role)
says:

Opinions may differ on how assistive technology should handle this
technique. The information provided above is one of those opinions and
therefore not normative.


It sounds like you can't count on this role making all screen readers
ignore the fact that this is a table.

The opinion referred to is:

The presentation role is used to remove semantic meaning from an element
and any of its related child elements. For example, a table used for layout
purposes could have the presentation role applied to the table element to
remove any semantic meaning from the table element and any of its table
related children elements, such as table headers and table data elements.



Howard (Haim) Roman -- <EMAIL REMOVED> -- 052-8-592-599 -- חיים רומן
LinkedIn: https://www.linkedin.com/in/haimroman



On Sat, Oct 13, 2018 at 9:50 PM glen walker < <EMAIL REMOVED> > wrote:

> 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
> > > > >