群晖建立文件禁止访问_在设计系统中建立可访问性

最新推荐文章于 2024-07-12 18:21:18 发布

weixin_26715991

最新推荐文章于 2024-07-12 18:21:18 发布

阅读量691

点赞数

文章标签： python java linux

原文链接：https://medium.com/thinking-design/building-accessibility-into-design-systems-db9062893079

版权

群晖建立文件禁止访问

Imagine going about your online activity — paying bills through your bank, buying tickets to go to your favorite band’s show, or scrolling through your social media feed. Now imagine that, as you’re doing this, the website gets stuck in frustrating dead ends, the checkout flow won’t let you complete your purchase, and there is a clear mismatch between how you use technology and how interfaces are designed.

想象一下您的在线活动-通过银行付款，购买门票去参加您最喜欢的乐队的表演或滚动浏览社交媒体供稿。现在想象一下，在这样做时，网站陷入了令人沮丧的死胡同，结帐流程无法让您完成购买，并且技术使用方式和界面设计之间显然不匹配。

For many people who use assistive technology to navigate the web and digital products, this is a daily reality. A recent WebAIM study found that less than one percent of website homepages are likely to meet standard accessibility requirements. Assistive technology encompasses a wide range of devices, including screen readers that read out an interface, magnifying or zoom software that enlarges interfaces, or alternatives to computer mice such as trackballs. Many users are also keyboard only users for a variety of reasons, such as mobility disabilities, efficiency, or personal preference.

对于许多使用辅助技术浏览Web和数字产品的人来说，这已经成为日常工作。 WebAIM最近的一项研究发现，不到百分之一的网站首页可能符合标准的可访问性要求。辅助技术包括各种各样的设备，包括读出界面的屏幕阅读器，扩大界面的放大或缩放软件，或诸如轨迹球之类的计算机鼠标的替代品。由于各种原因(例如行动不便，效率或个人喜好)，许多用户也是仅键盘用户。

As more and more companies are relying on design systems as a foundational approach to building and delivering websites and apps, it’s crucial that these systems are inclusive and accessible, as they will have a knock on effect on the end user experience.

随着越来越多的公司将设计系统作为构建和交付网站和应用程序的基础方法，这些系统具有包容性和可访问性至关重要，因为它们将对最终用户体验产生影响。

设计系统：无障碍获取的机会 (Design systems: an opportunity for accessibility)

Design systems present a unique opportunity to build accessibility and inclusion into your component libraries from the get go, both from a UI/UX design perspective, and from a code repository perspective.

从UI / UX设计角度和代码存储库角度出发，设计系统都提供了一个独特的机会，可从一开始就构建可访问性并将其包含在组件库中。

For Matt May, head of inclusive design at Adobe, it comes down to values. “If you want inclusion to be the outcome you have to make a statement that this is something you consider to be meaningful.” For the team working on Adobe’s design system, Spectrum, articulating these values was the first step in ensuring an inclusive approach to the design system. “The first thing we agreed upon was that we were going to make inclusive design one of our principles (‘for everyone’). Your design system documents what you value, and in this case, our values dictated that we needed accessibility to be a core aspect of Spectrum.”

对于Adobe包容性设计负责人Matt May而言，它取决于价值。 “如果您希望包容成为结果，那么您必须声明这是您认为有意义的事情。” 对于致力于Adobe设计系统Spectrum的团队而言，阐明这些价值观是确保对设计系统采取包容性方法的第一步。 “我们同意的第一件事是，我们将包容性设计作为我们的原则 ('为所有人')之一。您的设计系统记录了您所重视的内容，在这种情况下，我们的价值观要求我们需要可访问性成为Spectrum的核心方面。”

Seeing accessibility as an integrated part of design and development, rather than a box to check at the end, is something that Fable CEO Alwar Pillai is seeing more of these days. Fable is a tech platform that enables companies to do accessibility testing with real users, and engage people with disabilities in design, development, and QA. “Our mission is to help organizations integrate and decentralize accessibility,” says Pillai. “We are engaging with companies who are building their design system, and they want to bake accessibility into it. So that it becomes the guiding force for all teams when they are building products.”

