Serving Industries Worldwide

Innovative Ways - Satisfied Clientele

Accessibility with Angular


Listening is fun too.

Straighten your back and cherish with coffee - PLAY !

 
 

Accessibility_with_Angular

A wide range of individuals, including those with visual or motor impairments, use the computer. A variety of assistive devices are available to make communicating with web-based software applications much simpler for these communities. Furthermore, making an application more accessible increases the overall user experience for all apps.

Table of Content

What is accessibility?

When we say a site is accessible, we mean that its information is available and that its services can be used by anyone. It's simple for developers to assume that all users can see and use a keyboard, mouse, or touch screen in the same way they can communicate with our page content. This may result in an experience that is satisfying for some but unsatisfying for others.

The experience of users who are beyond the narrow range of the "typical" user, who can access or communicate with items differently than we expect, is referred to as accessibility. It specifically affects users who are having a physical or mental impairment or disability — and keep in mind that the impairment or disability can be non-physical or temporary.

While we prefer to focus our usability discussions on users with physical disabilities, we can all relate to the frustration of trying to use an app that is inaccessible for other purposes. Have you ever tried to access a desktop site from a mobile phone and received the message "This content is not accessible in your region," or been unable to locate a familiar menu on a tablet?

If we gain more knowledge, we'll notice that resolving usability problems in this wider, more general context almost always enhances the overall user experience.

To make our Angular app more accessible, consider the following:
  1. In codelyzer, allow the experimental accessibility rules.
  2. Using the Angular CLI, perform usability linting throughout your entire project.
  3. Fix all of the accessibility issues that codelyzer has identified.
  4. Consider using Lighthouse for on-the-fly usability audits.

Accessibility attributes

Setting ARIA attributes to provide the semantic context where it may otherwise be missing is a common part of creating open web experiences. To manage the values of accessibility-related attributes, use the attribute binding template syntax.

   

Since the ARIA specification relies on HTML attributes rather than DOM entity properties, we have to use the attr prefix when binding to ARIA attributes in Angular.

 

Angular UI Component

The Angular Material library is a set of reusable UI components that needs to be fully accessible. It is maintained by the Angular team. The a11y package in the Component Development Kit (CDK) offers tools to support different aspects of accessibility.

Consider the following scenario:

  1. For screen-reader users who use an aria-live zone, LiveAnnouncer is used to announce messages. More information on aria-live regions can be found in the W3C documents.
  2. Inside an element, the cdkTrapFocus directive traps Tab-key focus. It can be used to make components like modal dialogues more available by restricting the user's attention.

Augmenting Native Elements

Native HTML elements capture a variety of common interaction patterns that are critical for accessibility. Instead of re-implementing well-supported behaviors, you can re-use these native elements directly while authoring Angular components.

Instead of creating a new custom element for a new button type, you might build a component that uses an attribute selector.

Using Containers for Native Elements

Using the required native element often generally requires the use of a container element. Since the native element, for example, cannot have children, any custom text entry components must wrap it in additional elements. Although you could only include in the template of your custom component, this prevents users from assigning arbitrary properties and attributes to the input element.

Case Study: Building a Custom Progress bar

The following example demonstrates how to make a simple progress bar available by controlling accessibility-related attributes using host binding.

With both the standard HTML attribute function and ARIA attributes, the component defines an accessibility-enabled feature. The user's feedback is now bound to the ARIA attribute aria-value.

The aria-label attribute in the template specifies that the control is available to screen readers.





Routing and Focus Management

  1. In designing for simplicity, keeping track of and controlling attention in a user interface is critical. You should determine where the page emphasis goes upon navigation by using Angular routing.
  2. You must ensure that your routing code changes concentrate after page navigation to avoid depending solely on visual cues. To determine when to update focus, use the Router service's NavigationEnd case.
  3. After navigation, the following example illustrates how to locate and concentrate the key content header in the DOM.
 

Searching for Trusted AngularJS Development Company ?

Enquire Today

 
router.events.pipe(filter(e => e instanceof NavigationEnd)).subscribe(() => {
  const mainHeader = document.querySelector('#main-content-header')
  if (mainHeader) {
    mainHeader.focus();
  }
});

In a real app, the feature that gets the most attention is determined by the structure and layout of your app. Users should be able to step right into the key content that has just been routed into view thanks to the centered feature. After a route shift, avoid situations where the emphasis returns to the body part.

Conclusion

In this blog we have discuss that, all web applications must be available, and it should be considered from the start of the project development lifecycle. The Angular team has provided tools to make creating Open Components simpler, and now it's open to developers to take advantage of them and build accessible Angular applications.

