现在我的自动对焦是一个输入，它没有为屏幕阅读器提供太多信息......如果屏幕阅读器自动读出我页面上的h1标签，那么屏幕阅读器会更好。我尝试将自动对焦属性添加到我的h1但它没有做任何事情。我是否必须使用javascript进行操作？
答案 0 :(得分：1)
在其他条件相同的情况下，h1根本无法集中注意力。无论如何关注它是没有意义的：它不是一个互动元素。您不希望点击标题来执行任何操作（就像您单击链接，按钮或输入一样）。
如果您不希望焦点干扰以正常线性方式阅读页面：根本不要覆盖焦点。然后浏览器将从页面顶部开始。
答案 1 :(得分：0)
如果您确实想这样做（我在模态中与您一样），可以添加一个
tabindex="-1"与您的auto focus一样
<h1 mat-dialog-title tabindex="-1" autofocus>Modal name</h1>
tabindex属性显式定义页面内可聚焦元素（通常是链接和表单控件）的导航顺序。它也可以用来定义元素是否应该聚焦。
[tabindex="0"和tabindex="-1"都具有特殊含义，并提供HTML的独特功能。值 0 表示该元素应以默认导航顺序放置。这使本机无法聚焦的元素（例如，和，您现在已经了解了）可以接收键盘焦点。当然，通常应该对所有交互式元素使用链接和表单控件，但这确实允许其他元素成为焦点并触发交互。
tabindex="-1"值从默认导航流中删除了该元素（即，用户无法对其进行制表），但是它允许其接收程序化焦点，这意味着可以从链接或通过脚本或autofocus。这对于不应该使用标签的元素可能非常有用，但是可能需要将重点放在这些元素上。就像您的情况一样：）
答案 2 :(得分：0)
我最近遇到了类似的情况，Adrien Delabie 的回答是部分正确的，但正如它指出的那样，您遇到了这样的问题，即这会从文档的导航流中删除 h1。
这很糟糕。
此外，在给某些东西一个 tabindex 使其可聚焦时，VoiceOver（在撰写本文时）会在以编程方式聚焦时忽略非本地可聚焦元素。
所以我做了一个这样的元素
<h1>{{normalHeader}} <a id="specialfocusable" tabindex="-1">{{focusText}}</a> </h1>
显然，当我们决定将焦点放在#specialfocusable a 元素上时，但首先我们将 normalHeader 设置为空字符串，将 focusText 设置为我们希望屏幕阅读器阅读的文本。
画外音读取它，h1 仍处于正常的文档流中，因此您可以正常使用 Tab 键切换到它。 （我还没有机会检查其他屏幕阅读器，但我相信它会起作用，最坏的情况是我需要处理对 #specialfocusable 的失去焦点并设置 normalHeader 并再次将 focusText 设置为空字符串），a 元素不是除非使用 focusText 将焦点设置在它上面，否则阅读。
当然，您还应该设置 a 的样式，使其看起来不像 a，同样的事情适用于任何可聚焦元素。只是一个 a 元素是最容易设计样式的。