![]() Violation of rule The span with role="switch" does not have required ARIA properties: aria-checked A element does not have those same semantic properties and would be flagged as a violation if given the role="switch" without aria-checked: The role="switch" can be applied to an and the required aria-checked property is covered by the element’s semantic role. Using role mappings from the axobject-query library, it determines if the HTML element's semantic role matches the given role. For example, the switch role definition has one required property, aria-checked. This rule matches HTML elements with a plain text role attribute and checks that the given role has the required ARIA attributes using the role definition from the aria-query library. Rule: Role Has Required You must be on at least version 14.2.0 of Angular ESLint to use the accessibility-role-has-required-aria rule. The template parser can only check the nodes and static values in the template itself, so a dynamically bound attribute value does not get flagged as a violation: Violation of rule The aria-valuenow has an invalid value ![]() If the ARIA attribute value doesn’t match the ARIA property definition, the rule reports a violation that the attribute’s value is invalid: If the ARIA attribute value is a literal value, it checks the value to be of the defined value type and one of the allowed values if provided. Violation of rule The aria-control is an invalid ARIA attribute If aria-query doesn’t have a definition for the matched ARIA attribute, the rule reports an invalid attribute value violation with the suggested fix to remove it: Then it looks up the ARIA property definition from the aria-query library to get the ARIA attribute value type and allowed values. The rule looks for HTML elements with bound or plain text ARIA attributes. Rule: Valid accessibility-valid-aria rule checks aria-* attributes to be valid ARIA. Angular ESLint and eslint-plugin-jsx-a11y both use the aria-query and axobject-query libraries to query information about ARIA roles and attributes. These rules originated from the eslint-plugin-jsx-a11y project and were ported over and implemented for Angular ESLint. Ensuring WAI-ARIA criteria are met enables user agents and assistive technologies to gather information about and interact with web content and controls. The Angular ESLint ARIA rules run against Angular template code both inline and in separate template files and identify incorrect usage of WAI-ARIA roles and their associated ARIA attributes. Next let's take a deeper look at the two ARIA rules from Angular ESLint that are configured in the. Configure the ARIA template rules under "*.html" overrides: eslintrc.json files extend from the root level config, so rules and their options can be set at the global level and added or overridden at the project level. The workspace will have both root and project level eslint configuration. To generate a new Angular workspace run the ng new schematic without creating the default application:Įnter fullscreen mode Exit fullscreen mode This post shows how to create an Angular library project with Angular ESLint support. In the previous post I covered how to add Angular ESLint to an Angular project. I'll cover what each rule looks for in the Angular template code and how it uses the underlying libraries to validate ARIA roles and attributes.Īdd Angular ESLint to an Angular Library Project This post walks you through how to add Angular ESLint to a component library project, then dives deeper into the ARIA rules. Angular ESLint has rules for checking ARIA, but Angular does not add this validation out of the box. Creating such a reusable component library is a common practice in Angular development. As the saying goes, no ARIA is better than bad ARIA.Īdvanced use of ARIA is a specific discipline that should be encapsulated into custom UI components that are used to create a consistent experience across an application. Standard, semantic HTML components don't need ARIA to be accessible. ARIA can enhance accessibility in custom-designed user interface controls and components, but incorrect use of ARIA can hinder accessibility and create a worse experience than no ARIA at all. ![]() The purpose of ARIA is to make web content more accessible for people with disabilities. The acronym ARIA stands for Accessible Rich Internet Applications.
0 Comments
Leave a Reply. |