起初，编写易理解的代码可能看起来令人生畏，但是一旦你尝试过，你会很快发现它并不可怕。

为什么易访问开发感觉如此令人生畏？

我发现易访问开发是最容易陷入分析瘫痪的地方之一:总有一些东西你感觉比如你需要先确认一下，你听到其他人正在做的事情，或者只是一种模糊的感觉，你没有事实上了解足够多的知识，可以开始自己处理易访问的编码。只是多一个博客，多一个会议演讲，多一个视频，和然后您将准备好开始编写可访问的代码。

与此同时，我们的应用程序——更重要的是，我们的用户——被我们不断编写的旧的不可访问的代码所困扰。我们能做的最好的事情就是尽我们所能开始编写易访问的代码，承认我们可能会犯错误！毕竟，开发不一直都是这样工作的吗？我们使用我们所拥有的技能来编码，坚持我们所知道的最佳实践和当前的网络标准。有时我们会犯错误，无论是bug还是架构方法，我们在事后会做不同的处理，但是我们仍然发布了一个(希望)大部分功能正常的应用程序。可访问性也是一样的:它的功能是滑动的，而不是开/关的开关。我们尽我们所能，基于我们现在所知道的和当前与可访问性相关的指南来编写可访问性特性。它可能不是100%完美的，但是任何事情都比完全忽略可访问性要好。嘿，代码不是刻在石头上的，对吧？一旦你学会了如何做得更好，你可以随时回去更新一些东西。

我们很容易在头脑中形成一种想法，那就是把通俗易懂的代码编写成如此庞大和令人生畏的东西，以至于我们总能找到一个借口把它推掉。但实际上，可访问代码是对您的开发和测试过程的一系列小的到中等的调整，所有经验水平的开发人员都完全可以做到。毕竟，作为开发人员，学习新东西只是我们工作的一部分。当您的团队决定从JavaScript切换到TypeScript或者开始使用React钩子时，您可能很快就学会了。框架、库、最佳实践，甚至语言本身都会随着时间的推移而变化和发展。一旦你开始以同样的方式考虑可访问性，并认识到这不是一个可选的升级，你就可以开始将可访问性开发构建到你现有的工作过程和模式中。

我该如何开始？

最好的开始方式是从小处着手，然后逐步提高。如果你在一个自然的基于组件的应用程序中工作(比如Angular或React应用程序)，这种方法特别有效，因为你自然地把你的应用程序分解成那些构建块。您可以开始向您的基本组件添加可访问性特性，然后随着您的扩展和在其他组件中使用这些组件(然后在其他组件中使用这些组件，等等),免费获得它。).这也有助于减轻任务的压力。今天，整个应用程序不一定是完全可访问的；今天我们要做一个无障碍按钮。但是这个按钮将会在你的应用程序中随处使用，就像这样，你已经做了一个巨大的可访问性升级！

挑选一些在你的应用程序中反复使用的基本元素。然后，通过查看您的代码并询问以下问题，您可以对每一项进行快速的可访问性检查:

1.这个组件使用语义HTML吗？

提高应用程序可访问性的一个最有效的方法是确保你总是使用正确的语义元素。语义HTML有助于告诉屏幕阅读器他们在看什么，使键盘导航变得容易，并从本质上组织你的页面。当我们打开一个网站或应用程序时，我们通常会快速浏览内容，以快速找到我们需要的内容。您的视障用户不能总是这样做，但他们的屏幕阅读器可以。屏幕阅读器可以读出部分的标题，并允许用户向前跳转，通过寻找按钮来通知用户他们可以与什么进行交互，读出列表格式的内容，快速导航菜单、表单等；但是只有当你使用了正确的元素，而不是什么都用div的时候。

您可能已经熟悉了一些常见的语义HTML标签:与文本相关的标签(h1到h6和p)可能是最广为人知的，尽管button或img可能会让它们望尘莫及。除此之外，您的应用程序还将受益于使用nav进行导航、页眉和页脚(与tin上的内容完全相同)、main、section、article和side来定义内容、用户输入表单的表单以及数据表的table。值得庆幸的是，表格布局的时代已经一去不复返了(只要你不是在编写电子邮件)。还有一些不太常见的，比如进度条的进度，或者引用作品的标题。这是值得了解的可用HTML5元素的当前列表如果你还没有。使用正确的语义标签越多，应用程序就越容易访问。

如果这还不足以说明问题，您还会发现，对于开发人员来说，语义化的文档更容易快速解析和处理，因为他们一眼就能看出每个元素做了什么以及为什么会出现在那里，因此这将加快您的开发时间，并简化您的入门工作！语义HTML更新很容易实现，只需用一个元素替换另一个元素，并且通常不会产生很多(如果有的话)突破性的变化。这真的是一个快速的胜利，并且是一个立即提高你的可访问性的好方法！

2.所有图像都有替代文本吗？

如果你正在寻找另一个快速取胜的方法，你可以在你的组件中搜索img标签。如果它们不都包含替换文本，那么你有另一个简单的方法来升级你的游戏！

