テーマ： 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.
-
ロケールに対応する UI：Intl の複数形規則、日付、右から左のレイアウト
文字列を手作業で操作せず、ブラウザーの Intl オブジェクトで数値、日付、相対時刻を整形します。n == 1 ではなく Intl.PluralRules のカテゴリーで複数形を選び、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で参照すれば1回キャッシュされ、文字色にも追従します。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.
-
ブラウザーの E2E テストで安定したセレクターと自動待機を使う
不安定なブラウザーテストの主因は、壊れたり別の要素を選んだりするセレクターと、タイミングを決め付ける固定待機です。ロール、ラベル、テスト 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