如何忽略證書繼續(xù)訪問

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成為我們使用網(wǎng)絡(luò)方式中最重要的方面之一，即使不是最重要的方面。 僅在2017年至2018年之間，有關(guān)網(wǎng)絡(luò)可訪問性的聯(lián)邦法院案件數(shù)量幾乎增加了兩倍，這表明可訪問性趨勢對用戶越來越重要。 對此，它對網(wǎng)站所有者也必須很重要。

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.

考慮到所有這些，根據(jù)WCAG(Web內(nèi)容可訪問性指南)，很難相信Web上超過98％的站點(diǎn)都無法訪問。 WCAG是網(wǎng)絡(luò)可訪問性的真實(shí)來源，它是幾乎所有網(wǎng)絡(luò)可訪問性法院案件中被告所遵循的標(biāo)準(zhǔn)。

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:

畢竟，為什么還有那么多無法訪問的網(wǎng)站？ 也許是因?yàn)椴换〞r(shí)間和資源來理解適當(dāng)?shù)目稍L問性準(zhǔn)則會更容易。 而且，當(dāng)Web開發(fā)人員和設(shè)計(jì)人員在工作中不考慮可訪問性時(shí)，很容易制造出容易被忽視的錯誤。 在本文中，我們將介紹網(wǎng)絡(luò)上五個(gè)最被忽視的可訪問性問題，以及如何解決這些問題：

• Insufficient Color Contrast

  色彩對比度不足

• Heading Level Order

  標(biāo)題級別順序

• Missing Alt Text/Link Text

  缺少替代文字/鏈接文字

• No Keyboard Focus Indicator

  沒有鍵盤對焦指示

• No Skip Links

  沒有跳過鏈接

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

The image on the left demonstrates bad color contrast while the image on the right demonstrates good color contrast.左側(cè)的圖像顯示出較差的色彩對比度，而右側(cè)的圖像顯示出良好的色彩對比度。

問題陳述 (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.

在此列表中看到顏色對比并不奇怪，因?yàn)樗蔷W(wǎng)絡(luò)上最常見的可訪問性問題之一。 當(dāng)頁面上的文本的顏色與其背景的顏色之間沒有足夠的視覺區(qū)分時(shí)，就會出現(xiàn)顏色對比度不足的情況，從而使用戶難以閱讀文本。

受影響的用戶 (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.

色彩對比度不足對于低視力用戶來說是一個(gè)巨大的問題，他們可能無法感知您的內(nèi)容，但視嚴(yán)重程度而定，對于有理想視力的人也可能難以辨認(rèn)。 擁有適當(dāng)?shù)纳蕦Ρ榷?#xff0c;不僅可以為低視力用戶提供更好的觀看體驗(yàn)，還可以為所有視力良好的用戶提供更好的觀看體驗(yàn)。

法律風(fēng)險(xiǎn) (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)).

如果您的網(wǎng)站不符合顏色對比標(biāo)準(zhǔn)，則顏色對比可能會對您的公司構(gòu)成一定的法律風(fēng)險(xiǎn)。 WCAG 2.1規(guī)范指出，對于AA合規(guī)性(大多數(shù)網(wǎng)絡(luò)可訪問性法院案件中使用的合規(guī)性水平)，對于任何文本或文本圖片，您都必須具有至少4.5：1的對比度； 對于大文本，它的比例至少應(yīng)為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.

解決方案是首先使用斧頭之類的工具審核您的網(wǎng)站，并識別網(wǎng)站上所有顏色對比度不足的區(qū)域。 在這里，您可以調(diào)整文本顏色和/或背景顏色，以獲得適當(dāng)?shù)膶Ρ榷取?

標(biāo)題級別順序 (Heading Level Order)

A demonstration of proper heading tag order.正確的標(biāo)題標(biāo)簽順序的演示。