替代文本，简称可选文本，是描述性文本，告诉有视觉障碍的用户(或不能加载您的图像的用户)图片中显示的内容。如果你曾经打开一封图片还没有下载的电子邮件，你就会看到alt文本在起作用！要将它添加到您的图像中，您只需将alt属性添加到您的img标记中，如下所示:

在编写好的替代文本时，有几个准则要记住::

你不需要包括“的图像”或“的照片”这是隐含的信息。你可能只需要在插图、绘画或其他对你的用户来说很重要的艺术作品中调用媒体。

当图像是装饰性图像时，您应该只包含空白的替代文本。在大多数情况下，alt= " "是一种应该避免的模式。这个规则的例外是当你的页面上有纯艺术元素的时候。像边框、分隔线和其他一些让页面看起来很漂亮的东西，但是没有传达给用户任何信息或价值。

描述一下！他们说一张照片胜过千言万语，所以确保你不是用一两张照片来描述一幅完整的图像。在一个戴着生日帽、穿着粉色连衣裙的小女孩面前，alt= "蛋糕"明显不如alt= "插着蜡烛的巧克力蛋糕有用。人们对所讨论的图像描绘了一幅更加精确和描述性的图画。

在图像中包含任何相关文本。使用文本图片通常是一种不好的做法，但有时你有一个恰好包含相关文本的图片:可能是一个标志的照片或一本书的标题。在这种情况下，确保在你的alt中包含文本，这样你的用户就不会错过这些信息。

3.我们是否做出了无障碍的颜色选择？

色彩是强大的，这一点毋庸置疑。然而，对我们来说重要的是要记住颜色并不总是对我们所有的用户开放。在这种情况下，你首先想到的用户可能是你的盲人或色盲用户，但是请记住，不仅仅是他们；例如，对于启用了夜班的用户，站在明亮的阳光下看不清设备的用户，或者戴着太阳镜看手机的用户，您选择颜色的意图也会受到影响。做出可访问的颜色选择对所有用户都有好处，值得你花时间去做。

当您为各种UI元素选择颜色时，确保您符合颜色对比的无障碍标准是非常重要的。这WCAG(网页内容无障碍指南)定义三个级别的“通过”色彩对比度:失败、AA和AAA。AA级别意味着你的颜色有足够的对比度，可以阅读，但可能仍然会给一些用户带来问题。AAA级意味着你已经达到了非常高的对比度，对大多数用户来说应该是可读的。你应该始终以AAA合规为目标，但确保你没有失败是一个很好的起点。

你可以使用任意数量的在线工具来检查你的色彩对比度——我个人最喜欢的是Adobe颜色对比检查器(其中还包括一个优秀的色盲工具)。在那里，你可以输入你的前景和背景颜色，让他们猜测出你的颜色对比度！

易访问性和颜色的另一个重要方面是确保你不是仅仅通过颜色来传达任何信息。不幸的是，这是一个非常容易陷入的危险陷阱。

最容易想到的一个例子是表单。你见过多少次表单将输入元素的边框颜色改为红色来表示验证失败？如果你也确保包含一个图标、文本或其他元素来告诉用户有什么不对劲，这并不是一件很糟糕的事情。如果你只依赖红色边框，有相当一部分用户会很难弄清楚为什么他们的表单不能被提交。

坏榜样

好榜样

4.我可以使用键盘浏览这些内容吗？

另一个好的基本级可访问性检查是尝试使用你自己的组件，但是不要触摸你的鼠标。键盘导航是可访问性的一个重要部分，因为有许多原因导致使用鼠标对用户来说不实用或不可行:例如，失明、肢体畸形和缺失，或者缺乏精细运动控制。一些高级用户也可能更喜欢只使用键盘，因为它比使用鼠标更快更有效。我见过很多开发人员，他们可以整天不用鼠标就能编码，那么为什么不给你的用户提供同样的选择呢？这是另一个显著的例子，说明了可访问性并不是一个极端的例子；易访问的特性使你的整个用户群受益。

好消息是，键盘导航是一个很好的HTML和CSS免费提供的功能。语义HTML在这里也起着至关重要的作用，它允许你的用户在交互元素之间跳转、切换复选框、导航下拉菜单、滚动等等，但前提是你已经使用了实际的HTML元素来完成所有这些事情。如果您的“按钮”实际上是一个带有onClick操作的div，那么您就失去了所有那些可爱的内置可访问性！使用ARIA地标和强制焦点指示器可以使这些元素变得可访问，但是如果你不尝试重新发明轮子，你会有一个更容易和更快的时间。

当您检查键盘的可导航性时，请注意以下事项:

你能看到一个视觉指示器来显示你当前关注的是哪个项目吗？这些焦点指示器会自然出现，除非您通过将元素的轮廓样式设置为0或无来覆盖它们。如果你想更好地匹配你的品牌外观和感觉，你可以改变焦点风格，但不要完全删除它，并始终确保它不会太微妙！

