在设计网站时，我们倾向于设想用户具有良好的视力、良好的听力和使用鼠标或触摸板的能力。我们可能会忘记那些能力不同的用户。他们如何访问在线业务和内容？

无法访问的网站是所有类型用户的沮丧之源

在任何设计和开发清单中，优化网站使其对每一类用户都是可访问和可用的应该是一个关键项目。通过满足可访问性准则，您不仅可以将很大一部分用户纳入您的目标受众，还可以获得额外的搜索引擎优化收益。

我们将解释做到这一点是多么容易。

在我们开始之前，以下是我们将涵盖的内容的快速概述-

网络可访问性到底是什么

为什么你应该实施它--显而易见和不那么明显的原因

如何实现它--ARIA简介、代码片段、核对表等。

Web可访问性评估工具

--

什么是网络可访问性：

无障碍网站的设计和编码是为了让不同能力的人和暂时残疾的人更容易使用。

--

您应该实施它的原因：

1.要增加覆盖范围和转化率：

一个可访问的网站将涵盖几个人口统计数据，例如：

不同能力的人-

客观地说，全球约有2.85亿人患有某种视力障碍，约3.6亿人患有某种听力障碍。

暂时残废的人(如因病或受伤)

老年人

网络较差地区的用户

2.提高网站的搜索引擎优化

一个针对可访问性进行了优化的网站也更适合于搜索引擎。搜索引擎和网页辅助设备，如屏幕阅读器，以类似的方式读取您网站的代码。他们仅依靠代码来理解内容。

虽然优化搜索引擎优化并不一定会转化为一个合适的可访问网站，但基础是相同的。然而，我们在下面提到的所有指导方针都涵盖了良好的搜索引擎优化和可访问性设计等方面的重叠。

3.履行人权

网络无障碍是联合国承认的一项人权。

科技界越来越重视为各种人设计可使用的应用程序和产品。从苹果宣布一个新的网站来促进无障碍，到最新版本的Android N的改进。

--

如何实施：-

视觉指南：

--

--

这在很大程度上涉及为图形提供文本等效项，以便屏幕阅读器等设备可以帮助视障人士访问内容。其中一些指导方针包括：

确保内容基于HTML，而不是CSS

这是因为屏幕阅读器通过阅读带有表格、链接、列表等的页面结构中的文本来导航。

2.确保HTML标题清晰且符合逻辑顺序

这有助于用户轻松地从一个主题跳转到另一个主题，并通过他们的屏幕阅读器让他们清楚地了解页面的结构和内容。

3.对超文本链接使用描述性文本。不要让用户猜测“点击此处”指的是什么或指向什么。

4.对于图片，请遵循以下指导原则：

用图表为普通图像和信息量丰富的图像添加详细说明。

例如-。这将在另一个页面上显示它。

为除了结构之外没有其他用途的图形提供‘NULL’值。例如-分隔栏。

用HTML或CSS创建信息图表，而不是使用图像文件，这将使视障人士和搜索引擎都更容易访问它。

5.不要只依靠颜色来传达信息和选择。

6.符合色彩对比标准。

ColorSafe.co的对比度检查器将帮助您确保符合当前的网络标准。

7.确保表单和按钮有适当的标签

如果这让你认为需要牺牲美观来换取可访问性--请访问FeedMusic.com。

--

听觉指南：

为视频内容提供字幕、字幕和文字记录

--

汽车指南：

这些指导方针确保无需触摸屏幕即可使用键盘或其他输入设备访问网站。这在很大程度上是通过使用TAB键来导航部分并让用户知道他们在页面上的位置-

为仅使用键盘导航的用户突出显示页面上的位置：

这个简单的例子分享在华盛顿大学的无障碍网站上，向你展示了当鼠标和键盘用户都有焦点时，如何改变链接的可见样式。

超链接的css代码

A{

颜色：黑色；

背景色：白色；

文字装饰：下划线；

}

当鼠标和键盘用户都将鼠标和键盘悬停在链接上时突出显示文本的代码：

A：悬停，a：焦点{

颜色：白色；

背景色：黑色；

文字装饰：无；

}

2.为鼠标和键盘用户使用事件处理程序

例如：

3.确保你网站上的所有表格都可以通过键盘访问。

认知指南：

少一些让人分心的动作和花哨、闪烁、闪烁的元素和动画。

构建清晰、结构良好的导航

对通俗易懂的语言感到满意

--

使用ARIA：

ARIA或可访问的富互联网应用程序是与HTML一起使用的属性的集合，专门设计用于帮助不同能力的人更容易访问Web。

单击此处查看要在代码中使用的ARIA标记列表。

--

Web可访问性评估工具

通过使用W3C编制的几个工具中的一个来确定您的网站是否符合可访问性准则。

有关无障碍网站的好例子，请看以下内容：

Feedmusic.com

Usa.gov

Bbc.com

Mozilla.org

那移动电话呢？

到目前为止，你可能一直在想，为什么我们还没有讨论移动设备的可访问性指南。事实上，我们计划将我们的下一个博客专门用于移动应用程序的可访问性。

我们上面提到的大多数准则也适用于移动网站。然而，对于一个移动网站来说，这里有两个需要特别记住的关键痛苦问题：

1.响应速度：

你的网站应该在所有屏幕尺寸和模式下都是清晰可见和可访问的。用户也不应该同时进行垂直和水平滚动。

2.输入轻松：

无论功能是否不同，任何用户都很难在移动屏幕上输入文本。拥有单选按钮、复选框等元素将帮助那些视觉困难的人和那些难以使用屏幕键盘的人。

确保屏幕上的按钮较大且间距足够大，以避免用户输入错误。对于“删除”按钮，可以考虑给用户一个“确认提示”。类似地，提供一个可见且功能正常的“后退按钮”，以便用户在出错时可以返回。

我们希望你觉得这个博客很有价值。在下面的评论区告诉我们你的想法！