如何讓代碼更易于維護

by Jaroslav Vaňkát

通過JaroslavVaňkát

如何輕松地使您的網站更易于訪問 (How you can easily make your website more accessible)

As a designer, developer, or even product manager, you have thousands of responsibilities. Every project requires a lot of attention — desktop layout, mobile layout, iPhone X layout (thanks, Apple), IE support, Safari support…

作為設計師，開發人員甚至產品經理，您負有成千上萬的責任。每個項目都需要大量關注-桌面布局，移動布局，iPhone X布局(感謝Apple)，IE支持，Safari支持…

那么，為什么要關心可訪問性呢？ (So why should you care about accessibility?)

Here are some hard facts:

以下是一些困難的事實：

About 15% of the world’s population lives with some form of disability, of whom 2–4% experience significant difficulties in functioning. (World Health Organization)
世界上約有15％的人口患有某種形式的殘疾，其中2-4％的人在運作方面遇到重大困難。 ( 世界衛生組織 )
Everybody is sometimes temporarily disabled — in a sense — whether you cut your finger or you try to read on your low contrast screen on a sunny day.
有時，從某種意義上來說，每個人有時都暫時處于殘疾狀態，無論您是割斷手指還是嘗試在晴朗的一天在低對比度屏幕上閱讀。
In certain cases, accessibility might be required by law.
在某些情況下，法律可能要求可訪問性。

And most important of all:

最重要的是：

Everybody is a keyboard user when they are eating with their mouse hand.

每個人用鼠標吃飯時都是鍵盤用戶。

— Adrian Roselli

—阿德里安·羅塞利(Adrian Roselli)

By improving the accessibility of your website, you don’t only support disabled people. You will simply make it more usable for everyone.

通過改善網站的可訪問性，您不僅支持殘疾人。您將使它對每個人都更有用。

不要重新發明輪子 (Don’t reinvent the wheel)

We at Site Search 360 have developed a plugin that allows our customers to easily integrate our search solution into an existing website.

我們在Site Search 360中開發了一個插件，使我們的客戶可以輕松地將我們的搜索解決方案集成到現有網站中。

As we’ve grown bigger, it was clear to us that we needed to make an accessibility audit. Yes, we should have considered accessibility from the start of the project, but it’s never too late.

隨著我們變得越來越大，對我們來說很明顯，我們需要進行可訪問性審核。是的，我們應該從項目開始就考慮可訪問性，但是永遠不會太晚。

You don’t simply “turn on” accessibility.

您不只是簡單地“打開”輔助功能。

But don’t worry. Even if you have never thought about accessibility in your current project, it won’t take long to make some improvements. I can’t tell you the exact amount of time we spent making our plugin more accessible, but it wasn’t more than few work days (and about 30 commits).

但是不用擔心。即使您從未考慮過當前項目中的可訪問性，也不會花多長時間進行一些改進。我無法告訴您確切的時間，我們花了很多時間使我們的插件更易于訪問，但這不超過幾個工作日(大約30次提交)。

I will now illustrate the whole process (based on our JavaScript plugin, not a website), so you don’t have to start from the very beginning. But first:

現在，我將說明整個過程(基于我們JavaScript插件，而不是網站)，因此您不必從頭開始。但首先：

什么是輔助功能？ (What is accessibility?)

Before you get to work, you have to understand what accessibility is actually about. I’m not going to bother you with long definitions. This short sentence summarizes accessibility as I think of it:

在開始工作之前，您必須了解實際的可訪問性。我不會用冗長的定義來打擾您。我認為這句話簡短概括了可訪問性：

Accessibility is the art of making your product usable by everyone.

可訪問性是使您的產品可供所有人使用的藝術。

Who is everyone? What kinds of disabilities should you consider?

誰啊您應該考慮哪種殘疾？

Blindness and colorblindness
失明和色盲
Cognitive disabilities
認知障礙
Physical disabilities
身體殘疾
Hearing disabilities (yes, your video needs subtitles)
聽力障礙(是的，您的視頻需要字幕)
Age
年齡

一些簡單的步驟 (Some easy steps)

Now that you know for whom you are improving your website, we can start looking at the basic concepts of an accessible web.

既然您知道要為誰改進您的網站，我們就可以開始研究可訪問網絡的基本概念。

