Web accessibility is an important characteristic that many web developers miss. A web program should be considered to be accessible to everyone, and those with visual and movement disabilities must be included. A good web developer does not overlook this critical factor in order to optimize the user experience of every user.
Angular 12 has a variety of assistive features that allow persons with visual and mobility limitations to participate with web-based apps. In this chapter, we will look at the recommended practices for designing an Angular 12 application in order to ensure that it runs well for all users.
The Attributes of Accessibility
We only need to set the ARIA characteristics to offer semantic meanings when they may be absent to provide an accessible website user experience. Because there is no HTML element that provides semantic characteristics, the ARIA elements are employed.
The ARIA system works by allowing us to define numerous attributes that change the chosen element when it is translated into the accessibility tree. The ARIA properties enable users to understand when dynamic material has been shown on the screen.
Consider the following example:
Example of how ARIA works
Check out the code excerpt below, where we have a list item acting as a custom checkbox. The element required by the visual properties is provided by the CSS "checkbox."
<li tabindex='0' class='checkbox' checked> Check at our Discount offers </li> |
You will realize that the result of this code snippet will perform well for us, those who do not have vision impairments. It will not, however, function effectively for persons with visual difficulties since they will be unable to comprehend it. Now we must add the aria-checked and role properties to our element to clearly identify it as a checkbox and then state that it is checked by default
<li tabindex='0' class='checkbox' role='checkbox' checked aria-checked='true'> Receive promotional offers </li> |
You may have noticed in the above example that we used the attr prefix to bind the ARIA attribute in our Angular. The attr prefix is usually used for HTML attributes rather than DOM element properties.
The attr attributes syntax
The syntax for using the attr attribute includes
<!—how to attr. to an ARIA attribute -->
<button [attr.aria-Part]=" Actionpart">...</button>
|
This approach works perfectly when using attribute bindings, but not when using the ARIA attribute, which does not require any additional syntax. Use the following syntax for static
<!—how to attr. to an ARIA attribute -->
<button arial-label="Actionpart">...</button>
|
Improving Accessibility with Angular Material UI components
Just like other frameworks, Angular 12, offers the material UI components library, allowing you to reuse fully accessible components in your project.
The angular CDK (Component Development Kit) has a comprehensive set of tools for accessibility. One good example is:
You may include the LiveAnnouncer in your application to let users hear notifications in their native language.
Second, you may utilize the cdkTrapFocus directive traps to provide an accessible user experience for web page components like modal logins, modal dialogs, and so on.
Improving Accessibility with Native Components
You may improve accessibility by using native elements instead of custom elements when creating various web components. This is due to the ability of native components to capture different standard interaction patterns that improve accessibility.
To construct buttons, for example, you may use the <a>...</a> property, however to improve accessibility in angular 12, we recommend using button>...</button> components.
Increasing Accessibility with Native Elements Containers
When implementing native components, most web developer experts recommend using the proper container elements. This is due to the fact that if the native element is used without its container, it may be difficult for component users to modify arbitrary attributes in the native element. You should embrace the creation of containers for elements that employ content projection in order to integrate the native control of the component's API.
Conclusion
Finally, we discussed several ways for improving the accessibility of your angular 12 application, as well as the significance of web accessibility. In the next chapter we are going to learn about Angular CLI commands