WebAIM -考虑网页的可访问性

语义结构:区域、标题和列表

HTML的性质

HTML的发起者-粒子物理学家共享文件-对空洞的视觉效果不感兴趣。他们开始着手创建一个由机器可读页面组成的万维网,以便在每个系统和浏览器中显示,包括那些向视力受损用户发送文本的网页。其结果是一个只有机器(或粒子物理学家)才想要阅读的文档库。

随着Web的发展,缺乏对视觉的重视使得设计师们强调要让页面以某种特定的方式呈现,这反过来又迫使浏览器开发人员创建脱离HTML标准的专有视觉和布局特性以及扩展。

例如,设计人员可能会避免标题元素(

,

因为它们缺乏微妙之处:未经修改,它们看起来会大得离谱(

,

)或可笑的小(< h5 >,<编辑>)。它们并不是在视觉设计中被创造出来的。它们的唯一目的是定义嵌套结构内容层次结构,以便人类和机器能够推断信息结构。浏览器开发人员只是偶然地给标题元素设置了默认的字体大小和强度。

CSS通过允许设计人员在不损害底层语义和结构的情况下定义可视化表示,填补了空白,而底层语义和结构是屏幕阅读器和其他辅助技术主要依赖的。

地区

大多数页面都有一个视觉结构,顶部有一块内容(通常是标志、导航、搜索等),一个主要内容区域、一个页脚,有时还有带有相关信息的边栏。页面区域<头>,<导航>,<大>,除了< ><页脚>以编程方式定义页面的基本语义结构。屏幕阅读器用户可以轻松地在这些主要页面区域之间导航。同样的效果也可以用等效的方法实现咏叹调里程碑式的角色。术语“区域”和“地标”经常被当作同义词使用。

我们建议每个页面都有一个<大>元件(或< div的作用=“主要”>)。大多数页面上只有一个<头><页脚><头>,<大><页脚>必须是直接的孩子吗暴露在屏幕阅读器面前。它们不能嵌套在其他容器元素中。所有页面内容必须包含在一个区域中。

<导航>区域通常应仅应用于主导航。这是不利于包装的一个环节每一个环节或列表<导航>元件。由于用户通常期望<页脚>地区包括链接,它是没有必要使用<导航><页脚>要么。

在深内容的网站,它可能会有所帮助使用第二<导航>上的特定内容类别或部门内的内部页进行二次导航,例如,导航。在这种情况下,每个<导航>元素应该用ARIA标签;例如,。如果<导航>以一个标题开头,ARIA-labelledby可以用来标记<导航>与该标题。

<节>文章< >可以用于包含内容块。除非给它们一个ARIA标签,否则它们不能作为区域发挥作用,但这很少有用。

标题

标题描述它后面,就像新闻标题的内容。当一个新的页面到达,视力正常的用户倾向于对标题迅速找到他们想要的页面上的内容。屏幕阅读器和其他辅助技术的用户也可以前往标题跳过。

提示

若要显示页面的结构,请在然后在结果页面的边栏中选择Structure选项卡。

标题创建的页面大纲,类似内容的学期论文提纲或桌子上。的

将页面描述为一个整体(并且应该与页面相似)</code>)。一个页面通常应该只有一个<code><H1></code>。标题<code><H2></code>通过<code><编辑></code>表示概念“大纲”中不断增加的“缩进”程度。因此,跳过标题级别(如from)是没有意义的<code><H2></code>来<code>< h4 ></code>从这一页往下看。下面是一个带有相应标题级别的内容层次结构示例:</p> <div class="samp"> <ul> <li><b>H1:</b>我最喜欢的食谱<UL><li><b>H2:</b>快捷方便<UL><li><b>H3:</b>意大利面</li> <li><b>H3:</b>汉堡包</li> <li><b>H3:</b>炸玉米饼<UL><li><b>H4:</b>牛肉炸玉米饼</li> <li><b>H4:</b>鸡炸玉米饼</li> <li><b>H4:</b>鱼炸玉米饼</li> </ul></li> </ul></li> <li><b>H2:</b>一些装配要求<UL><li><b>H3:</b>金枪鱼砂锅</li> <li><b>H3:</b>烤宽面条<UL><li><b>H4:</b>蔬菜千层面</li> <li><b>H4:</b>牛肉烤宽面条</li> </ul></li> </ul></li> <li><b>H2:</b>包括一切的<UL><li><b>H3:</b>蟹肉菲力牛排配威士忌胡椒酱</li> <li><b>H3:</b>孙干番茄和松子酿牛柳</li> </ul></li> </ul></li> </ul> </div> <h3>实现标题</h3> <h4>标题必须使用标题标签。</h4> <p>屏幕阅读器和辅助技术依赖于标题标签(<code><H1></code>-<code><编辑></code>)来确定标题。仅仅是较大、粗体或强调的文本不会被解释为标题,除非<code><H1></code>-<code><编辑></code>标记使用。</p> <h4>仅当标题代表以下内容时才使用。</h4> <p>要突出或强调不是标题的文本,请使用样式——而不是标题标签——来获得视觉效果。</p> </section> <section id="lists"> <h2>列表</h2> <p>HTML列表(<code><UL></code>,<code>< ol ></code>和<code><DL></code>)还表示层次化的内容结构。</p> <p><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul">无序列表(<code><UL></code>)</a>是指没有顺序或重要性的内容。列表项通常在前面加上项目符号,如果需要的话,也可以用CSS覆盖它。</p> <p><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol">有序列表(<code>< ol ></code>)</a>建议顺序、顺序或排名。列表项的前缀通常是数字、字母、罗马数字等。</p> <p><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl">描述列表(<code><DL></code>)</a>对于键:值对,比如在常见问题中的一个词汇术语和定义或问题和答案。条款(<code><DT></code>)是典型的粗体,而描述(<code>< dd ></code>)是典型的正常重量和缩进。</p> <p>表结构应该是用于任何逻辑名单存在,而在其他地方。不要只创造的东西,看起来像通过带项目符号的每个段落的列表。同样,不要列表结构适用于没有逻辑上形成一个列表元素。</p> <h3>例如:酥饼配方</h3> <p>这个例子使用一个食谱来演示所有三种类型的列表。成分在一个无序列表中,方向在一个有序列表中,两个术语在一个描述列表中定义:</p> <div class="samp"> <ul> <li>1杯<a href="#softenedbutter">软化的黄油</a></li> <li>½杯糖</li> <li>2½杯面粉</li> </ul> <ol> <li>将烤箱加热到300华氏度(150摄氏度)。</li> <li><a href="#cream">奶油</a>黄油和糖。</li> <li>逐渐搅拌面粉放入乳脂混合物直至充分混合。</li> <li>将面团铺在未抹油的9x13的烤盘底部。</li> <li>烤30到40分钟,直到稍微变黄。</li> <li>从烤箱中取出,立即用叉子刺穿全身。</li> </ol> <dl> <dt id="softenedbutter"> 黄油软化</dt> <dd> 黄油在室温下放置大约20分钟。</dd> <dt id="cream"> 奶油、黄油和糖</dt> <dd> 把黄油和糖混合在一起,直到它变得松软。</dd> </dl> </div> </section> </article> <aside id="articlemeta"> <div id="updated"> 最后更新:<time datetime="2020-05-01">2020年5月1日</time> </div> <div id="related"> <h2>相关资源万博亚洲体育官网</h2> <ul> <li><a href="//www.kanehsu.com/techniques/screenreader/">设计用于屏幕阅读器的兼容性</a></li> <li><a href="//www.kanehsu.com/articles/screenreader_testing/">与屏幕阅读器测试</a></li> </ul> </div> </aside> </main> <footer> <div id="footerresources"> <div class="footerblock"> <p id="copyright"><span class="hidden">©</span>2020年WebAIM</p> <p id="contact">残疾人中心<br>犹他州州立大学<br>6807老主山<br>洛根,UT 84322-6807<br><a class="phone" href="tel:4357977024">435.797.7024</a></p> </div> <div class="footerblock"> <h2 id="blog">从博客</h2> <ul> <li><a href="//www.kanehsu.com/blog/wave-3-1-release/">WAVE 3.1发布</a></li> <li><a href="//www.kanehsu.com/blog/wcag-2-2-overview-and-feedback/">WCAG 2.2概述和反馈</a></li> <li><a href="//www.kanehsu.com/blog/anniversaries-celebrated/">纪念日庆祝</a></li> <li><a href="//www.kanehsu.com/blog/wave-webinar-and-intro-video/">WAVE网络研讨会和介绍视频</a></li> <li><a href="//www.kanehsu.com/blog/webaim-million-one-year-update/">WebAIM百万 - 一年更新</a></li> </ul> </div> <div class="footerblock"> <h2 id="popular">热门资源万博亚洲体育官网</h2> <ul> <li><a href="//www.kanehsu.com/training/virtual">WebAIM培训</a></li> <li><a href="//www.kanehsu.com/standards/wcag/checklist">WCAG 2检查表</a></li> <li><a href="//www.kanehsu.com/newsletter">WebAIM月度简报</a></li> <li><a href="//www.kanehsu.com/resources/contrastchecker">色彩对比检查</a></li> <li><a href="//www.kanehsu.com/resources/designers/">设计人员的网页可及性</a></li> <li><a href="//www.kanehsu.com/wave/">WAVE无障碍评估工具</a></li> </ul> </div> <div class="footerblock" id="checkpage"> <h2>检查你的可访问性</h2> <form action="https://wave.www.kanehsu.com/report" novalidate> <label for="waveurl" class="hidden">网站地址</label> <input type="url" id="waveurl" name="url" placeholder="Web site address" title="Web site address"> <input type="submit" value="波"> </form> </div> <div id="footerlinks"> <ul> <li><a id="footercontact" href="//www.kanehsu.com/contact">联系</a></li> <li><a id="footerabout" href="//www.kanehsu.com/about">关于</a></li> <li><a id="footerrss" href="//www.kanehsu.com/community/rss">RSS提要</a></li> <li><a id="footertwit" href="http://twitter.com/webaim">推特</a></li> <li><a id="footercopyright" href="//www.kanehsu.com/copyright">版权和使用条款</a></li> </ul> </div> <div class="clear"></div> </div> </footer> </body> </html>