我们收集了10条提高网站可访问性的建议以保证网站你的网站对任何人都是友好的,包括残疾人。
W3C和万维网的负责人Tim Berners-Lee发表了一篇报道,他说:“网络的力量在于它的普遍性”。 作为通过网站谋生的人,我们有责任确保每个人都能访问他们。 Web可访问性听起来很高端,但它实际上比听起来容易得多。
我们的十个网络可访问性建议旨在确保对所有网站都是通用的。
这不仅有助于正常的用户体验,而且还可以提高网速比较差的时候的浏览体验。 我们已经按照时间顺序对我们的指南进行了排序,以便您清楚地了解在每个过程中需要做的措施。 当你遇到类似的问题的时候,你可以参照我们的指南。
第一件事:
根据W3C,Web Accessibility意味着每个人都可以感知,理解,浏览,交互和对web贡献。 在这方面,Web Accessibility包括影响网络访问的所有条件,包括视觉,听觉,身体,言语,认知和神经障碍。
您将在网络上找到关于此主题的一些内容,如果此主题感兴趣,您应该更深入地介绍Web Accessibility Initiative(WAI)。
考虑到这一点,这里是我们的指导方针:
颜色是我们经常用来表达情感和在web上传达信息的强大工具。 但是,我们不应该把我们所有的想法和信息都以色彩的形式传达给用户。
为什么?
例如,众所周知,绿色意味着“正确”,红色意味着“错误”,但是当我们将其用作沟通的唯一手段时会发生什么?
色盲是最常见的视力缺陷之一。 它影响了全球人口的4.5%(数量超过了IE11用户,您知道的...)。
如果在我们的用户界面中只通过眼色来传达重要的信息,那么我们是在忽略这占人口4.5%的用户。
颜色应该补充错误或确认消息,但它不能是我们使用的唯一工具。 为了确保我们覆盖所有用户,我们应该添加标签或图标,显示表单中填写的信息是对还是错。
caniuse.com采用了一个非常有趣的解决方案,该解决方案提供了一种替代调色板来显示其兼容性表的内容。
在设计时,理想的方案是检查色盲和对比度,所以确保您和您的设计团队拥有正确的工具。 我们强烈推荐用于Sketch的Stark插件,以帮助您设计可访问性!
在响应式的时代,我们可能会犯下一些不负责任的错误。
其中之一是 maximum-scale=1.0
的出现,它禁用使用移动设备放大网页的功能。
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
散光影响欧洲和亚洲30-60%的成年人,但模糊的视力会影响到所有年龄和国籍的人。
缩放的能力不仅仅是WCAG的另一个准则,而是简化这些人日常生活的工具。 所以下一次你正在建立一个响应式的网站,想想视力模糊的这些人。
除了让用户可以在移动设备上自由缩放外,还要注意,您的布局还需要在缩放多达200%的桌面浏览器上可以正常显示。
无论您制作网站多久,您可能都会惊讶地知道这些关于著名但又神秘的alt属性的几个功能。
但不是您网站上的所有图片都是img标签,对吧? 你可能有一个SVG或两个在那里...或整个SVG图标系统。
我们如何使所有人都可以访问SVG? 幸运的是,我们可以看出,可扩展矢量图形标准已经覆盖了我们的需求! 为了描述我们的向量,我们使用<title>
和<desc>
标签来描述简短和较长的描述。
<symbol id="langIcon">
<title>Language Icon</title>
<desc>Longer description</desc>
<path d="M0 2C6.47 2 2 6.48 2 12s4.47 10 9.99 0h24v24H0z" />
</symbol>
这可能是WCAG实现的最困难的准则之一,而不是因为技术上的困难,而是因为它可能是耗时的。 有几种方法可以完成这项工作:
<video controls>
<source src="movie.mp4" type="video/mp4">
<track label="English Captions" kind="captions" srclang="eN" src="captions.vtt" default>
<track label="Subtitulos en español" kind="captions" srclang="es" src="subs.vtt">
</video>
字体标记,记得吗? 我希望你最好不要记得那些是黑暗的时代。
尽管普遍认为,HTML5并不是本来就带有语义化的。 但是自从第一个HTML页面以来,他们一直在与我们在一起,并从此大大改善。 随着HTML5标准,引入了新的语义标签。
好的,但语义化标签是不是仅仅为了SEO?
并不是的。 当您通过<p>或<span>选择<h1>标签时,您是在有意识的更改元素的含义,提供层次结构,并构建页面信息的树结构。
屏幕阅读器不会忘记这一点。 事实上,语义是其最有用的武器之一。
请记住,能力越大责任越大,所以请确保为每个元素使用正确的语义标签,从h1到全新的主标签。
接上前一个点,想和大家讨论一些事情
使用ISO8601标准来表示日期和时间元素显示许多类型的日期格式,时区和一段时间。
Datetime是一个可选属性,可以帮助表示<time>的内容。 我们来看一些例子:
<time>14:54</time> Hours and minutes
<time>2018-06</time> Year and month
<time>-03:00</time> Time zones
<time>2h 32m</time> Harry Potter 2 Duration
<p>CSSConf Argentina took place on <time datetime=”2016-08-07”>August 7th</time></p>
web不断变化,但不需要忽视这些更改。 我们可以使用ins和del HTML标签与datetime属性组合来标记编辑。
ins元素代表文档的一个补充:
<ul>
<li><ins datetime="2017-08-02">Icecream</ins></li>
<li>Candy</li>
<li>Pasta</li>
</ul
del元素表示删除的内容:
<ul>
<li><del datetime="2017-06-05">Rewatch Harry Potter 8</del></li>
<li><del datetime="2017-06-05">Cry because ____ dies.</del></li>
<li><del datetime="2017-06-06">Write article</del></li>
<li>Order room</li>
</ul>
我们什么时候应该分别使用?
让我们来看看:
a标签旨在将一个文件链接到另一个文件或在新选项卡或当前页面中打开链接。 但是,当我们希望触发诸如汉堡包菜单或图像库之类的操作时,这个标签并不理想。 按钮元素是这些情况的正确选择,通常可以通过JavaScript实现。
此外,按钮标签可以容易地与type="button"
混淆,但差异依赖于前者能够获取更多内容(文本,图像+文本或仅图像)。
使用button标签时需要考虑两件事情:
首先,如果按钮的内容不够明确(例如,在关闭按钮中以“X”),我们必须添加一个aria-label属性来帮助解释该功能。
<button aria-label="Close">X</button>
第二,如果添加一个href属性(搜索组件或一个Lightbox库),那么我们也可以使用一个标签,并用JavaScript取消链接跳转。 如果未启用JavaScript,则使用href标签的图像库会正常地降级。
为了告诉屏幕阅读器用户我们的链接触发一个动作,实际上并不是一个普通的a标签,我们必须添加一个值为“button”的roles属性。
但要小心!
编写JavaScript时,您不仅需要点击功能,还可以在用户按下空格键时调用您的功能。 这是很有必要的,因为用于按钮的行为与用于链接的行为不同,用户应该能够触发这些命令之一的操作。
<a href="img/kitten.jpg" role="button" onclick="handleBtnClick(event)" onKeyPress="handleBtnKeyPress(event)">
Button
</a>
function handleBtnClick(event) {
// Do something
}
function handleBtnKeyPress(event) {
// Check to see if space or enter were pressed
if (event.keyCode === 32 || event.keyCode === 13) {
// Prevent the default action to stop scrolling when space is pressed
event.preventDefault();
// Do something
}
}
在MDN上可以阅读更多信息。
请记住,除非你改变默认规则,否则通常不需要aria角色,就像上面的例子一样。 HTML语义元素具有已应用的默认角色:<nav>
标签的“导航”,<a>
标签的“链接”等。 这意味着只有当我们希望更改这些默认值时,才需要使用角色属性。
有几种方法可以用HTML和CSS隐藏东西。 该表将帮助您找到最适合每种情况的替代方案:
Method | Action on View | Action on Screen Readers | Compatibility |
---|---|---|---|
CSS: visibility: hidden; | 隐藏元素,但其仍然占用空间(几乎像不透明度:0;) | 不可读 | 支持 |
CSS: display: none; | 从视图及其空间中隐藏元素,流中的下一个元素将占据它的位置。 | 不可读 | 支持 |
HTML5: hidden attribute | 同display: none; | 不可读 | IE11+ |
Aria-hidden = “true” | 内容显示在浏览器中,但不通过辅助技术传达给用户 | 不可读 | IE11+ |
CSS: .visuallyHidden class | 从视图隐藏元素,并将其从工作流中删除 | 可读 | 支持 |
如果你想隐藏元素的视图,但仍然让屏幕读者知道他们,那么最后一个选项是最好的。
这在表单标签或跳到内容链接中非常有用。 visualHidden类是应该最需要被您放进收藏夹的CSS代码之一,以便您在每个项目中使用。 是的,你可以改变名字,如果你喜欢(我的建议是.pottersCloak,等等)
.visually-hidden {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
padding:0 !important;
border:0 !important;
height: 1px !important;
width: 1px !important;
overflow: hidden;
}
body:hover .visually-hidden a, body:hover .visually-hidden input, body:hover .visually-hidden button { display: none !important; }
Web可访问性增强很困难,在这里的标准和指南会有所帮助。
本文中以前的所有内容都在此引用:<button>
如何工作? 我们什么时候应用它? display:none 和“hidden” 有什么区别?
起初它可能是沉闷的,但W3C标准和WCAG指南不仅可靠,而且还具有教育意义。 继续前进,迷失在他们提供的无限信息中。 我向你保证,你会发现你永远不知道的代码和做法!
一旦应用了所有这些知识,现在是测试它的时候了。 以下是审核网站可访问性的最佳工具列表:
我们尝试着不断地测试我们的工作。 我们的下一个产品应该始终之前更好。 是的,我们有时会犯错,但是我们努力不断地改进和适应,更不要说每个挑战都会学到一些东西。
我们希望我们的产品能够为用户提供最好的体验,这就是为什么我们逐渐将可访问性标准纳入我们的工作流程。
我们还有一条漫长的道路,还有一些重要的改进空间,但是我们很高兴选择这条路。
网站可访问性并不总是易于实现,但如果您将其作为日常工作流程的一部分(而不是最后一分钟的清单),则实施和测试将随着时间的推移变得更加容易。
当有疑问时,不要害怕询问其他开发商或做一些研究。 我最喜欢的信息来源是A11y项目,A11y Wins,HTML5 Doctor和MDN。
扫码关注腾讯云开发者
领取腾讯云代金券
Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号:粤B2-20090059 深公网安备号 44030502008569
腾讯云计算(北京)有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287
Copyright © 2013 - 2025 Tencent Cloud.
All Rights Reserved. 腾讯云 版权所有