A library for accessibility for Angular 18.
ng-accessibility
is available via npm
Using npm:
$ npm i ng-accessibility
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'
})
<accessibility [direction]="dir" [input]="input" [showMenu]="showMenu"/>
.
.
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']
}
];