Question

我已经做了一个自定义的Modal实现，并且还想确保可访问性。因此，当弹出模式窗口（模式元素直接添加到文档主体）时，主体中的所有其他元素（身体的直接子代）都应具有aria-hidden =“ true”。如何将其动态添加到所有的身体孩子？

Answer 1

最简单的方法可能是标记父元素，从而将所有子元素也标记为隐藏咏叹调。像这样：

<my-modal></my-modal>
<div class="rest-of-content" aria-hidden="true">
 // All of these will be affected by the aria-hidden of the parent element
   <div>
      .....
   </div>
   <div>
   ....
   </div>
</div>

除此之外，没有一种神奇的方法可以将所有其他元素标记为aria-hidden（我知道）。您必须自己实现逻辑。

Answer 2

我写了这个。我不知道直接在Angular应用程序中使用文档有多不好/但是好。

我还关闭了模态后，将这些修改后的元素保存在数组中，以撤消更改。

  // Add aria-hidden="true" to all direct children of the body element (unless the element does not have already)
  Array.from(document.body.children).forEach(function(item) {
    if(!item.hasAttribute('aria-hidden')) {
      this.elementsWithoutAriaHidden.push(item);
      this.renderer.setAttribute(item, 'aria-hidden', true);
    } else if(item.getAttribute('aria-hidden') === 'false') {
      this.elementsWithAriaHiddenFalse.push(item);
      this.renderer.setAttribute(item, 'aria-hidden', true);
    }
  }, this);

*渲染器以这种方式初始化（我有Angular 5）：

  constructor(private rendererFactory: RendererFactory2) {
    this.renderer = rendererFactory.createRenderer(null, null);
  }

角度2：如何为直接在主体下方的所有元素动态添加html属性（aria-hidden =“ true”）？

2 个答案: