模態(tài)和非模態(tài)代碼

什么是模態(tài)？ (What are modals?)

A modal, or modal dialog, is an overlay window that opens on top of the current primary content or screen. It places focus on itself, usually making the background inactive (“inert”) — i.e. visually greyed out or dimmed.

模態(tài)或模態(tài)對(duì)話框是在當(dāng)前主要內(nèi)容或屏幕頂部打開的覆蓋窗口。 它專注于自身，通常使背景處于非活動(dòng)狀態(tài)(“惰性”)，即在視覺上變灰或變暗。

It can be dismissed by pressing some kind of close or X button, by tapping away from the on-focus area, or by pressing an appropriate “cancel” CTA.

可以通過按某種關(guān)閉或X按鈕，輕按遠(yuǎn)離對(duì)焦區(qū)域或按適當(dāng)?shù)摹叭∠?CTA來消除它。

In web design and development, there are three things that impact the success of modals:

在網(wǎng)站設(shè)計(jì)和開發(fā)中，有三件事會(huì)影響模式的成功：

Is there an appropriate use case?

有合適的用例嗎？

Is it designed in line with usability heuristics and W3C guidelines?

它的設(shè)計(jì)是否符合可用性啟發(fā)法和W3C準(zhǔn)則 ？

Is it built in line with W3C and maximising ARIA practices?

它是否符合W3C并最大化了ARIA做法？

Any of these can cause usability and accessibility issues for users.

這些中的任何一個(gè)都可能導(dǎo)致用戶的可用性和可訪問性問題。

In this article, I’m going to look at how UX Design and Front-end development skill sets can work together to achieve positive outcomes.

在本文中，我將研究UX設(shè)計(jì)和前端開發(fā)技能集如何協(xié)同工作以實(shí)現(xiàn)積極的成果。

Note: These are learnings from live projects and personal study, so as always — correct me in the comments. We’re all a work-in-progress.

注意：這些是從實(shí)際項(xiàng)目和個(gè)人學(xué)習(xí)中獲得的經(jīng)驗(yàn)，因此一如既往-在評(píng)論中糾正我。 我們都在進(jìn)行中。

他們解決什么問題？ (What problem do they solve?)

There are two main accepted use cases for modals:

模態(tài)有兩個(gè)主要的公認(rèn)用例：

1. Data input — To allow users to complete a small additional task as part of a primary flow without opening a new window or starting a new journey.

1.數(shù)據(jù)輸入 -允許用戶作為主要流程的一部分完成少量其他任務(wù)，而無需打開新窗口或開始新旅程。

This allows user to provide data required by the system, without leaving the context and flow of the task they are currently engaged in. As an example, this could be a date picker, or some critical permissions. In ARIA practices, this is covered by a general modal dialog.

這允許用戶提供系統(tǒng)所需的數(shù)據(jù)，而無需離開他們當(dāng)前正在從事的任務(wù)的上下文和流程。例如，這可能是日期選擇器或某些關(guān)鍵權(quán)限。 在ARIA實(shí)踐中，這由常規(guī)的模態(tài)對(duì)話框覆蓋。

2. An alert — To introduce necessary friction.

2.警報(bào) —引入必要的摩擦。

Not every task, journey or experience should be frictionless. Sometimes we introduce friction deliberately to prevent user error. As an example, deleting files or content can have a significant impact on workflow, therefore this should be a high-friction action. In ARIA practices, this is called an alert dialog.

并非每項(xiàng)任務(wù)，旅程或經(jīng)歷都應(yīng)該順暢無阻。 有時(shí)我們故意引入摩擦以防止用戶錯(cuò)誤。 例如，刪除文件或內(nèi)容可能會(huì)對(duì)工作流程產(chǎn)生重大影響，因此這應(yīng)該是一種高摩擦的動(dòng)作。 在ARIA實(shí)踐中，這稱為警報(bào)對(duì)話框 。

它們會(huì)產(chǎn)生什么問題？ (What problems do they create?)

The way modals are used and designed can cause usability and user experience challenges. However, the most perfect visual affordance can still fall down when it comes to web accessibility, if the modal is not built correctly.

使用和設(shè)計(jì)模態(tài)的方式可能會(huì)導(dǎo)致可用性和用戶體驗(yàn)方面的挑戰(zhàn)。 但是，如果未正確構(gòu)建模式，則在訪問Web時(shí)，最完美的視覺承受力仍然會(huì)下降。

可用性失敗 (Usability fail)

Using modals that introduce friction when it is not needed, or when a task can be completed in-line or as part of the main screen, can be a massive interruption to the user experience.

使用不需要摩擦的模態(tài)時(shí)，或者當(dāng)任務(wù)可以在線或作為主屏幕的一部分完成時(shí)，可能會(huì)給用戶體驗(yàn)帶來極大的干擾。

Common occurrences of this are:

常見的情況是：

• Covering up broken journeys

  掩蓋旅程

Someone decided to insert something into an existing journey and rather than redesign several screens, or think through the IA, a modal was deemed an expedient solution.

有人決定在現(xiàn)有流程中插入一些內(nèi)容，而不是重新設(shè)計(jì)多個(gè)屏幕，或者通過IA進(jìn)行思考，將模式視為一種權(quán)宜之計(jì)。

In this scenario, as designers we have to really question our own motivation and/or those of the PO or stakeholder suggesting this. Is it laziness? Or does it genuinely increase product usability and ease of task completion. In the example above I mentioned a date picker — so the question is does this have to be an overlay modal? Can this not be completed in line?

在這種情況下，作為設(shè)計(jì)師，我們必須真正質(zhì)疑我們自己的動(dòng)機(jī)和/或PO或利益相關(guān)者建議的動(dòng)機(jī)。 懶惰嗎？ 還是真的增加了產(chǎn)品的可用性并簡化了任務(wù)的完成。 在上面的示例中，我提到了一個(gè)日期選擇器-所以問題是這是否必須是覆蓋模式？ 不能按順序完成嗎？

• Email sign up and general marketing trickery

  電子郵件注冊和一般營銷技巧

Plenty of websites use this deliberately — you’re reading an article or some content and up pops “please sign up to <random thing>”. It interrupts the journey and it can generate distrust of the entire site. This is marketing-centred design and it needs to be undertaken at the stakeholders’ own risk.

許多網(wǎng)站故意使用此功能-您正在閱讀文章或某些內(nèi)容，并且彈出窗口“請(qǐng)注冊<random something>”。 它會(huì)中斷旅程，并可能導(dǎo)致整個(gè)站點(diǎn)的不信任。 這是以市場為中心的設(shè)計(jì)，需要風(fēng)險(xiǎn)承擔(dān)者自負(fù)。

In all cases and scenarios, because it is a sudden interruption to the journey, we need to be extremely clear what the purpose of the modal is — both internally and for our users.

在所有情況下，由于這是旅程的突然中斷，因此我們需要非常清楚該模式的目的是什么-內(nèi)部和對(duì)我們的用戶而言。

If we’re going to bombard the user with sudden changes in the UI, then we need to be aware of the impact to their flow, and recognise that sudden changes can trigger stress response and as we know, even mild stress responses can lead to errors or task abandonment.

如果我們要用UI的突然變化來轟擊用戶，那么我們需要意識(shí)到對(duì)其流程的影響，并認(rèn)識(shí)到突然的變化會(huì)觸發(fā)壓力響應(yīng) ，并且我們知道，即使是輕微的壓力響應(yīng)也可能導(dǎo)致錯(cuò)誤或放棄任務(wù)。

輔助功能失敗 (Accessibility fail)

Once you’ve got the visual design nailed, and overcome and the usual epic fails of colour contrast that plague the internet, you can still come a cropper.

一旦您確定了視覺設(shè)計(jì)，并克服了困擾互聯(lián)網(wǎng)的常見色彩對(duì)比史詩般的失敗 ，您仍然可以成為裁切者。

What looks like a functioning modal can turn out to be unreadable by screen readers and assistive technologies — so that they cannot even detect and communicate that the modal is being displayed. This leaves the user tabbing through the background content, unaware that the system requires an additional action from them.

屏幕閱讀器和輔助技術(shù)可能無法正常顯示看起來像正在運(yùn)行的模態(tài)，因此它們甚至無法檢測和傳達(dá)模態(tài)正在顯示。 這使用戶在后臺(tái)內(nèi)容之間切換，而沒有意識(shí)到系統(tǒng)需要他們執(zhí)行其他操作。