編寫語義標記 (Write semantic markup)

This is probably the most important step. HTML5 has been among us for a few years now, so there is no reason (and no excuse) for not taking advantage of it. Section, article, header, nav, banner and many others — all those tags are there to be used.

這可能是最重要的步驟。 HTML5進入我們已有幾年了，因此沒有理由(也沒有借口)不利用它。 欄目，文章，標題，導航，橫幅等-所有這些標簽都可以使用。

You’ve probably seen markup like this (I’ve omitted the classes and ids as they don’t have any semantic purpose):

您可能已經看到了這樣的標記(我省略了類和id，因為它們沒有任何語義目的)：

<div>  <div>Recipes<span>98</span></div>  <div>Menu Items<span>1</span></div>  <div>Grocery Products<span>1</span></div></div>

Believe it or not, this was our content group navigation (you could click one content group and the search result page would automatically scroll to the relevant search results). You wouldn’t guess that, would you?

信不信由你，這就是我們的內容組導航(您可以單擊一個內容組，搜索結果頁面將自動滾動到相關搜索結果)。您不會猜到，對嗎？

There are few problems with this markup. How can someone who depends on assistive technologies tell this is navigation? They can’t. Is an active element represented by div? Yes, it is.

這個標記幾乎沒有問題。依賴輔助技術的人怎么能知道這是導航？他們不能。 div代表一個活動元素嗎？是的。

Look now at the following piece of markup:

現在看下面的標記：

<nav role=”navigation”>  <ul role=”menubar”>    <li>      <button role=”menuitem”>Recipes<span>98</span></button>    </li>    <li>      <button role=”menuitem”>Menu Items<span>1</span></button>    </li>    <li>      <button role=”menuitem”>Grocery Products        <span>1</span>      </button>    </li>  </ul></nav>

Much better, isn’t it? Let’s review the most important concepts of semantic markup:

好多了，不是嗎？讓我們回顧一下語義標記的最重要概念：

Use semantic elements
使用語義元素
Always use <main role=”main”> to mark main content
始終使用<main role =“ mai n”>標記主要內容
Add role attribute to support older browsers
添加角色屬性以支持較舊的瀏覽器
Use sections instead of divs where appropriate
在適當的地方使用部分而不是div
Span is not a button — don’t repurpose the meaning of elements (unless absolutely necessary)
跨度不是按鈕 -請勿重新利用元素的含義(除非絕對必要)
Use buttons for in-page interactions
使用按鈕進行頁內互動
Headings are one of the most important parts of every webpage. Always have a single h1 heading and don’t skip heading levels
標題是每個網頁中最重要的部分之一。始終只有一個h1標題，不要跳過標題級別

I’m not going to list every change we’ve made (and there are a bunch of them), but you can always ask in the comments.

我不會列出我們所做的每項更改(有很多更改)，但是您始終可以在評論中提出。

What to do: Review your current markup, check the content and heading structure, make sure interactive elements are represented by a button or elements, and use HTML5 semantic tags.

怎么做：查看當前的標記，檢查內容和標題結構，確保交互式元素由一個或多個按鈕表示，并使用HTML5語義標記。

使用鍵盤提供所有功能 (Make all functionality available with a keyboard)

This is also an important one. Every single interaction should be possible with a keyboard.

這也是重要的。每個單獨的交互都應該可以通過鍵盤進行。

Let’s consider an example similar to the previous one. We did have a “Show more results” button that wasn’t actually a button. Can you guess? Yes, it was a styled div.

讓我們考慮一個類似于上一個示例。我們確實有一個“顯示更多結果”按鈕，但實際上并不是一個按鈕。猜一下？是的，這是一個樣式化的div 。

Could we support keyboard controls for such an element? Yes, we could, by making it focusable and handling click and keyup events while testing whether the enter or space key was pressed.

我們可以為此類元素支持鍵盤控件嗎？是的，我們可以將其變為可聚焦和處理點擊 KEYUP事件，而檢測是否進入或按下空格鍵。

Nonetheless, it is still more difficult than simply changing the markup from <div> to <button> — in this case, you just have to bind a click event and don’t have to force the DOM element to be focusable (and as a bonus you don’t have to write that many styles).

