创建一个可访问的网站并非难事。查找有关为世界各地的不同用户构建用户友好平台的最快提示。
网站或数字可访问性涉及构建残疾人也可以使用的网站和数字应用程序。随着互联网在我们的生活中扮演着越来越重要的角色，网络的可访问性已成为一个争论的问题。
尽管有关网络可访问性的观点各不相同，但根据ADA标题III向联邦法院提起的诉讼数量正在迅速增长。第三篇禁止在公共场所和商业设施内基于残疾的歧视。
联邦法院目睹了这些诉讼增加了 177％，从2017年的814起增加到2018年的2258起。这些案件激增是在纽约联邦法官允许网站可访问性案例转移到针对零售商Blick和餐厅5的诉讼中发现之后的伙计们。
如果您不希望您的业务陷入这场辩论的错误，则需要使您的网站具有足够的可访问性，以使残障人士访问网站时获得顺畅的体验。幸运的是，使您的网站可访问并不一定是困难且昂贵的。
以下是一些简单的步骤，可以使您的网站的UX更易于访问。
改善网站用户体验的8条提示
撰写正确的图片替代文字
启用有效的键盘导航
超越颜色编码的说明
有适当的重点指标
改善表格的可访问性
正确构造标题和内容
提供描述性链接
必要时使用ARIA
1.撰写正确的图片替代文字
盲人或有严重视力障碍的人通常依靠文本阅读器或屏幕阅读器来理解在线内容。屏幕阅读器通常会读取文本并将其转换为语音。因此，您应该使用简洁但准确的替代文字来描述图像。
尝试使用精确的单词尽可能清晰地描述图像。如果图像包含任何文本，请确保也将其包含在alt标签中。例如，如果您有蓝莓煎饼的图片。您希望拥有一个超越“薄煎饼”的描述性替代文字，但同时也不想让用户感到不知所措。在下面的示例中可以看到：
撰写正确的图片替代文字
一个示例为蓝莓煎饼的简单图片提供了不同且随机的关键字。当然，对于纯粹出于美学目的的图像，您不必遵循此规则。在这种情况下，您可以使用空的<alt>属性，以便屏幕阅读器将其跳过。
它还可以帮助改善您 的页面SEO，帮助您提高搜索引擎排名。准确的替代文字可为网站抓取工具提供上下文，使您的网页排名高于没有适当的替代标签的网页。确保对所有视觉内容（包括图像，信息图表和视频）使用准确的替代文字。
尽管这可能是一项艰巨的任务，但取决于您网站上的图片数量，还有一些自动化该过程的简便方法，我们将在本文结尾处进行讨论。
2.启用有效的键盘导航
尽管鼠标可以提供快速导航，但是行动不便的人，盲人和重复性压力伤害的人不能使用它。
他们必须依靠键盘以及某些情况下的输入设备（例如单开关输入或烟嘴）来上网。这就是为什么必须确保仅使用键盘的用户可以像使用鼠标一样高效地浏览您的网站。
通常，您必须使用Tab键浏览交互式元素，例如墨水，按钮或网页上的输入字段。确保此导航是合乎逻辑的。它应遵循页面的视觉顺序。
您也可以使用锚点链接将长内容分解为小段。这将帮助仅使用键盘的用户跳过不相关的内容，直接跳到所需的内容。
3.超越颜色编码的说明
颜色编码的指令具有强烈的美学吸引力。但是，有色盲等视力障碍的用户会发现他们没有视觉提示的作用。另一方面，有学习障碍的人发现用颜色编码的说明非常有用。
换句话说，您必须将颜色代码与其他视觉指示符（例如文本标签，星号或符号）结合使用。您还可以使用空格或边框来分隔内容的不同部分。对于复杂的视觉元素（例如图形和图表），您可以使用非视觉信息（例如形状，标签和尺寸）来发送消息。
4.有适当的重点指标
焦点指示器是选定时显示的视觉提示。它们通常是发光的轮廓或文本。大多数Web浏览器都有CSS伪类来显示这些焦点指示符。如下面的屏幕快照所示，网站的不同部分突出显示或以特定颜色显示。
适当的重点指标
附件
如果用户将鼠标移到它们上方，指示器将变得更加突出。但是，视力受损的用户看不到这些视觉焦点指示器。例如，行动不便的人不能访问仅悬停的菜单和按钮。因此，您应该避免在网站上使用这些元素。
您需要用视觉障碍人士可以理解的东西代替它们。您可以使用简单的替代方法（例如对比图案），也可以同时使用颜色和符号。请牢记色盲用户，还应避免使用错误的颜色组合，例如绿红色，绿棕色，蓝紫色，绿蓝色和浅绿黄色。
5.改善表格的可访问性
在线表单是与Web可访问性相关的关键元素之一。大多数网站都有带有占位符文本作为标签的在线表单。不幸的是，占位符文本为灰色且对比度较低，从而使视力障碍的用户难以阅读。
这就是为什么您应该对在线表单中的所有字段使用位置适当且具有描述性的标签的原因。使用<label>标记或ARIA地标，使视障用户可以更轻松地填写表格。填写表格时，如果标签保持原样会更好。通过这种安排，屏幕阅读器可以跟踪进度，用户也不会丢失上下文。
6.正确组织标题和内容
标题结构在使用屏幕阅读器浏览内容中扮演着至关重要的角色。但是，您需要正确使用诸如<h1>和<h2>之类的标题来维护网页上内容的层次结构。避免仅因为标题在外观上令人愉悦而使用标题。
无论标题是用于主页还是任何其他页面，请始终仅对主标题使用<h1>标记。切勿跳过标题。例如，不要直接从<h1>标记跳转到<h3>或<h4>。确保为屏幕阅读器将内容组织成可导航的层次结构。如果需要，您应该创建一个新的CSS类来设置文本样式。
7.提供描述性链接
再次提醒您，请牢记与屏幕阅读器相关的用户，您应该在内容中使用描述性链接。最常见的错误之一是使用诸如“单击此处以获取更多信息”或“查看此帖子”之类的文字。相反，您应该使用诸如“单击XYZ部分以了解有关XYZ产品的更多信息”之类的文本。
由于大多数屏幕阅读器都会宣布存在链接，因此您不必在链接说明中使用诸如“链接”或“网站”之类的词。这导致冗余。描述性文字说明了不仅指向屏幕阅读器的链接，而且还指向搜索引擎搜寻器的链接的上下文。因此，它还可以帮助您改善页面上的SEO和搜索引擎排名。
8.在任何需要的地方使用ARIA
ARIA（可访问的Rich Internet Applications）角色和地标可以帮助定义内容的各种导航区域。在创建有效的基于键盘的导航时，它们特别有用。
最常见的ARIA地标是：
角色=“横幅”
角色=“导航”
角色=“主要”
角色=“互补”
角色=“ contentinfo”
角色=“搜索”
角色=“表格”
角色=“应用程序”
您可以按照将类添加到HTML的相同方式，将ARIA属性添加到HTML。当屏幕阅读器到达ARIA地标时，用户可以立即转到相关部分。
许多需要ARIA属性的功能都可以作为HTML5元素使用。但是，与HTML5等效版本相比，屏幕阅读器在ARIA地标上的效果更好。因此，建议在必要时使用ARIA地标。
使您的网站的可访问性更上一层楼
越来越多的联邦诉讼和不断增长的社会意识使网络可访问性重新成为人们关注的焦点。作为网站设计机构，构建具有可访问性UX的网站是您的道德责任，也是明智的商业决策。
除非有专门的具有适当专业知识的开发人员，否则手动进行这些更改并非易事。但是，诸如accessiBe之类的Web可访问性工具 可以使该过程更加轻松快捷。只需执行几步，即可将您的Web平台提升到新的高度。