Accessibility with Angular

Accessibility_with_Angular

A wide range of individuals, including those with visual or motor impairments, use the computer. A variety of assistive devices are available to make communicating with web-based software applications much simpler for these communities. Furthermore, making an application more accessible increases the overall user experience for all apps.

Table of Content

What is accessibility?

When we say a site is accessible, we mean that its information is available and that its services can be used by anyone. It's simple for developers to assume that all users can see and use a keyboard, mouse, or touch screen in the same way they can communicate with our page content. This may result in an experience that is satisfying for some but unsatisfying for others.

The experience of users who are beyond the narrow range of the "typical" user, who can access or communicate with items differently than we expect, is referred to as accessibility. It specifically affects users who are having a physical or mental impairment or disability — and keep in mind that the impairment or disability can be non-physical or temporary.

While we prefer to focus our usability discussions on users with physical disabilities, we can all relate to the frustration of trying to use an app that is inaccessible for other purposes. Have you ever tried to access a desktop site from a mobile phone and received the message "This content is not accessible in your region," or been unable to locate a familiar menu on a tablet?

If we gain more knowledge, we'll notice that resolving usability problems in this wider, more general context almost always enhances the overall user experience.

To make our Angular app more accessible, consider the following:
  1. In codelyzer, allow the experimental accessibility rules.
  2. Using the Angular CLI, perform usability linting throughout your entire project.
  3. Fix all of the accessibility issues that codelyzer has identified.
  4. Consider using Lighthouse for on-the-fly usability audits.

Accessibility attributes

Setting ARIA attributes to provide the semantic context where it may otherwise be missing is a common part of creating open web experiences. To manage the values of accessibility-related attributes, use the attribute binding template syntax.

   

Since the ARIA specification relies on HTML attributes rather than DOM entity properties, we have to use the attr prefix when binding to ARIA attributes in Angular.

 

Angular UI Component

The Angular Material library is a set of reusable UI components that needs to be fully accessible. It is maintained by the Angular team. The a11y package in the Component Development Kit (CDK) offers tools to support different aspects of accessibility.

Consider the following scenario:

  1. For screen-reader users who use an aria-live zone, LiveAnnouncer is used to announce messages. More information on aria-live regions can be found in the W3C documents.
  2. Inside an element, the cdkTrapFocus directive traps Tab-key focus. It can be used to make components like modal dialogues more available by restricting the user's attention.

Augmenting Native Elements

Native HTML elements capture a variety of common interaction patterns that are critical for accessibility. Instead of re-implementing well-supported behaviors, you can re-use these native elements directly while authoring Angular components.

Instead of creating a new custom element for a new button type, you might build a component that uses an attribute selector.

Using Containers for Native Elements

Using the required native element often generally requires the use of a container element. Since the native element, for example, cannot have children, any custom text entry components must wrap it in additional elements. Although you could only include in the template of your custom component, this prevents users from assigning arbitrary properties and attributes to the input element.

Case Study: Building a Custom Progress bar

The following example demonstrates how to make a simple progress bar available by controlling accessibility-related attributes using host binding.

With both the standard HTML attribute function and ARIA attributes, the component defines an accessibility-enabled feature. The user's feedback is now bound to the ARIA attribute aria-value.

The aria-label attribute in the template specifies that the control is available to screen readers.





Routing and Focus Management

  1. In designing for simplicity, keeping track of and controlling attention in a user interface is critical. You should determine where the page emphasis goes upon navigation by using Angular routing.
  2. You must ensure that your routing code changes concentrate after page navigation to avoid depending solely on visual cues. To determine when to update focus, use the Router service's NavigationEnd case.
  3. After navigation, the following example illustrates how to locate and concentrate the key content header in the DOM.
 

Searching for Trusted AngularJS Development Company ?

Enquire Today

 
router.events.pipe(filter(e => e instanceof NavigationEnd)).subscribe(() => {
  const mainHeader = document.querySelector('#main-content-header')
  if (mainHeader) {
    mainHeader.focus();
  }
});

In a real app, the feature that gets the most attention is determined by the structure and layout of your app. Users should be able to step right into the key content that has just been routed into view thanks to the centered feature. After a route shift, avoid situations where the emphasis returns to the body part.

Conclusion

In this blog we have discuss that, all web applications must be available, and it should be considered from the start of the project development lifecycle. The Angular team has provided tools to make creating Open Components simpler, and now it's open to developers to take advantage of them and build accessible Angular applications.