The user can also become stuck, as the keyboard focus remains on the element that triggered the modal — the action is happening elsewhere and cannot be seen.

由于鍵盤焦點(diǎn)仍然停留在觸發(fā)模式的元素上，因此用戶也可能會(huì)卡住-該動(dòng)作發(fā)生在其他地方并且無法看到。

Not only must modals be detected by assistive technology, but they must contain correct tab sequences, focus states, and close/dismiss functions. So working with our friends in Front-end Development is essential — those ARIA practices need to be on point.

模態(tài)不僅必須通過輔助技術(shù)進(jìn)行檢測，而且還必須包含正確的制表符序列，焦點(diǎn)狀態(tài)和關(guān)閉/關(guān)閉功能。 因此，在前端開發(fā)中與我們的朋友一起工作非常重要- 這些ARIA做法必須正確 。

如何減輕失敗 (How to mitigate the fails)

So we’ve decided we’re going to use a modal because you genuinely think that this pattern meets user as well as business needs — now how can we make them usable and accessible?

因此，我們已經(jīng)決定要使用一種模式，因?yàn)槟_實(shí)認(rèn)為該模式既可以滿足用戶又可以滿足業(yè)務(wù)需求-現(xiàn)在我們?nèi)绾问顾鼈兛捎煤涂稍L問？

There are a number of visual design and ARIA practices we can use. Many of which tie back to basic usability heuristics and W3C guidelines.

我們可以使用許多視覺設(shè)計(jì)和ARIA實(shí)踐。 其中許多都與基本的可用性啟發(fā)式方法和W3C準(zhǔn)則有關(guān) 。

And of course W3C provides exhaustive guidance as always on dialog modals, so this is just a summary with a focus on the overall experience.

當(dāng)然，W3C 一如既往地提供了有關(guān)對(duì)話框模式的詳盡指導(dǎo) ，因此，這只是一個(gè)總結(jié)，著重于整體體驗(yàn)。

1.屏幕填充和焦點(diǎn)更改 (1. Screen fill and focus change)

• Any modals on mobile-rendered websites should fill 100% of screen. This prevents background scrolling and ensures readability
  移動(dòng)設(shè)備呈現(xiàn)的網(wǎng)站上的所有模式都應(yīng)占據(jù)屏幕的100％。 這樣可以防止背景滾動(dòng)并確保可讀性
• On non-mobile screens, or other scenarios that may appear in future where we are not filling 100%, we need to ensure that the background is dimmed or greyed to support visual focus on modal.
  在非移動(dòng)屏幕上，或其他將來可能無法滿足100％填充的情況下，我們需要確保背景變暗或變灰以支持對(duì)模式的視覺關(guān)注。

Because of this, a modal cannot require the user to have access to information displayed on the screen behind. If the user needs to access the information on the main screen to complete your task, that’s a massive hint you’re using the wrong design pattern.

因此，模式不能要求用戶訪問后面屏幕上顯示的信息。 如果用戶需要訪問主屏幕上的信息以完成任務(wù)，則表明您使用的是錯(cuò)誤的設(shè)計(jì)模式。

• When the modal is triggered, change the background to aria-hidden='true' and with the modal becoming aria-hidden='false' and{display:none;} becoming{display:block;}.

  觸發(fā)模式后，將背景更改為aria-hidden='true' ，并使模式變?yōu)閍ria-hidden='false'而{display:none;}變?yōu)閧display:block;}.

• Do not allow scrolling inside the modal itself. This will just become too difficult for users to manipulate, and plus you risk this becoming a content dumping ground unless you put tight guidelines and restrictions in place.
  不允許在模態(tài)本身內(nèi)部滾動(dòng)。 對(duì)于用戶來說，這將變得太難了，另外，除非您設(shè)置了嚴(yán)格的準(zhǔn)則和限制，否則您有冒險(xiǎn)將其變成內(nèi)容垃圾場的風(fēng)險(xiǎn)。

2.控制和解雇 (2. Control and dismiss)

Users should be able to dismiss the modal using a CTA (close/X) or by tapping away from the modal. The exception to this is when the modal is a data capture form, in which case being able to tap away could lose to loss of data already entered. In this scenario, a “cancel” button would be more appropriate. Again, introducing friction where there is a risk of error.

