Hi,
I recently discovered that tooltips I added to FormItems are not read by screenreaders. After looking at the generated HTML for these FormItems I didn't see that aria-states for reading these tooltips are set. I would recommend the aria-state "aria-describedby" referencing the tooltip element like described in
https://www.w3.org/WAI/GL/wiki/ARIA1:_Using_the_aria-describedby_property_to_provide_a_descriptive_label_for_user_interface_controls#Example_4:_Using_aria-describedby_associate_tooltips_with_form_fields
or the way you handle tooltips on buttons. On Buttons you use the tooltip text for the aria-label.
Here the details:
SmartGWT Version: 5.0p_2015-02-/PowerEdition
Browser: Firefox 26
ScreenreaderMode ist enabled!!!
Test Case:
I recently discovered that tooltips I added to FormItems are not read by screenreaders. After looking at the generated HTML for these FormItems I didn't see that aria-states for reading these tooltips are set. I would recommend the aria-state "aria-describedby" referencing the tooltip element like described in
https://www.w3.org/WAI/GL/wiki/ARIA1:_Using_the_aria-describedby_property_to_provide_a_descriptive_label_for_user_interface_controls#Example_4:_Using_aria-describedby_associate_tooltips_with_form_fields
or the way you handle tooltips on buttons. On Buttons you use the tooltip text for the aria-label.
Here the details:
SmartGWT Version: 5.0p_2015-02-/PowerEdition
Browser: Firefox 26
ScreenreaderMode ist enabled!!!
Test Case:
Code:
public class TooltipTest implements EntryPoint {
private static final String VERSION = Version.getVersion() + "_" + DateUtil.format(Version.getBuildDate(), "yyyy-MM-dd");
private ComboBoxItem slTitle = new ComboBoxItem("siTitle", "Title");
private TextItem tfFirstName = new TextItem("tfFirstName", "First Name");
private TextItem tfLastName = new TextItem("tfLastName", "Last Name");
private IButton btnSave = new IButton("Save");
public void onModuleLoad() {
SC.setScreenReaderMode(true);
Label labelTitle = new Label("<h1>Tooltip Test</h1>");
Label labelVersion = new Label("SmartGWT Version: " + VERSION);
Layout form = createForm();
final VLayout layout = new VLayout();
layout.addMembers(labelTitle, labelVersion, form);
layout.draw();
}
private Layout createForm() {
slTitle.setAllowEmptyValue(true);
slTitle.setValueMap("Mr.", "Mrs.", "Dr.");
slTitle.setTooltip("Choose a title.");
tfFirstName.setTooltip("Enter your first name.");
tfLastName.setTooltip("Enter your last name.");
btnSave.setTooltip("Your data will be saved.");
btnSave.addClickHandler(createClickHandler());
final DynamicForm form = new DynamicForm();
form.setItems(slTitle, tfFirstName, tfLastName);
final VLayout layout = new VLayout();
layout.addMembers(form, btnSave);
return layout;
}
private ClickHandler createClickHandler() {
ClickHandler handler = new ClickHandler() {
public void onClick(ClickEvent event) {
SC.say("Your data has been successfully saved.", new BooleanCallback() {
@Override
public void execute(Boolean value) {
slTitle.clearValue();
tfFirstName.clearValue();
tfLastName.clearValue();
}
});
}
};
return handler;
}
}