如今，寓言首席执行官Alwar Pillai认为可访问性是设计和开发的有机组成部分，而不是最后检查的盒子。 Fable是一个技术平台，使公司能够与真实用户进行可访问性测试，并使残障人士参与设计，开发和质量检查。 “我们的使命是帮助组织整合和分散可访问性，” Pillai说。 “我们正在与正在建立其设计系统的公司合作，他们希望将可访问性纳入其中。这样一来，它就成为所有团队构建产品时的指导力量。”

Image for post — Fable 寓言 Tech Labs. 技术实验室提供。

可达性级别 (Levels of accessibility)

When thinking about how to incorporate accessibility into design systems, there are several lenses to consider. Pillai frames the two key considerations as usability and compatibility. “Usability is the experience, the flow, being able to identify, navigate, and operate an interface to get a task done. Compatibility has to do with how various assistive technology interacts with systems and interfaces. This is the part that is outside of the users’ control, and can be limited by the OS and the type of assistive technology they use. For both usability and compatibility, we need to be able to provide affordances in the design system,” says Pillai.

在考虑如何将可访问性纳入设计系统时，需要考虑几个方面。 Pillai构架了可用性和兼容性这两个关键考虑因素。 “可用性是指经验，流程，能够识别，导航和操作界面以完成任务的能力。兼容性与各种辅助技术与系统和界面的交互方式有关。这是用户无法控制的部分，并可能受操作系统和他们使用的辅助技术类型的限制。为了可用性和兼容性，我们需要能够在设计系统中提供功能。” Pillai说。

Usability and compatibility play out at several levels of the design system. It starts at the individual component level. For the Slack design systems team, “we try to ensure that all of our components are accessible by default,” shares Trish Ang, a front-end engineer on the Slack Kit team. “One of the big success stories has been creating completely accessible versions of our Select components. It’s been one of the hardest components. It’s a series of different dropdowns and it took us almost a year on and off to build it and make it fully accessible. One of the reasons we took it on was that multiple people had built one-off versions of this, which weren’t accessible.” The huge benefit of this effort to create accessible Selects is that now the component is used in dozens of places.

可用性和兼容性在设计系统的多个级别上发挥作用。它从单个组件级别开始。对于Slack设计系统团队，“我们试图确保默认情况下可以访问所有组件，” Slack Kit团队的前端工程师Trish Ang说道。 “最大的成功案例之一就是为Select组件创建了完全可访问的版本。它是最难的组件之一。这是一系列不同的下拉菜单，我们花了将近一年的时间来构建它并使其完全可用。我们采用它的原因之一是，许多人已经构建了一次性的版本，无法访问。” 创建可访问的Selects所做的努力的巨大好处是，现在该组件已在数十个地方使用。

Mina Markham, a senior engineer on the customer acquisition team at Slack (known, among other things, for her groundbreaking work on design systems for the Hilary for America campaign), emphasizes the importance of having baseline accessibility built into every component. “Systemwide we include not only a hover state, but we include a separate focus state, always making sure that each piece of UI that’s meant to be interacted with has defined states for both mouse interaction and keyboard interaction. On the content side, we’ve made sure we ask for alt-text for every single non-decorative image we get from our design team.” Markham also emphasizes the importance of documentation within the design system. “You can document guidelines for that particular component, and document the steps you took to make that component accessible.”

Slack客户获取团队的高级工程师Mina Markham (除其他外，以其为《美国希拉里》运动设计系统所做的开创性工作而闻名 )，他强调在每个组件中内置基线可访问性的重要性。 “在整个系统范围内，我们不仅包括悬停状态，还包括单独的焦点状态，始终确保要交互的每个UI都为鼠标交互和键盘交互定义了状态。在内容方面，我们已经确保我们从设计团队获得的每一个非装饰性图像都要求提供替代文本。” Markham还强调了设计系统中文档编制的重要性。 “您可以记录该特定组件的指南，并记录使该组件可访问的步骤。”

It’s really important to keep in mind that even if individual components have built-in accessibility, that doesn’t necessarily meant that user flows at the page level or template level will be accessible. “If there were such a thing as an accessible brick you can still build an entirely inaccessible house, and that has to do with how things go together,” explains May. Designers and developers need to consider how components fit into holistic layouts and experiences. Having a clear navigation structure and using semantic code help.

