Coding Challenge 1-3 W3验证Section缺少标题警告问题咨询

作业要求 #

• 打开tutorial1 c code3文件夹中的code1-3_txt.html文件，在head区域填写姓名和日期，另存为同目录下的code1-3.html。
• 为html起始标签添加属性，将页面语言设置为"en"。
• 在head区域完成以下配置：
  • 设置文件字符编码为utf-8
  • 设置页面标题为Coding Challenge 1-3
  • 链接code1-3_styles.css样式表
• 在页面body中插入h1标题，内容为Drawings from the Old Masters。
• 在h1标题后插入6个section标签。

现有代码 #

<!doctype html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <title>Coding Challenge 1-3</title>
   <link href="code1-3_styles.css" rel="stylesheet"/>
</head> 
<body>
  <h1>Drawings from the Old Masters</h1>
  
  <section>
      <img src="drawing01.png" alt="Leonardo da Vinci"/>
      <footer>The Battle of Anghieari <br />&mdash; Leonardo da Vinci</footer>
  </section>        
  <section>
      <img src="drawing02.png" alt="Jacopo da Pontormo"/>
      <footer>Study of a Youth <br />&mdash; Jacopo da Pontormo</footer>
  </section>
  <section>
      <img src="drawing03.png" alt="Raphael"/>
      <footer>The Nativity <br />&mdash; Raphael</footer>
   </section>
   <section>
       <img src="drawing04.png" alt="Peter Paul Rubens"/>
       <footer>Head of a Maid <br />&mdash; Peter Paul Rubens</footer>
    </section>
    <section>
        <img src="drawing05.png" alt="Andrea del Sarto"/>
        <footer>Head of a Young Woman <br /> &mdash; Andrea del Sarto</footer>
    </section>
    <section>
        <img src="drawing06.png" alt="Titian"/>
        <footer>Head of a Youth <br />&mdash; Titian</footer>
    </section>          
</body>
</html>

问题说明 #

W3C验证器抛出警告：Warning: Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections.，要求保留现有section、footer结构且不修改字体样式的前提下消除该警告。

解决方案 #

方案1（优先推荐，改动最小） #

给每个<section>标签添加aria-label属性，属性值为对应区块的内容描述，即可满足语义要求消除警告，完全不需要修改section内部的现有结构，也不会影响页面样式。
修改后的section示例：

<section aria-label="作品：The Battle of Anghieari，作者：Leonardo da Vinci">
    <img src="drawing01.png" alt="Leonardo da Vinci"/>
    <footer>The Battle of Anghieari <br />&mdash; Leonardo da Vinci</footer>
</section>

其余5个section按照同样规则填写对应的作品和作者信息即可。

方案2（添加隐藏语义标题） #

如果需要更符合分级标题的语义规范，可以在每个section内部添加<h2>标签，搭配仅屏幕阅读器可见的样式类隐藏标题，视觉上不会产生任何变化，也不会影响现有样式。

1. 在head的样式表引入后添加以下内联样式：

<style>
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
</style>

2. 在每个section内部的img标签前添加带sr-only类的h2标题，示例：

<section>
    <h2 class="sr-only">The Battle of Anghieari，作者：Leonardo da Vinci</h2>
    <img src="drawing01.png" alt="Leonardo da Vinci"/>
    <footer>The Battle of Anghieari <br />&mdash; Leonardo da Vinci</footer>
</section>

其余5个section按照对应内容修改即可。

内容的提问来源于stack exchange，提问作者Gil Robledo