508 and accessibility


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?

1 Like


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:


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

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

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 {
    private Label customLabel;
    private TextField textField;

    public void init(Map<String, Object> 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);

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

The result will be:


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