Accessibility is quickly becoming one of the most important aspects of the way we use the web, if not the most important. Just between 2017 and 2018, the number of federal court cases regarding web accessibility nearly tripled, signifying the trend of accessibility becoming more and more important to users. In response, it will have to be important to website owners as well.

可访问性正在Swift成为我们使用网络方式中最重要的方面之一，即使不是最重要的方面。 仅在2017年至2018年之间，有关网络可访问性的联邦法院案件数量几乎增加了两倍，这表明可访问性趋势对用户越来越重要。 对此，它对网站所有者也必须很重要。

With all this in mind, it’s hard to believe that over 98% of sites on the web are inaccessible according to the WCAG (Web Content Accessibility Guidelines). The WCAG is the source of truth for web accessibility and it is the standard that the defendants are held to in almost all web accessibility court cases.

考虑到所有这些，根据WCAG(Web内容可访问性指南)，很难相信Web上超过98％的站点都无法访问。 WCAG是网络可访问性的真实来源，它是几乎所有网络可访问性法院案件中被告所遵循的标准。

So after all this why are there still so many inaccessible websites? Perhaps because it’s easier to not put in the time and resources necessary to understand the proper guidelines for accessibility. And when web developers and designers don’t take accessibility into account in their work, it becomes very easy to create mistakes that are overlooked. In this article we’ll go over five of the most overlooked accessibility issues on the web and how to resolve them:

毕竟，为什么还有那么多无法访问的网站？ 也许是因为不花时间和资源来理解适当的可访问性准则会更容易。 而且，当Web开发人员和设计人员在工作中不考虑可访问性时，很容易制造出容易被忽视的错误。 在本文中，我们将介绍网络上五个最被忽视的可访问性问题，以及如何解决这些问题：

• Insufficient Color Contrast

  色彩对比度不足

• Heading Level Order

  标题级别顺序

• Missing Alt Text/Link Text

  缺少替代文字/链接文字

• No Keyboard Focus Indicator

  没有键盘对焦指示

• No Skip Links

  没有跳过链接

色彩对比度不足 (Insufficient Color Contrast)

问题陈述 (Problem Statement)

It should come as no surprise to see color contrast on this list, as it is one of the most common accessibility issues out there on the web. Insufficient color contrast occurs when there is not enough of a visual distinction between the color the text on a page and its background, making it difficult for users to read the text.

在此列表中看到颜色对比并不奇怪，因为它是网络上最常见的可访问性问题之一。 当页面上的文本的颜色与其背景的颜色之间没有足够的视觉区分时，就会出现颜色对比度不足的情况，从而使用户难以阅读文本。

受影响的用户 (Affected Users)

Insufficient color contrast poses a huge issue for low-vision users who will likely not be able to perceive your content, but depending on the severity it could even be illegible to someone with perfect vision as well. Having proper color contrast provides a better viewing experience not only for your low-vision users, but for all of your sighted users as a whole.

色彩对比度不足对于低视力用户来说是一个巨大的问题，他们可能无法感知您的内容，但视严重程度而定，对于有理想视力的人也可能难以辨认。 拥有适当的色彩对比度，不仅可以为低视力用户提供更好的观看体验，还可以为所有视力良好的用户提供更好的观看体验。

法律风险 (Legal Risks)

Color contrast can pose a definite legal risk to your company if your website fails to meet color contrast standards. The WCAG 2.1 spec states that for AA compliance (the level of compliance used in most web accessibility court cases) you need to have a contrast ratio of at least 4.5:1 for any text or pictures of text; for large text it needs to be a ratio of at least 3:1 (Success Criterion 1.4.3 Contrast (Minimum)).

如果您的网站不符合颜色对比标准，则颜色对比可能会对您的公司构成一定的法律风险。 WCAG 2.1规范指出，对于AA合规性(大多数网络可访问性法院案件中使用的合规性水平)，对于任何文本或文本图片，您都必须具有至少4.5：1的对比度； 对于大文本，它的比例至少应为3：1(成功条件1.4.3对比度(最小值))。

