Question

我想将ARIA角色“main”添加到我的主页。

我有三个部分用于页面的主要内容：

Page Intro（视频和页面标题）
服务总结A
服务摘要B

我应该在哪里添加“主要”角色？

我是否应该在这三个部分中添加一个包含<div role="main">纯粹是为了将角色添加到整个组中？这对我来说似乎是多余的标记！
或者我应该将角色添加到主要内容的第一部分吗？

或者，我应该将这三个部分分组为一个<section role="main">，并将这三个部分作为子部分吗？

<body>
    <header class="site_header" role="banner">...</header>
    <section class="page_intro">
        <h1>Bold Introductory Statement Here</h1>
        <a href="#">Play Video</a>
    </section>
    <section class="service_summary">
        <h1>Section A Title</h1>
        <p>Section A content</p>
    </section>
    <section class="service_summary">
        <h1>Section B Title</h1>
        <p>Section B content</p>
    </section>
    <footer class="site_footer" role="contentinfo">...</footer>
</body>

Answer 1

您不必担心过多的加价。 div元素不是不好的做法，只要你在语义元素适当的地方不使用它。在您的情况下，您尝试将其他三个元素指定为页面的主要内容。除非有其他选择，否则将它们包裹在<div role="main">中是完全可以接受的。

然而，好消息是有一个名为main的新语义元素，可以替代<div role="main">。您可以将这三个部分包装在main元素中，它不会像<section role="main">那样影响您的大纲：

<header class="site_header" role="banner">...</header>
<main>
  <section class="page_intro">
    <h1>Bold Introductory Statement Here</h1>
    <a href="#">Play Video</a>
  </section>
  <section class="service_summary">
    <h1>Section A Title</h1>
    <p>Section A content</p>
  </section>
  <section class="service_summary">
    <h1>Section B Title</h1>
    <p>Section B content</p>
  </section>
</main>
<footer class="site_footer" role="contentinfo">...</footer>

（您仍然可以将role="main"属性添加到main，实际上the spec recommends this如果您关注浏览器支持，因为main元素是还是比较新的。）

在哪里添加ARIA role =＆＃34; main＆＃34;，以及如何正确标记子部分？

1 个答案: