Older adults (65 years and up) and individuals of any age with serious underlying medical conditions are most at risk for COVID-19. When we consider these groups of people as users, accessibility is critical now more than ever. Alerts, public announcements and symptom trackers that are clear, actionable and accessible can help save lives.

老年人(65岁及以上)和具有严重基础疾病的任何年龄的人患COVID-19的风险最高。 当我们将这些人群视为用户时，可访问性现在比以往任何时候都更为重要。 清晰，可操作且可访问的警报，公告和症状跟踪器可以帮助挽救生命。

We recognize hospitals are overwhelmed right now — and rightfully so. As the Phase2 Accessibility Lead, I set out to check on whether or not these alerts were helping our users when they need it most.

我们认识到，医院现在不堪重负-这是理所当然的。 作为Phase2 Accessibility Lead，我着手检查这些警报是否在最需要我们的用户时提供帮助。

In my attempt to find a good example of a hospital COVID-19 alert (there were hardly any), I also found repeated content and user experience issues.

在试图找到医院COVID-19警报的好例子(几乎没有)的过程中， 我还发现了重复的内容和用户体验问题。

There wasn’t a consistent user path for the variety of users:

对于各种用户，没有统一的用户路径：

• Users who have symptoms of COVID-19;出现COVID-19症状的用户；
• Family members of those infected with COVID-19;感染了COVID-19的人的家庭成员；
• Users who have emergency care needs not related to COVID-19;有紧急护理需求的用户与COVID-19无关；
• Users who have medical needs not related to COVID-19.有医疗需求的用户与COVID-19无关。

When considering elements like the homepage, the banner alert, the hero card, the chatbot, are we getting these core users to the right place? The content messaging was often confusing (and at times, conflicting).

在考虑首页， 横幅警报， 英雄卡 ， 聊天机器人等元素时，我们是否将这些核心用户选到了正确的位置？ 内容消息传递常常令人困惑(有时是冲突)。

These are all fundamental considerations that we must consider in designing these entry points into the website, whether it be to

这些都是设计网站这些入口点时必须考虑的基本考虑因素，无论是

• a COVID-19 microsite,一个COVID-19微型网站，
• the updated visitor policy,更新的访问者政策，
• a COVID-19 symptom checker to inform whether or not they should come in to the emergency room, orCOVID-19症状检查器，以告知他们是否应进入急诊室，或
• a pathway for non-COVID-19 medical needs非COVID-19医疗需求的途径

I promptly pulled in my colleagues across multiple departments to evaluate these alerts and develop high-level best practices, the anatomy of a Good Alert.

我Swift吸引了多个部门的同事来评估这些警报并制定了高级最佳实践， 即良好警报的剖析。

良好警报的剖析 (Anatomy of a Good Alert)

When you add alerts or banners on your website for COVID-19 regarding service closures or updates, consider the following four items:

当您在网站上添加有关COVID-19的有关服务关闭或更新的警报或横幅时，请考虑以下四个项目：

1 & 2: Use text, iconography and color together to convey meaning. A banner with only the background shading and the message is not always enough. Incorporating an icon with “Alert” text reinforces the message.

1和2：一起使用文字，图标和颜色来传达含义。 仅带有背景阴影和消息的横幅并不总是足够的。 将图标与“警告”文本结合在一起可以增强消息。

3. Provide Link styling beyond use of color alone such as underlines, bold, or accent symbols.

3.除了单独使用颜色(例如下划线，粗体或强调符号)外，还提供链接样式 。

4. Ensure appropriate color contrast of the text to the background.

4.确保文本与背景的适当颜色对比 。

• Text ratio is 4.5:1. This is any text smaller than 18pt or is not bold.

  文字比例为4.5：1。 这是小于18pt的任何文本或不是粗体。

• Large Text contrast ratio is 3:1. Large text is defined as text larger than 18pt OR 14 pt and bold. (In CSS, this would be font-weight: 700 or greater, or font-weight:bold)

  大文本对比度为3：1 。 大文本定义为大于18pt或14 pt 且加粗的文本。 (在CSS中，这是font-weight：700或更大，或者font-weight：bold)

• Use a tool like https://contrast-ratio.com/ to check the contrast ratio. You can also use You may use the free colorsafe.co tool which will give you compliant colors based on a reference color. This is helpful if one of the colors is based on the brand.

  使用https://contrast-ratio.com/之类的工具检查对比度。 您也可以使用您可以使用免费的colorsafe.co工具，该工具将根据参考颜色为您提供兼容的颜色。 如果其中一种颜色基于品牌，这将很有帮助。

Exceptions: Incidental text such as text within an inactive element like a disabled button. Text as part of a logo.

例外 ：偶然文本，例如非活动元素(例如禁用按钮)中的文本。 文字作为徽标的一部分。

Support text resizing includes ensuring that text isn’t clipped, truncated, or obscured on the screen. Refer to WCAG 2.0 1.4.4 Resize Text for understanding on how to meet this requirement.

支持文本调整大小包括确保文本不会在屏幕上被剪切，截断或遮挡。 请参阅WCAG 2.0 1.4.4调整大小文本以了解如何满足此要求。

Ensure buttons (eg, CTAs and close/dismiss) are large enough. The modal or banner on the homepage may include a Call to Action button or a “close / dismiss.” These buttons should be at least 44 pixels by 44 pixels wide. This makes it easier for those with hand tremors to be able to activate the button. If it is too small then they would have to focus and control hand movement for greater precision. This also applies to users who jokingly claim “Fat Fingers” on mobile devices. Reference: WCAG 2.5.5 Target Size (AAA)

确保按钮(例如，CTA和关闭/关闭)足够大 。 主页上的模式或横幅可以包括“号召性用语” 按钮或“关闭/关闭” 。 这些按钮的宽度至少应为44像素乘44像素。 这使手部震颤的人更容易激活按钮。 如果它太小，那么他们将不得不集中精力并控制手部运动以获得更高的精度。 这也适用于在移动设备上开玩笑地声称“胖手指”的用户。 参考：WCAG 2.5.5目标大小(AAA)

编写无障碍警报 (Writing an Accessible Alert)

Keep the message short. Use plain language with clear, concise and descriptive text. For example:

保持简短。 使用通俗易懂的语言以及清晰，简洁和描述性的文字。 例如：

There may be a shipping delay because of the COVID-19 emergency. For urgent help, please call 800–123–4567.

由于COVID-19紧急情况，可能会延迟发货。 如需紧急帮助，请致电800–123–4567。

Use the Hemingway Readability App to evaluate the readability of your alert and adjust until it has a readability score of no greater than Grade 6.

使用海明威可读性应用程序评估警报的可读性并进行调整，直到其可读性得分不超过6级。

Make link text descriptive and front load it with relevant terms. Avoid generic calls-to-action like ‘Click Here’ or ‘Read More.’ Be specific, such as “Check Symptoms” or “Learn more about COVID-19 (PDF)”

使链接文本具有描述性，并在其前面加载相关术语。 避免使用通用的号召性用语，例如“点击此处”或“更多内容”。 具体说明，例如“ 检查症状 ”或“ 了解有关COVID-19的更多信息(PDF) ”

Consider the length of the link users need to select. A one-word link could be hard to select for people with reduced motor skills. Copy like “visitor restrictions” would be preferential over the single word, “restrictions.”

考虑用户需要选择的链接的长度。 对于运动能力低下的人，很难选择一个单词的链接。 像“访客限制”这样的副本将优先于单个单词“限制”。

提供屏幕阅读器支持 (Provide Screen-Reader Support)

Users who are blind or have low vision use a screen-reader to read aloud the information on the screen. Since these users cannot see the screen, development efforts must be made so that they are immediately notified when opening the webpage. This can be accomplished using the ARIA alert role (role=”alert”). If the alert has a close button, then use the role=”alert dialog”

失明或视力不佳的用户使用屏幕阅读器大声阅读屏幕上的信息。 由于这些用户看不到屏幕，因此必须做出开发努力，以便在打开网页时立即通知他们。 这可以使用ARIA警报角色(role =“ alert”)来完成。 如果警报具有关闭按钮，则使用role =“警报对话框”

Visit developer.mozilla.org for code examples of ARIA: alert role. Google’s Lighthouse plugin also has supporting documentation: Introduction to ARIA, as well as the Chromecast video (~9 minutes) with a runthrough of how it sounds to a screen-reader:

访问developer.mozilla.org以获取ARIA的代码示例：警报角色。 Google的Lighthouse插件还具有支持性文档： ARIA简介 ，以及Chromecast视频(约9分钟)，其中包括如何在屏幕阅读器中播放声音：

If you’re not sure how to use a screen-reader to evaluate this out of the gate, use the Google Chrome Lighthouse plugin to help guide you through this process.

如果您不确定如何使用屏幕阅读器来进行评估，请使用Google Chrome Lighthouse插件来帮助您完成此过程。

如今在医院网站上存在的警报示例 (Examples of Alerts that Exist on Hospital Websites Today)

Having this informed knowledge in mind, it was hard to find one COVID-19 Alert that met the criteria we identified. Some had one or few of these best practice elements. I elected to make illustrations of examples to focus on the issue as opposed to a screenshot identifying the hospital. Here’s a sampling of what I found:

考虑到这些知识，很难找到一个符合我们确定标准的COVID-19警报。 有些具有这些最佳实践元素中的一个或几个。 我选择对这些例子进行说明，以重点关注该问题，而不是截图来标识医院。 这是我发现的样本：

缺乏足够的色彩对比 (Lack of Adequate Color Contrast)

There were multiple cases of light colors with white text of the alert background. The contrast ratio between the foreground and background was not high enough, making it difficult to read.

警报背景有白色文本的情况下，有浅色的情况很多。 前景和背景之间的对比度不够高，难以阅读。

Here’s how it can be improved with darker font:

