提升HTML兼容性：遵循WCAG与语义网的实践指南

103 浏览量更新于2024-08-28 收藏 128KB PDF 举报

本文主要讨论了如何通过优化HTML代码来提高页面的可访问性，使之更好地适应各类用户，特别是那些依赖读屏软件的用户。作者着重强调了将HTML标签与WCAG（Web Content Accessibility Guidelines，即Web内容可访问性指南）标准相结合的重要性，以便创建出包容性更强的网页设计。首先，文档声明部分提到了正确的<!DOCTYPE>使用。尽管<!DOCTYPE html>本身与WCAG没有直接关联，但它有助于确保页面在不同浏览器中的兼容性，特别是对于向后兼容性。<!DOCTYPE html>声明明确指定了文档类型，有助于浏览器正确解析文档结构。接着，作者强调了链接标签<a>的使用，指出它是互联网连接的基础。为了提升可访问性，应为关键链接添加accesskey属性，并避免在focus时移除虚线框，如`<a href="" title="M" accesskey="M" rel="hidefocus">Link</a>`。这样，用户可以通过快捷键快速访问链接，即使是使用键盘导航的用户也能方便操作。缩写标签<abbr>的正确应用也被提及，尤其是配合title属性为屏幕阅读器用户提供清晰的解释，如`<abbr title="Web Developer">WD</abbr>`。这有助于屏幕阅读器用户理解文本中的缩写含义，提升内容理解度。大段引用和行内引用的区别是另一个要点，<blockquote>用于显示大段引用，而<cite>用于引用行内文本。这样的区分有助于提高文本的层次感和易读性，使所有用户都能轻松跟随内容。最后，删除内容的表示通过<del>标签实现，确保被删除的文字在视觉上有所区分，同时传达出删除信息，这对于保持内容的完整性和清晰度至关重要。本文提供了实用的编码技巧，帮助前端开发者遵循WCAG标准，确保他们的HTML代码不仅在视觉上易于阅读，而且能够为各种用户群体提供良好的体验，包括那些依赖辅助技术的用户。通过这些最佳实践，我们可以创建出更加包容、易于访问的网络内容。

这样去写你的这样去写你的 HTML 让你的代码更好的兼容性让你的代码更好的兼容性

比如那些需要读屏软件的用户。作为一个前端，我们又怎么会忍心呢。之前就一直想写这样的一篇文章，分享一下如何去创造

一个可访问性更好的页面。今天的计划里有一条把 HTML Tag 和 WCAG标准结合起来。我推荐你这样去写你的 HTML，让某

些人的生活可以更容易。

今天想分享的是如何去使用我们的 HTML Tag, 把 WCAG 的标准和语义网的目标进行代码上的体现：

1. 文档声明：文档声明：<!Doctype>

其实这跟 WCAG 根本上连不上什么直接关系，但为了一个兼容性更好，特别是向后兼容的页面，我推荐你这样写：

<!Doctype html>

2. 链接：链接：<a>

互联网的联几乎可以说是用 <a> 来实现的，作为一个页面最常见的标签。我们应该如何对待呢？

为关键链接添加 accesskey

除非万不得已，不要去掉 focus 时虚线框

3. 缩写缩写: <abbr>

对于用 HTML Tag 的正确使用，也是非常重要的，这有利于读屏软件使用者对于页面结构的理解。特别是在 H1,H2,H3 等这

些标签的使用，滥用非常容易造成结构费解。当然，使用一般的标签，再利用 CSS 来使视觉上形成对比这也是常人能辨识

的。但读屏软件用户呢。当然，这里只是顺带提起需要注意页面标签的使用方法，而 abbr 最重要的应该是应该添加一个 title

属性对缩写进行描述。比如：

4. 大段引用大段引用: <blockquote>，一般引用，一般引用: <cite>

有大段引用的时候，使用 <blockquote>，而行内引用则使用 <cite>，让你的结构更加易读：

之前就一直想写这样的一篇文章，分享一下如何去创造一个可访问性更好的页面。今天的计划里有一条把 HTML Tag 和 WCAG标准结合起来。我推荐你这

样去写你的 HTML，让某些人的生活可以更容易。

</blockquote>

某A给我印象最深刻的一句话是，<cite>“做前端要有爱。不要动不动就有朩有地对各种人使用咆哮体”</cite>。

5. 删除：删除：<del>

在纸上写东西不能像在计算机上写东西一样，可以用撤销键可以按，但当我们想要强调某些东西是被删除的怎么办？那就是使

用 <del> 标签了。比如这样：

<del>HTML上表示强调时，请使用 标签</del>

HTML上表示强调时，请使用 标签

效果是这样的：

HTML上表示强调时，请使用 标签

HTML上表示强调时，请使用 标签

6. 定义列表：定义列表：<dl>

去年带着新人做支付宝前端博客的时候，他们给我印象最深刻的是很喜欢用 <dl>。当时在想，这些同学挺不错的，对语义化

的理解还不错。我们还是比较少用到定义列表的。而是使用一般的 <ul> <ol> 这两个。<dl> 也是应该慎用的，最好只使用在某

些有“定义”意义的条目，如 w3school 的这个例子，对咖啡和牛奶的定义：

<dl>

<dt>Coffee</dt>

<dd>- black hot drink</dd>

<dd>- white cold drink</dd>

</dl>

7. 无序无序/有序列表有序列表 <ul>/<ol>

列表，这个对于每个前端来说，都熟悉不过了。因为结构可以非常灵活地进行应用，在导航、列表、Tab 等，都经常要要用

到。这个就无须多说了。但有一点还是需要明白的，不要相信什么 <ul>/<ol> 是 <table> 的替代品。在我们常用的 HTML

Tags 中，每个标签都有自己的作用，谁都不是谁的替代品。

<ol>

<li>Coffee</li>

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38586428

粉丝: 7
资源: 904

提升HTML兼容性：遵循WCAG与语义网的实践指南

web兼容性超好的三个HTML视频播放器代码，vediojs,hlsplayer;flowplayer

ie8自动设置 兼容性代码

兼容性较好的jQuery检测密码强度特效代码

兼容性较好的jQuery检测密码强度代码.zip

asp.net下用服务器端代码解决浏览器兼容性问题

jquery.simple.tree插件 更简单，兼容性更好的无限树插件

html+js兼容性很好的留言墙源码

JQuery兼容性较好的点击复制制定内容到剪贴板的js特效特效代码

HTML手写代码VML

JQuery兼容性较好的点击复制制定内容到剪贴板的js特效代码.zip

最新资源

ie8自动设置兼容性代码

jquery.simple.tree插件更简单，兼容性更好的无限树插件