The goal of accessibility is to unlock the full potential of the Web and enable people with disabilities to participate equally.
@angular-eslint repo contains a number of linting rules that can help enforce accessibility best practices in Angular component templates.
The accessibility rules that are enabled in the Intershop PWA are listed/described in this document and configured in the
.eslintrc.json file of the project.
To check whether the rules are followed in your custom code or not, run
npm run lint.
This rule makes sure that all
aria-* attributes used are valid.
The rule will fail if a non-existent
aria-* attribute is used, or a valid
aria-* attribute is given an unexpected value.
The navigation is the most important way to find and access the different contents of the website.
For this reason, it is essential that the navigation is accessible.
This rule ensures that
tabindex is set to
0 (element is tab focusable) or
-1 (element is not tab focusable), and not a positive value that interferes with the automatic tab order of elements.
How to fix problems with unreachable elements
To make HTML elements tab-focusable that are not reachable by default (like
tabindex="0"can be added to most HTML tags like
This rule ensures, that elements with click event handlers also handle at least one key event (keyup, keydown or keypress).
How to fix
To fix this, all of the
<a>tags in the HTML files should have a
If adding a meaningful
routerLinkis not possible,
[routerLink]=""should be added to fix the error.
Other HTML elements (
<span>, etc.) with a
click()event that report this ESLint error can be fixed by adding a
(keydown.enter)event that should be assigned with the
In addition a
tabindex="0"needs to be added to such elements to make them tab focusable.
The outcome is testable when navigating the page in the browser with the tabulator key.
The clickable areas will be focused and a click event is triggered by pressing the Enter key.
Requires any element with a
mouseout event handler to also handle
blur events, and any element with a
mouseover event handler to also handle
Implicit form submission using the "Enter" key is vital to assistive technologies, see also HTML5 specification.
form tag has to include an
type="submit", for example
<form> <label for="foo">Name:</label> <input type="text" name="foo" id="foo" /> <input type="submit" value="Submit" /> </form>
or a button of type "submit"
<form> <label for="foo">Name:</label> <input type="text" name="foo" id="foo" /> <button type="submit">Submit</button> </form>
Dialogs (or modals) are separated into three sections:
where the form is positioned inside the model body and the buttons are positioned inside the modal footer.
The following simplified example shows the wrong HTML structure:
<div class="modal-body"> <form (ngSubmit)="submit()"> <formly-form></formly-form> </form> </div> <div class="modal-footer"> <button type="button" (click)="submit()">Submit</button> <button type="button" (click)="cancel()">Cancel</button> </div>
The button with the text "Submit" calls the same function
foo() as the form
(ngSubmit) but the form would not be submitted using the "Enter" key because the submit button is positioned outside the
The following example shows the correct HTML structure:
<form (ngSubmit)="submit()"> <div class="modal-body"> <formly-form></formly-form> </div> <div class="modal-footer"> <button type="submit">Submit</button> <button type="button" (click)="cancel()">Cancel</button> </div> </form>
formtag surrounds both the formly form (including the form elements) and the submit button
submit()is only called at the
type="submit"and does not call
type="button"to prevent any default behavior
The information provided in the Knowledge Base may not be applicable to all systems and situations. Intershop Communications will not be liable to any party for any direct or indirect damages resulting from the use of the Customer Support section of the Intershop Corporate Web site, including, without limitation, any lost profits, business interruption, loss of programs or other data on your information handling system.