请记住，即使单个组件具有内置的可访问性，也不一定要意味着可以访问页面级别或模板级别的用户流，这一点非常重要。 “如果存在诸如易触及的砖块之类的东西，您仍然可以建造一间完全无法通行的房屋，这与事物的运转方式有关，”梅解释说。设计师和开发人员需要考虑组件如何适应整体布局和体验。拥有清晰的导航结构并使用语义代码帮助。

“Making each component accessible doesn’t guarantee that your overall experience is accessible. There are so many aspects to how a component impacts usability (page content and flow, for example). It’s important for designers and developers to have more context for when they use components. For example if you have a set of forms, you need to have instructions that mandate the inclusion of a descriptive header for each form. There needs to be dependent criteria related to the context you’re using the component in,” says Pillai.

“使每个组件都可以访问并不能保证您可以整体访问。组件如何影响可用性有很多方面(例如页面内容和流程)。对于设计人员和开发人员在使用组件时拥有更多上下文非常重要。例如，如果您有一组表单，则需要具有一些说明，这些说明要求为每个表单包括一个描述性标题。 Pillai说。

“We’ve learned this the hard way. When the Select component was launched, we built things out and then when we were nearly finished, I discovered that the structure was not accessible. So now we make sure to think about structure from the beginning,” says Ang. “I’m proud to say that Slack treats accessibility bugs as broken functionality, and product blockers, so we had to make sure we went back and fixed the component.” Ang mentions that one of the ways the Slack team addresses this is that “our designers now provide articulated keyboard interaction models when necessary.” This means handing over comps and wireframes that actually map out the navigation in terms of the tab order of the page.

“我们已经很难学到了这一点。启动Select组件时，我们先进行构建，然后几乎完成时，我发现该结构不可访问。因此，现在我们确保从一开始就考虑结构。” Ang说。 “我很自豪地说Slack将可访问性错误视为已损坏的功能和产品阻止程序，因此我们必须确保返回并修复了该组件。” Ang提到Slack团队解决此问题的方法之一是“我们的设计师现在在必要时提供清晰的键盘交互模型。” 这意味着按照页面的选项卡顺序移交实际上映射了导航的小样和线框。

通过测试确保可访问的设计系统 (Ensuring accessible design systems through testing)

Testing is one way to help ensure that components and page level flows are accessible. There are a few different forms of testing that are helpful: manual, automated, and testing with users.

测试是帮助确保组件和页面级流可访问的一种方法。有几种有用的测试形式：手动，自动和与用户一起测试。

There are several tools that designers and developers can use during their workflow. Colour Contrast Analyser lets designers check their hex codes to ensure adequate color contrast. Markham recommends the aXe plug in, which is “a chrome extension that checks base level accessibility issues. Using the tool is often when we find hierarchy issues.” Similarly, Pillai mentions the Google tool Lighthouse, which is an automated tool to improve webpages, including accessibility issues. Within teams, there is also the opportunity to leverage QA and code reviews to consider the accessibility of a design system component or page template.

设计人员和开发人员可以在工作流程中使用多种工具。色彩对比分析器使设计人员可以检查其十六进制代码，以确保足够的色彩对比。 Markham建议使用ax插件，它是“ Chrome扩展程序，用于检查基本级别的可访问性问题”。我们经常在发现层次结构问题时使用该工具。” 同样，Pillai提到了Google工具Lighthouse ，这是一种用于改善网页(包括可访问性问题)的自动化工具。在团队内部，也有机会利用质量保证和代码审查来考虑设计系统组件或页面模板的可访问性。

Automated checkers are one tool in assessing accessibility, but it’s important to consider that, to understand whether an implementation is accessible to a particular user and their unique assistive technology set up and needs, you need to do testing with real people. That’s why Fable’s mission is to make this easy to do. “Our perspective is that the best way to assess accessibility is to include the end users and hear their perspectives, so we’ve made it really easy for companies to research, co-design, and test their products with people with disabilities through our platform,” says Pillai. Fable was inspired by Pillai’s own experiences as an accessibility manager in large organizations, and the barriers she experienced to including people with disabilities in the design and testing process.