这是使用深色字体可以改进的方法：

小字体 (Small Font Size)

Small font sizes or type that cannot be scaled, such as being an image of text;

小字体大小或无法缩放的类型，例如文本图像；

Here’s how much easier it is to read with larger font:

这是使用大字体阅读的容易程度：

CTA歧义 (CTA Ambiguity)

I found a lot of call to action links such as “Click here” which is unclear about what the link will “do” for the user. Unclear links leave the user guessing or making assumptions.

我发现了许多号召性用语链接，例如“单击此处”，但不清楚该链接将为用户“做什么”。 不清楚的链接使用户猜测或做出假设。

Changing the link text to something more descriptive provides a greater context to the expected page target.

将链接文本更改为更具描述性的内容可为预期的页面目标提供更大的上下文。

链接样式 (Link Styling)

In my review, some hospital alert banners had link styling that was hard to distinguish due to lack of color or bold, or underlining. Links were only distinguished when a user focused on it with mouse or keyboard.

在我的评论中，一些医院警报标语具有链接样式，由于缺乏颜色，粗体或下划线而难以区分。 仅当用户使用鼠标或键盘专注于链接时，才区分链接。

A fix for this would be to make the text plain and links bold and/or underlined.

解决此问题的方法是使文本纯净且链接用粗体和/或加下划线。

点击目标 (Click Targets)

A few of the alerts had a “dismiss” or “close” button. This is challenging for people who have hand tremors.

一些警报具有“关闭”或“关闭”按钮。 对于手部震颤的人来说，这是一个挑战。

In this example you’ll note it’s small and in the very upper right corner.

在此示例中，您会注意到它很小，位于右上角。

With it bigger, it’s much more obvious and easier to select.

随着它的变大，它变得更加明显和易于选择。

临时创可贴 (A Band-Aid for Now)

Hopefully with this guide you have the information you need to evaluate and make appropriate recommendations to your team. You may use these available tools to evaluate the different alert touch-points:

希望借助本指南，您可以获得评估和向团队提出适当建议所需的信息。 您可以使用以下可用工具来评估不同的警报接触点：

• Contrast-Ratio.com to evaluate the color contrast ratio of the alert text against the background;

  Contrast-Ratio.com评估警报文本与背景的颜色对比度；

• Colorsafe.co to provide alternate colors to meet contrast requirements;

  Colorsafe.co提供替代颜色以满足对比度要求；

• The Google Chrome Lighthouse Plugin to review the accessibility of the Alert

  Google Chrome Lighthouse插件，用于查看警报的可访问性

• The Hemingway Readability App to evaluate the alert for plain language.

  海明威可读性应用程序，用于评估警报是否使用纯语言。

• Testing the Alert with both a screen-reader and Keyboard navigation (when there is an interactive element)使用屏幕阅读器和键盘导航测试警报(当存在交互式元素时)

With knowing the right people to flag down, these updates can be done within a few minutes; it helps to understand “who” to talk to for the improvements:

在知道合适的人来举报之后，这些更新可以在几分钟之内完成； 它有助于理解“谁”来进行改进：

• Who has the ability to change the content in the content management system?

  谁有能力在内容管理系统中更改内容 ？

• Who is able to adjust the styling? This person will be able to make the requisite font and color updates in the CSS.

  谁可以调整样式？ 此人将能够在CSS中进行必要的字体和颜色更新。

• Who has the ability to adjust the development feature, such as adding the applicable ARIA roles?

  谁有能力调整开发功能 ，例如添加适用的ARIA角色？

今天和以后的修复 (A Fix Today & for Later)

Our efforts to “flatten the curve” and stop the rapid spread of coronavirus is a collective effort, and that depends on people getting the most up-to-date information. Keep our hospitals safer and provide people at home with information that they can access, regardless of their ability. COVID-19 safety and preparedness information should be accessible to everyone.

我们“拉平曲线”并阻止冠状病毒Swift传播的努力是一项集体努力，而这取决于人们获取最新信息。 确保我们的医院更安全，并为人们提供无论其能力如何均可在家中使用的信息 。 每个人都应该可以访问 COVID-19的安全和防范信息。

If your design system doesn’t support all the requirements, do at least what you can today to help the experience because everything we do has a direct impact on the health of our communities.

如果您的设计系统不能满足所有要求，那么至少要尽您所能来帮助体验，因为我们所做的一切都会直接影响社区的健康。

Well-designed, clear messages help people make informed decisions for the health and well-being of not only themselves but everyone else.

精心设计的清晰信息可以帮助人们做出明智的决定，不仅是自己，而且也是其他所有人的健康。

I would like to thank my Phase2 collaborators, Rachel Broardt, Rebecca Fanning, Annie Power, Nadia Saleh, Jennifer Segalini, and Emily White for their analysis and contribution to these findings

我要感谢我的Phase2合作者Rachel Broardt ， Rebecca Fanning ， Annie Power ， Nadia Saleh ， Jennifer Segalini和Emily White的分析和对这些发现的贡献