Smashing Magazine defines “responsive design” as an approach where design responds to the user’s behavior and environment based on screen size, platform, and orientation. In responsive design, a breakpoint is the “point” at which a website’s content and design will adapt to provide the best possible user experience. Essentially, breakpoints are pixel values that a developer/designer can define in CSS. I can count on one hand the number of webpages I have bookmarked. Apple’s list of responsive breakpoints for iOS devices is one of them.

Smashing Magazine将“响应式设计”定义为一种方法，其中设计根据屏幕的大小，平台和方向来响应用户的行为和环境。 在响应式设计中， 断点是网站内容和设计将适应以提供最佳用户体验的“点”。 本质上，断点是开发人员/设计人员可以在CSS中定义的像素值。 我一方面可以指望已添加书签的网页数量。 苹果公司针对iOS设备的响应断点列表就是其中之一。

In a mobile-first world, you always do responsive breakpoints. Because, yeah, it’s mobile. But let’s say hypothetically your organization doesn’t live in a mobile-first world, and your officially supported environments are laptops and tower systems only. Your software is ridiculously complicated. Your organization is allergic to mobile; small form factors will never EVER work. “Why would you spend time designing and implementing responsive breakpoints for something that never will appear on a supported mobile device,” you may be asking yourself.

在移动优先的世界中，您始终会做出响应式断点。 因为，是的，它是移动的。 但是，假设您的组织不是生活在移动优先的世界中，而您官方支持的环境仅是笔记本电脑和塔式系统。 您的软件非常复杂。 您的组织对移动设备过敏； 小巧的外形永远都行不通。 “您为什么要花时间设计和实现对于那些不会出现在受支持的移动设备上的响应式断点，”您可能会问自己。

Simple. The Americans with Disabilities Act. If you are based in the US or selling something in the US, the ADA applies to you. Being headquartered outside the US does not exempt you from following the ADA.

简单。 《美国残疾人法》。 如果您居住在美国或在美国销售商品，则ADA适用于您。 总部位于美国境外并不能免除您遵循ADA的责任。

Federal courts interpreting the ADA and local state versions like the California Unruh Act have been consistently holding that digital properties — software, websites, mobile apps, and electronic documentation — MUST be accessible to people with disabilities. A definition of accessibility standards for XR/VR is proposed to be added to WCAG 3.0 (aka Project Silver). Twenty-three hundred lawsuits were filed in each of the last two calendar years, with the plaintiff’s winning the overwhelming majority of them.

解释ADA和加利福尼亚州《鲁鲁法案》等地方州版本的联邦法院一直认为，数字资产(软件，网站，移动应用程序和电子文档)必须对残疾人开放。 提议将XR / VR的可访问性标准定义添加到WCAG 3.0(又称为Project Silver)中。 在过去两个日历年中，每年有2,300宗诉讼，其中原告胜诉。

The only slowdown seen in the first half of 2020 was due to COVID closing courthouses where only emergency cases were being accepted. American civil litigation returned to its “normal” pace of lawsuit filing in May. Seventy-five percent of the cases filed to date in 2020 have cited WCAG 2.1 Level AA in the plaintiffs’ complaints as the standard that should be met. While WCAG 2.1 Level AA was released more than two years before the publishing of this article, the US government is firmly entrenched in 2.0 as the standard for Section 508. Many organizations think of 2.1 as “The EU standard” — but this is simply not the case. These figures come from Usablenet’s incredibly useful every-six-months report on web accessibility litigation that was updated today.

2020年上半年出现的唯一放缓是由于COVID关闭法院，仅受理紧急情况。 5月，美国民事诉讼恢复了其“正常”的诉讼速度。 到2020年为止，有75％的案件已将原告的申诉中的WCAG 2.1 AA级视为必须达到的标准。 尽管在发布本文之前两年多发布了WCAG 2.1 AA级认证，但美国政府已牢牢地将2.0确立为508节的标准。许多组织将2.1视为“欧盟标准”，但事实并非如此。案子。 这些数字来自于Usablenet每隔六个月发布的关于Web无障碍诉讼的非常有用的报告，该报告今天已更新。

Less than one half of one percent of users use screen readers to navigate software. And those are largely the people who are currently suing for lack of accessibility. It is clear, however, that the lawyers who are making quite a bit of money off this litigation are always on the lookout for fresh meat. In the past year, they’ve added whistleblower suits, suits over digital trespass, suits over gift cards without Braille, and suits against over 100 sites using overlays and plugins. These all represent new avenues for litigators to attempt to continue their cash flow, as more organizations get fundamental accessibility religion for run-of-the-mill websites.

不到百分之一的用户中有一半使用屏幕阅读器来浏览软件。 这些人大多是目前因缺乏可达性而提起诉讼的人。 但是，很明显，从该诉讼中赚了很多钱的律师总是在寻找新鲜的肉。 在过去的一年中，他们增加了举报者诉讼 ，针对数字侵入的诉讼，针对不带盲文的礼品卡的诉讼，以及针对使用覆盖和插件的100多个站点的诉讼。 所有这些都为诉讼者提供了继续维持现金流的新途径，因为越来越多的组织开始对常规网站进行基本的无障碍访问。

There are WAY more users who need magnification as those who need screen readers. Magnification is used by people with any level of vision loss for any reason. If you wear glasses, generally you can benefit from magnifying things, especially as you get older. That is a whopping 75 % of the country — people who wear glasses, people who wear contacts, and people who have had some type of permanent vision correction surgery.

与需要屏幕阅读器的用户相比，有更多需要放大的用户。 出于各种原因，视力丧失的人都可以使用放大倍数。 如果戴眼镜，通常您可以从放大的东西中受益，尤其是随着年龄的增长。 那是整个国家的75％，他们是戴眼镜的人，戴隐形眼镜的人以及进行过永久性视力矫正手术的人。

WCAG 2.1 Level AA has two standards concerning magnification. The first one has been around for 11 years. The second is “new” (i.e., two years old) with WCAG 2.1.

WCAG 2.1 AA级有两个关于放大率的标准。 第一个已经存在了11年。 第二个是使用WCAG 2.1的“新”(即两年)。

SC 1.4.4 (Level AA) Resize text: Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality. (Level AA)

SC 1.4.4(AA级) 调整文本大小：除文本的标题和图像外，无需辅助技术即可调整文本大小，最大可调整 200％，而不会损失内容或功能。 (AA级)

and

和

SC 1.4.10 (Level AA) Reflow: Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for:

SC 1.4.10(AA级)重排 ：内容可以在不丢失信息或功能的情况下呈现，并且不需要在以下两个方面进行滚动：

• Vertical scrolling content at a width equivalent to 320 CSS pixels, which is equal to a starting viewport width of 1280 CSS pixels wide at 400% zoom

  垂直滚动内容的宽度等于320 CSS像素 ，等于在400％缩放时起始视口宽度为1280 CSS像素

• Horizontal scrolling content at a height equivalent to 256 CSS pixels, which is equal to a starting viewport height of 1024 CSS pixels at 400% zoom.

  水平滚动内容的高度等于256 CSS像素 ，等于400％缩放时起始视口高度为1024 CSS像素。

Exemptions are available for images, maps, diagrams, video, games, presentations, data tables, and interfaces where it is necessary to keep toolbars in view while manipulating content are exempt. That exemption list is not as long as it sounds. Most static and dynamic pages do not qualify.

豁免适用于图像，地图，图表，视频，游戏，演示文稿，数据表和界面，其中在操作内容时必须保持工具栏处于可见状态。 该豁免清单听起来并不长。 大多数静态和动态页面均不合格。

Hmmm absolute pixel values that a developer / designer can define in CSS to get the optimal user experience — what does that sound like?

开发人员/设计人员可以在CSS中定义的Hmmm绝对像素值，以获得最佳的用户体验-听起来像什么？

Oh yeah, RESPONSIVE BREAKPOINTS!

哦，是的，React力很强！

The guideline is called Reflow because the requirement is that the design re-organizes itself when someone zooms in up to 4X. But in actuality, it would have been more accurate to call it Responsive, because the way to implement that is *exactly* how you would implement responsive breakpoints.

该准则称为“重排”，因为要求是当有人放大到4倍时，设计必须重新组织。 但实际上，将其称为“响应式”会更准确，因为实现的方法是“精确地”实现响应式断点的方式。

— make it bigger

—加大

— re-organize the elements around the larger font sizes

—重新组织大字体周围的元素

— don’t make it hard for people to get around

-不要让人们四处走动

By the way, if you are meeting the new guideline 1.4.10, you are probably inherently meeting 1.4.4

顺便说一句，如果您要满足新的准则1.4.10，则可能天生就符合1.4.4。

These are Level AA guidelines. I’ve heard people refer to Level AA as “nice to have.” They aren’t. Unless your company is in Ontario Canada only for Ontarians and is shutting down in five months, if there is an accessibility law, Level AA is required. Level AA is not as crucial as Level A, because Level A issues are blockers. That doesn’t mean Level AA isn’t essential!

这些是AA级指南。 我听说有人称AA级为“很不错”。 他们不是。 除非您的公司仅在安大略省的加拿大安大略省开张，并且要在五个月内关闭，否则如果有无障碍法律，则要求AA级。 A级问题没有A级问题那么重要，因为A级问题是阻碍因素。 这并不意味着AA级不是必不可少的！

1.4.4 and 1.4.10 are the guidelines that most likely trigger whining about how expensive being accessible is. Well, sure accessibility is going to be costly if you are doing it reactively (i.e., if you are trying to jam it in after all your design and development work is done). The vast majority of accessibility fixes are simple; five lines of code or less. Magnification fixes do not come in the “simple” category. Proactive accessibility where you design and code your digital property to be accessible; it is a less expensive approach that results in a better product with fewer bugs that will more likely hit your release dates. Starting with an accessible design system like Clarity will help save you time. Don’t reinvent the wheel if you don’t have to.

1.4.4和1.4.10是最有可能引发抱怨的问题，即可访问性的价格是多少。 好吧，如果您以被动的方式进行可访问性(例如，如果在完成所有设计和开发工作后试图将其卡住)，那么可访问性肯定会很昂贵。 绝大多数可访问性修补程序都很简单； 五行或更少的代码。 放大倍率修复程序不在“简单”类别中。 在您设计和编码数字资产以使其可访问时的主动可访问性； 它是一种较便宜的方法，可以使产品更好，错误更少，而这些错误更有可能会影响您的发布日期。 从诸如Clarity之类的可访问设计系统开始，将帮助您节省时间。 如果没有必要，不要重新发明轮子。

Be proactive, be responsive, be inclusive, and you drastically reduce your risk of getting sued. You can view this as doing the right thing, or you can view this as not wanting to be the next notch on a litigator’s belt. I don’t particularly care why people decide to become accessible. I just care that they do it.

积极主动，React敏捷，包容各方，您可以大大降低被起诉的风险。 您可以将其视为正确的做法，也可以将其视为不希望成为诉讼者腰带上的下一个缺口。 我并不特别在乎人们为什么决定变得可访问。 我只是在乎他们这样做。