ARIA, Accessible rich internet applications is a revolution for accessibility development in the recent past. Many developers are using ARIA technology but still the awareness is low. I have decided to put my bit of effort to let developers understand the magic ARIA can do.
From here I will give a small description of the ARIA element I am talking about and give the code snipid. I will try to provide my experience with the ARIA element to best of my knowledge.
ARIA-role=presentation
We come across so many websites which are developed on a tabular layout. When a website is asked to remediate for accessibility the major part is involved in converting the entire tabular layout into div based layout. However in some cases it is not possible to change the existing layout for several reasons.
In general the layout tables are not announced as tables by the screen readers. In some cases it does. I had tried my bit of research to understand how the screen reader differentiate layout tables and data tables. I have not get a clear and concrete answer.
In order to differentiate presentation (layout) tables from the data tables ARIA-role=presentation helps. Below are my experiences with the screen reader.
Syntax
<table aria-role=â€presentationâ€>
Entire layout
</table>
Screen reader results with ARIA-role=presentation
| Browser | JAWS 13 | NVDA 2012.2 | VoiceOver for IOS |
|---|---|---|---|
| Internet Explorer 9 | Yes | Yes | NA |
| Firefox | Yes | Yes | NA |
| Safari for IOS | NA | NA | Yes |
Have a look at the example hereARIA role presentation example
Any comments, suggestions or feed back is welcome