是否应该使用 <dialog> 元素或 role="dialog" 来表示可切换的侧边菜单？

Question

以下代码片段显示了电子商务网站的常见设计模式，其中有一个显示购物车内容的侧面菜单。

因为这个侧面菜单的功能与

<dialog>

元素非常相似，所以我想知道是否应该使用

<dialog>

而不是

<aside>

，或者放弃

role="dialog"

？另外，如果我给它

role="dialog"

，它还适合放在一边吗？这难道不会在语义上意味着它是对话框的旁白内容而不是页面的旁白内容吗？在这里表示我的侧面菜单的最佳语义正确方式是什么？

aside {
    display: block;
    width: 30rem;
    position: fixed;
    z-index: 10;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: white;
    box-shadow: 0 0 0.5rem rgba(0,0,0,0.5);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 300ms, visibility 0ms 300ms;
}
aside.opened {
    transform: translateX(0);
    visibility: visible;
    transition: transform 300ms;
}
body:has(aside.opened)::before {
    content: '';
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 1;
    background: rgba(0,0,0,0.5);
}

<aside role="dialog" id="cart">
  <header>
    <h2>Cart</h2>
    <button type="button" onclick="document.getElementById('cart').classList.remove('opened')">Close</button>
  </header>
  <form action="/checkout" method="post" id="form">
    <article>
      <h3>Item 1</h3>
      <input type="number" placeholder="quantity">
    </article>
  </form>
  <footer>
    <button type="submit" form="form">Checkout</button>
  </footer>
</aside>

<main>
  <button type="button" onclick="document.getElementById('cart').classList.add('opened')">My Cart</button>
</main>

Answer 1

如果侧边菜单对于导航或补充信息来说是必需的，那么

<aside>

可能是更好的选择。如果它的功能类似于需要用户交互（例如配置或执行任务）的对话框，请查看

<dialog>

。使用 ARIA 属性来确保使用

<dialog>

时的可访问性。