提升网页可访问性：编写更好的HTML

需积分: 1 113 浏览量更新于2024-09-20 收藏 60KB DOCX 举报

"这篇文章主要介绍了如何编写更具有可访问性的HTML页面，强调了前端开发者对于创建易用网页的责任。作者提倡结合WCAG（Web Content Accessibility Guidelines）标准和语义化HTML标签来提升网页的可访问性。" 在HTML编写中，以下几个方面特别重要： 1. **文档声明:** 使用`<!DOCTYPE html>`来确保文档类型，这有助于提高浏览器的兼容性和向后兼容性，从而让所有用户都能正确解析页面。 2. **链接：<a>** 链接是网页交互的核心，要确保它们对所有用户友好。为关键链接添加`accesskey`属性可以帮助键盘导航，保留链接的默认焦点样式以辅助视觉障碍用户定位。例如： ```html <a href="" title="" accesskey="M" rel="">Link</a> ``` 3. **缩写：<abbr>** 使用`<abbr>`标签来表示缩写，并通过`title`属性提供全称，以便读屏软件用户理解。例如： ```html <abbr title="Web Developer">WD</abbr> ``` 4. **大段引用：<blockquote> 和一般引用：<cite>** 对于长段落引用，使用`<blockquote>`，行内引用则使用`<cite>`，这有助于区分不同类型的引用，增强页面结构的可理解性。示例： ```html <blockquote> 文本内容... </blockquote> <p>某A给我印象最深刻的一句话是，<cite>“做前端要有爱。不要动不动就有朩有地对各种人使用咆哮体”</cite>。</p> ``` 5. **删除：<del>** 用`<del>`标记已删除的文本，使用户知道内容的变化历史。同时，可以使用`<ins>`标记新增的文本。例如： ```html <p>原始内容<del>被删除的部分</del><ins>新添加的内容</ins></p> ``` 6. **图像：<img>** 图片应使用`alt`属性提供文字描述，方便不能看到图片的用户理解。如果图片是装饰性的，`alt`属性可以留空，以避免读屏软件读取不必要的信息。 7. **表格：<table>** 对于数据表，使用`<caption>`、`<thead>`、`<tbody>`、`<tfoot>`和`<th>`等元素，明确表格的结构和头部信息，便于屏幕阅读器用户理解和导航。 8. **颜色和对比度** 避免仅依赖颜色来传达信息，确保文本与背景有足够的颜色对比度，以帮助色盲用户。 9. **键盘导航** 确保所有功能都可以通过键盘操作，包括菜单、弹出框和模态对话框。 10. **ARIA属性** 使用ARIA（Accessible Rich Internet Applications）属性来增强交互组件的可访问性，如`aria-label`、`aria-describedby`和`aria-haspopup`等。遵循这些最佳实践，我们可以创建出不仅对正常视力用户，也对视障、听障或其他身体障碍用户友好的网页，实现WCAG标准，让互联网变得更加包容和可访问。

昨天在 twitter 上说，怎么忍心把页面写得这么难用？是的，这个世界还有一群人等着我们创建

出来的东西，可以让他们的生活能过得更容易呢。比如那些需要读屏软件的用户。作为一个前

端，我们又怎么会忍心呢。之前就一直想写这样的一篇文章，分享一下如何去创造一个可访问

性更好的页面。今天的计划里有一条把 2HTML T2ag 和 WCAG 标准结合起来。我推荐你这样

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

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

体现：

1. 文档声明：<!Doctype>

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

面，我推荐你这样写：



2. 链接：<a>

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

1. 为关键链接添加 accesskey

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



3. 缩写: <abbr>

对于用 HTML Tag 的正确使用，也是非常重要的，这有利于读屏软件使用者对于页面结构的理

解。特别是在 H1,H2,H3 等这些标签的使用，滥用非常容易造成结构费解。当然，使用一般的

标签，再利用 CSS 来使视觉上形成对比这也是常人能辨识的。但读屏软件用户呢。当然，这

里只是顺带提起需要注意页面标签的使用方法，而 abbr 最重要的应该是应该添加一个 title 属

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



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

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

 

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

1234ag

粉丝: 6

提升网页可访问性：编写更好的HTML

html写的生日祝福代码

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

JS和HTML和JAVAScript写的打字小游戏 .html

使用intellij idea写html

写一个简单的html文件

用HTML写一个个人博客

写html页面 在a.html中嵌套b.html和c.html 在b.html中嵌套c.html给出完整代码

用HTML写一段表白代码

htmlr如何写注释

你可以写html代码吗

最新资源

写html页面在a.html中嵌套b.html和c.html 在b.html中嵌套c.html给出完整代码