盡管如此，這仍然比簡單地將標記從<d iv＆g t;更改為更困難。 為<b utton> -在這種情況下，你只是甲肝E要綁定一個click事件，并沒有強制的DOM元素要成為焦點(并作為獎金，你不必寫很多款式)。

Major takeaways:

主要外賣：

All functionality should be accessible by keyboard
所有功能都可以通過鍵盤訪問
Do not remove outlines from focused elements (if you don’t like those outlines, you can always style them)
不要從關注的元素中刪除輪廓(如果您不喜歡這些輪廓，則可以隨時對其進行樣式設置 )
In-page interactions should be represented by a button
頁內互動應以按鈕表示
Off-page interactions (links) should be represented by an anchor (<;a>)
頁外互動(鏈接)應以錨點( < ; a>)表示
* Buttons are meant to be triggered by a click, enter, and space, anchors by click and enter press
*按鈕是由單擊，輸入和空格觸發的，由單擊和輸入按下的錨定

What to do: Make sure all interactive elements are accessible (and controllable) by keyboard, focused elements are highlighted, and the tab order actually makes sense.

怎么做：確保所有交互元素都可以通過鍵盤訪問(和控制)，突出顯示突出顯示的元素，并且按Tab鍵排序實際上是有意義的。

支持屏幕閱讀器 (Support screen readers)

Take a look at the following image:

看一下下面的圖片：

It should be easy to tell what the button in the top right corner does. It closes the layer. The next image simulates what a blind person would be able to “see” when using a screen reader software:

應該很容易分辨出右上角的按鈕的作用。它關閉層。下一張圖像模擬了使用屏幕閱讀器軟件時盲人能夠“看到”的內容：

You’ve already seen the full image, so you know what action the same button is meant to perform. Would you be able to tell by looking at the second image? You wouldn’t — the cross is rendered using a background-image CSS property and the button has no inner content at all.

您已經看過完整圖像，因此您知道同一按鈕應執行的操作。您能通過看第二張圖像來分辨嗎？您不會—十字架使用背景圖像CSS屬性進行渲染，并且按鈕根本沒有內部內容。

That’s what aria-* attributes are for. By enhancing the button’s markup with a simple aria-label attribute, you don’t have to try hard to make the button’s inner text be hidden in your presentation layer.

這就是aria- *屬性的用途。通過使用簡單的aria-label屬性增強按鈕的標記，您不必費勁使按鈕的內部文本隱藏在表示層中。

<!-- Wrong markup --><button></button>

<!-- Accessible markup --><button aria-label=”Close layer”></button>

<!-- Alternative accessible markup --><button style="text-indent:100%;overflow:hidden;padding:0;white-space:nowrap;">Close layer</button>

Did you notice that I also removed the images from the screen reader view? You can label them too using the same technique (where aria-labeledby might be more appropriate). I removed those images because in our case they do not have any semantic purpose and are tagged with role=”presentation”. Even if they did have a semantic purpose, we don’t usually know that. Most of these images will be illustrational, and labeling them would be redundant — the heading already carries the same meaning.

您是否注意到我也從屏幕閱讀器視圖中刪除了圖像？您也可以使用相同的技術對其進行標記(其中aria-labeledby可能更合適)。我刪除了這些圖像，因為在我們的例子中，這些圖像沒有任何語義目的，并被標記為role =“ presentation” 。即使它們確實具有語義目的，我們通常也不知道。這些圖像大多數都是說明性的，為它們加上標簽將是多余的-標題已經具有相同的含義。

Attributes you should know:

您應該知道的屬性：

role — useful for marking the purpose of an element
角色 -用于標記元素的用途
aria-hidden — tells assistive technologies to ignore an element
詠嘆調隱藏 -告訴輔助技術忽略一個元素
aria-label, aria-labeledby — label the element
aria-label，aria-labeledby —標記元素
aria-describedby — use this to describe non-standard user interface controls
aria- describeby —使用此描述非標準的用戶界面控件
aria-owns — marks a relation between two elements
aria-owns-標記兩個元素之間的關系

What to do: This step might be the hardest to implement correctly and test properly. Make sure all images have an alt attribute, all sections and interactive elements are labeled, and test with screen reader software.

