アクセシビリティ(キーボード操作)の対応まとめ|TAB移動とフォーカス制御の基本
Webアクセシビリティで重要な「キーボード操作」。TAB移動、フォーカス、outline、tabindex、divボタン問題など、制作現場で必須となる対応を初心者向けにわかりやすく解説します。
Web制作の知識やデザインの工夫など、
制作を通して学んだことをわかりやすくまとめています。
これからWebサイトを作りたい方や、学びたい方に役立つ情報を発信しています。
Webアクセシビリティで重要な「キーボード操作」。TAB移動、フォーカス、outline、tabindex、divボタン問題など、制作現場で必須となる対応を初心者向けにわかりやすく解説します。
alt属性を入れるべき場合と入れないほうが良い場合を、初心者にも分かりやすく整理。画像SEO・アクセシビリティの基礎から、具体例・NG例・実務ポイントまで丁寧に解説します。
HTMLの「article」タグの意味、使うべき場面、使わないほうが良い場面、実務での具体例を初心者向けにやさしく解説します。ブログ・ニュース・商品情報などで役立つ構造化の基本も紹介。
HTMLとCSSで可能なSEO対策を、初心者向けにわかりやすく整理。title・meta・alt・見出し構造・ページ速度・CLS対策など、実務で必須の内部施策を丁寧に解説します。
HTMLのfigureタグの役割、figcaptionとの正しい使い方、入れるべき場面・使わなくてよい場面、実務での構造例を初心者向けに解説します。
セマンティックの意味、HTMLにおける役割、SEOやアクセシビリティへの影響、非セマンティックタグとの違い、実務での使い分けを初心者向けにやさしく解説します。
HTMLのsectionタグの正しい意味、使うべき場面、使わない方がよい場面、article・divとの違い、実務での構造例を初心者向けに分かりやすく解説します。
spanタグの正しい意味、使うべき場面、使ってはいけない場面、divやstrongとの違い、実務で役立つ活用例まで初心者向けに分かりやすく解説します。
navタグをSEO的に最大限活用する方法を解説。検索エンジンが理解しやすいナビゲーション構造、PC用とスマホ用でnavを複数にしても良いのか、正しい使い分けやaria-labelの基礎まで初心者向けにまとめます。
ブロック要素・インライン要素・Flexbox が「親」「子」のどちらを基準に動いているのかを初心者向けに整理します。
CSS Gridの仕組み、Flexboxとの違い、よく使うプロパティ、実務での活用方法を初心者向けにわかりやすく解説します。
meta title・descriptionの最適化方法を実例付きで紹介します。