---
title: Enforcing Accessibility with Angular A11y ESLint Rules
description: The @angular-eslint repo of ESLint rules for Angular offers you linting rules that can help you enforce accessibility best practices in Angular component templates.
image: https://www.bitovi.com/hubfs/Maze%20of%20zigzag%20ramps%20for%20hillside%20handicap%20access.jpeg
---

- ![AI implementation](https://www.bitovi.com/hubfs/AIConsultingIcon.svg)
  
  [AI implementation](https://www.bitovi.com/services/ai-consulting)
- ![Systems engineering](https://www.bitovi.com/hubfs/icon%20-%20backend.svg)
  
  [Systems engineering](https://www.bitovi.com/services/systems-engineering-consulting)
- ![Project Management](https://www.bitovi.com/hubfs/icon%20-%20PM.svg)
  
  [Project Management](https://www.bitovi.com/services/agile-project-management-consulting)
- ![Product Design](https://www.bitovi.com/hubfs/icon%20-%20design.svg)
  
  [Product Design](https://www.bitovi.com/services/product-design-consulting)
- ![Frontend development](https://www.bitovi.com/hubfs/icon%20-%20frontend.svg)
  
  [Frontend development](https://www.bitovi.com/services/frontend-development-consulting)
- [View more
  
  →
  
  ](https://www.bitovi.com/digital-consulting-services)

We're Experts in...

- [JavaScript](https://www.bitovi.com/services/frontend/javascript-consulting)
- [AI training](https://www.bitovi.com/ai-training-for-software-engineers)
- [Angular](https://www.bitovi.com/services/frontend/angular-consulting)
- [Design systems](https://www.bitovi.com/services/axure-figma-migration)
- [React](https://www.bitovi.com/services/frontend/react-consulting)
- [Temporal](https://www.bitovi.com/services/backend/temporal-consulting)
- [React Native](https://www.bitovi.com/services/frontend/react-consulting/react-native)
- [Node.js](https://www.bitovi.com/services/backend/nodejs-consulting)

Showcase

![Yum! Brands](https://www.bitovi.com/hubfs/yum-showcase-link-1.png)

[View case study](https://www.bitovi.com/en/bitovi-yum-case-study)

More Projects

- [![Levi's](https://www.bitovi.com/hubfs/levis.svg)](https://www.bitovi.com/web-application-consulting-work/levis-ecommerce-responsive-redesign)
- [![Christie's International Real Estate](https://www.bitovi.com/hubfs/christies.svg)](https://design.bitovi.com/christies)
- [![BAFS](https://www.bitovi.com/hubfs/bafs.svg)](https://www.bitovi.com/ux-design-consulting/ux-case-studies/bafs-ppp)
- [View more
  
  →
  
  ](https://www.bitovi.com/our-software-consulting-work)

Open Source Tools

We build powerful tools and open source them to support the community.

[See what we've built →](https://www.bitovi.com/open-source)

- [![Blog](https://www.bitovi.com/hubfs/icon%20-%20blog.svg)
  
  BlogWe post about delivering products and solving problems.
  
  ](https://www.bitovi.com/blog)
- [![Partnerships](https://www.bitovi.com/hubfs/Handshake-1.svg)
  
  PartnershipsLearn about Bitovi's technology partners
  
  ](https://www.bitovi.com/partnerships)
- [![Academy](https://www.bitovi.com/hubfs/icon%20-%20academy%20(4).svg)
  
  AcademyFree courses to build delivery skills
  
  ](https://www.bitovi.com/academy)
- [![Open source tools](https://www.bitovi.com/hubfs/icon%20-%20open%20source.svg)
  
  Open source toolsUse or contribute to our community
  
  ](https://www.bitovi.com/open-source)

Let's Connect

- [![Discord](https://www.bitovi.com/hubfs/DiscordLogo.svg)
  
  Discord
  
  ](https://discord.gg/J7ejFsZnJ4)
- [![LinkedIn](https://www.bitovi.com/hubfs/LinkedinLogo.svg)
  
  LinkedIn
  
  ](https://www.linkedin.com/company/bitovi/)
- [![GitHub](https://www.bitovi.com/hubfs/GithubLogo.svg)
  
  GitHub
  
  ](https://github.com/bitovi/)

![Eggbot](https://www.bitovi.com/hubfs/build_assets/bitovi-limbo-cms-react/338/js_client_assets/assets/eggbot-LTGhdSGL.png)

Name *

Work Email *

Phone

What's your project?

Send

### Contact Us

(312) 620-0386contact@bitovi.com

[ Angular ](https://www.bitovi.com/blog/topic/angular) |  October 20, 2021

# Enforcing Accessibility with Angular A11y ESLint Rules

 The @angular-eslint repo of ESLint rules for Angular offers you linting rules that can help you enforce accessibility best practices in Angular component templates.

![Wade Harkins](https://www.bitovi.com/hubfs/People/wade.jpeg)

 Wade Harkins

Share:

[![Twitter](https://www.bitovi.com/hubfs/limbo-generated/_astro/twitter-white.os3xLc3C_Z2nW4or.svg) ](https://twitter.com/intent/tweet?text=) [![Reddit](https://www.bitovi.com/hubfs/limbo-generated/imgs/icons/reddit.png) ](http://reddit.com/submit?url=)

Did you know that more than 25% of people in the US are living with a disability? If you don’t factor accessibility into your development process, it's entirely possible that 1 in 4 of the users you're trying to target won't be able to use your website or application. 

Building in accessibility (sometimes abbreviated as [a11y](https://www.a11yproject.com)) isn't as difficult as you may imagine, particularly with the right tools. The [`@angular-eslint`](https://github.com/angular-eslint) repo of[ ESLint](https://eslint.org) rules for [Angular](https://www.bitovi.com/why-build-with-angular) offers you linting rules that can help you enforce accessibility best practices in Angular component templates. 

Applying these rules doesn’t guarantee full accessibility, but incorporating them can be a relatively painless step in the right direction.

We'll go through a general rule, then rules having to do with the content on the page, and finally some rules involving user interactivity. While this is an overview, you can find in-depth information for each of these rules at the end of this post. 

Ready to take a big step toward designing for all your users? Let's dive in. 

## A General Rule: Meet ARIA

First, I’ll introduce a general, but important rule. This rule validates common interactions and widgets and, among other things, makes sure they can be correctly used by assistive technologies that improve accessibility.

The ARIA (Accessible Rich Internet Applications) specification defines HTML attributes so they can provide additional semantics ([Here's](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) a deeper dive into ARIA).

```
@angular-eslint/template/accessibility-valid-aria
```

This broad rule validates common interactions and widgets to make sure all role and ARIA attributes adhere to the ARIA specification. 

## Content Rules

Alt text provides a description of a visual element for visually impaired users. Content rules check for textual representations of content on the page to be sure your users are able to experience everything you're trying to communicate visually. For example, they'll check for the existence of an alt tag for an image.

```
@angular-eslint/template/accessibility-alt-text
```

This rule checks <img> elements for alt text, and <object>, <area>, and <input> (of type 'image') to make sure they have alt text or an aria-label attribute.

```
@angular-eslint/template/accessibility-elements-content
```

Use this to check heading, anchor, and button elements to make sure they contain accessible content. This can be in the form of text, binding to [innerText], [innerHtml] or [outerHTML], or use of aria-label or title attributes.

```
@angular-eslint/template/accessibility-label-for
```

Label elements and label components should be associated with form elements. This rule checks that label elements are either associated with an input element via the for attribute, or contain a <button>, <input>, <meter>, <output>, <progress>, <select>, or <textarea> element.

This rule has additional configuration options allowing you to extend it to treat additional components as input or label elements, and a label being associated with an input element. 

Finally, while it's worth including this rule for accessibility reasons alone, it comes with a few bonuses: alt-text can help you rank higher in SEO for key search terms, and it will appear in place of the image when the page doesn't load correctly, ensuring that all users will be able to interact more effectively with your app. 

## Interactivity Rules

![Console message reporting a positive ‘tabindex’ attribute.](https://www.bitovi.com/hs-fs/hubfs/EC31E583-D994-4CE4-B5CA-D1F820A77B3E.png?width=2134&name=EC31E583-D994-4CE4-B5CA-D1F820A77B3E.png)

Quite a lot of users are unable to use a mouse, for a variety of reasons. To make sure your app is accessible, anything clickable should also have an associated keyboard event.

Interactivity rules check for the behavior of the page. For example, if you have an element with a click event handler, you must also have at least one key event. 

```
@angular-eslint/template/no-positive-tabindex
```

When the user presses the tab key, the focus should jump to the next focusable element. This rule checks to make sure tabindex is only ever being set to 0 (element is tab focusable) or -1 (element is not tab focusable), and not a positive value that might interfere with the automatic tab order of elements.

```
@angular-eslint/template/click-events-have-key-events
```

Use this to make sure elements with click event handlers also handle at least one key event (keyup, keydown or keypress).

```
@angular-eslint/template/mouse-events-have-key-events
```

This rule verifies that any element with a mouseout event handler will also handle blur events, and any element with a mouseover event handler will also handle focus events.

## Your Next Steps

Adding these validation rules to your Angular templates is a great start at making your web applications more accessible. But there’s a lot more to accessibility than what this post covered.  

If you haven’t been prioritizing accessibility, you’re not alone. We’re making changes ourselves to ensure all our content is accessible, and it’s still in process. Simple additions to your workflow like adding these linting rules can make all the difference. 

For more on the importance of accessibility and being an a11y, check out [How to be an A11y - Accessibility Design](https://www.bitovi.com/blog/how-to-be-an-a11y-accessibility-design).

## Additional Reading:

- [Angular.io - Accessibility in Angular](https://angular.io/guide/accessibility)
- [Google CodeLabs - Build more accessible Angular apps](https://codelabs.developers.google.com/angular-a11y#0)
- [Accessibility | Web Fundamentals](https://developers.google.com/web/fundamentals/accessibility)
- [Digital.gov - Accessibility for front-end developers](https://accessibility.digital.gov/front-end/getting-started/)

[![Tag for accessibility](https://www.bitovi.com/hubfs/limbo/icons/tag.svg) accessibility ](https://www.bitovi.com/blog/topic/accessibility)

 Previous Post

![](https://www.bitovi.com/hs-fs/hubfs/appsoppreposfeature.png?height=117&name=appsoppreposfeature.png) [ DevOps Best Practices:  Managing Repository Configuration ](https://www.bitovi.com/blog/devops-best-practices-managing-repository-configuration)

  

 Next Post

![](https://www.bitovi.com/hs-fs/hubfs/Are%20you%20Ready%3F%20written%20on%20the%20road.jpeg?height=117&name=Are%20you%20Ready%3F%20written%20on%20the%20road.jpeg) [ How to Support IE11 Users as You Move to Angular 13 ](https://www.bitovi.com/blog/ie-11-and-angular-overview.html)

```json
{
  "@context" : "http://schema.org",
  "@type" : "Organization",
  "address" : {
    "@type" : "PostalAddress",
    "addressCountry" : "United States",
    "addressLocality" : "Libertyville",
    "addressRegion" : "IL",
    "postalCode" : "60048",
    "streetAddress" : "1134 Pine Tree Lane "
  },
  "alternateName" : "Bitovi",
  "areaServed" : {
    "@type" : "GeoCircle",
    "geoMidpoint" : {
      "@type" : "GeoCoordinates",
      "latitude" : "41.8781",
      "longitude" : "87.6298"
    },
    "geoRadius" : "5000 km"
  },
  "description" : "Bitovi is a UX, UI design and front-end JavaScript development consulting company",
  "email" : "contact@bitovi.com",
  "image" : "https://www.bitovi.com/hubfs/bitovi-logo-x2.png",
  "logo" : "https://www.bitovi.com/hubfs/bitovi-logo-23-1.svg",
  "mainEntityOfPage" : {
    "@id" : "https://www.bitovi.com/blog/angular-a11y-eslint-rules",
    "@type" : "WebPage",
    "description" : "The @angular-eslint repo of ESLint rules for Angular offers you linting rules that can help you enforce accessibility best practices in Angular component templates."
  },
  "naics" : "541511",
  "name" : "Bitovi Web App Consulting",
  "sameAs" : [ "https://www.facebook.com/BitoviLLC/", "https://twitter.com/bitovi", "https://www.linkedin.com/company/bitovi" ],
  "telephone" : "312-620-0386",
  "url" : "http://bitovi.com"
}
```

```json
{
  "@context" : "http://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "Wade Harkins"
  },
  "dateModified" : "October 10, 2023, 2:09:40 AM",
  "datePublished" : "2021-10-20 14:00:00",
  "description" : "The @angular-eslint repo of ESLint rules for Angular offers you linting rules that can help you enforce accessibility best practices in Angular component templates.",
  "headline" : "Enforcing Accessibility with Angular A11y ESLint Rules",
  "image" : {
    "@type" : "ImageObject",
    "url" : "https://www.bitovi.com/hubfs/Maze%20of%20zigzag%20ramps%20for%20hillside%20handicap%20access.jpeg"
  },
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "url" : "https://www.bitovi.com/hubfs/bitovi-logo-23-1.svg"
    },
    "name" : "Bitovi"
  }
}
```