用戶應(yīng)該能夠使用CTA(關(guān)閉/ X)或輕按離開模態(tài)的方式關(guān)閉模態(tài)。 例外情況是模態(tài)是數(shù)據(jù)捕獲形式，在這種情況下，能夠竊聽可能會(huì)丟失已經(jīng)輸入的數(shù)據(jù)。 在這種情況下，“取消”按鈕將更合適。 同樣，在存在錯(cuò)誤風(fēng)險(xiǎn)的地方引入摩擦。

Either way, it should be completely clear that it can be dismissed, and how to achieve that.

無論哪種方式，都應(yīng)該完全清除它，以及如何實(shí)現(xiàn)它。

? The modal must be easy to dismiss — all CTA must be clear in language and design. And of course you’re using appropriate colour contrasts throughout.

?模式必須易于消除-所有CTA必須在語言和設(shè)計(jì)上清晰明了。 當(dāng)然，您在整個(gè)過程中都會(huì)使用適當(dāng)?shù)念伾珜?duì)比 。

? On close, the experience should revert to whatever the focus state was on the underlying screen — visual location for the user, or field focus state for the assistive tech. Where possible, screenreader focus reverts to the element that triggered the modal (unless it is no longer present).

?結(jié)束時(shí)，體驗(yàn)應(yīng)恢復(fù)為基礎(chǔ)屏幕上的焦點(diǎn)狀態(tài)-用戶的視覺位置，或輔助技術(shù)的現(xiàn)場焦點(diǎn)狀態(tài)。 在可能的情況下，屏幕閱讀器的焦點(diǎn)會(huì)恢復(fù)為觸發(fā)模式的元素(除非不再存在)。

As with other screens, modals contain their own tab sequences, so using Tab and Shift + Tab should navigate within the modal only, without closing until the user selects close CTA or ESC.

與其他屏幕一樣，模態(tài)包含它們自己的制表符序列，因此使用Tab和Shift + Tab只能在模態(tài)內(nèi)導(dǎo)航，直到用戶選擇關(guān)閉 CTA或ESC才關(guān)閉 。

3.明確的信息和目的 (3. Clear message and purpose)

? The modal needs a header, which makes it clear what the modal is for and/or what the user can now do. Whether this is an alert (alert dialog)or an interaction modal (modal dialog) must be 100% clear.

?模態(tài)需要一個(gè)標(biāo)題，以使模態(tài)清晰明了，并且/或者用戶現(xiàn)在可以做什么。 這是警報(bào)(警告對(duì)話框)還是交互模式(模式對(duì)話框)必須100％清除。

? When creating an alert dialog, use alertdialog rather than dialogdialog to ensure that screenreaders know the modal can receive feedback from the user (i.e. the requirement for the user to confirm they have understood an error message)

? 創(chuàng)建警報(bào)對(duì)話框時(shí)，請(qǐng)使用alertdialog而不是dialog對(duì)話框，以確保屏幕閱讀器知道模態(tài)可以接收到用戶的反饋(即要求用戶確認(rèn)他們已理解錯(cuò)誤消息)

? When labelling the modal use aria-labelledby so that the visible title is associated with the role=dialog container.

?在標(biāo)記模式時(shí)，請(qǐng)使用aria-labelledby ，以使可見的標(biāo)題與role=dialog容器相關(guān)聯(lián)。

? Ensure that the action that triggered the modal, and the language used is reflected in the modal — i.e. Pressing a “select date” button, opens a modal with the header “select date” — or near-identical equivalent.

?確保觸發(fā)模態(tài)的動(dòng)作和所使用的語言在模態(tài)中得到反映-即，按下“選擇日期”按鈕，打開標(biāo)題為“選擇日期”的模態(tài)-或幾乎相同。

? Do not stuff random extra words or buttons into the modal. Keep it as simple and minimal as possible (heuristic #8)

?不要將多余的單詞或按鈕隨機(jī)塞入模態(tài)。 保持盡可能簡單和最小( 啟發(fā)式＃8 )

4.始終正確關(guān)注 (4. Correct focus throughout)

? Create visual focus on the modal, and on the modal’s primary task or interaction. Particularly if there is more than one step within a modal.

?將視覺焦點(diǎn)放在模式上以及模式的主要任務(wù)或交互上。 特別是模態(tài)中有多個(gè)步驟時(shí)。

? Maintain this clarity of purpose through any subsequent screens within the modal.

?通過模態(tài)內(nèi)的任何后續(xù)屏幕保持目的清晰。

? For screenreaders, we need to ensure appropriate focus placement on each step of the journey, using aria-describedby to highlight content, fields and CTAs.

?對(duì)于屏幕閱讀器，我們需要確保在旅程的每個(gè)步驟上都放置適當(dāng)?shù)慕裹c(diǎn) ，并使用aria-describedby突出顯示內(nèi)容，字段和CTA。

