ブログ記事のセマンティックマークアップ実装ガイド。h1～h3の階層構造、figcaption、alt text、JSON-LD BlogPostingなど、HTMLの正しい要素選択方法とアクセシビリティを解説。
シェアックリップ
シェアされたアックリップです。
そのほかの #見出し構造 ピックアップ
WordPress環境でのメール送信におけるアクセシビリティについて。確認メール・パスワードリセット等、ユーザーが受け取る全メッセージが読みやすく・ナビゲート可能である必要性を解説。コンテンツ・構造・デザイン・テスト実践を網羅した講座。
Webアクセシビリティの象徴だったスキップリンクが、テクノロジー進化により必要性を失った現代でもなおチェックリスト項目として形骸化している問題を指摘。正しい見出し構造とランドマーク要素こそが重要であり、形骸化した配慮から脱却することを主張。
HTMLを可視化するブラウザ拡張機能『Accessibility Visualizer』の開発者 ymrl さんが、代替テキスト・見出し・フォームなどの情報を視覚化するツールと活用法を解説する。
HTMLテーブルのアクセシビリティ実装を、スクリーンリーダー対応に重点を置いて解説。caption、scope属性、id+headers属性などの具体的な手法を紹介する。
La Ligaの20クラブサイトについて、自動ツールと手動テストでアクセシビリティを監査した結果。自動ツールは高スコアでも実際にはスクリーンリーダーやキーボード操作に課題があるケースが多く、企業事例とテスト方法を示す。
HTMLタグは見た目ではなく意味を記述するもの。適切に使うことで、スクリーンリーダーや検索エンジンが同じように内容を理解でき、アクセシビリティとSEOを両立。
そのほかの #代替テキスト・alt ピックアップ
WebAIM Million 2026年調査で明らかになった最も一般的な6つのWCAG違反について、なぜそれらが問題かを解説し、各々の修正コードを具体的に示す。
WordPress環境でのメール送信におけるアクセシビリティについて。確認メール・パスワードリセット等、ユーザーが受け取る全メッセージが読みやすく・ナビゲート可能である必要性を解説。コンテンツ・構造・デザイン・テスト実践を網羅した講座。
生成AIが画像の詳しい説明を書いても、代替テキストとして使用する前に7点の観点で編集する必要があると解説。目的・意味・装飾性・機能・文字・図表・CMS実装後の確認を通じ、見た目の正確性ではなく「見られない人にも同じ情報へ到達できるか」を基準とすべき。
Web制作の卒業制作をWCAG 2.2に沿ってセルフチェック。LightHouse、キーボード操作、代替テキストの3点から、具体的な問題点と対策を実例で解説。
スクリーンリーダーがアクセシビリティツリーを通じてWebページを読む仕組みと、alt欠落・ARIA誤用などよくある実装エラーの修正法を解説する。
HTML/CSS初心者向けのWebアクセシビリティ入門。意味のあるHTML、キーボード操作、フォーム、代替テキスト、コントラストの5点から始める基本を解説。