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將變得更加容易訪問。