? If the task offers complex or high impact decisions, then we should set focus on the least destructive element (i.e. cancel rather than “delete everything”).

?如果任務(wù)提供了復(fù)雜或影響較大的決策，則我們應(yīng)將重點(diǎn)放在破壞性最小的元素上(即取消而不是“刪除所有內(nèi)容”)。

給UX設(shè)計(jì)師的建議 (Advice for UX Designers)

There are absolutely tons of resources online for front-end devs working with ARIA, but for UX designers working with modals, here are my top tips:

與ARIA合作的前端開發(fā)人員絕對(duì)在線上有大量資源，但是對(duì)于使用模式的UX設(shè)計(jì)人員，這是我的主要技巧：

? Be clear on your modal’s use case, be sure it’s supporting users and not just business-driven journey destruction. Incidentally, if you’ve done your IA work thoroughly and had it signed off, that should reduce the amount of random journey insertion from stakeholders. With luck.

?明確模態(tài)的用例，確保它支持用戶，而不僅僅是業(yè)務(wù)驅(qū)動(dòng)的旅程破壞。 順便說一句，如果您已經(jīng)徹底完成了IA工作并簽字同意，那應(yīng)該減少利益相關(guān)者插入隨機(jī)旅程的數(shù)量。 祝你好運(yùn)。

? Design everything in line with your basic heuristics. They have stood the test of time for a reason.

?根據(jù)您的基本試探法設(shè)計(jì)一切。 他們經(jīng)受了時(shí)間的考驗(yàn)是有原因的。

? Show your wireframes and prototypes to devs early — have them validate that what you have constructed (and have tested with users) can be built, and can be built maximising ARIA practices.

?盡早向開發(fā)人員展示線框和原型-讓他們驗(yàn)證可以構(gòu)建您所構(gòu)建的(并經(jīng)過用戶測試的)，并且可以構(gòu)建最大化ARIA實(shí)踐的框架。

? Test your prototypes with real users. Goes without saying. But there’s no point building anything that users can’t use. If the business is pushing for a quick (but bad) fix, video highlights reels of struggling users can really help stop the nonsense.

?與真實(shí)用戶一起測試您的原型。 一點(diǎn)不吭就走了。 但是，構(gòu)建用戶無法使用的東西毫無意義。 如果企業(yè)要求快速(但不好)的解決方案，那么視頻中的那些苦苦掙扎的用戶將可以真正幫助您消除廢話。

? Test your staging or live site with screen reader tech — there are lots of assistive tech and sim tools available.

?使用屏幕閱讀器技術(shù)測試您的演出或現(xiàn)場站點(diǎn)-有很多輔助技術(shù)和模擬工具可用 。

? Check with the dev team, and generally support them in beta testing of your experience in different browsers — because which browsers can support which ARIA practices changes with each release.

?與開發(fā)團(tuán)隊(duì)聯(lián)系，并為他們在不同瀏覽器中的使用體驗(yàn)進(jìn)行Beta測試，通常會(huì)為他們提供支持-因?yàn)槟姆N瀏覽器可以支持每個(gè)版本的ARIA慣例會(huì)發(fā)生哪些變化 。

When it comes to accessibility, it really is 50-50 UX design (and research) and Front End Dev. As always follow the guidelines, talk to each other, and keep on testing.

當(dāng)涉及到可訪問性時(shí)，實(shí)際上是50-50 UX設(shè)計(jì)(和研究)和Front Dev。 一如既往地遵循準(zhǔn)則，互相交談，并繼續(xù)進(jìn)行測試。

翻譯自: https://levelup.gitconnected.com/how-can-we-make-modals-usable-and-accessible-f025fa0c459e

模態(tài)和非模態(tài)代碼

總結(jié)

以上是生活随笔為你收集整理的模态和非模态代码_我们如何使模态可用和可访问？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。