Re: accessible tables

I don’t recommend nested tables, because it takes quite some work to make it accessible for the majority of users which are sighted and use a smartphone for surfing the web!

Quite often people do a lot of thinking to support screenreaders. Actually this is quit straight forwarded: make sure every non textual content has a tex alternative and the order of elements in the source code makes sense.

Also use html as intended, which means the mail element for the main content or button element when you want a button.

In general much more effort is needed for users of other assistive technologies like screen magnifiers or even people who see quite good, but use the browser zoom.

How do nested tables look like in a window, that is not fullscreen and has a moderat zoom factor of 150%?

Quite often this will already result in horizontal scroll bars...

--
Mit freundlichen Grüßen

Marc Haunschild
www.mhis.de

Am 07.05.2018 um 08:10 schrieb Jan Hellbusch <jan@hellbusch.de>:

>> In the example you give there is a simple solution by using nested tables.
> 
> The wrapper table is not actually necessary, but with role="none" semantics can be removed. The results are two tables, which can be "joined" in the accessibility tree with aria-owns (will work mostly, but aria-owns does not work properly in NVDA/IE):
> 
> <table role="none">
> <tr><td>
> <table id="left" aria-owns="right1 right2 right3">
> <tr><td>key 1</td><td>value 1</td></tr>
> <tr><td>key 2</td><td>value 2</td></tr>
> <tr><td>key 3</td><td>value 3</td></tr>
> </table>
> </td><td>
> <table id="right">
> <tr id="right1"><td>key 4</td><td>value 4</td></tr>
> <tr id="right2"><td>key 5</td><td>value 5</td></tr>
> <tr id="right3"><td>key 6</td><td>value 6</td></tr>
> </table>
> </td></tr>
> </table>
> 
> Jan
> 
> 
> 
> --
> Hellbusch Accessibility Consulting
> Chemnitzer Str. 50, 44139 Dortmund
> Tel.: +49 (231) 58054815 Mobil: +49 (163) 3369925
> --
> Accessibility-Consulting seit 15 Jahren 
> Leistungen, Bücher, Artikel: https://www.barrierefreies-webdesign.de
> Blog: https://www.hellbusch.de
> 
> 
> 
> 
>

Received on Monday, 7 May 2018 09:36:14 UTC