自动化检查器是评估可访问性的一种工具，但重要的是要了解特定用户是否可以访问实施及其独特的辅助技术设置和需求，您需要与真实的人进行测试。这就是为什么寓言的使命是使此操作变得容易。 “我们的观点是，评估可访问性的最佳方法是包括最终用户并听取他们的观点，因此，我们使公司通过我们的平台与残疾人一起研究，共同设计和测试其产品变得非常容易”，皮莱说。寓言的灵感来自于皮莱(Pillai)在大型组织中担任无障碍管理人员的经验，以及她在设计和测试过程中将残疾人包括在内的障碍。

教育的重要性 (The importance of education)

Creating an accessible design system at every level requires an awareness and understanding of accessibility throughout the design systems team and ideally, the broader organization. Pillai has seen the challenges of being a single “accessibility expert” or manager, because that model cannot scale. “Every person’s role and position impacts accessibility — knowing that your actions/decisions can limit someone’s online experience is important,” she says. This is where education and awareness building come in as fundamental aspects of embedding an inclusive mindset and approach to building digital products.

在每个级别上创建可访问的设计系统都需要整个设计系统团队以及理想的整个组织都对可访问性有意识和了解。 Pillai看到了成为一名单一“可访问性专家”或经理的挑战，因为该模型无法扩展。她说：“每个人的角色和职位都会影响可访问性-知道您的行为/决定会限制某人的在线体验很重要，”她说。在这里，教育和意识建设是嵌入包容性思维和方法来构建数字产品的基本方面。

Education efforts can be formal or informal, and often end up being a mix of both. At Adobe, “as of January we’ll have done 11 full-day trainings across 9 sites on 3 continents, and reached everyone inside Adobe Design,” shares May. The genesis of this inclusive design training was Blue Belt, “the first major training package we built on the accessibility side for engineers. We covered things like a lot of the details of how an accessibility API works at an OS level. What we found was that engineers are called upon to build systems they can’t make accessible enough on their own, because the design didn’t account for accessibility in the first place.” Now, Adobe has rolled out training across the entire organization, to ensure all products are considering accessibility from the ground up. In 2020 Adobe will make their inclusive design materials public, including things like a hands-on introduction to evaluating and documenting accessibility in design deliverables such as wireframes.

教育工作可以是正式的，也可以是非正式的，并且往往最终两者兼而有之。在Adobe，“从1月份开始，我们将在3大洲的9个站点上进行11天全天培训，并覆盖Adobe Design内部的每个人，” May说道。这项包含性设计培训的起源是“蓝带”，“我们在无障碍方面为工程师构建的第一个主要培训包。我们涵盖了诸如可访问性API在操作系统级别如何工作的许多细节。我们发现，工程师被要求构建自己无法充分访问的系统，因为设计一开始并没有考虑可访问性。” 现在，Adobe已在整个组织范围内进行了培训，以确保所有产品都从头开始考虑可访问性。 2020年，Adobe将公开其包容性设计材料，包括诸如动手入门介绍，以评估和记录设计可交付成果(如线框)的可访问性。

At Slack, education on accessibility is mostly peer-to-peer and informal. Ang mentions that there have been a lot of efforts to get everyone up to scratch on basic accessibility requirements. For example, testing out ARIA labels during code reviews (ARIA labels help screen readers and other assistive technologies have more context about a specific element). There are some documented guidelines, such as the color palette, and working side by side with folks with deep accessibility expertise helps the teams level up. “It’s a lot of ‘in the moment’ education, when I see something going astray I’ll call it out. I was noticing that a few of our engineers were writing uppercase letters in the actual code base, and the screener reader will read it out as an actual acronym. All it took was that one little call out and now it’s no longer an issue,” says Markham.

在Slack，关于可访问性的教育大部分是对等的和非正式的。 Ang提到，已经做了很多努力使每个人都对基本的可访问性要求有所了解。例如，在代码检查期间测试ARIA标签(ARIA标签可帮助屏幕阅读器和其他辅助技术提供有关特定元素的更多上下文)。有一些已记录在案的指南，例如调色板，并且与具有深厚可访问性专业知识的人们并肩工作可帮助团队升级。 “这是很多'当下'的教育，当我看到误入歧途时，我会大声说出来。我注意到我们的一些工程师正在实际的代码库中写大写字母，而筛选器阅读器会以实际的缩写形式读出它。要做的只是一个小小的呼唤，现在不再是一个问题。” Markham说。

