@a11y-ngx/aria-hidden 中文文档教程
Accessibility - Aria Hidden Directive
为匹配 [aht] 选择器的标签提供 aria-hidden="true" 属性的 Angular 4+ / 指令。
Introduction
aria-hidden="true" 阻止屏幕阅读器读取该元素及其所有子元素。 这可以帮助屏幕阅读器用户不接触纯粹的装饰性内容（例如图标）或折叠的内容等。 请明智地使用它。
❗ Important to consider
由于某些用户可能视力不佳，他们可以将 TAB 键与屏幕阅读器结合使用，因此：
不要直接在任何交互元素上使用它，例如 < code>,
< em>不要在包含任何交互元素的任何标签元素上使用它。
不要在任何带有
tabindex="0"或 grater 的标签元素上使用它。⚠️ 在上面列出的某些示例中使用
aria-hidden="true"可能会破坏某些用户的可访问性。
Installation
安装 npm 包：
npm install @a11y-ngx/aria-hidden --save导入
A11yAriaHiddenModule到你的模块中：
import { NgModule } from '@angular/core';
...
import { A11yAriaHiddenModule } from '@a11y-ngx/aria-hidden';
@NgModule({
declarations: [...],
imports: [
...
A11yAriaHiddenModule
],
providers: [...],
bootstrap: [...]
})
export class AppModule { }
注意： 已测试 Angular 4
For Angular 4 use
安装后，在
/node_modules/@a11y-ngx/aria- 中编辑文件文件夹并将a11y-ngx-aria-hidden.metadata.jsonhiddenversion属性的值Done
{"__symbolic":"module","version":4,"metadata":{...从
{"__symbolic":"module","version":3,"metadata":{...降级！
Usage
将 aht 添加到您需要对屏幕阅读器隐藏的任何标记元素。
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 -->
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:
Do not use it directly on any interactive elements, such as
<a>,<button>,<input>,<textarea>, etc.Do not use it on any tag element that contains any interactive element.
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
Install npm package:
npm install @a11y-ngx/aria-hidden --saveImport
A11yAriaHiddenModuleinto 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.jsonwithin the/node_modules/@a11y-ngx/aria-hiddenfolder and downgrade the value from theversionpropertyfrom
{"__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 -->