做什么：此步驟可能是最難正確實施和正確測試的步驟。確保所有圖像都具有alt屬性，所有部分和交互式元素均已標記，然后使用屏幕閱讀器軟件進行測試。

How to test: Using a screen reader as a sighted person might not feel natural, so first take some time and familiarize yourself with the software of your choice (and you might want to test all of the most common ones — VoiceOver on Mac, NVDA, and Jaws on Windows and TalkBack on Android). After this try navigating your website only using the screen reader software (turn off your monitor). Even a short test will help you get an idea how well your website performs and will reveal the most significant problems.

測試方法：以屏幕閱讀器為視力障礙者可能會感到不自然，因此，請花一些時間并熟悉所選的軟件(您可能希望測試所有最常見的軟件-Mac上的VoiceOver ， NVDA ，以及Windows上的Jaws和Android上的TalkBack )。此后，請嘗試僅使用屏幕閱讀器軟件瀏覽您的網站(關閉顯示器)。即使是簡短測試，也可以幫助您了解您的網站的運行情況，并發現最嚴重的問題。

Bonus: Here is a short (and a bit simplified) example of how we’ve enhanced our autosuggestions. The highlighted parts (and the two <spans>) were added as part of our accessibility improvements.

獎勵：這是一個簡短(略微簡化)的示例，說明了我們如何增強自動建議。添加了突出顯示的部分(和兩個<spa ns>)作為我們可訪問性改進的一部分。

<!-- Search Field --><input type="text" placeholder="search something"   autocomplete="off"   role="combobox"   aria-describedby="unibox-controls-description"   aria-owns="unibox-suggest-box"   aria-expanded="true"  aria-activedescendant="unibox-active">

<!-- Search Suggestions --><div id="unibox-suggest-box" role="listbox">;  <section aria-labelledby="unibox-suggest-cluster-heading-recipes">    <h3 id="unibox-suggest-cluster-heading-recipes"&gt;Recipes</h3>    <div aria-selected="false" role="option">      <img src=[...]         alt=""         aria-hidden="true"         role="presentation">      </div>      <;a href=[..]>Chicken Curry</a>    </div&gt;    <div aria-selected="true" role="option" id="unibox-active">      <img src=[...]         alt=""         aria-hidden="true"         role="presentation"&gt;      </div>      <a href=[..]>Curried Chicken</a>    </div>  </section>  </div>

<!-- Announce search suggestions have been changed --><span aria-live="polite" aria-atomic="true" role="status" class="ss360-sr-only">2 Search Suggestions Shown</span>

<!-- Suggest Box User Interface Controls --><span id="unibox-controls-description" class="ss360-sr-only">Use up and down arrows to select available result. Press enter to go to the selected search result.</span>

簡化演示 (Simplify presentation)

Accessibility, UI Design, UX — all of those are sides of the same three-sided coin.

輔助功能，UI設計，用戶體驗-所有這些都是同一個三面硬幣的一面。

Low contrast between background and foreground will make your text hard to read.

背景和前景之間的對比度低會使您的文本難以閱讀。

Wild animations make your website hard for hungover people (you don’t care? Think about those with ADHD instead — they may find it difficult to focus). Did you know that there is a prefers-reduced-motion media query (even though it is not widely supported yet)? You can simply turn off all your animation if this media query is set. Here is how we do it:

狂野的動畫使您的網站對宿醉的人來說很難(您不在乎？請考慮使用ADHD的人-他們可能會發現難以集中注意力)。您是否知道存在“ 偏好減少運動”媒體查詢(即使尚未得到廣泛支持)？如果設置了此媒體查詢，則只需關閉所有動畫即可。這是我們的方法：

if(window.matchMedia &&   window.matchMedia("(prefers-reduced-motion: reduce)").matches){    animationSpeed = 0;}

You don’t think a website should be some kind of crazy stroboscopic light show, do you?

您不認為網站應該是某種瘋狂的頻閃燈表演，是嗎？

Conveying information only by color will make the information unavailable for colorblind people.

僅按顏色傳達信息將使色盲人無法獲得該信息。

Here is an example of how we’ve changed the default layout of our layover view — shorter blocks of text and higher contrast ratios.

這是一個示例，說明了如何更改疊加視圖的默認布局-較短的文本塊和較高的對比度。