For designers and developers that want to get started in their learning process, there are lots of resources and communities that can help. Liz Jackson’s Interaction19 keynote covers helpful framing around inclusive design, as does Kat Holmes’ book Mismatch. Alwar recommends the book The End of Average by Todd Rose. At a technical and component level, Markham suggests Heydon Pickering’s blog and book, Inclusive Components, that walks through specific examples of accessible components. Ang has also put together a comprehensive list of accessibility resources that span from accessibility 101, to ones focused on testing and building.

对于希望开始学习过程的设计师和开发人员，有很多资源和社区可以提供帮助。丽兹·杰克逊(Liz Jackson)的Interaction19主旨演讲涵盖了包容性设计的有用框架，凯特·霍尔姆斯(Kat Holmes)的著作《错配》也是如此。阿尔瓦尔(Alwar)推荐托德·罗斯(Todd Rose) 的《平均线的终结》。在技术和组件级别，Markham建议Heydon Pickering的博客和书籍Inclusive Components ，其中会详细介绍可访问组件的特定示例。 Ang还汇总了可访问性资源的完整列表，从可访问性101到专注于测试和构建的资源。

无障碍获取是故意的结果 (Accessibility as an intentional outcome)

“The way I think about accessibility is that it’s not a separate thing, it’s just part of the design process,” says Markham. Pillai agrees. “As designers, we are in charge of the overall experience, and that includes accessibility. If every team and project isn’t considering inclusion and accessibility as part of their responsibility, it’s not going to scale.”

Markham说：“我对可访问性的看法是，它不是独立的东西，而只是设计过程的一部分。” 皮莱同意。 “作为设计师，我们负责整体体验，其中包括辅助功能。如果每个团队和项目都没有将包容性和可访问性作为其职责的一部分，那么规模就不会扩大。”

For design systems teams looking to encourage widespread adoption of their systems, accessibility can be a compelling argument. May has seen this advantage with Spectrum. “Enshrining accessibility in Spectrum from the ground up means that we’re not starting from scratch. It’s actually become a selling point for Spectrum for product teams — a baseline of accessibility comes free.”

对于希望鼓励其系统广泛采用的设计系统团队，可访问性可能是一个令人信服的论点。也许已经看到了Spectrum的这一优势。 “从根本上在Spectrum中提供可访问性意味着我们不是从头开始。它实际上已成为Spectrum对产品团队的卖点-可访问性的基线是免费的。”

Thankfully, there is more and more recognition in the design and tech world that inclusivity is an imperative for building successful, ethical products. “One essential aspect of inclusive design is to design with the people who are going to use what you have to offer,” says May. “Design systems are the frame into which you can put values and behavior that can end up excluding people.” Because design systems are becoming the foundational structures that inform digital product design and development, we have to ensure that the systems are inclusive and accessible.

值得庆幸的是，在设计和技术领域，越来越多的人意识到，包容性对于构建成功的道德产品至关重要。 “包容性设计的一个基本方面是与将要使用您所提供的产品的人们进行设计，”梅说。 “设计系统是一个框架，您可以在其中放置可能导致排斥人员的价值和行为。” 因为设计系统正在成为指导数字产品设计和开发的基础结构，所以我们必须确保系统具有包容性和可访问性。

Continue to part four: Three Lessons from Brand Setting Up and Driving Adoption of Design Systems.

继续到第四部分： 品牌建立和驱动设计系统采用的三个教训 。

Thank you to all of the people who participated in research, interviews and surveys, and shared their deep knowledge and expertise. For more on design systems, download the Adobe and Idean e-book ‘Hack the Design System.’

感谢所有参与研究，访谈和调查并分享其深厚知识和专长的人们。 有关设计系统的更多信息，请 下载Adobe和Idean电子书“ Hack the Design System”。

For more unique insights and authentic points of view on the practice, business and impact of design, visit Adobe XD Ideas.

有关设计的实践，业务和影响的更多独特见解和真实观点，请访问Adobe XD Ideas 。

To learn about Adobe XD, our all-in-one design and prototyping tool:

要了解Adobe XD，我们的多合一设计和原型制作工具：