如何使用语义 HTML 和 CSS 制作无障碍网站

对网页设计的需求越来越多地包括改进网页可访问性。但是,针对具有多设备兼容性的所有主要浏览器优化站点还不够吗?您可以使用 Google Lighthouse 轻松衡量您的网站性能、可访问性、最佳实践和 SEO。那么为什么可访问性很重要?

根据 CDC(疾病控制与预防中心)的数据,超过 6000 万美国人患有残疾。遵循 Web 内容可访问性指南,您可以介绍一些有助于制作可访问网站的初步注意事项。这是使用 HTML 和 CSS 开始使用 Web 可访问性所需的一切。

具有适当语义的结构化 HTML

在使网站具有视觉吸引力的同时,辅助技术用户不应感到困惑。尽管 WordPress 等许多内容管理系统都应用了 HTML,但您有责任重新检查并确认其应用是否正确。

例如,<nav> 标签比 <div> 标签提供更多细节。同样,为了清楚起见,您应该添加一个 <button> Next article </button> 而不是使用 <div> Next article </div>。由于 <button> 已经有一些默认样式,您可能想要覆盖它。尽管如此,内置的键盘辅助功能将允许用户使用 Tab 键在按钮之间导航。

阅读更多:您可以在 10 分钟内学习的简单 HTML 代码示例

语义 HTML 更容易开发,因为您将获得其他功能。它在移动设备上工作得很棒。此外,当您重视包裹在 <h1> 或 <a> 标签内的关键字时,它有助于 SEO。

屏幕阅读器用户的结构化内容

这是语义 HTML 好与坏的示例。

 <!--Good semantic HTML-->
<h1 class="hero-title">My heading</h1>
<p>Here's how you can make an accessible website using HTML and CSS</p>
<h2>My second heading</h2>
<!--Bad semantic HTML-->
<p style="font-size: 2.5em; font-weight: bold;">My heading</p>
<p>Here's how you can make an accessible website using HTML and CSS</p>

第一种情况对于屏幕阅读器来说很容易导航。它将读取标题,通知标题和段落。它会在每个元素后停止一秒钟。您可以跳过某些标题或使用 Enter/Return 返回到前一个标题。您还可以使用标题标签形成目录。

当您编写展示性 HTML 而不是语义 HTML 时(在第二种情况下),会不必要地换行并导致糟糕的体验。这就像准备一个巨大的块,由于没有潜在的选择器,因此更难级联和操作。

无障碍网站的语言和布局

您应该使用带有扩展首字母缩写词和缩写词的精确语言。如果可能,请尽量避免使用破折号编写 9-5 -> 9 到 5。以前使用 HTML 表格来创建页面布局。由于嵌套表格形成了一个相当复杂的布局,它曾经阻碍了正确的读数。这是一个现代的网站结构:

 <header>
<h1>This is a header</h1>
</header>
<nav>
<!--navbar for navigation-->
</nav>
<!--Main page content-->
<main>
<!--containing article-->
<article>
<h2>Article heading</h2>
<!--article content-->
</article>
<aside>
<h2>Related</h2>
<!--aside content-->
</aside>
</main>
<!--Website footer-->
<footer>
<!--footer content-->
</footer>

因此,如您所见,此布局对屏幕阅读器友好。使用清晰简洁的代码可以理解标记。此外,它易于维护并且下载时需要更少的带宽。确保您已合乎逻辑地放置了源代码;它会让一切变得不同。

重新考虑 UI 控件、表格和替换文字

最常见的 UI 控件是 Web 文档的按钮、表单和链接控件。经验法则是它们可以通过键盘进行操作。它们有一些默认样式(在不同的浏览器中可能会有所不同),您可以使用 Tab 键跳转到其他选项,然后按 Enter/Return 得出结论。您可以通过添加独特且有意义的锚文本而不是“单击此处”来管理文本标签。

要创建可访问的表格,请添加表格标题 <th> 并使用 scope 属性指定行或列。此外,您可以使用 <caption> 或 <table> 摘要属性为屏幕阅读器提供表格内容的快速概览。

替代文本向网络爬虫和屏幕阅读器提供图像或视频的上下文信息。如果您的图片用于装饰目的,最好将 alt 标签留空。否则,给出图像的详细描述会有很大帮助。

 <img src="flower.png" alt="A red flower" title="The red flower">

在大多数情况下,屏幕阅读器会读出替代文本、文件名和标题属性(您可以跳过它)。此外,如果您不想使用替代文字或想为多个图像添加相同的标签,那么这里有一个快速提示:

 <img src="flower.png" aria-labelledby="red-flower">
<p id="red-flower">A red flower ...</p>

您使用 aria-labelledby 属性来引用该 ID。它将允许屏幕阅读器以该段落的形式使用替代文本。

标准 CSS 以获得更好的可访问性

设计可访问页面功能的样式意味着您的设计应根据页面的核心内容进行操作。例如,对于 <h1>、<p> 和 <li> 元素,典型的 CSS 应该是:

 h1 {
font-size: 4rem;
}
p, li {
font-size: 1.5rem;
color: blue;
}

字体大小、字母间距、字体系列等应该有助于舒适的阅读。标题应该从正文中脱颖而出(默认样式也很好)。此外,文本应该具有与您使用 CSS 选择背景形成对比的颜色。

使用可访问的 CSS 可以实现微交互。它可以像强调文本以适当的方式突出显示链接一样小。您可以区别使用 <strong> 和 <em> 标签。您可以使用 <abbr> 元素添加虚线下划线。

标准链接应该用默认颜色加下划线:蓝色和以前访问过的链接用默认颜色加下划线:紫色(您可以自定义它)。

 
a {
color: #ff0000;
}
a:active {
color: #000000;
background-color: #a60000;
}
a:hover, a:visited, a:focus {
color: #a60000;
text-decoration: none;
}

因此,随着鼠标指针的变化,您应该突出显示焦点文本。指针光标和轮廓在 Web 可访问性中起着重要作用。

使用 CSS 为表单元素和标签提供干净的外观。此外,确定在大多数浏览器中一致的焦点/悬停状态。请记住,这些小提示有助于人们理解您的网页。

颜色对比度和隐藏值

调整网站的配色方案,使前景(文本/图像)颜色与背景颜色形成对比,主要是因为视觉障碍(例如色盲)的人更难正确阅读内容。您可以使用Color Contrast Checker根据 WCAG 标准获得合适的配色方案。此外,尝试添加标记符号(如星号)以及警告或条款和条件(不仅仅是红色警报)。

屏幕阅读器无需担心,直到源代码顺序编写得当。尽量避免使用 display: none 或 visible: hidden 属性,因为它们对屏幕阅读器隐藏内容。

轻松覆盖样式

关键是无论你设计的网站有多好,用户都有各种理由来覆盖样式。例如,也许有些人想要更大的文本大小或想要更改文本和背景颜色以提高可读性。所以你的内容区域应该能够完全处理它。

总结:结合 HTML 和 CSS

现在,您了解了语义 HTML 入门和为可访问网站以正确顺序编写合理源代码的基础知识。专注于 HTML 并在完成后转向制作可访问的 CSS。

使用上述技术,您可以增强用户体验并为漂亮的观众提供服务。因此,开始制作响应式和可访问的网站。