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敏捷，包容各方，您可以大大降低被起訴的風險。 您可以將其視為正確的做法，也可以將其視為不希望成為訴訟者腰帶上的下一個缺口。 我并不特別在乎人們為什么決定變得可訪問。 我只是在乎他們這樣做。