Drupal / サイト構築

アクセシビリティ向上のための Skip Links の設定

更新日

(注）これは以前のサイトに関する記事です。現在は、Wordpressを使っています。

このサイトは、Drupal のZenというテーマをカスタマイズして使っています。前から気になっていて放置していたのですが、Zenテーマを使うとデフォルトで、”Skip to Navigation” というタイトルのリンクができてしかも通常は隠されているのです。

場所は <body> のすぐ後で、こんな感じ。


<body>
     <p id="skip-link">
      <a href="#main-menu" class="element-invisible element-focusable">Skip to navigation</a>
    </p>
    ......

これは一体何なのか、ということをちょっと調べてみました。

これはアクセシビリティに関する機能で、スクリーンリーダーを使ってアクセスする時にすぐにメインのコンテンツにジャンプできるようにするためのリンクなのだそうです。

Drupalのサイトにもドキュメントがあります。

https://drupal.org/node/467976

Skip Linkは複数個設置してもよく、常に隠してもいいし、フォーカスが当たった時だけ表示するようにしてもよいようです。

Skip Linkのデフォルトのジャンプ先は #main-menu というid で、これはナビゲーションメニューに付加されたタグです。ナビゲーションメニューはヘッダのすぐ下の横一列のメニューです。

用途からするとメインコンテンツの先頭の方がいいのではないかと思って探してみると、ちゃんとパンくずリストの直後、タイトルの直前のところにタグがセットしてありました。

こういうやつ。


<nav class="breadcrumb" ... >
<a id="main-content"></a>
<h1 class="title" ...> コンテンツのタイトル </h1>

そこで、Skip Linkのタイトルを”Skip to content”に変え、#main-content のジャンプするようにしました。

また、左上の”このサイト”にジャンプするリンクも作っておきました。

アクセシビリティってこれまで気にしてなかったのですが、ちょっと勉強してみようかと思います。

あなたも好きかも

PAGE TOP