NgxAccessibility

A library for accessibility for Angular 18.

License

The MIT License (MIT)

Installation

ng-accessibility is available via npm

Using npm:

$ npm i ng-accessibility

Getting Started

ng-accessibility needs Angular version > 18.2.0 Make sure you have installed below dependencies with same or higher version than mentioned.

"@angular/common": "^18.2.0", "@angular/core": "^18.2.0"

import { AccessibilityComponent } from 'ng-accessibility';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [AccessibilityComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})

Usage

HTML

<accessibility [direction]="dir" [input]="input" [showMenu]="showMenu"/>

TS

   
.   
.

dir = 'rtl';
showMenu = true;
   
input: AccessibilityInput = {
  config: ['Accessibility', 'Default'],
  bold: ['Readability of the font', '', 'abc', 'false', 'false'],
  title: ['Title indexing', '', 'format_bold', 'false', 'false'],
  link: ['Link indexing', '', 'link', 'false', 'false'],
  zoomIn: ['Zoom In', '', 'zoom_in', 'false', 'false'],
  zoomOut: ['Zoom Out', '', 'zoom_out', 'false', 'false'],
  lineHeight: ['Line Height', '', 'height', 'false', 'false'],
  letterSpacing: ['Letter Spacing', '', 'space_bar', 'false', 'false'],
  contrast: ['High Contrast', '', 'contrast', 'false', 'false'],
  lightContrast: ['Light Contrast', '', 'light_mode', 'false', 'false'],
  darkContrast: ['Dark Contrast', '', 'dark_mode', 'false', 'false'],
  saturate: ['Saturate', '', 'invert_colors', 'false', 'false'],
  gray: ['No Color', '', 'opacity', 'false', 'false']
}

];