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'标签在屏幕上不可见
在开发工具中，我可以看到标签的'aria-hidden'设置为true。

但是，在制表符上，此标记仍可访问，并且可以使用“输入”来单击。我在这里想念什么？我是否需要完全隐藏按钮才能阻止其单击？

Answer 1

但是，在制表符上，此标记仍可访问，并且可以使用“输入”来单击。

是正确的。 aria-hidden属性是向屏幕阅读器的提示，该元素不应出现在屏幕阅读器上。也就是说，它是屏幕阅读器的“隐藏”。

但是，ARIA attributes do not provide any kind of behavior。也就是说，设置@using CMS.DocumentEngine.Types.Tenantportal @using TenantPortal.Models @model TenantViewModel @{ Layout = null; var opts = new SelectList(TenantProvider.GetTenants(), "ItemID", "Display_Name"); } @Html.DropDownListFor(model => model.ItemID, opts, "(none)")不会明显隐藏该元素，也不会阻止焦点移到该元素。如果您想为所有人隐藏aria-hidden="true"，只需使用CSS <a>。在这种情况下，您将不需要display:none。

Answer 2

您可以尝试使用[attr.aria-hidden] =“ navigateToNext？'hidden'：null”之类的

<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>

使用角“ [attr.aria-hidden]”隐藏的标签仍然可以使用Tab键输入，并可以单击

2 个答案: