Blog.

e-COMMERCE Design Trends.

Learn the tools for testing accessibility

It is necessary to manually verify accessibility in the current state of the web. Start by becoming familiar with the built-in screen reader on your computer.
Additionally, we can spot-check for certain problems like missing alt text, labels, and colour contrast using automated tools like Lighthouse, axe, and linting.

Define unique page titles

Having distinctive, succinct page titles makes it easier for users of a11y services to identify the content and goal of a web page. You may remedy this by giving each of your pages a unique title using Angular's Title service.

Ensure adequate color contrast

If those with poor vision like colour blindness can't read your material, then even if your design may appear cool, it isn't. To make sure you agree to the colour contrast ratio requirements of the Web Content Accessibility Guidelines (WCAG 2.0), use the Material theming guides and inspection tools.

Use Semantic HTML

Several common interaction patterns that are significant to accessibility are captured by native HTML elements.
Instead of reimplementing well-supported behaviours when creating Angular components, you should reuse these native features directly whenever possible. Instead of making everything a <div>, use a <button> and an< a>.

Create selectable controls with Angular Material

Simplify controls as much as you can to generate navigable components by simplifying menus.

Provide control labels with ARIA

Accessible Rich Internet Applications (WAI-ARIA or ARIA) is a specification developed by the Web Accessibility Initiative to address issues that are incompatible with native HTML.
ARIA properties like aria-label and others must be specified in order to change how an element is interpreted by the accessibility tree.

Add the power of angular/cdk/a11y

Add the a11y module from the Angular CDK to help with trickier Angular-specific problems. Developers can use a number of techniques to increase accessibility by importing the module package, including:

• ListKeyManager: controls the selected item in a list of options depending on keyboard input.
• FocusTrap: For elements like modal dialogues, where attention needs to be limited, use the tab key focus within the element.
• Interactive Checker: Check an element's interaction with InteractivityChecker, which records the disabled, visible, tabbable, and focusable states for accessibility needs.
• LiveAnnouncer Tool: Screen-reader users can use the LiveAnnouncer tool to broadcast messages using an aria-live region.
• FocusMonitor: used to keep an eye out for changes in an element's focus state.
• Styling utilities: Sass mixins that create styles for easily accessible element hiding, focusing on users with high contrast needs, and more.

Control focus with FocusTrap

Tab-key focus is captured inside an element by FocusTrap' s cdkTrapFocus directive in Angular. This is meant to be used to make components like modal dialogues, where emphasis needs to be limited, more accessible.

Announce changes LiveAnnouncer

When something on the website changes, screen readers must be notified of the change. Imagine trying to submit a form or finish a transaction without being aware that an error has appeared and prevented it. That is annoying!
To make sure screen readers are informed of notifications and real-time page changes, an aria-live region is utilised with LiveAnnouncer to announce messages for users of screen readers.

Enable HighContrast mode

In order to respect the user's preferences and significantly boost contrast, use the cdk-high-contrast mixin that is available in angular/cdk/a11y to add an outline to your buttons when using High Contrast mode.