ニューＨｔｍｌチェッカー（Ｎｕ　Ｈｔｍｌ　Ｃｈｅｃｋｅｒ）

いつもマークアップチェックで使用していた「Ｗ３Ｃ」の「Ｍａｒｋｕｐ　Ｖａｌｉｄａｔｉｏｎ　Ｓｅｒｖｉｃｅ」が、2015年7月14日頃から「Ｎｕ　Ｈｔｍｌ　Ｃｈｅｃｋｅｒ（ニューＨｔｍｌチェッカー）」という新しいページに誘導されるようになりました。

伴い、「role属性」のコードチェックが、軒並み「Ｗａｒｎｉｎｇ（警告）」となりましたので、以下の通り修正を行いました。

header（ヘッダー）要素の「role属性」

チェック結果「警告」になったコーディング例

<header role="banner">
<p>ホームページ作成方法</p>
</header>

「警告」とは、「エラー」と異なりコードの間違いでは無いので「有効」です。「変だね！」程度と捉えて、余裕があれば「警告」が無くなるように修正します。

修正方法は「警告」の内容に沿って、コードの修正を行います。英文で分かりにくいのですが、この例は、「header（ヘッダー）にbanner（バナー）role（役割）は不要」と解釈して、以下のよにbanner（バナー）role（役割）をp要素に組み込む修正で解消しました。

修正してチェック結果も解消したコーディングの例

<header>
<p role="banner">ホームページ作成方法</p>
</header>

main（メイン）要素の「role属性」

チェック結果「警告」になったコーディングの例

<main role="main">
  ・・・メインコンテンツ・・・
</main>

「警告」の内容は、「main要素」に「role=main属性」は不要。と大変ごもっともな指摘です。この場合、「role=main属性」を外してしまうのが正解に近いのですが、それではＨＴＭＬ５に対応していない「支援技術」に伝達できない事になります。

対処としては、万能コンテナの「div要素」に「role=main属性」を移す事で、「コードチェック」「支援技術」両方をクリアする事ができました。

修正してチェック結果も解消したコーディングの例

<main>
<div role="main">
  ・・・メインコンテンツ・・・
</div>
</main>

広告

nav（ナビ）要素の「role属性」

チェック結果「警告」になったコーディングの例

<nav role="navigation">
　・・・ul・li要素・・・
</nav>

「警告」の内容は「main要素」と同じく、「nav要素」に「role=navigation属性」は不要。という指摘です。

これについても、「div要素」に「role=navigation属性」を移す事で、「コードチェック」「支援技術」両方をクリアする事ができます。

修正してチェック結果も解消したコーディングの例

<nav>
<div role="navigation">
　・・・ul・li要素・・・
</div>
</nav>

footer（フッター）要素の「role属性」

チェック結果「警告」になったコーディングの例

<footer role="contentinfo">
<address>
制作者へ連絡：<a href="mailto:3377@
mbp.nifty.com">
落合ネット</a>
</address>
<p><small>Copyright © 
OCHIAI NET All Light 
Reserved.</small></p>
</footer>

「警告」の内容は、「footer要素」に「role=contentinfo属性」は不要。という指摘です。

この場合、「address要素」に「role=contentinfo属性」を移した場合は、「エラー」になりますので、最終的な対処方法は、製作者情報やCopyright ©を記載している「p要素」に「role=contentinfo属性」を移す事で、クリアする事がでます。

修正してチェック結果も解消したコーディングの例

<footer>
<address>
<p role="contentinfo">
制作者へ連絡：<a href="mailto:3377@
mbp.nifty.com">
落合ネット</a>
</p>
</address>
<p role="contentinfo">
<small>Copyright © 
OCHIAI NET All Light 
Reserved.</small></p>
</footer>

注意点

以上の内容は、2015年7月17日時点の「ニューＨｔｍｌチェッカー」にクリアして、かつ「wai-aria」の趣旨にも対応できるように「実務上」の対処方法です。又、「ニューＨｔｍｌチェッカー」についても、その動作は常に変更が加えられ、「エラー」や「警告」が無いとしても、そのＨＴＭＬが必ずしも「正解」ではない事は、同サイト内においても説明がされております。つまり、参考として捉えて、限られた時間の中で、最低限必要な対処を行う事で十分と考えます。

WAI-ARIA実装方法 に戻る

ホームページ作成方法 TOPに戻る