W3Cの「Markup Validation Service」で最新の記述法のエラーチェックを行うことと、”The banner role is unnecessary for element header.”という警告がでます。でも、”ロール属性”の警告は敢えて放っておくことにしました。

セマンティックな記述と”ロール属性”

ウェブページは、HTMLとCSSを使って表現されているのですが、この2つには棲み分け、役割分担があります。

HTMLでは、セマンティックな(意味を持つ)、CSSでは装飾を担当しましょうといった感じです。

2016年11月のHTML 5.1の勧告では下記のような状況です。

W3C、HTML 5.1 W3C Recommendation、§1.10.1. Presentational markup§より引用

This section is non-normative.

The majority of presentational features from previous versions of HTML are no longer allowed. Presentational markup in general has been found to have a number of problems:

The use of presentational elements leads to poorer accessibility.

翻訳:このセクションは、規則ではありません
前のバージョンのHTMLでの殆どの装飾用の機能は、現在は許されておりません。装飾用のマークアップは概して多くの問題を抱えています。装飾要素の使用は、アクセシビリティーの貧弱化を導きます。

このため、イタリック<i>タグや枠線border=”0″などの装飾的な記述は、意味を再定義したり廃止になったりしています。

セクショニングコンテンツとARIA

その流れで、HTML5からheader、main、aside、footerなどのセクショニング要素(タグ)が追加され、要素内のコンテンツは、相応の意味を持つようになっています。

これらの要素が登場する前は、要素の中に、banner、main、complementary、contentinfoなどの属性を記述することで同じ機能を持たせていたようです。

ARIAとは、

障害がある人を支援するための技術(AT)です。

以前h1要素をページに2つ入れると、AT支援の妨げになるからやめましょう的な警告を見たことがあります。h1要素(最大見出し)をページのタイトルだとみなすATが多いので、h1要素が2つあると、音声ガイドなどをつける場合に、どちらをより重要だとみなしていいか分からなくなります!っというような意味。

珍しく日本語の訳文があったので、詳しくはAccessible Rich Internet Applications (WAI-ARIA) 1.0、日本語訳をご参照ください。

ARIAの使い方などは、ARIA in HTML、W3C Working Draft 23 March 2017、2. Document conformance requirements for use of ARIA attributes in HTMLに詳しく書かれていました。

ARIA属性との重複表現

ARIAに使われてきたbanner属性はheader要素、main属性はmain要素、complementary属性はaside要素、contentinfo属性はfooter要素ににそれぞれ呼応しているのですが、これらが二つとも存在すると、先のW3CのValidation Serviceでは、警告が出ます。

W3C、HTML 5.1 W3C Recommendation、§1.10.1. Presentational markup§

While it is possible to use presentational markup in a way that provides users of assistive technologies (ATs) with an acceptable experience (e.g., using ARIA), doing so is significantly more difficult than doing so when using semantically-appropriate markup. Furthermore, presentational markup does not guarantee accessibility for users of non-AT, non-graphical user agents (such as text-mode browsers).

ユーザーにアシスティブテクノロジー(ATs)を提供する為の(ARIAのような)装飾用マークアップは使用可能です;但しこの方法は、セマンティック的に適切なマークアップを使う方法よりも、はるかに難しい。更に言えば、装飾マークアップは、(テキストモードブラウザーのような)非ATもしくは非グラフィカルユーザーエージェントの使用者に対するアクセシビリティーを保障しません。

W3C、Validation Serviceでのロール属性に対する警告

最近作成されたワードプレスの意識高い系テーマは、大抵の場合、両方の記述を採用しています。

<header role="banner">
<nav role="navigation">
<aside role="complementary">
<footer role="contentinfo">

↑記述はこんな感じ。

↓警告はこんな感じ。

"ロール属性"に対する警告
“ロール属性”に対する警告

The navigation role is unnecessary for element nav.

「nav要素には、navigation属性は必要ありませんよ。」つまり、重複しているから、一つでいいですよ。っといった感じ。

敢えて処置はしない

W3Cの立場で、新しい技術とその理想的な使い方を啓蒙するために、警告を出すことは良い事だと思います。

でも、W3Cが勧告を出したからと言って、すべてのAT技術が一気に新基準に揃うわけではないと思うのです。その間は、古いシステムでも新しいシステムでもサポートされるように両方書いていていてもいいのではないか?っと、思い直しました。

このため、当ブログでは、この警告に関しては、しばらく様子見とします。

投稿者: のろのろ

ブログのカスタマイズをしては、備忘録を書いています。2017年4月にワードプレスデビューし、試行錯誤しながら寝落ちする感じのへなちょこブロガーです。

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください