PDA

View Full Version : 508 compliance : icon buttons are not readable



Sriman
26 Jul 2010, 10:37 PM
Hi,

When we create a button with the text '-' to represent 'delete' button with the following snippet

GXT.setAriaEnabled(true)
Button gxtButton = new Button("-");
gxtButton.setTitle("Delete");
gxtButton.setToolTip("delete");

it is being read as '-' button not 'delete' button though we set title as 'delete'. Here title does not serves its purpose completely. Title is not being picked up by the screen reader. how come i over come this problem towards my 508 implementation.

GXT:2.1.3

Regards,
Sriman

micgala
27 Jul 2010, 12:35 AM
Hi. Title, tooltip, and text are 3 different things.

In the screen, the attribute used is text.
You can set this to the button via setText(), or via the constructor you are using.
title is being set correctly.
What is the property your screen reader looks for when reading? is it <abc title="Delete"/> ?
If so, it should work. You can take a look at the generated source, and check that the title property is there.

Regards,
Michel.

Sriman
27 Jul 2010, 1:51 AM
Thanks Michel.

Yes i understand the difference between three
Text - this is button's text. In our example it is '-'
Title - this is the title of the object. Also used for tool tip. In our example it is 'delete'
Tooltip - component's tool tip. In our example it is 'delete'

NOTE: two kinds of tool tips. One is general tooltip i.e. title and other is component's tool tip i.e customized.

Even after setting the title to the button screen reader is unable to read it. It is all because the way the button component is being constructed. Below is the generated source. Title provided is set for button table not for direct button as you said <button title="delete" />.

<table cellspacing = "0" role = "presentation" class="x-btn x-component x-btn-noicon" id="x-auto-2" title="Delete">
<tbody class="x-btn-small x-btn-icon-small-left">
<tr>
<td class="x-btn-tl"><i> </i></td>
<td class="x-btn-tc"/>
<td class="x-btn-tr"><i> </i></td>
</tr>
<tr>
<td class="x-btn-ml"><i> </i></td>
<td class="x-btn-mc">
<em unselectable="on" class="">
<button style="position: relative; width: 18px;" type="button" class="x-btn-text" tabindex="0" role="button">--</button>
</em></td>
<td class="x-btn-mr"><i> </i></td>
</tr>
<tr>
<td class="x-btn-bl"><i> </i></td>
<td class="x-btn-bc"/>
<td class="x-btn-br"><i> </i></td>
</tr></tbody>
</table>

Regards,
Sriman

sven
27 Jul 2010, 1:53 AM
So, if you need to fix it now: Simple extend button and set the title to the button element.

I will discuss this internly.