使用 angular '[attr.aria-hidden]' 隐藏的标签仍然可以使用 tab 和 enter 访问和点击

Question

我有一个具有条件 [attr.aria-hidden] 的标签，如下所示：

<a type="button" class="btn btn-link" id="landing-login-btn" href="#"
   *ngIf="!loggedInState"
   (click)="openLoginModal()"
   [attr.aria-hidden]="navigateToNext" 
   [innerHTML]="secondaryBtn">
</a>

事件执行后（点击按钮）：

'a' 标签在屏幕上不可见
在 Dev 工具中，我可以看到一个标签已将 'aria-hidden' 设置为 true。

但是，在使用 Tab 键时，此标签仍然可用，并且可以使用 'enter' 单击。我在这里错过了什么？我是否需要完全隐藏按钮以阻止它单击？

Answer 1

你可以试试 [attr.aria-hidden]="navigateToNext? 'hidden' : null" like

<a type="button" class="btn btn-link" id="landing-login-btn" href="#"
                                    *ngIf="!loggedInState"
                                    (click)="openLoginModal()"
                                    [attr.aria-hidden]="navigateToNext? 'hidden' : null"
                                    [innerHTML]="secondaryBtn"></a>

Answer 2

However, on tabbing, this tag is still accessible and can be clicked using 'enter'.

没错。 aria-hidden 属性是对屏幕阅读器的提示，该元素不应显示给屏幕阅读器。也就是说，它是来自屏幕阅读器的"hidden"。

然而，ARIA attributes do not provide any kind of behavior。也就是说，设置 aria-hidden="true" 不会明显地隐藏元素，也不会阻止焦点移动到它。如果你想让每个人都隐藏 <a>，只需使用 CSS display:none。在这种情况下，您将不需要 aria-hidden。

使用 angular '[attr.aria-hidden]' 隐藏的标签仍然可以使用 tab 和 enter 访问和点击

A tag hidden using angular '[attr.aria-hidden]' is still accessible and clickable using tab and enter

html

javascript

wai-aria

angular