Hello vaadin community!
I am trying to make my vaadin application accessible for people with a disabilities (i.e. blind users).
Unfortunately even the smallest example vaadin application (two buttons and one label) fails to do so:
@HtmlImport("styles/shared-styles.html")
@Route
public class MainView extends VerticalLayout {
public MainView(@Autowired ExampleTemplate template) {
// This is just a simple label created via Elements API
Button button1 = new Button("Click one", event -> template.setValue("One"));
button1.getElement().setAttribute("role", "button");
button1.getElement().setAttribute("name", "name of the button");
button1.getElement().setAttribute("title", "title of the button");
button1.getElement().setAttribute("aria-label", "aria label of the button");
button1.setId("myButton");
Button button2 = new Button("Click two", event -> template.setValue("Two"));
// This is a simple template example
add(button1, button2, template);
setClassName("main-layout");
}
}
When i start the application in firefox 61 and let the screen reader NVDA read the html page, the first button will be read as “button” and when i switch focus to the second button, the screen reader says nothing at all. Even the label will not be read, because it is not focusable.
I think the problem is caused by the structure of the generated DOM tree:
<vaadin-button role="button" name="name of the button" id="myButton" title="title of the button" aria-label="aria label of the button" tabindex="0" tab-index="0">
<div class="vaadin-button-container style-scope vaadin-button">
<div part="prefix" class="style-scope vaadin-button">
</div>
<div part="label" class="style-scope vaadin-button">
Click one
</div>
<div part="suffix" class="style-scope vaadin-button">
</div>
</div>
<button id="button" type="button" class="style-scope vaadin-button" tabindex="0" role="presentation"></button>
</vaadin-button><vaadin-button tabindex="0" tab-index="0" role="button">
<div class="vaadin-button-container style-scope vaadin-button">
<div part="prefix" class="style-scope vaadin-button">
</div>
<div part="label" class="style-scope vaadin-button">
Click two
</div>
<div part="suffix" class="style-scope vaadin-button">
</div>
</div>
<button id="button" type="button" class="style-scope vaadin-button" tabindex="0" role="presentation"></button>
</vaadin-button><example-template>
<span class="style-scope example-template">Not Clicked</span>
</example-template>
Why is the role of the button element defined as “presentation” and not “button”?
How can i add an aria-label attribute to the inner button-element instead of the outer vaadin-button-element? button1.getElement().getChild(int) will not work, because the vaadin-button-element has only some text as child component on the server side.
What do i have to do to make the text focusable and thus readable for the screen reader?
Thanks for any support