アクセシビリティを高めるCSS

A presentation at DIST.30 in in Tokyo, Japan by Yuko Morikawa

アクセシビリティを⾼めるCSS

アクセシビリティを⾼めるCSS

自己紹介

自己紹介

Focus State Style

Focus State Style

Pointing Target Size

Pointing Target Size

WCAG2.1: 達成基準 2.5.5 Target Size

WCAG2.1: 達成基準 2.5.5 Target Size

Contents Order

Contents Order

Form Input

Form Input

マークアップの問題点

マークアップの問題点

Floating labels

Floating labels

Floating labels

Floating labels

Demo

Demo

Floating labels are problematic

Floating labels are problematic

ありがとうございました!

ありがとうございました!

近年、ウェブ制作者の間でも関心が高まるアクセシビリティ。海外ではアクセシブルでないコンテンツに対する苦情や訴訟なども少なくありません。ウェブアクセシビリティを高める方法はWAI-ARIAだけではありません。スタイルのために適切なマークアップを諦めていませんか?このライトニングトークでは、適切なマークアップとCSSでアクセシビリティを高める方法をお伝えします。

Code

The following code examples from the presentation can be tried out live.

Buzz and feedback

Here’s what was said about this presentation on Twitter.