@a11y-ng/aria-hidden v1.0.0

Accessibility - Aria Hidden Directive

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: 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.

Installation

1. Install npm package:

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

2. Import A11yAriaHiddenModule into your module:

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

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

Usage

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

Code

<i class="my-icon" aht></i>

Output

<i class="my-icon" aht aria-hidden="true"></i>