Accessibility - Aria Hidden Directive

Angular 4+ / Directive that provides aria-hidden="true" attribute for the tags that match [aht] selector.

Introduction

aria-hidden="true" prevents the screen reader to read that element and all of its children. This can help screen reader users not to reach purely decorative content (such as icons) or collapsed content, among others. Please, use it wisely.

❗ Important to consider

Since some users may have low vision, they can use the TAB key in combination with the screen reader, so:

1. Do not use it directly on any interactive elements, such as <a>, <button>, <input>, <textarea>, etc.

2. Do not use it on any tag element that contains any interactive element.

3. Do not use it on any tag element with tabindex="0" or grater.

⚠️ The use of aria-hidden="true" on some of the examples listed above could break accessibility for some users.

Installation

1. Install npm package:

   npm install @a11y-ngx/aria-hidden --save

2. Import A11yAriaHiddenModule into your module:

import { NgModule } from '@angular/core';
...
import { A11yAriaHiddenModule } from '@a11y-ngx/aria-hidden';

@NgModule({
    declarations: [...],
    imports: [
        ...
        A11yAriaHiddenModule
    ],
    providers: [...],
    bootstrap: [...]
})
export class AppModule { }

📘 NOTE: Tested up to Angular 4

For Angular 4 use

Once installed, edit the file a11y-ngx-aria-hidden.metadata.json within the /node_modules/@a11y-ngx/aria-hidden folder and downgrade the value from the version property

from

{"__symbolic":"module","version":4,"metadata":{...

to

{"__symbolic":"module","version":3,"metadata":{...

Done!

Usage

Add aht to any tag element you need to hide from the screen reader.

Code

<i class="my-icon" [aht]="false"></i>
<i class="my-icon" aht></i>

Output

<i class="my-icon"></i> <!-- Not Hidden for Screen Readers -->
<i class="my-icon" aria-hidden="true"></i> <!-- Hidden for Screen Readers -->