角度 5 中动态元素的可访问性

Posted 2023-03-12

【中文标题】角度 5 中动态元素的可访问性

【英文标题】：Accessibility with dynamic elements in angular 5

【发布时间】：2018-10-11 16:35:51

【问题描述】：

我正在使用键盘访问该网站，并且在按 Tab 键时，动态 div（使用 ngIf）条件未按预期工作。

我确实有条件显示一个或另一个的动态元素，当我专注于特定的 div 元素并单击按钮转到不同的元素时，我的焦点会丢失。

我尝试为标签索引提供订单，但没有找到任何运气。

   

<!-- begin snippet: js hide: false console: true babel: false -->

【参考方案1】：

动态应用的模板的主要问题。您正在尝试访问尚未由 angular 生成的元素。

换句话说，我们无法访问尚未生成的元素。

所以我删除了ng-template 并应用了[hidden] 属性。

工作副本可在此处获得 - https://stackblitz.com/edit/angular-s8gvp9

【讨论】：

如果您有解决方案，请在您更改的答案中发布详细信息。

我已经尝试使用你提供的那个，按钮的焦点仍然丢失。我又添加了一个 div 来检查焦点，请参阅更新的问题

答案已更新，工作副本可在此处获得stackblitz.com/edit/angular-s8gvp9