One of our pain points has always been mobile autosuggestions. This might be less of an accessibility issue, but we’ve finally added an option to switch to full-screen autosuggestions. Here is a comparison:

我們一直以來的痛點之一就是移動自動提示。這可能不是一個可訪問性問題，但是我們終于添加了一個選項，可以切換到全屏自動建議。比較一下：

What to do:

該怎么辦：

Check that blocks of text are not wider than 80 characters and use line-height that is about 1.5 times larger than the font-size (which should also be large enough — go for 16 px and larger)
檢查文本塊的寬度不超過80個字符，并使用比字體大小大約大1.5倍的行高 (也應該足夠大-請輸入16 px或更大)
Allow zooming (at least up to 200%)
允許縮放(至少200％)
Check your contrast ratios
檢查您的對比度
Make sure your touch targets are large enough (44 x 44 pixels is the rule of thumb)
確保您的觸摸目標足夠大(44 x 44像素是經驗法則)
Where color conveys information, make sure that there is also an alternative way to get the same information
當顏色傳達信息時，請確保還有另一種方式來獲取相同的信息
Go through your animations and consider whether you really need them. Also provide a mechanism to turn them off.
瀏覽動畫，然后考慮是否確實需要它們。還提供了將其關閉的機制。
Forget about captchas…
忘記驗證碼…

評估，發展和集成您的工作流程 (Evaluate, evolve, and integrate your workflow)

This one is only here because “5 steps” sounds better than “4 steps.” Regardless, always focus on accessibility in your daily (or at least weekly) workflow.

僅在這里是因為“ 5步”聽起來比“ 4步”好。無論如何，在您每天(或至少每周一次)的工作流程中始終要專注于可訪問性。

You won’t have to spend large amounts of your budget to do this the right way. So when planning a new feature, think of all the groups I’ve named in the “What is accessibility?” part of this article.

您無需花費大量預算即可正確執行此操作。因此，在計劃新功能時，請考慮一下我在“什么是可訪問性？”中命名的所有組。本文的一部分。

測試中 (Testing)

There are plenty of tools that will help you evaluate how accessible your website is. I would recommend Tenon.io, FAE, and Lighthouse for Google Chrome (open Dev Tools, go to Audits, and click ‘Perform an audit…’).

有很多工具可以幫助您評估網站的可訪問性。我會推薦Tenon.io ， FAE和Lighthouse用于Google Chrome(打開Dev Tools，轉到Audits ，然后單擊“ Perform a audit…”)。

However, some things are hard to evaluate with automated tools. Try operating your website using only a keyboard. Then try operating it using screen reader software.

但是，使用自動化工具很難評估某些事情。嘗試僅使用鍵盤操作您的網站。然后嘗試使用屏幕閱讀器軟件對其進行操作。

其他來源 (Additional Sources)

There is much more to accessibility than this post could cover. So here are few resources that might help you get a deeper understanding of the subject:

可訪問性遠遠超出了此職位所能涵蓋的范圍。因此，這里有一些資源可以幫助您更深入地了解該主題：

How to Meet WCAG 2.0
如何滿足WCAG 2.0
WAI Tutorials
WAI教程
Inclusive Design Checklist
包容性設計清單
A nice article by the Freecodecamp stuff
Freecodecamp上的一篇不錯的文章

TL; DR (TL;DR)

Use semantic markup, support screen readers, make all interactive elements accessible by keyboard, simplify your presentation, and read at least all the bullet points in “Some easy steps”.

使用語義標記，支持屏幕閱讀器，使所有交互元素都可以通過鍵盤訪問，簡化您的演示文稿并至少閱讀“一些簡單步驟”中的所有要點。

Ok, that’s it. If you are interested in the exact changes we’ve made, just ask in the comments. And if you are looking for a site search solution that cares about accessibility (or simply for a Google Site Search alternative) Site Search 360 is there for you.

好的，就是這樣。如果您對我們所做的確切更改感興趣，只需在評論中提出即可。而且，如果您正在尋找一個關注可訪問性的站點搜索解決方案(或僅用于Google Site Search替代方案)， Site Search 360就是您的理想之選。

And don’t forget to clap.

并且不要忘記鼓掌。