主题： accessibility
-
Color-accessible game signals: communicate state through more than hue
Combine color with stable symbols, patterns and labels, then test the complete signal at gameplay scale instead of relying on a palette preset alone.
-
适应语言区域的界面：Intl 复数规则、日期与从右向左布局
使用浏览器的 Intl 对象格式化数字、日期和相对时间，而不是手工操作字符串；按 Intl.PluralRules 类别选择复数形式，而不是判断 n == 1；使用 CSS 逻辑属性布局，让 dir=rtl 文档自行镜像，并为翻译后变长的文本留出空间。
-
Lesbarer Fliesstext: Zeilenlänge, Zeilenabstand und Kontrast
Drei Eigenschaften entscheiden, ob langer Text bequem lesbar ist: die Zeilenlänge (das AAA-Kriterium der WCAG deckelt sie bei 80 Zeichen), der Zeilenabstand (mindestens das 1,5-Fache der Schriftgrösse muss möglich sein, ohne dass das Layout bricht) und der Kontrast (4,5:1 für normalen Text, 3:1 für grossen). In relativen Einheiten setzen, damit Nutzende Text vergrössern und neu spationieren können.
-
SVG 图标：内联标记、use 精灵图，还是 img 元素
内联 SVG 可用 currentColor 和 CSS 设置样式，但每次出现都会重复相同字节；通过 use 引用的同源精灵图只缓存一次，仍可跟随文字颜色；img 可以缓存，但其内部对 CSS 不透明。按图标角色选择方式，将装饰图标对辅助技术隐藏，并为每个图标指定尺寸，避免精灵图加载时布局移动。
-
Readable body text: measure, line height and contrast
Three properties decide whether long text can be read comfortably: line length (WCAG's AAA criterion caps it at 80 characters), line spacing (at least 1.5 times the font size must be possible without breaking the layout) and contrast (4.5:1 for normal text, 3:1 for large text). Set them in relative units so users can resize and re-space the text.
-
Dark mode with prefers-color-scheme, color-scheme and light-dark()
Dark mode has three parts: the prefers-color-scheme media query to detect the user's choice, the color-scheme property (and meta tag) to tell the browser which schemes the page supports so form controls, scrollbars and the canvas follow, and light-dark() or custom properties to swap palette values without duplicating rules.
-
浏览器端到端测试中的稳定选择器与自动等待
不稳定浏览器测试主要有两类原因：选择器失效或匹配错误元素，以及假定时序的固定等待。应按角色、标签或测试 ID 定位，每个定位器恰好匹配一个元素，并通过可重试断言和可操作性检查同步，而不是依赖时间。
-
无障碍表单：标签、错误消息与自动填充
为每个控件提供通过 for 和 id 关联的标签，用文字和属性标明必填字段，使用 autocomplete 令牌让浏览器和辅助技术了解字段用途，并以错误摘要和通过 aria-describedby 关联的逐字段消息报告错误。
-
dialog versus popover: modal behaviour, the top layer and light dismiss
dialog with showModal() is modal: top layer, inert page, ::backdrop, Escape, closedby and form method=dialog; the popover attribute makes any element a non-modal top-layer overlay that a button toggles without script, light-dismissed in auto state. Use dialog for blocking prompts and forms, popover for menus, tooltips and toasts.
-
Game subtitles and caption cues: preserve meaning, timing and readability
Represent dialogue and meaningful sound events with timed cues, handle overlaps deliberately, and offer readable presentation before the first spoken scene.
-
What do people who enable reduced motion expect to be removed: all animation, large movement or only autoplay?
Open question: the reduced-motion setting says reduce, not none, and guidance suggests keeping small meaningful transitions while removing parallax, zooms and autoplay; is there evidence about what users who enable the setting actually want, and whether their expectations differ by reason (vestibular disorder, distraction, battery, preference)?
-
ARIA roles: why a native HTML element beats a div with a role
The W3C's first rule of ARIA use is to prefer a native HTML element or attribute that already has the semantics and behaviour required; ARIA only changes what assistive technology is told, never what the element does. A div with role=button still needs focusability, key handling and states added by hand, and every mistake is invisible in visual testing.
-
Keyboard navigation in composite widgets: roving tabindex, arrow keys and Escape
Tab and Shift+Tab move between components; arrow keys move inside a component such as a tab list, toolbar, menu or radio group. Implement this with a roving tabindex (one item at tabindex=0, the rest at -1) or aria-activedescendant, close transient surfaces with Escape, and never trap focus without an advertised way out.
-
Focus management in single-page interactions: dialogs, route changes and removed elements
When a page changes without a full load, keyboard focus must be moved on purpose: into a dialog when it opens and back to its trigger when it closes, to the new view's heading after a client-side route change, and to a sensible neighbour when the focused element is deleted. Otherwise focus falls to the document body and screen-reader users are sent back to the top.
-
prefers-reduced-motion: which animation to reduce and how
The prefers-reduced-motion media feature reports whether the user has asked the operating system for less motion; its values are no-preference and reduce. Honour it by replacing large movement (parallax, zooms, slides, autoplaying motion) with fades or instant changes, while keeping small state transitions that carry meaning, and apply the same rule to script-driven animation.
-
Unity input action maps: contexts, control schemes and persistent rebinding
Organise semantic actions by gameplay context, distinguish device schemes from map activation and give rebinding a complete lifecycle.
-
Barrierefreiheit: die vier WCAG-Grundsätze praktisch angewendet
Die WCAG 2.2 ordnen alle Erfolgskriterien vier Grundsätzen zu: wahrnehmbar, bedienbar, verständlich, robust. Wer pro Grundsatz die häufigsten Verstösse kennt (fehlende Textalternativen, Tastaturfallen, zu wenig Kontrast, unbeschriftete Felder, zu kleine Ziele), findet viele Barrieren ohne Spezialwerkzeug; Stufe AA ist das übliche Ziel.
-
What share of accessibility defects found in manual audits or by users had passed the automated checks in CI, and which kinds escaped?
Open question: the W3C WAI guidance on evaluation tools states that some accessibility checks cannot be automated and require manual intervention; for sites that run an automated checker on every build, what share of the defects later found in a manual audit or reported by users had passed that checker, and which defect types account for the gap?
-
Touch targets and pointer types: sizing controls for fingers and mice
WCAG 2.2 requires pointer targets of at least 24 by 24 CSS pixels at level AA, with exceptions for spacing, inline links and equivalent controls, and 44 by 44 at level AAA. The pointer and hover media features report whether the primary input is coarse or fine and whether it can hover, so a design can enlarge controls and drop hover-only interactions where a finger is the pointer.
-
Accessibility fundamentals: perceivable, operable, understandable, robust
WCAG organises requirements under four principles; the most common failures on content sites are missing text alternatives, colour-only signalling, keyboard traps, low contrast and unlabeled controls.
机器可读： JSON