解 (Solution)

The solution is to first audit your site using a tool like axe and identify all of the areas on your website that have insufficient color contrast. From there you can adjust your text colors and/or your background colors to achieve the proper contrast.

解决方案是首先使用斧头之类的工具审核您的网站，并识别网站上所有颜色对比度不足的区域。 在这里，您可以调整文本颜色和/或背景颜色，以获得适当的对比度。

标题级别顺序 (Heading Level Order)

问题陈述 (Problem Statement)

Having your semantic headings out of order in the DOM can pose issues for many of your users. Some web designers and developers may not think twice about using an h3 element directly underneath an h1. This may not seem like a minor issue at first, but it can get much worse if random heading levels are thrown around the page without thought. This is particularly important for screen reader users because if they want to navigate the page by specific heading levels the page’s headings have to be laid in the correct order for it to make sense to the screen reader users.

在DOM中让语义标题乱七八糟会给许多用户带来麻烦。 一些Web设计人员和开发人员可能不会对在h1下方直接使用h3元素三思而后行。 乍看起来这似乎不是一个小问题，但是如果在页面上随意散布随机标题级别，情况可能会变得更糟。 这对于屏幕阅读器用户特别重要，因为如果他们要按特定标题级别浏览页面，则必须以正确的顺序放置页面标题，以使屏幕阅读器用户可以理解。

受影响的用户 (Affected Users)

Having a proper heading level order in the DOM is specifically helpful for blind users who utilize screen readers. But you must keep in mind, that to help all of our users, it is far more important to have a heading order that makes sense. Because without that, then none of your users will understand your headings.

对于使用屏幕阅读器的盲人用户，在DOM中具有正确的标题级别顺序特别有用。 但是您必须记住，要帮助我们的所有用户，拥有有意义的标题顺序就更为重要。 因为没有那个，那么您的用户将不会理解您的标题。

法律风险 (Legal Risks)

The semantic heading level order is not a requirement in the WCAG, which is one of the reasons that it can be a very easily overlooked issue. Unless your headings are so out of order that your users can’t understand the order on your site, then heading level order shouldn’t pose any legal risks.

WCAG不需要语义标题级别顺序，这是它可能是一个非常容易被忽略的问题的原因之一。 除非您的标题过于混乱以致用户无法理解您网站上的订单，否则标题级别的订单不会构成任何法律风险。

解 (Solution)

The solution is to make sure your page’s first heading should always be an h1 tag and it should only be followed by the heading level that is next in the hierarchy. The same goes for each tag that follows, they can only be followed by a heading with no more than 1 level of difference.

解决方案是确保页面的第一个标题始终是h1标记，并且其后仅是层次结构中下一个标题级别。 随后的每个标签也是如此，它们后面只能有一个不超过1级差异的标题。

If it would be too much work to completely redesign your app based on the text sizes you’re getting from the heading tags, one simple way of fixing this issue is to use the aria-level property of your heading tags. The property takes a string containing a number corresponding to the respective heading tag that you want it to be in the DOM. Consider the following heading tag:

如果要根据从标题标签获得的文本大小完全重新设计应用程序需要太多工作，则解决此问题的一种简单方法是使用标题标签的aria-level属性。 该属性采用一个字符串，该字符串包含一个与您希望它在DOM中的相应标题标签相对应的数字。 考虑以下标题标记：

<h3 aria-level=”2”>

This heading would have the visual styles of an h3 tag, but in the DOM and when read by screen readers it would be an h2 tag. Of course, doing this would only solve the issue if your headings already were in a logical order, and you just weren’t using the right tags. If your headings are not in a logical order, your best course of action is to reorganize them in a way that makes sense in the heading level hierarchy.

