508 and accessibility

Hello,

We are creating a web application that needs to be 508 compliant. I know Vaadin has extensive accessibility support - https://vaadin.com/framework/accessibility

Does anyone have tips insight into implementing accessibility in CUBA?
Thanks

1 Like

Hi,

First of all, CUBA Platform relies on Vaadin accessibility support in standard UI widgets, by default aria attributes are set automatically for captions, buttons, panels, FieldGroups, etc. However, there are UI components that do not support / partially support WAI/ARIA. I’ve created the issue https://youtrack.cuba-platform.com/issue/PL-10114 The issue is not scheduled for any release yet, we will try to schedule it the future.

At the same time, you can set WAI/ARIA attributes for UI components in your project using Vaadin add-on: https://vaadin.com/directory/component/attributes or using custom JS extension.

You can easily add its dependency using Studio: Project Properties > Advanced > Dependencies > Web Module:

<dependency>
   <groupId>org.vaadin.addons</groupId>
   <artifactId>attributes</artifactId>
   <version>0.0.5</version>
</dependency>

Then, create web toolkit module and add add-on to the AppWidgetSet.gwt.xml:

<?xml version="1.0" encoding="UTF-8"?>
<module>
    <inherits name="com.haulmont.cuba.web.toolkit.ui.WidgetSet" />
    <inherits name="eu.michaelvogt.vaadin.attribute.AttributeWidgetset" />
</module>

For instance, if you want to connect a Component and its custom Label in GridLayout, you can use the following code:

public class ExtAppMainWindow extends AppMainWindow {
    @Inject
    private Label customLabel;
    @Inject
    private TextField textField;

    @Override
    public void init(Map<String, Object> params) {
        super.init(params);


        com.vaadin.ui.Label vLabel = customLabel.unwrap(com.vaadin.ui.Label.class);
        com.vaadin.ui.TextField vTextField = textField.unwrap(com.vaadin.ui.TextField.class);

        CaptionAttribute comboLabeled = new CaptionAttribute(vLabel);
        comboLabeled.extend(vTextField);
    }
}

See full example here: https://github.com/cuba-labs/aria-dom-attributes

The result will be:

aria-caption

If you want to change inner / deep attributes of UI components you can implement custom JS extensions as it is described here: Fullscreen tabs