HTML5、セクショニング要素+”ロール属性”のエラー

W3Cの「Markup Validation Service」というツールで、最新の記述法のエラーチェックを行うことができます。最近採用した3つのテンプレートが立て続けに同じ”ロール属性”のエラーを抱えていたので、調べてみました。

セマンティック(意味を持つ)記述が流行り

ウェブページは、HTMLとCSSを使って表現されているのですが、その棲み分け、役割分担が強まってきているようです。

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などのセクショニング要素(タグ)が追加され、要素内のコンテンツは、相応の意味を持つようになっています。

これらの要素が登場する前は、div要素の中に、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でのロール属性に対する警告

ワードプレスのTwenty SeventeenやSeesaaのシンプルC.グレー 右カラムなどのテンプレートでは、両方の記述を採用しています。

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

↑記述はこんな感じ。

↓警告はこんな感じ。

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

敢えて処置はしない

W3Cの立場で、新しい技術を啓蒙するために、セクショニングコンテンツの技術を採用してもらうように警告を出すことは良い事だと思います。

私も最初は素直にrole属性を削除するカスタマイズを行ったのですが…

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

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

カテゴリーHTML

コメントを残す

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