如何使“ ***”隐藏的元素易于访问？

Question

我有一个小的功能，可以通过显示***隐藏连接字符串。

当前我的代码如下

<div class="label-wrapper">
    <label class="label">{{label}}</label>

    <button class="value-hide-button"
            (click)="toggleValueHide()"
            *ngIf="_secret"
    >
        <qst-icon class="secret-icon"
                  name="rf-eye"
                  aria-label="Show Secret"
                  title="Show Secret"
                  *ngIf="valueHidden"
        ></qst-icon>

        <qst-icon class="secret-icon"
                  name="rf-eye-closed"
                  aria-label="Hide Secret"
                  title="Hide Secret"
                  *ngIf="!valueHidden"
        ></qst-icon>
    </button>

</div>
<div class="value"
     [ngSwitch]="valueHidden"
>
    <ng-container *ngSwitchCase="true">**********</ng-container>
    <ng-container *ngSwitchCase="false">{{value}}</ng-container>

</div>

如何显示使用***隐藏的值？

Answer 1

您可以使用<span>，它在视觉上是隐藏的，但在那里供屏幕阅读器使用，以向他们提供更多信息。 所以你可以做
<label class="label">{{label}} <span class="visuallyhidden">The password is hidden for security reasons</span></label>
并对所有输入字段使用type="password"