Last year, I challenged myself to become a more inclusive designer. One of the ways I aimed to do this was by paying closer attention to Accessibility considerations as part of my design and build processes.
去年，我挑战自我，成为一名更具包容性的设计师。 我旨在实现这一目标的方法之一是，在设计和构建过程中更加关注可访问性注意事项。
See Supercharging UX with Inclusive Design
请参阅 采用包容性设计为UX增压
I won’t lie — It’s been tough. However, It has also helped to dramatically improve the experiences I’m creating.
我不会说谎-很难。 但是，它也极大地改善了我正在创建的体验。
I’ll admit that before last year my knowledge of Accessibility was… well, it wasn’t. I knew Accessibility as that settings menu on my Macbook, the one that I only ever visited after I’d tootled off in search for coffee, left it unlocked and became the victim of an office prank.
我承认，在去年之前，我对辅助功能的了解是……嗯，不是。 我知道可访问性是Macbook上的设置菜单，这是我在搜寻咖啡后便不曾访问过的那个菜单，然后将其解锁并成为办公室恶作剧的受害者。
The one where your screen is upside-down, inside-out and back-to-front.
屏幕上下颠倒，由内而外和从后到前的那种。
As I learned, Accessibility is so much more than a menu of options. In this article I want to introduce it properly, point you in the direction of resources that I found helpful and explore how considering Accessibility at each level of the design and build process can help us to create more usable and robust products for everyone.
当我了解到，无障碍环境是不是一个选项菜单这么多。 在本文中，我想适当地介绍它，为您指明我认为有用的资源的方向，并探讨在设计和构建过程的每个级别考虑可访问性如何帮助我们为每个人创建更多可用和更强大的产品。
什么是辅助功能 (What is Accessibility)
Accessibility, as a measurement, describes the level of access a given user has to features and information within a web application, given their abilities, technologies and environment.
可访问性作为一种度量，描述了给定用户对Web应用程序中的功能和信息的访问级别，这取决于他们的能力，技术和环境。
Web Accessibility (A11y), as a topic, is concerned with the tools, technologies and techniques that we web-folk use in creating Accessible experiences.
作为一个主题，Web Accessibility(A11y)与我们在创建A 必要体验时我们在网络上使用的工具，技术有关。
To design for accessibility means to be inclusive to the needs of your users — Daniel Na
设计可访问性意味着要包含您的用户需求— Daniel Na
Often, Accessibility is used to describe support for users who identify as having an impairment or disability. In the UK, this represents around 20% of the population. As we age, the likelihood of developing impairments increases, so we tend to see that figure weighted by age.
通常，可访问性用于描述对识别为有障碍或残障的用户的支持。 在英国， 约占总人口的20％ 。 随着年龄的增长，出现障碍的可能性增加，因此我们倾向于看到该数字按年龄加权。
A user’s impairment(s) could make engaging with our experiences challenging, especially if they are making use of technologies that we haven’t designed for, these impairments may be;
用户的障碍可能会使我们的体验充满挑战，尤其是如果他们使用我们未设计的技术时，这些障碍可能是；
- Visual 视觉效果
- Auditory 听觉
- Motor Neurone 运动神经元
- Cognitive 认知性
However, let’s not limit the definition of Accessibility to permanent impairment. Instead, we can extend this definition to consider temporary or environmental impairments. For example;
但是，我们不要将可访问性的定义限制为永久性损害。 相反，我们可以将此定义扩展为考虑临时或环境损害。 例如;
Permanent Impairment — A user with advanced macular degeneration who depends on screen reader technologies to understand the contents of a webpage
永久性受损— 黄斑变性 严重的用户依靠屏幕阅读器技术来理解网页的内容
Environmental impairment — A user may have contrast challenges as a result of their vision (possibly permanent) or they may be in the boardroom and using your application on a projector with poor resolution and contrast (environmental)
环境损害-用户可能由于视力而遇到对比度挑战(可能是永久性的)， 或者可能是在会议室中并在分辨率和对比度较差的投影仪上使用您的应用程序(环境)
Temporary Impairment — A user who uses a keyboard to navigate may have motor neurone challenges (possibly permanent) or they may have broken their arm and cannot use the mouse (temporary)
暂时性障碍-使用键盘导航的用户可能会遇到运动神经元挑战(可能是永久性的)， 或者可能是胳膊骨折了，无法使用鼠标(暂时性)
As you delve into Accessibility it is so easy to concentrate on the users’ challenges and forget about their preferences.
当您深入研究无障碍功能时，可以轻松地专注于用户的挑战，而不必理会他们的偏好。
User preference — A user may be hard of hearing (possibly permanent) and require closed captions on videos or they may prefer to read closed captions because they’re listening to an awesome Taylor Swift track they just can’t turn off… This isn’t me
用户偏好-用户可能听不清(可能是永久性的)并且要求对视频使用隐藏式字幕， 或者他们可能更喜欢阅读隐藏式字幕，因为他们正在收听无法关闭的令人敬畏的Taylor Swift曲目……这是'给我
测量和标准化可访问性 (Measuring and standardising Accessibility)
As you might imagine, this is a complex problem space with a whole host of nuances. Fortunately, the World Accessibility Initiative (WAI) maintains an extensive collection of Accessibility guidelines (WCAG) to help standardise the industry’s approach.
您可能会想到，这是一个复杂的问题空间，包含许多细微差别。 幸运的是， 世界无障碍倡议 (WAI)维护着广泛的无障碍指南 (WCAG)集合，以帮助标准化该行业的方法。
We can assess the level of Accessibility in an application by referring to these guidelines, which define four simple criteria.
我们可以通过参考定义了四个简单标准的这些准则来评估应用程序中的可访问性级别。
Perceivable — All information must be perceivable, it cannot be invisible to all of a user’s senses. E.g. If a user is non-visual they must be able to consume the information audibly or by touch
可感知的-所有信息都必须可感知，用户的所有感官都不会看不见。 例如，如果用户是非视觉用户，则他们必须能够通过听觉或触摸方式使用信息
Operable — A user must be able to operate the functionality through their technology. E.g. if a user is interacting through a keyboard they must be able to navigate and operate the functionality without the use of a mouse
可操作-用户必须能够通过其技术来操作该功能。 例如，如果用户通过键盘进行交互，则他们必须能够在不使用鼠标的情况下导航和操作功能
Understandable — All information is comprehensible, in the user’s language and at a level that they can understand
可以理解-以用户的语言和他们可以理解的水平理解所有信息
Robust — The application must adapt to the user’s technology without error and in a way that preserves the above areas
稳健—应用程序必须适应用户的技术而不会出现错误，并且必须保留上述区域
Each criterion specifies a rubric of guidelines that help designers and engineers to achieve them. For each guideline there are three levels of success; A, AA or AAA.
每个标准都指定了指导原则，以帮助设计人员和工程师实现这些指导原则。 对于每条指南，成功都有三个层次； A，AA或AAA 。
A — The lowest tier of accessibility coverage
A - 个 e-无障碍覆盖的最低层
AA — The middle tier of coverage and typically the most popular benchmark.
AA —覆盖的中间层，通常是最受欢迎的基准。
AAA — The highest level of coverage. Generally, designers find AAA requirements particularly restricting owing to the requirements around typography and colour contrast.
AAA-最高级别的覆盖范围。 通常，设计人员会发现AAA要求特别受制于印刷和色彩对比方面的要求。
At the outset, I assumed that there would always exist one accessible solution. In reality, there are usually a plethora of options, where optimising for one target audience makes the experience more challenging for another. For complex interfaces, there may be no truly accessible solution.
从一开始，我就假定总会有一个可访问的解决方案。 实际上，通常有很多选择，其中针对一个目标受众进行优化会给另一目标受众带来更大的挑战。 对于复杂的接口，可能没有真正可访问的解决方案。
为什么使用辅助功能？ (Why Accessibility?)
I want to talk about the elephant in the room, time. Creating truly accessible experiences takes time. Time to up-skill, to design, to refine, to build, to test. All above and beyond the original time required to get a project over the line.
我想谈谈房间里的大象， 时间 。 创造真正的无障碍体验需要时间。 是时候进行技能培训，设计，完善，构建，测试了。 所有这些超出了完成项目所需的原始时间。
The Technology industry has always been fast-paced, but now more than ever. If you think about the scope, time and cost triangle, you rarely see a team who have the freedom to optimise for more time without worrying about the impact to scope and cost. The cost of skills paired with the competitiveness of the technology market mean we are naturally time-poor.
科技行业向来快节奏，但现在比以往任何时候都更快。 如果考虑范围，时间和成本三角关系 ，很少会看到一个团队可以自由地进行更多时间优化而不必担心对范围和成本的影响。 技能的成本加上技术市场的竞争力意味着我们自然是时间匮乏的。
There is, of course, the social argument that we have a moral responsibility to create experiences that everyone can enjoy. I wholeheartedly agree with this message, however, in a world where we are forced to make difficult trade-offs to achieve project goals I think it’s important to talk about the other opportunities that Accessibility presents.
当然，社会观点认为，我们有道义责任来创造每个人都可以享受的体验。 但是，在一个我们被迫做出艰难的权衡以实现项目目标的世界上，我完全同意这一信息。我认为，重要的是要讨论可访问性带来的其他机会。
满足高级用户 (Satisfying Power Users)
I briefly mentioned this one earlier. Accessibility is based on the idea that our solutions are flexible enough to cater for the different requirements of our users. By doing this, we also cater for their preferences.
我在前面简要提到了这一点。 可访问性基于以下思想：我们的解决方案足够灵活，可以满足用户的不同需求。 通过这样做，我们也迎合了他们的喜好。
I often think of the potential for creating a more valuable product experience for our Power Users; the subset of users who know our product like the back of their hand. Imagine how designing great keyboard support for non-mouse users can also help to improve the efficiency of navigating our product for our Power Users.
我经常想到为我们的Power Users创建更有价值的产品体验的潜力； 了解我们产品的用户的子集喜欢他们的手背。 想象一下，为非鼠标用户设计出色的键盘支持还如何帮助提高针对Power Users的产品导航效率。
通过约束来培育创新 (Nurturing innovation through constraint)
Creativity thrives in the presence of constraint and Accessibility gladly gives us those constraints, in buckets.
在存在约束的情况下，创造力壮成长，而可访问性很高兴地为我们提供了这些约束。
Sometimes the design decisions we would like to take violate Accessibility guidelines. In my case, I would often use colour to mark the status of objects. By doing this I was creating a challenge for users who could didn’t perceive colour in the same way I did. To add insult to injury, I was choosing vibrant accent colours.
有时，我们希望做出的设计决策违反了辅助功能准则。 就我而言，我经常使用颜色标记对象的状态。 通过这样做，我给无法以与我相同的方式感知色彩的用户提出了挑战。 为了增加侮辱性伤害，我选择了鲜艳的装饰色。
Accessibility contrast guidelines identified this shortcoming and allowed me to course correct. Vibrant colours were tweaked to hit a 3:1 colour contrast ratio and combined with shape to create further affordance for users where colour identification is a problem.
辅助功能对比指南指出了这一缺点，并让我能够正确进行。 调整鲜艳的色彩以达到3：1的色彩对比度，并与形状相结合，为需要颜色识别的用户提供更多的承受能力。
This innovation led to improved legibility that enabled users to display the application on their boardroom projectors. Light bulb!
这项创新提高了可读性，使用户能够在会议室投影仪上显示应用程序。 灯泡！
汇集学科 (Brings disciplines together)
An Accessible solution is one that has been designed following Accessibility guidelines and then built to them, it could be considered multi-faceted.
可访问性解决方案是按照可访问性准则设计的，然后根据它们建立的解决方案，可以认为它是多方面的。
As such, it relies on designers to consider about how the solution could be built and engineers to consider the design intent. Without both sides of the coin, we can’t create an accessible experience and so encourages designers and engineers to work together across disciplines to achieve an entire solution.
因此，它依靠设计师来考虑如何构建解决方案，而工程师则要考虑设计意图。 没有双方的帮助，我们就无法创造出无与伦比的体验，因此鼓励设计师和工程师跨学科合作以实现完整的解决方案。
强大的解决方案 (Robust solutions)
All of this extra thought amounts to a stronger solution that we understand in far greater detail and that supports a wider user base.
所有这些额外的想法都构成了一个更强大的解决方案，我们将对其进行更详细的了解，并支持更广泛的用户群。
In my experience, the application of Accessibility to the foundations of Design (colour palettes, typography stacks and information architecture) has helped to create a more shareable and flexible foundation. I’ve also found that it encourages non-technical designers to push outside of their comfort zone and seek technological opportunities in achieving their design intent.
以我的经验，可访问性在设计基础(调色板，版式堆栈和信息体系结构)中的应用有助于创建一个更可共享和灵活的基础。 我还发现，它鼓励非技术设计师超越自己的舒适范围，寻求实现其设计意图的技术机会。
In terms of engineering, a focus on creating the right underlying semantic to support the needs of users engaging via Screen Reader has helped to reduce cross-browser bugs and altered my approach to component abstraction.
在工程方面，专注于创建正确的底层语义以支持通过Screen Reader进行交互的用户的需求，有助于减少跨浏览器的错误，并改变了我的组件抽象方法。
资源资源 (Resources)
At the beginning of this article, I promised to share the resources that helped me become a more inclusive designer/engineer. Here they are;
在本文开始时，我承诺要分享帮助我成为更具包容性的设计师/工程师的资源。 他们来了;
The WCAG Bible — https://www.w3.org/TR/WCAG21/
该WCAG圣经- https://www.w3.org/TR/WCAG21/
导游 (Guides)
https://uxdesign.cc/designing-for-accessibility-is-not-that-hard-c04cc4779d94
https://uxdesign.cc/designing-for-accessibility-is-not-that-hard-c04cc4779d94
https://www.smashingmagazine.com/2018/04/designing-accessibility-inclusion/
https://www.smashingmagazine.com/2018/04/designing-accessibility-inclusion/
工具类 (Tools)
Colour contrast checker — https://webaim.org/resources/contrastchecker/
色彩对比检查器-https: //webaim.org/resources/contrastchecker/
Storybook A11y plugin — https://www.npmjs.com/package/@storybook/addon-a11y
Storybook A11y插件— https://www.npmjs.com/package/@storybook/addon-a11y
Stark colour checker for Sketch — https://www.getstark.co/
Sketch的Stark颜色检查器-https: //www.getstark.co/
翻译自: https://uxdesign.cc/what-accessibility-taught-me-about-design-a7416da8f4e8
54
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
