使用HTML、CSS和JavaScript的可访问模式对话框

![1_GYIerS1Q6vlvD84reSN1gw.jpeg](http://www.guobacai.com/usr/uploads/2021/11/300826073.jpeg)
在这篇文章中，我想分享我用HTML、CSS和JavaScript实现的一个模态对话框，它满足了W3C WCAG工作组设定的测试。

1. 检查role=dialog是否是作为自定义对话框的容器（如div）的一个属性。
2. 检查该容器是否在用户交互或其他事件之后通过JavaScript插入（或使其可见）。
3.当对话框被激活时，检查焦点是否被设置到容器中的一个元素。
4.当对话框处于激活状态时，检查焦点是否从未被设置到不在容器中的元素。
5.当对话框被停用时，检查焦点是否被设置到最初激活对话框的控件上。

在这五点之上，我还希望模态对话框能满足以下几点。
- 当用户点击Escape时，模态对话框就会关闭。
- 当用户点击其可见部分之外时，模态对话框就会关闭。

## HTML代码
```
<!DOCTYPE html>
<html lang="en">

<div 
      class="overlay" role="dialog" aria-modal="true" 
      aria-live="assertive" aria-labelledby="modal-title"
    >
      <div class="modal">
        <h1 id="modal-title">Accessible Modal Dialog</h1>
          <p>
            To close click a button, Escape, or outside this dialog.
          </p>
          <button class="close-modal" aria-label="Close">
            X
          </button>
          <button class="close-modal" >
            Close
          </button>
      </div>
    </div>

<main>
      <h1>Main Title</h1>
      <section>
        <button class="open-modal">
          Open Modal 1
        </button>
        <button class="open-modal">
          Open Modal 2
        </button>
      </section>

</main>

</html>
```
在上面的HTML代码中，最相关的几行是。
- **第12行：**我们在body标签中将aria-haspopup属性设置为 "dialog"。我也考虑过将其设置为 "alerttdialog"，但我认为这个弹出式窗口不是为了提醒用户，所以 "alert "的角色似乎不太适合这种情况。我们设置这个属性是为了告诉屏幕阅读器，主体元素有一个弹出窗口。

- **第15-16行：**这是模态的外层div，在这里。
1.我们给角色属性 "dialog"（本来可以是 "alertialog"）。
2.我们将 aria-modal 设置为 true，以便向屏幕阅读器表明这是一个模态元素。
1.我们按照对话框角色的要求，指定ria-label。
2.我们将ria-live设置为 "assertive"，这样，当对话框更新（出现）时，屏幕阅读器将立即宣布它。

**第45-46行：**导入必要的脚本。
1.用于模态的JavaScript代码（见下文）。
2.inert polyfill，将模态后面的所有内容设置为惰性，这样它不仅对屏幕阅读器来说是不可访问的，对键盘导航也是如此。

## JavaScript 代码
```
const modal = {
  callOpen: () => {
    modal.opener = document.activeElement
    openModal()
  },
  callClose: () => {
    closeModal(modal.opener)
  },
  handleOverlayClick: (event) => {
    if(event.target.className === 'overlay'){
      closeModal(modal.opener)
    }
  }
}

function openModal(){
  setVisibile(true)
  setFocus()  
  setInertBehindModal(true)
}

function closeModal(opener){
  setVisibile(false)
  setInertBehindModal(false)
  opener.focus()
}

function attachEventListener(openButtons, closeButtons, overlay) {
  openButtons.forEach(b => {
    b.addEventListener('click', modal.callOpen)
  });
  closeButtons.forEach(b => {
    b.addEventListener('click', modal.callClose)
  });
  overlay.addEventListener('click', modal.handleOverlayClick)
  window.addEventListener('keydown', clallIfEscPress)
}

function setVisibile(visible) {
  const display = visible? 'block' : 'none'
  document.querySelector('.overlay').style.display = display
}

function setFocus() {
  document.querySelectorAll('.modal button, modal input, modal textarea, modal select')[0].focus()
}

function setInertBehindModal(inert) {  
  const element = document.querySelector('main')
  element.inert = inert
  element.setAttribute('aria-hidden', inert)
}

function clallIfEscPress(event){
  if(event.key === 'Escape') {
    modal.callClose()
  }
}

const openButtons = document.querySelectorAll('.open-modal')
const closeButtons = document.querySelectorAll('.close-modal')
const overlay = document.querySelector('.overlay')
attachEventListener(openButtons, closeButtons, overlay)
```
我试图用一种不言自明的方式来写代码，但有些部分可能需要解释一下。

- **第3行** 我们保存模态打开时拥有焦点的元素。这是必要的，以便在用户关闭模态时将焦点放回原处（第25行）。

- **第9行** 我们想在用户点击模态框周围的 "gray "不透明部分（覆盖层）时关闭模态。

- **第45行** 对于这种特殊情况，我们可以只寻找按钮。为了使代码更容易重复使用，我们也寻找其他可以接受焦点的元素，并且可以在模态对话框中。我们把焦点放在我们找到的第一个元素上。

- **第50行：**这就是我们需要polyfill的部分。

## CSS样式表
```
.overlay {
  display: none;
  position:fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(211, 211, 211, 0.8);
}

.modal {
  background-color: white;
  margin: 20% auto;
  width: 50%;
  padding: 1rem;
  border: 1px solid black
}

:focus-visible {
  box-shadow: 0 0 0 3px rgba(21, 156, 228, 0.4);
}
```
我认为CSS不需要太多解释，但我觉得应该鼓励大家选择CSS display属性，而不是CSS visibility属性，或者隐藏属性。

如果在覆盖层上使用可见性，就需要（为了安全起见）将子元素的可见性设置为 "继承"，因为如果该元素的后代将可见性设置为可见，那么它们就是可见的。另外，如果位置没有设置为固定或绝对，即使不可见，该元素仍然会占用空间。所以使用display属性感觉更安全，也省了一行代码。

而使用隐藏属性的风险在于，在一个带有隐藏属性的元素上改变CSS display属性的值会覆盖隐藏属性的行为。所以我觉得直接使用CSS display属性会更安全。

在iOS Safari+VoiceOver中，当使用display时，似乎有一个错误。"none "作为默认值时，似乎有一个bug，但是提到这个bug的帖子已经有两年多了，我没有找到更多的相关信息，而且在测试的时候，我也没有遇到这个bug。

使用HTML、CSS和JavaScript的可访问模式对话框

评论已关闭