该标题具有h3标签的外观样式，但是在DOM中，当屏幕阅读器读取时，它就是h2标签。 当然，只有在标题已经按照逻辑顺序排列并且您没有使用正确的标签的情况下，这样做才能解决问题。 如果标题不是按逻辑顺序排列，则最佳做法是按照在标题级别层次结构中有意义的方式对它们进行重组。

缺少替代文字/链接文字 (Missing Alt Text/Link Text)

问题陈述 (Problem Statement)

Missing alt text and link text issues are probably some of the most egregious web accessibility violations out there. Alt text is what enables images to be interpreted as text. When you neglect to add useful alt text to your images you are leaving your blind and low-vision users completely in the dark about what you are trying to show your audience. Missing link text can be even worse, especially if the link performs an essential function on your site. If a non-sighted keyboard needed to perform an action on your site and the link for that action had no text associated with it, it would be nearly impossible.

缺少替代文本和链接文本问题可能是其中一些最严重的Web可访问性违规行为。 替代文字使图像可以解释为文字。 当您忽略在图像中添加有用的替代文本时，您将使盲人和弱视用户完全不了解您试图向受众展示什么。 缺少链接文本可能会更糟，尤其是如果链接在您的网站上执行基本功能时。 如果需要在您的站点上执行某项操作的盲目键盘并且该操作的链接没有与之关联的文本，则几乎是不可能的。

受影响的用户 (Affected Users)

Missing alt text and link text have a profound negative effect on blind users who use a screen reader to navigate the web. Many screen reader users like to navigate the site by a list of its links. If the links are missing text, then they provide no information to the user regarding where they will take the user to. Plus every image on site without alt text is completely useless to them.

缺少替代文字和链接文字对使用屏幕阅读器浏览网络的盲人用户产生深远的负面影响。 许多屏幕阅读器用户喜欢通过其链接列表来导航网站。 如果链接缺少文本，则它们不会向用户提供有关将用户带到何处的信息。 另外，网站上所有没有替代文字的图片对他们来说都是完全没有用的。

法律风险 (Legal Risks)

Having missing alt text and/or link text can be a huge legal risk if left unchecked. The very first guideline of the WCAG spec states that all non-text content must have some sort of text alternative (Success Criterion 1.1.1 Non-text Content). This covers images and links among many other things. Another thing to note is that if your website allows your users to generate their own content to post on your site, then according to ATAG (Authoring Tool Accessibility Guidelines) you are responsible for making sure that the content they generate conforms to the WCAG guidelines as well.

如果未选中，则缺少替代文本和/或链接文本可能会带来巨大的法律风险。 WCAG规范的第一条准则规定，所有非文本内容都必须具有某种替代文本(成功标准1.1.1非文本内容)。 这涵盖了图像和许多其他方面的链接。 要注意的另一件事是，如果您的网站允许用户生成自己的内容以发布到您的网站上，则根据ATAG(授权工具可访问性指南)，您有责任确保其生成的内容符合WCAG指南，好。

解 (Solution)

For alt text, you need to be making sure that every single image on your site has alt text, and not just any random alt text. Having an image with bad alt text is just as useless as not having any. Sometimes if it’s bad enough, alt text can be detrimental to the user’s experience. It is important that an image’s alt text be descriptive without being too long. To learn more about writing good alt text, check out this article by Amy Leak: https://medium.com/@amyalexandraleak/should-you-use-alt-text-or-a-caption-48311e259ded

对于替代文本，您需要确保站点上的每个图像都具有替代文本，而不仅仅是随机的替代文本。 带有错误的替代文字的图像就像没有任何文字一样无用。 有时，如果够糟糕的话，替代文字可能会损害用户的体验。 重要的是，图像的替代文字必须具有描述性，且不能过长。 要了解有关编写优质替代文本的更多信息，请查看艾米·利克(Amy Leak)撰写的这篇文章： https : //medium.com/@amyalexandraleak/should-you-use-alt-text-or-a-caption-48311e259ded

