如何使 MUI 对话框标题成为 H1 元素，以便可以访问模式

【问题标题】：How do I make the MUI Dialog title an H1 element so the modal is accessible如何使 MUI 对话框标题成为 H1 元素，以便可以访问模式
【发布时间】：2022-01-23 05:17:38
【问题描述】：

我正在努力使我的应用更易于访问，并且正在努力使用 MUI 对话框组件。我正在使用 DialogTitle 组件，它创建了一个 H2 元素并且遇到了“页面不包含一级标题”的问题。我应该以其他方式创建我的模式，还是只是无法访问 MUI 对话框？

【问题讨论】：

@steve 的解决方案听起来不错，但如果它不起作用，请不要担心对话框标题是 <h2> 而不是 <h1>。只要它是对话框中“最小”的标题级别（如果您碰巧在对话框中有其他标题），那么从可访问性的角度来看就可以了。没有什么说您必须拥有<h1>。无论您使用什么扫描工具生成“错误”，这完全取决于扫描工具编码人员的主观意见。 WCAG 中没有说您必须拥有<h1>。

标签： material-ui accessibility

【解决方案1】：

Dialog 组件 API 包含一个帮助程序 DialogTitle 组件，默认情况下，它在 h2 元素中呈现其内容。要禁用此功能，您可以将 DialogTitle 组件与 disableTypography 属性一起使用（以禁用 h2 包装行为），然后将您自己的 Typography 组件设置为 h1。例如：

<DialogTitle disableTypography>
  <Typography variant="h1">My Dialog Title</Typography>
</DialogTitle>

工作示例：https://codesandbox.io/s/material-demo-forked-7pso2?file=/demo.js

额外积分：您可能会遇到h1 的样式对您的设计而言“太大”的问题。如果是这样，并且您更喜欢 h2 外观，您可以使用名为 component 的 Typography 属性与 variant 属性结合使用，在视觉上将其样式恢复为 h2，同时保持底层 h1元素。例如：

<DialogTitle disableTypography>
  <Typography variant="h2" component="h1">My Dialog Title</Typography>
</DialogTitle>

【讨论】：