こんにちは、ナカムラです。
先日11月11日に開催された「アクセシビリティカンファレンス福岡」に参加しました。
Youtube配信を見ていただけですが参加と言う。見るだけでも大事です。
アクセシビリティの向上は障害者のためだけではなく、みんなが使いやすくなる
まずは意識することが大切
小さな
- 調べてみた
- やってみた
- 自分のところを直してみた
をやってみましょう!(outline:0をやめてみた、など些細なことからでOK!)
という内容でした。
と言うことで、まずは調べ、知る、そして共有することから始めてみたいと思います。
気になった情報を自分なりにまとめてみた
アクセシビリティの基準
漠然とアクセシビリティに対応しようと思ってもなかなか難しいので、まずは基準を知るところから始めてみたいと思います。
WCAG
※ウェブアクセシビリティ基盤委員会で日本語化されていました。
ウェブアクセシビリティ基盤委員会 | Web Accessibility Infrastructure Committee (WAIC)
JIS X 8341-3
「やさしい」規格なんですね、覚えやすいです。
覚えやすいですが、達成基準がたくさんあって、読むのも大変ですね。
各社のアクセシビリティガイドラインの方が読みやすいそうなので、おすすめされていたものを読んでいきたいと思います。
アメーバさんのものはレベル分けもされていて読みやすい気がしました。
「A」のものからやっていこうなど、決めやすいかもしれません。
アメーバさんのアクセシビリティガイドライン
Ameba Accessibility Guidelines
freeさんのアクセシビリティガイドライン
freeeアクセシビリティー・ガイドライン — freeeアクセシビリティー・ガイドライン Ver. 202312.1-RELEASE+4.3.3
デジタル庁(ウェブアクセシビリティ導入ガイドブック)
※デジタル庁(ウェブアクセシビリティ導入ガイドブック)に完全準拠するのは難しいそうですので参考までに。
ポイント
コンテンツの設計段階から考慮できると良いですが、私たち制作チームだけでもできること、学べるものはどんどん取り入れていきたいと思いました。
一気にやろうとせず、少しずつ、使いやすさをパワーアップさせていきたいです。
デザインの配慮
- 配色の設計(適切なコントラスト)
- 文字サイズの設計
- アニメーションの設計(意図しない動作、過度な動作をしない)
- ユーザーの操作範囲の設計(適切なクリック領域、カルーセルのオートプレイを動きを止めるボタンがあるなど) など
コーディングの配慮
- キーボード操作の対応(阻止してしまっていないか)
- 音声読み上げなどにも適した設計(適切なマークアップ、代替テキスト)
- hover、focusなどの状態表示をきちんと表示しているか など
※代替テキストはコンテンツを考える段階で決めるのが良いということですが、すぐには難しそうなので自分がマークアップするときに気をつけれらる範囲からやってみたいと思います。
まとめ
基本的なマークアップは注意して行っていますが、細かいところも、アクセシビリティについて知ることでもう一踏ん張りしてみるか!と言う気持ちになれたので、参加してよかったなと思います。
早速案件内でもできそうなalt以外の代替テキストの実装などをやってみています。
役に立つといいな。
最後になりますが、カンファレンスを開催していただきありがとうございました。
そして来年は名古屋で開催されるそうです。
名古屋なら現地で参加できるかもしれないので楽しみです。
福岡には行ったことがないので、いつか福岡にも行ってみたい。