The web is used by a wide variety of people, including those who have visual or motor impairments.\nA variety of assistive technologies are available that make it much easier for these groups to\ninteract with web-based software applications.\nIn addition, designing an application to be more accessible generally improves the user experience for all users.
\nFor an in-depth introduction to issues and techniques for designing accessible applications, see the Accessibility section of the Google's Web Fundamentals.
\nThis page discusses best practices for designing Angular applications that\nwork well for all users, including those who rely on assistive technologies.
\n For the sample app that this page describes, see the
Building accessible web experience often involves setting ARIA attributes\nto provide semantic meaning where it might otherwise be missing.\nUse attribute binding template syntax to control the values of accessibility-related attributes.
\nWhen binding to ARIA attributes in Angular, you must use the attr. prefix, as the ARIA\nspecification depends specifically on HTML attributes rather than properties of DOM elements.
Note that this syntax is only necessary for attribute bindings.\nStatic ARIA attributes require no extra syntax.
\n By convention, HTML attributes use lowercase names (tabindex), while properties use camelCase names (tabIndex).
See the Binding syntax guide for more background on the difference between attributes and properties.
\nThe Angular Material library, which is maintained by the Angular team, is a suite of reusable UI components that aims to be fully accessible.\nThe Component Development Kit (CDK) includes the a11y package that provides tools to support various areas of accessibility.\nFor example:
LiveAnnouncer is used to announce messages for screen-reader users using an aria-live region. See the W3C documentation for more information on aria-live regions.
The cdkTrapFocus directive traps Tab-key focus within an element. Use it to create accessible experience for components like modal dialogs, where focus must be constrained.
For full details of these and other tools, see the Angular CDK accessibility overview.
\nNative HTML elements capture a number of standard interaction patterns that are important to accessibility.\nWhen authoring Angular components, you should re-use these native elements directly when possible, rather than re-implementing well-supported behaviors.
\nFor example, instead of creating a custom element for a new variety of button, you can create a component that uses an attribute selector with a native <button> element.\nThis most commonly applies to <button> and <a>, but can be used with many other types of element.
You can see examples of this pattern in Angular Material: MatButton, MatTabNav, MatTable.
Sometimes using the appropriate native element requires a container element.\nFor example, the native <input> element cannot have children, so any custom text entry components need\nto wrap an <input> with additional elements.\nWhile you might just include the <input> in your custom component's template,\nthis makes it impossible for users of the component to set arbitrary properties and attributes to the input element.\nInstead, you can create a container component that uses content projection to include the native control in the\ncomponent's API.
You can see MatFormField as an example of this pattern.
The following example shows how to make a simple progress bar accessible by using host binding to control accessibility-related attributes.
\nThe component defines an accessibility-enabled element with both the standard HTML attribute role, and ARIA attributes. The ARIA attribute aria-valuenow is bound to the user's input.
In the template, the aria-label attribute ensures that the control is accessible to screen readers.
Tracking and controlling focus in a UI is an important consideration in designing for accessibility.\nWhen using Angular routing, you should decide where page focus goes upon navigation.
\nTo avoid relying solely on visual cues, you need to make sure your routing code updates focus after page navigation.\nUse the NavigationEnd event from the Router service to know when to update\nfocus.
The following example shows how to find and focus the main content header in the DOM after navigation.
\nIn a real application, the element that receives focus will depend on your specific\napplication structure and layout.\nThe focused element should put users in a position to immediately move into the main content that has just been routed into view.\nYou should avoid situations where focus returns to the body element after a route change.
Codelyzer provides linting rules that can help you make sure your code meets accessibility standards.
\nBooks
\n\"A Web for Everyone: Designing Accessible User Experiences\", Sarah Horton and Whitney Quesenbery
\n\"Inclusive Design Patterns\", Heydon Pickering
\nYou may also be interested in the following:
\n\n\n \n