你能把注意力集中在任何非交互的元素上吗？用户应该只能够关注他们能够以某种方式与之交互的元素。你可以通过使用tabindex强制元素成为可聚焦的，但是如果你的用户不能与之交互，那么你应该确保它没有被应用。

使用键盘浏览页面需要多长时间？对于你的用户来说，要找到他们需要的元素，不得不在一堆东西中翻来翻去，这不应该是一件麻烦的事情。确保你使用语义HTML将你的页面分成更小的部分(主页面、文章页面、导航页面等)。)，如果需要的话，还可以提供页面下方内容的跳转链接。

键盘导航是否遵循页面的视觉流程？当您在键盘上浏览页面时，焦点应该跟随内容:从上到下，从左到右(如果内容是RTL语言，如希伯来语，则从右到左)。同样，如果你已经正确地构建了你的底层HTML，这是应该自然发生的事情。请记住，HTML应该处理结构和组织，CSS应该处理视觉调整(如果需要)。

5.我需要ARIA属性吗？

ARIA属性可能是易访问编码中比较令人困惑的方面之一，所以让我们来看看是否能把它弄清楚一点！ARIA代表“可访问的富互联网应用程序”，ARIA属性的存在使得更复杂的小部件和定制工具可以方便地使用。围绕ARIA属性的许多困惑来自于它们在历史上的使用方式，这在今天并不一定相同。在HTML4中，语义元素要少得多。如果开发人员想要包含一个没有现有HTML标签的交互元素，他们必须自己创建它，然后用ARIA属性增加它以实现完全的可访问性。现在，这种情况越来越少，因为HTML5元素种类繁多——通过扩展，对ARIA属性的需求已经减少了(只要你在语义上编码)。如果使用原生HTML5元素，您不需要包括ARIA属性:这些功能已经是内置的。因此，开发人员应该尽可能使用语义HTML元素。

有些情况下ARIA属性仍然有用。以下是一些最常见的:

使用ARIA Live发布内容变更。在现代应用程序中，在初始页面加载完成后，新内容出现在屏幕上是很常见的，比如自动更新的提要或通知。这些对于一些用户来说可能是显而易见的，但是对于那些使用屏幕阅读器的用户来说就不一样了。包含aria-live允许您在页面上标记将加载动态内容的区域，基本上是告诉辅助技术关注这个空间的更新。您可以将aria-live设置为礼貌或自信。这决定了屏幕阅读器是等待下一个空闲期来宣布内容更新，还是中断用户来立即宣布。正如你可能想象的那样，礼貌应该是你应该做的事情，除非通知确实是即时和紧急的。

<div id="notification" aria-live="polite"> <p>New notifications will populate here</p> </div>

ARIA标签用于不包含文本的元素。这里一个常见的例子是一个按钮，它使用图标来标识，但没有文本。在这种情况下，您应该包含aria-label，以便为您的元素提供一个可访问的名称。

<button aria-label="Submit form">

<img src="enter-icon.png">

</button>

ARIA角色用于没有语义对等物的元素。如果你正在创建一个不能使用内置HTML5元素的定制小部件，你应该通过给它分配一个aria-role来告诉你的用户你的元素是做什么的。这为您的用户提供了额外的上下文来帮助理解您的布局。

<div aria-role="toolbar">

<button>Edit</button>

<button>Save</button>

<button>Refresh</button>

</div>

6.使用屏幕阅读器时，这听起来像什么？

这个可访问性难题的最后一部分是唯一需要您寻找额外资源的部分:屏幕阅读器。好消息是，几乎每个主要的操作系统都有内置的屏幕阅读器，这是最常见的两种Mac版的VoiceOver和Windows版的“讲述人”。您可以在操作系统的“系统偏好设置”中打开这些选项，然后像平常一样导航并监听您的组件！

当与纯键盘导航结合使用时，这是一个特别强大的测试。当你试图完成一项任务时，你会立即感觉到什么是难以浏览的，以及有多少内容是大声朗读的。我强烈建议你站在用户的立场上走一英里，至少花一天时间(但最好是更长时间——甚至一整周？)在打开屏幕阅读器的情况下工作。您可能会对您的应用程序听起来的样子感到惊讶！

准备好开始了吗？

起初，编写易理解的代码可能看起来令人生畏，但是一旦你尝试过，你会很快发现它并不可怕。这是一个很容易陷入困境的话题——有很多与可访问性相关的内容——但是要确保你不会陷入研究阶段而推迟实际的实现。您可以做出的任何改进都比完全忽略可访问性要好。把它分成易于管理的小块，并开始实施上面的一些想法。辅助功能对所有用户都有好处，所以确保你没有错过这些提高应用可用性的好方法！

学习更多JAVA知识与技巧，关注与私信博主

免费学习领取JAVA 课件，源码，安装包等资料  https://docs.qq.com/doc/DVGJkS1lRRWdrV3hk