マークアップエンジニアのオンボーディング

マークアップエンジニア向けHTML/CSSオンボーディングクエスト

企画書とデザインカンプをもとに、モバイルのレスポンシブ表示に最適化したWeb画面を実装し、Webアクセシビリティ（a11y）の標準を満たすミッションに取り組みます。HTML/CSSを担当するマークアップエンジニア向けのオンボーディングです。

■ ゲーム内クエストの例

HTMLのコーディングで、視覚に障がいのあるユーザーのために必ず記述すべき属性が抜けています。

[1]代替テキストを提供する alt 属性を記述する。

[2]src のパスさえあれば、スクリーンリーダーが画像を自動で読み取る。

[3]class 属性を追加して透明にする。

解説： alt 属性は、画像を見られないスクリーンリーダーの利用者に代替情報を届けるための、Webアクセシビリティの基本的なガイドラインです。

Flexbox / GridレイアウトレスポンシブWebデザインWebアクセシビリティ（a11y）HTML5セマンティクス