跑马灯文本
放不下的一行文本。静止时被截断并以省略号结尾；在触发条件持续期间，以稳定的速度横向滚动，展示自己的全部内容。只有文本溢出时才会移动，在减弱动态效果时从不移动，并且只被完整地朗读一次。
- 类别
- 信息传达
- 令牌
comp.marquee-text- 层级
- 基础
- Web
tanrei-marquee-textclock_loader_40 - SwiftUI
TanreiMarqueeTextradio_button_unchecked - Jetpack Compose
TanreiMarqueeTextradio_button_unchecked - Flutter
TanreiMarqueeTextradio_button_unchecked - React Native
MarqueeTextradio_button_unchecked
生成自 docs/status/status.json, specs/marquee-text.spec.json
一个放不下的标题，和一个放得下的标题
跑马灯文本是放在过窄位置里的一行产品文本。静止时，它读起来和任何被截断的行一样：从行的起点开始，在被截断处以省略号结尾。在触发条件持续期间——默认是指针悬停在它上面，或它所在的控件获得键盘焦点时——它以稳定的速度（以每秒像素数给出）横向滚动，让文本的每一部分都经过视野；然后回到起点并停下。把指针移到上面第一行试试。第二行放得下，所以从不移动：文本放得下的跑马灯文本就是一行普通文本。
它适合行宽固定、文本通常很短但有时会变长的地方：列表行的标题、导航栏或抽屉中的标签、纸片、正在播放的内容名称、表格的单元格。如果大多数时候截断的行就够用，另一种做法是保留截断，并在工具提示中给出完整文本：工具提示一次显示全部，不移动任何东西。
Web 和 React 示例展示的是当前规格。SwiftUI、Compose、Flutter 和 React Native 处于计划阶段，尚未提供跑马灯文本。
<!-- 默认：指针悬停在它或它所在的控件上时，或该控件获得键盘焦点时移动。 -->
<tanrei-marquee-text>第 7 首 —— 一个很长的标题，在它所在的行里根本放不下</tanrei-marquee-text>
<!-- 每次悬停或聚焦时，移动到末尾再返回，只一次。 -->
<tanrei-marquee-text loop="bounce" iterations="1">…</tanrei-marquee-text>
<!-- 正在播放的内容名称：自行移动，并带有自己的暂停按钮。 -->
<tanrei-marquee-text trigger="always" playback-control play-label="播放滚动文本" pause-label="暂停滚动文本">
正在播放：一位名字很长的艺人的一首标题很长的歌
</tanrei-marquee-text>
<script type="module">
import '@tanrei/web/components/marquee-text';
</script>import { MarqueeText } from '@tanrei/react';
<MarqueeText>{track.title}</MarqueeText>
<MarqueeText loop="bounce" iterations={1}>{track.title}</MarqueeText>
{/* 自行移动；页面自己用来暂停所有动态部分的控件设置 paused。 */}
<MarqueeText trigger="always" paused={motionPaused}>
{`正在播放：${track.title}`}
</MarqueeText>构成
| 部件 | 说明 |
|---|---|
1 viewport | The line's box: as wide as its place, one line high, clipping the text. While the text moves, its clipped edges fade out. |
2 text | The product's text, on one line, in the text style of where it stands. At rest it starts at the line's start and ends with an ellipsis where it is cut. |
3 copy · 可选 | While the text repeats, a second drawing of it a gap after the first, so that the line never empties. Hidden from assistive technology. |
4 playback-control · 可选 | While the text scrolls by itself all the time, an icon-only Button of the text variant and the small size at the line's end, pausing and playing the motion. |
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
trigger | hover-or-focus | hover | focus | always | "hover-or-focus" | When the text scrolls. hover: while a fine pointer is over the line or the control it stands in. focus: while that control, or something in the line, has keyboard focus. hover-or-focus: either. always: from when the line is shown, by itself, with a way to pause it. |
loop | repeat | bounce | "repeat" | How a pass goes. repeat: the text moves toward its start until its end has passed, a copy following it a gap behind, so that the line comes back to where it began. bounce: the text moves until its end is in view, pauses, and moves back. |
speed | number | null | How fast the text moves, in pixels per second, so that a long text and a short one move at the same pace. Null takes comp.marquee-text.speed. |
startPause | number | null | How long the text rests at its start before each pass, in milliseconds; 0 rests none. Null takes comp.marquee-text.motion.start-pause. |
endPause | number | null | While loop is bounce: how long the text rests with its end in view before it moves back, in milliseconds. Null takes comp.marquee-text.motion.end-pause. |
iterations | number | null | How many passes a trigger plays before the text rests at its start. Null plays passes without end while the trigger holds: until the pointer leaves or focus moves away for hover, focus and hover-or-focus, and for as long as the line is shown for always. |
paused | boolean | false | Holds the motion where it is: set by the playback control, or by the product's own control that pauses every moving part of the page. |
playbackControl | boolean | false | While trigger is always: whether the line draws its playback control. Off by default: a product that moves text all the time gives a way to pause it — this control, or its own control that pauses every moving part of the page and sets paused; without either, a person cannot stop the motion, which WCAG 2.2.2 requires of motion that lasts more than five seconds. |
playLabel | string | "" | The playback control's accessible name while the motion is paused ("Play scrolling text"). Required while the control is drawn. |
pauseLabel | string | "" | The playback control's accessible name while the text moves ("Pause scrolling text"). Required while the control is drawn. |
插槽
| 插槽 | 说明 |
|---|---|
default | The text: plain text, or inline content of the product's (a bold run, an inline mark). A fixture's string is drawn as plain text. |
事件
| 事件 | 说明 |
|---|---|
pausedChange | The person paused or played the motion with the playback control; carries paused. The product that sets paused emits nothing. |
状态
行为
以 EARS 形式写成的需求。每个平台的实现都按这些 ID 逐条测试。需求原文取自规格文件，原样以英文呈现。
| ID | 需求 |
|---|---|
MRQ-1 | THE marquee text SHALL lay its content out on one line, in the text style, color and direction of where it stands, in a viewport as wide as its place and one line high, and SHALL clip it there; WHILE the content fits, THE marquee text SHALL draw it as plain text, start nothing, draw no copy and no playback control, and be in every way a line of text. |
MRQ-2 | WHILE the content does not fit and does not move THE marquee text SHALL rest it with its start at the viewport's start, cut at the viewport's end with an ellipsis of the platform's text, so that the line reads as any cut line does. |
MRQ-3 | WHILE its trigger holds — trigger hover: a fine pointer is over the line or over the nearest element around it that takes presses or focus; focus: that element, or something inside the line, has keyboard focus; hover-or-focus: either; always: the line is shown and in view — and the content does not fit, THE marquee text SHALL wait comp.marquee-text.motion.start-delay (for always, startPause) and then play its passes (MRQ-4, MRQ-5): iterations passes where iterations is not null, and without end while the trigger holds where it is null; after the last pass it SHALL rest as MRQ-2 says. WHEN the trigger ends before the passes do THE marquee text SHALL return the content to its start over comp.marquee-text.motion.return-duration with comp.marquee-text.motion.return-easing and rest; a new trigger SHALL play its passes again from the start. |
MRQ-4 | WHILE loop is repeat THE marquee text SHALL play a pass by moving the content toward its start edge at speed (comp.marquee-text.speed while speed is null) in pixels per second, steadily, with comp.marquee-text.motion.easing, a copy of the content following it comp.marquee-text.gap behind, until the copy stands where the content began — then the line looks as it did — and SHALL rest there startPause (comp.marquee-text.motion.start-pause while it is null) before the next pass. |
MRQ-5 | WHILE loop is bounce THE marquee text SHALL play a pass by moving the content toward its start edge at speed until its end stands at the viewport's end, resting there endPause (comp.marquee-text.motion.end-pause while it is null), moving it back at the same speed until its start stands at the viewport's start, and resting there startPause before the next pass; it SHALL draw no copy. |
MRQ-6 | WHILE the marquee text plays its passes — moving, or resting between two passes — THE marquee text SHALL draw no ellipsis and SHALL fade each edge of the viewport behind which content lies hidden over comp.marquee-text.fade.extent, from clear to the content's full color; WHEN it rests after its passes, or because its trigger ended, it SHALL draw the ellipsis of MRQ-2 again and no fade. |
MRQ-7 | THE marquee text SHALL move the content in the direction its text is written: toward the left for text whose direction is left to right and toward the right for text whose direction is right to left, the direction being the content's own — the base direction of its first strong character, or the layout direction where it has none — so that the line always moves to bring the text's hidden end into view; it SHALL rest it at the start edge of that direction, cut at the other. |
MRQ-8 | WHERE motion is reduced THE marquee text SHALL NOT move its content; WHILE a trigger other than always holds it SHALL instead show the hidden part at once, without a motion, by placing the content so that the next viewport's width of it lies in view, the last view ending at the content's end, with the fade of MRQ-6 at each edge behind which content lies hidden, resting startPause on each such view and returning to the start at once after the last, so that every part of the text can be seen; it SHALL go through the views iterations times, or without end while the trigger holds where iterations is null. WHILE trigger is always it SHALL rest as MRQ-2 says and draw no playback control. |
MRQ-9 | WHILE trigger is always and the content moves THE marquee text SHALL hold its motion where it is while a pointer is over the line or focus is within it, and go on from there when neither is; WHILE paused is true it SHALL hold its motion where it is until paused is false; WHILE the line is out of view or its page is hidden it SHALL hold its motion and start the pass again from the start when it is back. Holding on hover and focus SHALL NOT be taken as the way to stop the motion: that is MRQ-10. |
MRQ-10 | WHILE trigger is always, playbackControl is true, the content does not fit and motion is not reduced, THE marquee text SHALL draw at the end of its line, comp.marquee-text.playback.gap after the viewport, an icon-only Button of the text variant and the small size, showing the icon set's pause glyph while the text moves and play_arrow while it is paused, named by pauseLabel while it moves and playLabel while it is paused; WHEN the person activates it THE marquee text SHALL toggle paused and emit pausedChange once, keeping focus on the button. WHILE trigger is always, the content does not fit, motion is not reduced and playbackControl is false, THE marquee text SHALL in debug builds report once that the product must give the page a control that sets paused, or set playbackControl (WCAG 2.2.2). |
MRQ-11 | THE marquee text SHALL expose its content to assistive technology once, whole, as the text it is, read where the line stands, and SHALL hide the copy, the ellipsis and the fade from it; the motion SHALL change nothing it exposes, SHALL make no announcement, and SHALL take no focus: the line itself is not a focus stop. |
MRQ-12 | WHILE playbackControl would be drawn and playLabel or pauseLabel is empty THE marquee text SHALL read the missing name from the product's words, still draw the control where neither gives it, and in debug builds report that it has no accessible name; THE marquee text SHALL have no words of its own. |
MRQ-13 | WHILE the text size is enlarged THE marquee text SHALL grow its line with the text and move it at speed times the ratio of its text's size to the size of that text style at the default text size, so that as many characters pass in a second at every text size; the fade and the gap SHALL keep their sizes. |
MRQ-14 | WHEN the content, the viewport's width or the text size changes THE marquee text SHALL measure again whether the content fits, and WHILE a pass is playing SHALL end it at once and start again from the start where it still does not fit, or rest as MRQ-1 says where it now does; WHEN speed, startPause, endPause, loop or trigger changes it SHALL take the new value from the next pass. |
MRQ-15 | IF speed is not a positive number, or startPause, endPause or iterations is negative, THE marquee text SHALL treat it as null and in debug builds report it; WHEN trigger or loop names a value the component does not define THE marquee text SHALL use the default value (hover-or-focus, repeat) and in debug builds report the unknown value. |
MRQ-16 | WHERE the layout direction is right-to-left THE marquee text SHALL place its playback control at the left end of the line, and the content SHALL move and rest by its own direction as MRQ-7 says, whatever the layout direction. |
MRQ-17 | THE marquee text SHALL take its layout direction from where it is used — the direction of the nearest ancestor that sets one, and the platform's own where none does — and SHALL have no direction setting of its own; WHEN that direction changes while the line is shown THE marquee text SHALL rest at once and draw itself for the new direction. |
MRQ-18 | WHERE the platform draws with a person's own forced colors THE marquee text SHALL draw its text in the color the platform gives the element around it, and its fade SHALL be no fade: the content is clipped at the viewport's edge. |
各平台名称对照
对等并不意味着 API 完全相同。同一份契约，由各平台以自己的惯用方式表达。
| 规格 | Web | SwiftUI | Jetpack Compose | Flutter | React Native |
|---|---|---|---|---|---|
| 组件 | tanrei-marquee-text | TanreiMarqueeText | TanreiMarqueeText | TanreiMarqueeText | MarqueeText |
trigger · 属性 | trigger | trigger | trigger | trigger | trigger |
loop · 属性 | loop | loop | loop | loop | loop |
speed · 属性 | speed | speed | speed | speed | speed |
startPause · 属性 | startPause | startPause | startPause | startPause | startPause |
endPause · 属性 | endPause | endPause | endPause | endPause | endPause |
iterations · 属性 | iterations | iterations | iterations | iterations | iterations |
paused · 属性 | paused | isPaused | paused | paused | paused |
playbackControl · 属性 | playbackControl | showsPlaybackControl | playbackControl | playbackControl | playbackControl |
playLabel · 属性 | playLabel | playLabel | playLabel | playLabel | playLabel |
pauseLabel · 属性 | pauseLabel | pauseLabel | pauseLabel | pauseLabel | pauseLabel |
pausedChange · 事件 | pausedchange | isPaused binding | onPausedChange | onPausedChanged | onPausedChange |
| 备注 | <tanrei-marquee-text trigger loop speed start-pause end-pause iterations paused playback-control play-label pause-label>text</tanrei-marquee-text>. The slotted text is drawn once; the copy of MRQ-4 is a clone in the shadow root with aria-hidden="true" and inert. Whether the text fits is read with a ResizeObserver on the viewport and when the slotted text changes; the motion of a whole run of passes is one Web Animations API translate animation whose keyframes hold the pauses, each pass's travel lasting the distance divided by speed. The fade is a mask-image gradient. The trigger's area is the nearest ancestor, across shadow roots, that takes presses or focus, and the host where there is none; hover is read from pointerenter and pointerleave of a mouse or a pen, focus from focusin and focusout of an element that matches :focus-visible. The playback control is a <tanrei-button variant="text" size="small"> in the shadow root. The text size of MRQ-13 is the ratio of the browser's default font size (font-size: medium) to 16 px. The element <marquee> is not used: it is deprecated, ignores reduced motion and cannot be paused by the person. | A TimelineView(.animation) offset inside a clipped ViewThatFits-measured line; the copy is accessibilityHidden(true); accessibilityReduceMotion from the environment. | Not Modifier.basicMarquee alone: it cannot pause, has no bounce, and ignores the motion settings by design (it runs under a fixed motion scale). Built on the same measurement (no motion when the content fits) with an Animatable offset, and reads the animator duration scale for reduced motion. | A Ticker-driven offset in a ClipRect; the copy inside ExcludeSemantics; MediaQuery.disableAnimationsOf for reduced motion. | An Animated offset on the native driver; the copy with importantForAccessibility="no-hide-descendants" and accessibilityElementsHidden; AccessibilityInfo.isReduceMotionEnabled for reduced motion. hover applies where the platform has a pointer (iPadOS, the web build). |
令牌
| 令牌 | 引用 | 解析值（浅色） |
|---|---|---|
--tanrei-comp-marquee-text-fade-extent | sys.space.space200 | 16px |
--tanrei-comp-marquee-text-gap | sys.space.space600 | 48px |
--tanrei-comp-marquee-text-motion-easing | sys.motion.easing.linear | cubic-bezier(0, 0, 1, 1) |
--tanrei-comp-marquee-text-motion-end-pause | — | 1200ms |
--tanrei-comp-marquee-text-motion-return-duration | sys.motion.role.state.default | 250ms |
--tanrei-comp-marquee-text-motion-return-easing | sys.motion.easing.state | cubic-bezier(0.2, 0, 0, 1) |
--tanrei-comp-marquee-text-motion-start-delay | sys.motion.role.show-delay | 300ms |
--tanrei-comp-marquee-text-motion-start-pause | — | 1200ms |
--tanrei-comp-marquee-text-playback-gap | sys.space.space100 | 8px |
--tanrei-comp-marquee-text-speed | — | 30 |
测试样例
作为基准的渲染结果。所有平台都以相同的 ID 为每个样例截取快照，以便相互比较。
default
slots: default fits
slots: default bounce
loop: bounce slots: default always
trigger: always slots: default always-control
trigger: always playbackControl: true playLabel: Play scrolling text pauseLabel: Pause scrolling text slots: default always-paused
trigger: always paused: true playbackControl: true playLabel: Play scrolling text pauseLabel: Pause scrolling text slots: default rtl
trigger: always playbackControl: true playLabel: Play scrolling text pauseLabel: Pause scrolling text direction: rtl slots: default 生成自 specs/marquee-text.spec.json, tokens/comp/marquee-text.tokens.json, design/tokens/
当一行必须保持为一行、宽度由布局固定，而人有时需要看到被截断的部分时，使用跑马灯文本：播放列表某一行中很长的歌名、因语言而变长的目的地标签、装着名字的纸片。这一行保持自己的高度和位置，只在被要求时才展示其余部分。
不要把它用于人必须完整阅读才能采取行动的文本——警告、错误、选择的条件、金额、操作说明。移动的文本读起来慢，也容易错过。给这类文本所需的行数，让它换行。
| 触发条件 | 适用于 |
|---|---|
hover-or-focus |
默认值，几乎在任何地方都是正确的选择：人用指针指向它，或用键盘到达它所在的控件时，它都会移动，因此两种人看到的是同样的东西。 |
hover |
键盘用户会快速浏览的长列表：焦点经过时每一行的标题都开始移动，带来的干扰多于帮助。 |
focus |
主要用键盘或遥控器操作的表面中的行，在那里悬停没有意义。 |
always |
正在播放的内容名称，以及类似的、人只是瞥一眼而不会去指向的行。它从显示起就自行移动，需要一种暂停的方式（见“无障碍”）。 |
触发条件的范围是这一行所在的控件——列表行、纸片、目的地——而不只是这一行本身：指针指向该行的任何位置，都会让它的标题移动。悬停只算精细指针，例如鼠标或笔；触摸不会让它开始移动。
repeat（默认）把文本朝起始边移动，直到其末尾经过，同时一份副本隔着一段间距跟在后面，因此这一行从不变空，并回到开始时的样子。它读起来像滚动字幕，适合要移动一段时间的行。bounce把文本移动到末尾进入视野为止，在那里停下，然后移回。它不绘制副本，因此末尾和开头不会并排出现。它适合只移动一次、让人短暂看一眼末尾的行。
两者都按文本的书写方向移动：从左到右的文本向左移动，从右到左的文本向右移动，与周围页面的方向无关。
speed以每秒像素数表示，而不是一轮所需的时间，因此长标题和短标题以相同的速度移动。交给令牌comp.marquee-text.speed，让产品中每一行移动的文本保持同一速度。文字放大时，速度随文字一起变大，在任何字号下每秒经过的字符数都相同。startPause是每一轮之前文本在起点停留的时间，用来读出开头。使用trigger="always"时，它也是第一轮开始前的等待时间。endPause在bounce时，是文本在末尾进入视野后停留、再移回之前的时间。iterations是一次触发播放多少轮，然后文本停在起点。保持为 null 时，各轮会一直进行，直到指针离开或焦点移走；对always而言，则一直持续到这一行不再显示。设置一个让动效保持简短的轮数，才能让悬停或聚焦触发的动效满足无障碍要求（见下文）。
停顿是阅读的时间。产品中加快或放慢动画的动效设置不会缩短它们。
让文本足够短，使人很少需要看到它移动：跑马灯是为偶尔比其他标题更长的那个标题准备的，而不是把一句话塞进纸片的办法。把用来区分各项的内容放在开头，不移动也能读到。文本可以包含行内内容，例如一段粗体；它始终只有一行。
- 把这一行放在人会指向或聚焦的控件中，让触发条件的范围覆盖整行。
- 设置
iterations，让每次悬停或聚焦只播放一小段，然后停下。 - 为
trigger="always"的行提供暂停的方式：它自己的播放控件，或产品中暂停页面上所有动态部分的控件。
- 不要把它用于人必须完整阅读才能采取行动的文本。给这类文本单独的行。
- 不要在同一屏上放好几行一直移动的文本。一行移动的文本就会吸引目光；好几行会彼此争夺注意力，也会与屏幕上的其他一切争夺。
- 不要为了开始移动而把这一行本身做成按钮或链接。它是文本；人按下的是它周围的控件。
- 不要为了把长文本塞进一小段动效而缩短停顿。缩短文本，或用其他方式完整显示它。
- 角色
none (text)- 标注
- The text is read once, whole, as text; the copy is hidden. The playback control is named by pauseLabel and playLabel, from the instance and then the product's words.
- 最小目标
- 即使外观尺寸更小，点击区域也满足最小目标尺寸。 minimum 32px · pointer 44px · spacing 8px · touch 48px
键盘操作
| 按键 | 动作 |
|---|---|
| Tab | Reaches the playback control while it is drawn; the line itself is not a stop. Focus on the control the line stands in (a row, a chip) starts the motion for trigger focus and hover-or-focus, and moving focus away stops it. |
| Enter / Space on the playback control | Pauses or plays the motion. |
备注
- Pause, Stop, Hide (WCAG 2.2.2): motion that starts without a person's direct action and lasts more than five seconds beside other content needs a way to pause, stop or hide it, and the Understanding document counts motion started by a hover, a focus or scrolling into view, and stopped only while focused, as not meeting that. The defaults can conflict with it: trigger always draws no playback control (playbackControl is false), and a hover or a focus plays passes until it ends (iterations is null). A product meets it by drawing the playback control or binding its page-wide pause control to paused for trigger always, and by setting iterations so that the motion a hover or a focus starts ends within five seconds, or by keeping such lines where nothing else is read beside them.
- Animation from interactions (WCAG 2.3.3): where motion is reduced, the line never moves; the hidden part is still shown, a viewport at a time, without a motion (MRQ-8).
- The minimum target is the playback control's, a Button's; the line takes no input of its own.
生成自 specs/marquee-text.spec.json, tokens/sys/measure.tokens.json
Pause, Stop, Hide（WCAG 2.2.2，A 级）要求：自动开始、持续超过五秒、并与其他内容同时呈现的动效，可以由人暂停、停止或隐藏。Tanrei 的默认设置本身并不满足这一点，体现在两个方面，如何满足由产品决定。
trigger="always"默认不绘制播放控件（playbackControl为 false）。与其他内容并列、持续移动超过五秒的行，需要一种暂停的方式。可以设置playbackControl，这一行就会在末尾绘制一个仅含图标的暂停和播放按钮，由pauseLabel和playLabel，或产品文字中的marqueePauseLabel和marqueePlayLabel命名；也可以把产品自己用来暂停页面上所有动态部分的控件绑定到paused。两者都没有却一直移动的行，会在调试构建中报告。- 在
hover、focus和hover-or-focus下，iterations为 null 时，各轮会一直播放，直到指针离开或焦点移走。 WCAG 的 Understanding 文档把由悬停或聚焦开始的动效算作自动开始的动效，并指出只有在焦点离开时才停止的动效不算一种停止它的方式。要满足 2.2.2，请设置iterations，让动效在五秒内结束。对于很长的文本，一轮可能就已经超过五秒：缩短文本或提高速度，或用其他方式显示完整文本。
指针停在这一行上或焦点在其内部时，以及这一行不在视野中或页面被隐藏时，它会让动效停在原处。这让它更容易阅读，但并不是停止它的方式。
- 只有文本放不下时才移动。文本放得下的行绘制普通文本，什么也不启动。
- 在请求减弱动态效果时（WCAG 2.3.3），它从不移动。悬停或聚焦时，它不经动效、每次一个视口宽度地显示隐藏的部分，并在每个视图上停留，因此文本的每一部分仍然都能看到；
trigger="always"的行保持截断，不绘制播放控件。 - 辅助技术在这一行所在的位置，把文本作为文本完整地朗读一次。副本、省略号和渐隐对辅助技术隐藏，动效不改变它读到的任何内容，也不播报任何内容。
- 这一行不是焦点停靠点。Tab 会到达它所在的控件，以及绘制出来时的播放控件。
- 播放控件是 text 变体、small 尺寸的按钮，文本移动时显示图标集的暂停字形，暂停时显示播放字形。Enter 或 Space 切换它，焦点留在按钮上，并触发
pausedChange。它的目标满足最小目标。 - 在从右到左的布局中，播放控件位于这一行的左端；文本按它自己的方向移动。
- 在强制颜色模式下，文本采用平台赋予其周围元素的颜色，边缘被裁切而不是渐隐。
- 它没有自己的文字。既没有从实例也没有从产品文字获得名称的播放控件仍会绘制，并在调试构建中报告；未知的
trigger或loop，以及超出范围的速度、停顿或轮数也会报告。
Web 组件不是 HTML 的 <marquee> 元素。该元素
已弃用，会忽略减弱动态效果，人也无法暂停它。
- 按上文满足 WCAG 2.2.2：为每一行
trigger="always"提供暂停的方式，并设置让悬停或聚焦开始的动效在五秒内结束的iterations。 - 用页面的语言为播放控件提供两个名称，在实例中提供，或在产品文字中统一提供一次：“暂停滚动文本”和“播放滚动文本”说明了按钮的作用。
- 不要把人必须完整阅读的文本放进跑马灯：截断的行会对从不触发动效的人隐藏这部分内容。
- 一屏最多放一行一直移动的文本，也不要把它放在人正在阅读的长文本旁边。