For link text, there may be times where the link itself won’t have any text inside of it. In those cases you can use the aria-label and aria-labelledby to give your links a proper text-based alternative. Using the aria-label property on an anchor tag will allow you to pass a string that will be the label read by the screen reader for the link. The aria-labelledby property allows you to pass a string containing the IDs of the elements that have the text you want to use as a label for the link.

对于链接文本，有时链接本身内部不会包含任何文本。 在这些情况下，您可以使用aria-label和aria-labeledby为链接提供适当的基于文本的替代方法。 在锚标记上使用aria-label属性将使您可以传递一个字符串，该字符串将是屏幕阅读器为该链接读取的标签。 aria-labelledby属性允许您传递一个字符串，该字符串包含要用作链接标签的文本的元素的ID。

没有键盘对焦指示 (No Keyboard Focus Indicator)

.class-name:focus {
  outline: 3px solid orange
}

问题陈述 (Problem Statement)

Another issue that can make website navigation nearly impossible for an entire group of your users is having no keyboard focus indicator. When a user tries to tab through your site using their keyboard and they find that your site has no focus indicators, they won’t be able to find where they are on your page.

整个用户群几乎无法导航的另一个问题是没有键盘焦点指示器。 当用户尝试使用键盘在您的网站上切换时，发现您的网站没有焦点指示器时，他们将无法找到他们在页面上的位置。

受影响的用户 (Affected Users)

For sighted keyboard users, such as people with low motor skills or people who have an injury that prevents the use of their limbs, the focus indicator is the only thing telling them where they are on the page. This makes your site unusable for these users.

对于视力不佳的键盘用户(例如运动技能低下的人或受伤而无法使用四肢的人)，焦点指示器是唯一告诉他们在页面上位置的信息。 这会使您的网站无法被这些用户使用。

法律风险 (Legal Risks)

Having no focus indicators on your site can pose a legal risk to your company. The WCAG states that any interface on your site that can be accessed by a keyboard must have some mode of operation where it has a visible focus indicator (Success Criterion 2.4.7 Focus Visible).

您网站上没有焦点指示器可能会对您的公司构成法律风险。 WCAG指出，您网站上任何可通过键盘访问的界面都必须具有某种操作模式，并且必须具有可见的焦点指示器(“成功标准2.4.7可见焦点”)。

解 (Solution)

For a website owner who’s not well versed in accessibility, it may not occur to them to tab through their website to see what happens. This is actually a very important step to testing the accessibility of your website. It’s important to try navigating your site with just a keyboard and make sure that you can perform all the same actions any user would need to on your site. If you find that you can’t perform those actions, then measures definitely need to be taken to improve your site’s keyboard accessibility. Doing this simple test will help you identify many other accessibility issues across your site as well, such as keyboard traps, or tab orders that don’t make sense. Once you have determined whether or not your site is missing focus indicators, you can take the necessary measures to add them where need be.

对于不熟悉可访问性的网站所有者来说，他们可能不会选择浏览其网站以查看发生了什么。 实际上，这是测试网站可访问性的非常重要的一步。 重要的是，尝试仅用键盘浏览您的网站，并确保您可以执行任何用户在您的网站上需要执行的所有相同操作。 如果发现无法执行这些操作，则肯定需要采取措施来改善站点的键盘可访问性。 进行此简单测试将帮助您确定整个站点中的许多其他可访问性问题，例如键盘陷阱或没有意义的制表符顺序。 一旦确定了站点是否缺少焦点指示器，就可以采取必要的措施将它们添加到需要的地方。

没有跳过链接 (No Skip Links)

问题陈述 (Problem Statement)

