tota11yを用いて見出しの階層をチェックする方法

チェックの準備

見出しの階層構造をチェックするための準備として、tota11yのブックマークレットをブラウザに設置します。

準備1

tota11yのWebサイトを表示します。

準備2

[tota11y]ボタンをブラウザのブックマークバーにドラッグ・アンド・ドロップします。

"tota11y"のブックマークレットをブラウザのブックマークバーにドラッグ・アンド・ドロップする方法

チェックの手順

手順1

ブラウザでチェックしたいページを開き、tota11yのブックマークレットをクリックします。そうすると、ブラウザの左下にメガネのアイコンが表示されます。

手順2

メガネのアイコンをクリックすると、メニューが表示されます。その中の[Headings]をクリックします。そうすると、ブラウザの右下にチェック結果が表示されます。

"tota11y"のパネルを開いて、"Headings"にチェックを入れる方法

チェック結果

最初の見出しがh1要素でない場合

チェック結果に、”First heading is not an <h1>“というエラーメッセージが表示されます。

最初の見出しがh1要素でない場合に表示される、tota11yのチェック結果

見出しレベルがスキップしている場合

チェック結果に、”Nonconsecutive heading level used“というエラーメッセージが表示されます。

見出しレベルがスキップしている場合に表示される、tota11yのチェック結果

見出しの階層に問題がない場合

チェック結果に、見出しが階層化されて表示されます。

見出しの階層に問題が無い場合に表示される、tota11yのチェック結果

この記事が役に立ったらシェアしてください

  • Facebookでシェアする
  • Twitterでシェアする
  • はてなブックマークに保存する
  • LINEで送信する

プロフィール

庄司 諭史
  • note
  • Twitter

大阪府在住、三重県出身。

Web制作会社でマークアップエンジニアとして働いています。

Web制作の他にも、環境問題をはじめとする社会課題、インバウンド対策、人材採用や多様な働き方にも関心を持っています。

趣味は、全国各地の古民家カフェを巡ること。