ARIA Role Presentation

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

Uncategorized

Contact Us

Maxability Pvt Ltd Flat 360,
Block D2 SLS Signature Appartments,
Kaverappa Layout, Kadubeesanahalli,
Bangalore - 560103.

914 823 3361