One of my favorite accessibility trends in modern websites is the inclusion of skip links. When a user comes to your site, the first thing at the top of the page is most likely not the main content of the page. Usually there’s a header with some navigation and a list of links to the rest of the pages on the site. For a user trying to access your site from only a keyboard, they would have to tab through all of those links before they could get to their intended target. Skip links allow your users to bypass the parts of your website they would have to tab through to get to their intended content.

在现代网站中，我最喜欢的可访问性趋势之一就是包含了跳过链接。 当用户访问您的网站时，页面顶部的第一件事很可能不是页面的主要内容。 通常会有一个带有一些导航的标头和一个指向网站上其余页面的链接列表。 对于试图仅通过键盘访问您的网站的用户，他们必须先浏览所有这些链接，然后才能到达预期的目标。 跳过链接使您的用户可以绕过网站的某些部分，而这些部分将不得不经过制表才能到达其预期的内容。

受影响的用户 (Affected Users)

Skip links generally have the biggest effect on keyboard users, both sighted and non-sighted. For these users the only way they can navigate through the page is by tabbing through it, or using by using a screen reader’s software to move your focus to a specific area of the screen. Adding a skip link would save our keyboard users the trouble of having to tab through navigation or having to access the deeper features of their screen reader to get to where they want to go. It would be as simple as clicking the link at the top of the page.

跳过链接通常对有视和无视键盘用户的影响最大。 对于这些用户，他们可以浏览页面的唯一方法是通过在页面上进行制表或使用屏幕阅读器的软件将焦点移到屏幕的特定区域。 添加跳过链接将为我们的键盘用户节省麻烦，他们不必通过导航进行制表或必须访问其屏幕阅读器的更深入的功能才能到达所需的位置。 只需单击页面顶部的链接即可。

法律风险 (Legal Risks)

Skip links aren’t required by the WCAG, so they won’t pose any legal risk to your site if you don’t include one. Because of this many website owners might not feel the need to add one to/’ their site, but the benefit they provide to your keyboard users can be incredibly valuable. This is especially true if your navigation contains a large number of links that would make tabbing through them all painstaking.

WCAG不需要跳过链接，因此，如果您不包含跳过链接，则不会对您的网站构成任何法律风险。 因此，许多网站所有者可能不会觉得有必要在自己的网站上添加一个，但他们为您的键盘用户提供的好处可能是非常宝贵的。 如果您的导航中包含大量链接，使这些链接的浏览变得很费力，则尤其如此。

解 (Solution)

With skip links, you are able to put a “Skip Navigation” or Skip to Main Content” button at the top of your page that, when clicked, will send the user’s keyboard focus to the top of the main content area, or to the first focusable element inside it. There are several different ways of building skip links, but I won’t be going over every way to build one. There are plenty of articles out there that can help you build a skip link for your own site, such as this one: https://axesslab.com/skip-links/

使用跳过链接，您可以在页面顶部放置一个“跳过导航”或“跳到主要内容”按钮，单击该按钮会将用户的键盘焦点发送到主要内容区域的顶部或其中的第一个可聚焦元素。 有几种不同的构建跳过链接的方法，但我不会一一列举。 有很多文章可以帮助您为自己的网站建立一个跳过链接，例如： https : //axesslab.com/skip-links/

结论 (Conclusion)

As accessibility becomes increasingly important in the World Wide Web today, we as web developers and designers need to start taking measures to reflect these changes. The best thing we can do to help the accessibility of our sites is to keep ourselves educated on the current state of affairs in accessibility and making sure that we know and use what’s in the WCAG. If all website owners took the time to fix these 5 things in all of their sites, then the Web would be a much more accessible place today.

随着当今可访问性在万维网中变得越来越重要，我们作为Web开发人员和设计人员需要开始采取措施以反映这些变化。 我们可以做的最好的事情就是帮助我们了解网站的可访问性，并确保我们知道和使用WCAG中的内容，以使我们对可访问性的当前状况有所了解。 如果所有网站所有者都花时间在其所有网站上修复这5件事，那么今天的Web将变得更加容易访问。