問題陳述 (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中讓語義標(biāo)題亂七八糟會給許多用戶帶來麻煩。 一些Web設(shè)計(jì)人員和開發(fā)人員可能不會對在h1下方直接使用h3元素三思而后行。 乍看起來這似乎不是一個(gè)小問題，但是如果在頁面上隨意散布隨機(jī)標(biāo)題級別，情況可能會變得更糟。 這對于屏幕閱讀器用戶特別重要，因?yàn)槿绻麄円刺囟?biāo)題級別瀏覽頁面，則必須以正確的順序放置頁面標(biāo)題，以使屏幕閱讀器用戶可以理解。

受影響的用戶 (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中具有正確的標(biāo)題級別順序特別有用。 但是您必須記住，要幫助我們的所有用戶，擁有有意義的標(biāo)題順序就更為重要。 因?yàn)闆]有那個(gè)，那么您的用戶將不會理解您的標(biāo)題。

法律風(fēng)險(xiǎn) (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不需要語義標(biāo)題級別順序，這是它可能是一個(gè)非常容易被忽略的問題的原因之一。 除非您的標(biāo)題過于混亂以致用戶無法理解您網(wǎng)站上的訂單，否則標(biāo)題級別的訂單不會構(gòu)成任何法律風(fēng)險(xiǎn)。

解 (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.

解決方案是確保頁面的第一個(gè)標(biāo)題始終是h1標(biāo)記，并且其后僅是層次結(jié)構(gòu)中下一個(gè)標(biāo)題級別。 隨后的每個(gè)標(biāo)簽也是如此，它們后面只能有一個(gè)不超過1級差異的標(biāo)題。

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:

如果要根據(jù)從標(biāo)題標(biāo)簽獲得的文本大小完全重新設(shè)計(jì)應(yīng)用程序需要太多工作，則解決此問題的一種簡單方法是使用標(biāo)題標(biāo)簽的aria-level屬性。 該屬性采用一個(gè)字符串，該字符串包含一個(gè)與您希望它在DOM中的相應(yīng)標(biāo)題標(biāo)簽相對應(yīng)的數(shù)字。 考慮以下標(biāo)題標(biāo)記：

<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.

該標(biāo)題具有h3標(biāo)簽的外觀樣式，但是在DOM中，當(dāng)屏幕閱讀器讀取時(shí)，它就是h2標(biāo)簽。 當(dāng)然，只有在標(biāo)題已經(jīng)按照邏輯順序排列并且您沒有使用正確的標(biāo)簽的情況下，這樣做才能解決問題。 如果標(biāo)題不是按邏輯順序排列，則最佳做法是按照在標(biāo)題級別層次結(jié)構(gòu)中有意義的方式對它們進(jìn)行重組。

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

Bad Alt Text: A picture of a mountain. Bad Alt Text：一張山的圖片。 Good Alt Text: Snow-covered Mt. Fuji in the background with cherry-blossom trees in the foreground良好的替代文字：白雪覆蓋的山 富士在背景中，櫻桃花樹在前景中

問題陳述 (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.

缺少替代文本和鏈接文本問題可能是其中一些最嚴(yán)重的Web可訪問性違規(guī)行為。 替代文字使圖像可以解釋為文字。 當(dāng)您忽略在圖像中添加有用的替代文本時(shí)，您將使盲人和弱視用戶完全不了解您試圖向受眾展示什么。 缺少鏈接文本可能會更糟，尤其是如果鏈接在您的網(wǎng)站上執(zhí)行基本功能時(shí)。 如果需要在您的站點(diǎn)上執(zhí)行某項(xiàng)操作的盲目鍵盤并且該操作的鏈接沒有與之關(guān)聯(lián)的文本，則幾乎是不可能的。

受影響的用戶 (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.

缺少替代文字和鏈接文字對使用屏幕閱讀器瀏覽網(wǎng)絡(luò)的盲人用戶產(chǎn)生深遠(yuǎn)的負(fù)面影響。 許多屏幕閱讀器用戶喜歡通過其鏈接列表來導(dǎo)航網(wǎng)站。 如果鏈接缺少文本，則它們不會向用戶提供有關(guān)將用戶帶到何處的信息。 另外，網(wǎng)站上所有沒有替代文字的圖片對他們來說都是完全沒有用的。

法律風(fēng)險(xiǎn) (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.

如果未選中，則缺少替代文本和/或鏈接文本可能會帶來巨大的法律風(fēng)險(xiǎn)。 WCAG規(guī)范的第一條準(zhǔn)則規(guī)定，所有非文本內(nèi)容都必須具有某種替代文本(成功標(biāo)準(zhǔn)1.1.1非文本內(nèi)容)。 這涵蓋了圖像和許多其他方面的鏈接。 要注意的另一件事是，如果您的網(wǎng)站允許用戶生成自己的內(nèi)容以發(fā)布到您的網(wǎng)站上，則根據(jù)ATAG(授權(quán)工具可訪問性指南)，您有責(zé)任確保其生成的內(nèi)容符合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

對于替代文本，您需要確保站點(diǎn)上的每個(gè)圖像都具有替代文本，而不僅僅是隨機(jī)的替代文本。 帶有錯誤的替代文字的圖像就像沒有任何文字一樣無用。 有時(shí)，如果夠糟糕的話，替代文字可能會損害用戶的體驗(yàn)。 重要的是，圖像的替代文字必須具有描述性，且不能過長。 要了解有關(guān)編寫優(yōu)質(zhì)替代文本的更多信息，請查看艾米·利克(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.

對于鏈接文本，有時(shí)鏈接本身內(nèi)部不會包含任何文本。 在這些情況下，您可以使用aria-label和aria-labeledby為鏈接提供適當(dāng)?shù)幕谖谋镜奶娲椒ā?在錨標(biāo)記上使用aria-label屬性將使您可以傳遞一個(gè)字符串，該字符串將是屏幕閱讀器為該鏈接讀取的標(biāo)簽。 aria-labelledby屬性允許您傳遞一個(gè)字符串，該字符串包含要用作鏈接標(biāo)簽的文本的元素的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.

整個(gè)用戶群幾乎無法導(dǎo)航的另一個(gè)問題是沒有鍵盤焦點(diǎn)指示器。 當(dāng)用戶嘗試使用鍵盤在您的網(wǎng)站上切換時(shí)，發(fā)現(xiàn)您的網(wǎng)站沒有焦點(diǎn)指示器時(shí)，他們將無法找到他們在頁面上的位置。

受影響的用戶 (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.

對于視力不佳的鍵盤用戶(例如運(yùn)動技能低下的人或受傷而無法使用四肢的人)，焦點(diǎn)指示器是唯一告訴他們在頁面上位置的信息。 這會使您的網(wǎng)站無法被這些用戶使用。

法律風(fēng)險(xiǎn) (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).

您網(wǎng)站上沒有焦點(diǎn)指示器可能會對您的公司構(gòu)成法律風(fēng)險(xiǎn)。 WCAG指出，您網(wǎng)站上任何可通過鍵盤訪問的界面都必須具有某種操作模式，并且必須具有可見的焦點(diǎn)指示器(“成功標(biāo)準(zhǔn)2.4.7可見焦點(diǎn)”)。

解 (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.

對于不熟悉可訪問性的網(wǎng)站所有者來說，他們可能不會選擇瀏覽其網(wǎng)站以查看發(fā)生了什么。 實(shí)際上，這是測試網(wǎng)站可訪問性的非常重要的一步。 重要的是，嘗試僅用鍵盤瀏覽您的網(wǎng)站，并確保您可以執(zhí)行任何用戶在您的網(wǎng)站上需要執(zhí)行的所有相同操作。 如果發(fā)現(xiàn)無法執(zhí)行這些操作，則肯定需要采取措施來改善站點(diǎn)的鍵盤可訪問性。 進(jìn)行此簡單測試將幫助您確定整個(gè)站點(diǎn)中的許多其他可訪問性問題，例如鍵盤陷阱或沒有意義的制表符順序。 一旦確定了站點(diǎn)是否缺少焦點(diǎn)指示器，就可以采取必要的措施將它們添加到需要的地方。

沒有跳過鏈接 (No Skip Links)

An example of a UI wireframe demonstrating a skip link展示跳過鏈接的UI線框示例

問題陳述 (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.

在現(xiàn)代網(wǎng)站中，我最喜歡的可訪問性趨勢之一就是包含了跳過鏈接。 當(dāng)用戶訪問您的網(wǎng)站時(shí)，頁面頂部的第一件事很可能不是頁面的主要內(nèi)容。 通常會有一個(gè)帶有一些導(dǎo)航的標(biāo)頭和一個(gè)指向網(wǎng)站上其余頁面的鏈接列表。 對于試圖僅通過鍵盤訪問您的網(wǎng)站的用戶，他們必須先瀏覽所有這些鏈接，然后才能到達(dá)預(yù)期的目標(biāo)。 跳過鏈接使您的用戶可以繞過網(wǎng)站的某些部分，而這些部分將不得不經(jīng)過制表才能到達(dá)其預(yù)期的內(nèi)容。

受影響的用戶 (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.

跳過鏈接通常對有視和無視鍵盤用戶的影響最大。 對于這些用戶，他們可以瀏覽頁面的唯一方法是通過在頁面上進(jìn)行制表或使用屏幕閱讀器的軟件將焦點(diǎn)移到屏幕的特定區(qū)域。 添加跳過鏈接將為我們的鍵盤用戶節(jié)省麻煩，他們不必通過導(dǎo)航進(jìn)行制表或必須訪問其屏幕閱讀器的更深入的功能才能到達(dá)所需的位置。 只需單擊頁面頂部的鏈接即可。

法律風(fēng)險(xiǎn) (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不需要跳過鏈接，因此，如果您不包含跳過鏈接，則不會對您的網(wǎng)站構(gòu)成任何法律風(fēng)險(xiǎn)。 因此，許多網(wǎng)站所有者可能不會覺得有必要在自己的網(wǎng)站上添加一個(gè)，但他們?yōu)槟逆I盤用戶提供的好處可能是非常寶貴的。 如果您的導(dǎo)航中包含大量鏈接，使這些鏈接的瀏覽變得很費(fèi)力，則尤其如此。

解 (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/

使用跳過鏈接，您可以在頁面頂部放置一個(gè)“跳過導(dǎo)航”或“跳到主要內(nèi)容”按鈕，單擊該按鈕會將用戶的鍵盤焦點(diǎn)發(fā)送到主要內(nèi)容區(qū)域的頂部或其中的第一個(gè)可聚焦元素。 有幾種不同的構(gòu)建跳過鏈接的方法，但我不會一一列舉。 有很多文章可以幫助您為自己的網(wǎng)站建立一個(gè)跳過鏈接，例如： https : //axesslab.com/skip-links/

結(jié)論 (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.

隨著當(dāng)今可訪問性在萬維網(wǎng)中變得越來越重要，我們作為Web開發(fā)人員和設(shè)計(jì)人員需要開始采取措施以反映這些變化。 我們可以做的最好的事情就是幫助我們了解網(wǎng)站的可訪問性，并確保我們知道和使用WCAG中的內(nèi)容，以使我們對可訪問性的當(dāng)前狀況有所了解。 如果所有網(wǎng)站所有者都花時(shí)間在其所有網(wǎng)站上修復(fù)這5件事，那么今天的Web將變得更加容易訪問。

翻譯自: https://medium.com/cross-team/top-5-most-overlooked-accessibility-issues-c0c8018c1eab

如何忽略證書繼續(xù)訪問

總結(jié)

以上是生活随笔為你收集整理的如何忽略证书继续访问_前5个最容易被忽视的可访问性问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。