Template Optimizations for Screen readers

To allow blind and visual impaired users to work with Screen readers, you have to make sure that the templates confirm to the WAI-ARIA specification. In the following section we'll provide you with information on optimizing your templates.

Details area in non-edit mode

To make screen readers read non-editable text in details area set tabindex attribute in reponsive-grid-area component (non-edit mode) to "0".

CODE

{{#form-container legacyController=legacyController}}
    {{#if editable}}
        {{#responsive-grid-area}}
			<!-- Edit mode -->
        {{/responsive-grid-area}}
    {{else}}
        {{#responsive-grid-area tabindex="0"}}      
            <!-- Non-edit mode -->
        {{/responsive-grid-area}}
    {{/if}}
{{/form-container}}

Details area in Edit mode

Using labels

Labels for input elements should be provided to understand the context of the input Element. There are two ways to define a label for an Element:

setting the label directly on the element with the ariaLabel attribute:
CODE
```
{{check-box checkedNumeric=editModel.Ready ariaLabel="Sendefertig"}}
```

using the labelledby attribute to reference another element by ID:

XML

<tr>
	<td id="checkboxLabelExample">Sendefertig:</td>
	<td>{{check-box checkedNumeric=editModel.Ready ariaLabelledby="checkboxLabelExample"}}</td>
</tr>

Using CSS to mute DOM Elements

While using the modern-table layout to structure your Details Pane you may want to prevent the Screen Reader from reading all DOM Elements in the path. This can be achieved by adding your own CSS class, i.e.:

XML

<style>
    .silent-table, .silent-table tr, .silent-table tbody, .silent-table td {
        speak: none;
    }
</style>

<table class="modern-table silent-table">
	<tbody>
    	<tr>
			<td>Autor:*</td>
			<td class="editable-field">{{input value=editModel.Author type="text" ariaLabel="Autor"}}</td>
		</tr>
	...
</table>