访问25%无法访问的人-如何设计可访问性
We’re increasingly dependent on the internet and computers for everything we do — this has become starkly more obvious through the COVID19 global pandemic.
我們所做的一切都越來越依賴于互聯(lián)網(wǎng)和計(jì)算機(jī)-通過COVID19全球大流行,這一點(diǎn)變得更加明顯。
From finding work, doing our work, banking, travel, through to shopping and keeping in touch with our loved ones — so many aspects of our lives are dependent on technology.
從尋找工作,工作,銀行業(yè)務(wù),旅行,購物到與親人保持聯(lián)系,我們生活的許多方面都依賴技術(shù)。
Although they’re critically important, and an ever-present resource, access is not always a given for people living with disabilities.
盡管訪問權(quán)限至關(guān)重要,并且是永遠(yuǎn)存在的資源,但訪問權(quán)限并不總是適合殘疾人士使用。
About 25% of the world’s population has some form of disability.
世界上約25%的人口患有某種形式的殘疾。
That’s 2.42 billion people and a $6.9 trillion dollar economy that’s being ignored. No, not a trivial amount at all.
那是24.2億人,而一個(gè)價(jià)值6.9萬億美元的經(jīng)濟(jì)卻被忽略了 。 不,一點(diǎn)也不微不足道。
Why? Simply because designers and developers of technology don’t consider the needs of people with disabilities.
為什么? 僅僅因?yàn)榧夹g(shù)的設(shè)計(jì)師和開發(fā)人員沒有考慮殘疾人的需求。
They’re seen as minority users, and we’re taught to design for the average person. Interestingly, the average person doesn’t actually exist, and this has caused a plethora of serious and sometimes fatal issues in different industries (this example from the air force is both fascinating and shocking).
他們被視為少數(shù)族裔用戶,我們被教導(dǎo)為普通人設(shè)計(jì)。 有趣的是, 普通人實(shí)際上并不存在 ,這在不同行業(yè)中造成了許多嚴(yán)重甚至有時(shí)是致命的問題( 空軍的這個(gè)例子既令人著迷,又令人震驚 )。
Accessible software and websites have more clear benefits — better search results, bigger audience reach, they encourage good coding practices, and increase usability for everyone.
可訪問的軟件和網(wǎng)站具有更明顯的好處-更好的搜索結(jié)果,更大的受眾范圍,鼓勵(lì)良好的編碼習(xí)慣并提高每個(gè)人的可用性。
There’s a lot of work that we still need to do to bring accessibility standards and guidelines into the realm of usability — a lot of these are still “tick-box” exercises, that don’t always mean people with disabilities can use them. But they are still better than not having considered them at all.
為了將可訪問性標(biāo)準(zhǔn)和指南帶入可用性領(lǐng)域,我們?nèi)匀恍枰龃罅康墓ぷ?其中許多仍然是“打勾”式的練習(xí),并不總是意味著殘疾人可以使用它們。 但是它們?nèi)匀槐雀静豢紤]它們更好。
通用設(shè)計(jì) (Universal Design)
So, if designing for the average person is a massive fail, how do we design for all? That’s what we call Universal/Accessible Design.
因此,如果為普通人設(shè)計(jì)是一個(gè)巨大的失敗,那么我們?nèi)绾螢樗腥嗽O(shè)計(jì)? 這就是我們所謂的通用/無障礙設(shè)計(jì)。
Coined by architect, Ronald Mac, Universal design employs seven principles to aid in the design of buildings, products, services, policy/law and environments to make them accessible to all people, regardless of age, disability or other factors.
由建筑師羅納德·麥克(Ronald Mac)創(chuàng)造的通用設(shè)計(jì)采用七項(xiàng)原則來協(xié)助設(shè)計(jì)建筑物,產(chǎn)品,服務(wù),政策/法律和環(huán)境,以使所有人都可以使用它們,而不論其年齡,殘疾或其他因素如何。
The 7 principles are as follows:
這七個(gè)原則如下:
Equitable Use: The design is useful and marketable to people with diverse abilities.
公平使用:該設(shè)計(jì)對(duì)于具有多種能力的人很有用且可銷售。
Flexibility in Use: The design accommodates a wide range of individual preferences and abilities.
使用的靈活性:設(shè)計(jì)可適應(yīng)各種個(gè)人喜好和能力。
Simple and Intuitive Use: The design is easy to understand, regardless of the user’s experience, knowledge, language skills, or concentration level.
簡(jiǎn)單直觀的使用方法:無論用戶的經(jīng)驗(yàn),知識(shí),語言技能或?qū)P某潭热绾?#xff0c;設(shè)計(jì)都易于理解。
Perceptible Information: The design communicates necessary information effectively to the user, regardless of ambient conditions or the user’s sensory abilities.
可感知的信息:無論環(huán)境條件或用戶的感覺能力如何,設(shè)計(jì)都可以有效地向用戶傳達(dá)必要的信息。
Tolerance for Error: The design minimizes hazards and the adverse consequences of accidental or unintended actions.
錯(cuò)誤容忍度:設(shè)計(jì)將意外事故或意外行為的危害和不良后果降至最低。
Low Physical Effort: The design can be used efficiently and comfortably and with minimum fatigue.
體力勞動(dòng)低:該設(shè)計(jì)可以高效,舒適地使用,并且疲勞程度最小。
Size and Space for Approach and Use: Appropriate size and space is provided for approach, reach, manipulation, and use, regardless of the user’s body size, posture, or mobility.
接近和使用的大小和空間:為接近,到達(dá),操縱和使用提供了適當(dāng)?shù)拇笮『涂臻g,而與用戶的身體大小,姿勢(shì)或活動(dòng)性無關(guān)。
Interestingly, some of the technologies we enjoy were once designed for disabled people. Email, telephone, typewriter, touch screens — the list goes on — these incredibly successful technologies were created with Universal Design at their core.
有趣的是,我們喜歡的某些技術(shù)曾經(jīng)是為殘疾人設(shè)計(jì)的。 電子郵件,電話,打字機(jī),觸摸屏-列表還在繼續(xù)-這些以通用設(shè)計(jì)為核心而創(chuàng)造的非凡成功的技術(shù)。
在軟件設(shè)計(jì)中需要考慮訪問 (Access needs to consider in Software Design)
Along with the “average person myth”, there’s a myth that making a website or app accessible is difficult and expensive.
除了“普通人的神話”外,還有一個(gè)神話是使網(wǎng)站或應(yīng)用程序易于訪問既困難又昂貴。
Designing with accessibility from scratch doesn’t necessarily add extra features or content; therefore there shouldn’t be an additional cost or effort… plus, it’s much cheaper than having to redesign later on.
從頭開始具有可訪問性的設(shè)計(jì)不一定會(huì)添加額外的功能或內(nèi)容; 因此,不應(yīng)有額外的成本或工作量……而且,與以后重新設(shè)計(jì)相比,它要便宜得多。
When designing anything, we should consider the number and type of potential accessibility issues users will have. Here are some conditions we should consider when we design software and website:
在設(shè)計(jì)任何東西時(shí),我們應(yīng)該考慮用戶可能遇到的潛在可訪問性問題的數(shù)量和類型。 在設(shè)計(jì)軟件和網(wǎng)站時(shí),應(yīng)考慮以下條件:
Visual Impairment: This includes a partial or total inability to see or to perceive colour contrasts.
視覺障礙:這包括部分或全部無法看到或察覺顏色對(duì)比。
Hearing Impairment: Some users have a reduced ability to hear.
聽力障礙:有些用戶的聽覺能力降低。
Motor Skills/Physical Disabilities: Users may have difficulty moving parts of their bodies, including making precise movements (such as when using a mouse).
運(yùn)動(dòng)技能/肢體殘疾:用戶可能難以移動(dòng)身體的各個(gè)部分,包括進(jìn)行精確的運(yùn)動(dòng)(例如使用鼠標(biāo)時(shí))。
Photosensitive Seizures: Conditions such as epilepsy can cause seizures that are often triggered by flashing lights.
光敏性癲癇發(fā)作:諸如癲癇之類的狀況可能會(huì)導(dǎo)致癲癇發(fā)作,通常是由閃光燈引起的。
Cognitive Disabilities: There are also many conditions that affect cognitive ability, such as dementia and dyslexia.
認(rèn)知障礙:還有許多影響認(rèn)知能力的疾病,例如癡呆癥和誦讀困難癥。
無障礙設(shè)計(jì)注意事項(xiàng) (Design considerations for accessibility)
Now that we know the reasons why we need to design for all, and the different types of access needs, what are the actionable steps we can take in designing software and websites?
現(xiàn)在我們知道了為什么需要針對(duì)所有人進(jìn)行設(shè)計(jì)的原因,以及不同類型的訪問需求,在設(shè)計(jì)軟件和網(wǎng)站時(shí)可以采取哪些可行步驟?
The following list is drawn from accessible Web design, based on the WCAG accessibility standards, and are surprisingly simple to implement.
以下列表是基于WCAG可訪問性標(biāo)準(zhǔn)的可訪問Web設(shè)計(jì)得出的,并且實(shí)現(xiàn)起來非常簡(jiǎn)單。
1.包括視覺內(nèi)容的替代文本 (1. Include text alternatives for visual content)
Adding alternative text descriptions to visual content, enables assistive technologies, such as screen readers, to interpret the image into spoken form so that people with vision impairments can understand and navigate the interface. The text should be a brief sentence that describes the image clearly. If alt text is neglected, screen readers will either skip the image, or read out its file name.
在視覺內(nèi)容上添加替代文本描述,可以使諸如屏幕閱讀器之類的輔助技術(shù)將圖像解釋為語音形式,從而使視力障礙者可以理解和瀏覽界面。 文字應(yīng)該是簡(jiǎn)短的句子,以清楚地描述圖像。 如果忽略替代文本,屏幕閱讀器將跳過圖像或讀出其文件名。
For all video content, remember to incorporate subtitles for users who are deaf. This also benefits people who may want to watch the video on mute or in public spaces. If the video is mainly visual without dialogue or narration, add a video caption that describes the content. If you haven’t already, try this setting on Netflix, it’s quite interesting!
對(duì)于所有視頻內(nèi)容,請(qǐng)記住為聾啞用戶添加字幕。 這也使可能想在靜音或公共場(chǎng)所觀看視頻的人受益。 如果視頻主要是可視的,沒有對(duì)話或旁白,請(qǐng)?zhí)砑用枋鰞?nèi)容的視頻標(biāo)題。 如果您還沒有,請(qǐng)?jiān)贜etflix上嘗試此設(shè)置,這很有趣!
2.保留文本層次結(jié)構(gòu) (2. Retain text hierarchy)
The visual hierarchy of the interface should be easily interpreted by assistive technology. Remember to specify the different titles, headings and paragraph styles.
界面的視覺層次結(jié)構(gòu)應(yīng)通過輔助技術(shù)輕松解釋。 記住要指定不同的標(biāo)題,標(biāo)題和段落樣式。
Labelling your text enables browsers and screen readers and alternative access methods to correctly navigate through the content and present in the right order.
標(biāo)記文本可以使瀏覽器和屏幕閱讀器以及其他訪問方法正確地瀏覽內(nèi)容并以正確的順序顯示。
3.正確的色彩對(duì)比水平 (3. The right level of colour contrast)
Colour is key in anything design related. The right colour palette contributes to the brand, mood and tone of the software. But, the proper use of colour is also a major component in the legibility of an interface.
顏色是任何與設(shè)計(jì)相關(guān)的關(guān)鍵。 正確的調(diào)色板有助于軟件的品牌,氛圍和色調(diào)。 但是,正確使用顏色也是界面可讀性的主要組成部分。
Colour contrast is often overlooked, but people who have low vision can find it hard to read text from a background colour if it has low contrast. The right contrast can ensure all the elements are distinguishable and clear. The WCAG suggests a minimal contrast ratio of 4.5 to 1 between the text colour and its background.
色彩對(duì)比度通常被忽略,但是視力低下的人會(huì)發(fā)現(xiàn)很難從背景色中讀取文本。 正確的對(duì)比可以確保所有元素都清晰可辨。 WCAG建議在文本顏色與其背景之間的最小對(duì)比度為4.5:1。
4.不要僅僅依靠顏色來傳達(dá)信息 (4. Don’t rely on colour alone to convey information)
Users who have visual impairments may not perceive colour accurately, or at all. That’s why it’s important to use more than just colour to communicate different information.
有視覺障礙的用戶可能無法準(zhǔn)確感知色彩,或根本無法感知色彩。 這就是為什么重要的是使用不僅僅是顏色來傳達(dá)不同的信息。
For instance, when designing buttons, make sure to add text labels, even if they have been differentiated using colour. A quick and easy way to test colour accessibility is by converting the design to black and white to see if the same information still comes across.
例如,在設(shè)計(jì)按鈕時(shí),即使已使用顏色區(qū)分了文本標(biāo)簽,也請(qǐng)確保添加文本標(biāo)簽。 測(cè)試顏色可訪問性的一種快速簡(jiǎn)便的方法是將設(shè)計(jì)轉(zhuǎn)換為黑白,以查看是否仍然遇到相同的信息。
5.啟用鍵盤導(dǎo)航 (5. Enable keyboard navigation)
The computer mouse isn’t the only way people can interact with your software or website. This is particularly important for people with physical disabilities who will use alternative access methods for computer interaction.
電腦鼠標(biāo)并不是人們與您的軟件或網(wǎng)站進(jìn)行交互的唯一方式。 對(duì)于身體殘障人士來說,這將使用替代的訪問方法進(jìn)行計(jì)算機(jī)交互尤為重要。
From the get-go, it’s important to ensure that all functionalities are accessible with a keyboard (keys such as tab, enter, and the arrows). This can be easily tested in house by trying to navigate the user interface without a mouse, and seeing how far you get.
從一開始,重要的是要確保所有功能都可以通過鍵盤(如Tab,Enter和箭頭之類的鍵)訪問。 通過嘗試在不使用鼠標(biāo)的情況下導(dǎo)航用戶界面并查看能走多遠(yuǎn),可以輕松地在內(nèi)部進(jìn)行測(cè)試。
6.清楚地標(biāo)記表單字段 (6. Clearly label form fields)
It’s important to provide users with clear labelled elements, so they can understand what information needs to be filled in, and where.
為用戶提供清晰的標(biāo)簽元素很重要,這樣他們才能了解哪些信息需要填寫以及在何處填寫。
Remember to keep the text consistent, so that the visible text visible is the same as the field’s name. This makes it simple for people using assistive technology to fill out forms without frustration.
請(qǐng)記住要使文本保持一致,以便可見的可見文本與字段名稱相同。 這使使用輔助技術(shù)的人可以輕松完成表格的填寫,而不會(huì)感到沮喪。
7.避免可能引起癲癇發(fā)作的內(nèi)容 (7. Avoid content that may cause seizures)
Accessibility guidelines suggest that no element should flash or flicker over three times per second. Anything above that threshold can trigger seizures in people who are photosensitive.
輔助功能準(zhǔn)則建議,任何元素每秒均不應(yīng)閃爍3次以上。 超過該閾值的任何物體都可能引發(fā)光敏性患者的癲癇發(fā)作。
For any flashing content, it’s recommended to use lower contrast, and avoid saturated reds. And let’s be honest, this consideration makes for a visually more pleasing experience in general.
對(duì)于任何閃爍的內(nèi)容,建議使用較低的對(duì)比度,并避免飽和的紅色。 老實(shí)說,這種考慮通常會(huì)帶來視覺上更令人愉悅的體驗(yàn)。
從這里到哪里... (Where to from here…)
Remember, accessibility isn’t just about ‘doing good’. Accessible software and websites have better search results, reach a bigger audience, they encourage good coding practices, and increase usability for everyone.
請(qǐng)記住,可訪問性不只是“做得好”。 可訪問的軟件和網(wǎng)站具有更好的搜索結(jié)果,覆蓋更多的受眾,他們鼓勵(lì)良好的編碼習(xí)慣,并提高每個(gè)人的可用性。
So, make accessibility part of your design research. Verify your assumptions with people who have disabilities, or better yet, co-design with them. It definitely makes for a more purposeful, and engaging design and development process.
因此,使可訪問性成為您設(shè)計(jì)研究的一部分。 與殘障人士一起驗(yàn)證您的假設(shè),或者更好的是與殘障人士共同設(shè)計(jì)。 它無疑使設(shè)計(jì)和開發(fā)過程更具針對(duì)性和吸引力。
If you’re inspired by this post, check out these useful tools that can kickstart your journey to building more meaningful, inclusive solutions
如果您受到本文的啟發(fā),請(qǐng)查看這些有用的工具,這些工具可以幫助您開始構(gòu)建更有意義,更具包容性的解決方案
WebAIM Colour Contrast Checker: Great contrast colour checker that gives you results in real time for regular and large text.
WebAIM顏色對(duì)比度檢查器 : 出色的對(duì)比度顏色檢查器,可為您提供常規(guī)和大文本的實(shí)時(shí)結(jié)果。
Inclusive Components: A pattern library in the form of a blog, with a focus on inclusive design. Each post explores a common interface component and comes up with a better, more robust and accessible version of it.
包容性組件 :博客形式的模式庫,重點(diǎn)是包容性設(shè)計(jì)。 每篇文章都探討了一個(gè)通用的界面組件,并提出了一個(gè)更好,更健壯和易于訪問的版本。
Colour Oracle: A free colour blindness simulator for Windows, Mac, and Linux. It shows you in real time what people with common color vision impairments see.
Color Oracle :適用于Windows,Mac和Linux的免費(fèi)色盲模擬器。 它實(shí)時(shí)顯示具有常見色覺障礙的人所見。
Vox Product Accessibility Guidelines: A comprehensive checklist for designers, engineers, and project managers.
Vox產(chǎn)品輔助功能指南:針對(duì)設(shè)計(jì)師,工程師和項(xiàng)目經(jīng)理的全面清單。
AXE Google Chrome Extension: Test any site for accessibility violations using the Chrome inspector.
AX Google Chrome擴(kuò)展程序 :使用Chrome檢查器測(cè)試任何網(wǎng)站的可訪問性違規(guī)行為。
Contrast: A macOS app for quick access to WCAG colour contrast ratios.
對(duì)比度 :macOS應(yīng)用程序,用于快速訪問WCAG色彩對(duì)比度。
翻譯自: https://medium.com/propellerhead/accessing-the-25-who-cant-how-to-design-for-accessibility-5f69ad0c5765
總結(jié)
以上是生活随笔為你收集整理的访问25%无法访问的人-如何设计可访问性的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 阿里面试官最新分享的Java面试宝典,含
- 下一篇: 前端学习(120):css精灵和好处