Quantcast
Channel: SmartClient Forums
Viewing all articles
Browse latest Browse all 4756

Screenreader not reading tooltips on FormItems

$
0
0
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:
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;
        }

}


Viewing all articles
Browse latest Browse all 4756