質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

2回答

4194閲覧

roleのbannerはヒーローイメージを表すという人と下記のように言う人がいるのですが、 どちらだと思います?

退会済みユーザー

退会済みユーザー

総合スコア0

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2016/09/01 05:34

roleのbannerはヒーローイメージを表すという人と下記のように言う人がいるのですが、
どちらだと思います?

banner

バナーというとWebサイトを表す画像を思い浮かべる人も多いとおもいますが、ここでのbannerはサイト全体に関連付けられた情報という意味を持ちます。

例えば、このサイトの場合、上のサイトのタイトルとかあるいはメニューは、どのページに行っても変わりません。このように、ページごとに変化がなく、サイト全体で一貫しているような情報に対してrole="banner"が付けられます。

逆にそうでないのは、例えばページの内容とか、同じサイトの中でも変化があるものです。

また、
ウェイアリアを入れるとバリデートでwarningが出ます。入れたほうがアクセシビリティが良いはずなのに入れないほうがいいのでしょうか?warningは無視でもよいでしょうか?

例えば<header role="banner"></header>などのrole属性です。
・メッセージThe banner role is unnecessary for element header.

その他warning
<nav role="navigation">
メッセージ Element nav does not need a role attribute.

<main role="main" class="u-ta-c">
メッセージ Element main does not need a role attribute.

そもそも実務でウェイアリアをどこまで使っていますか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

Validationは一定のルールに従って検出しているだけでしょうし、
おそらく「ARIA in HTML」を踏まえての検出ルールでしょうから、
完全に適合するまで直すか、どこかで区切りをつけてしまうか、
でしょうか。

ARIAの日本語訳など精力的に活動なさっている方がいらっしゃるので、
注視していくことが肝要かと思います。

参考:
ARIA in HTML 日本語訳
https://momdo.github.io/html-aria/
2015年末におけるWAI-ARIAの今をものすごくざっくりと - 水底の血
http://momdo.hatenablog.jp/entry/20151211/1449824534

投稿2016/09/02 01:19

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/09/02 01:22

<header role="banner"></header>に文法エラーは100%ないですよね。 確認させてもらいたいのは、バリデートが間違えて検出しているだけなのか、この記載に文法エラーがあるかということなのです。 ここがわかれば自信をもって、バリデータの不備といえますので
退会済みユーザー

退会済みユーザー

2016/09/02 01:28

unnecessary っていうくらいなので、その場面では不要だとvalidatorが判断しているのには理由がありそうです。ARIA in HTMLでも使用すべきではないというケースがあるので、それを検出しているのだと思われます。
退会済みユーザー

退会済みユーザー

2016/09/02 02:35

バリデーターのバグではなく使うべきでないところで使ってしまっている私のミスということでしょうか? それならいっそのことrole属性は一切入れないほうが実務ではいいのですかね? 良かれと思ってやって、クレームになると面倒なので。
退会済みユーザー

退会済みユーザー

2016/09/02 02:57

W3Cのvalidatorって相当テストしてあるものでしょうから、そうそうバグというのは考えにくいです。間違いがあればフィードバックが寄せられているでしょうし。 Evernoteで記事を切り出したりするときにWAI-ARIAに則ったroleを与えてあると便利なんですよね。WAI-ARIA完全適用させようとすると相当苦しくなるので、実用面で困らない程度を想定(Evernote・OneNote切り出し対応のみテストするとか、何か読み上げソフト対応をテストするとか)するのが無難だと思われます。
退会済みユーザー

退会済みユーザー

2016/09/02 03:45

・nav要素 = role="navigation" ・main要素 = role="main" ・section,articleの子でないheader要素 = role="banner" ・section,articleの子でないfooter要素 = role="contentinfo" これぐらいつけておけば十分でこれ以上はやめたほうがいいのですね。
guest

0

ベストアンサー

一部のHTML5要素には、暗黙的なARIAセマンティックが与えられています。
この場合、role属性を合わせて記載することは非推奨とされています。
バリデーションでWarnningが出るのはそのためです。

たとえば、
・nav要素 = role="navigation"
・main要素 = role="main"
・section,articleの子でないheader要素 = role="banner"
・section,articleの子でないfooter要素 = role="contentinfo"
などが該当します。

仕様的には暗黙のAIRAセマンティックが既にあるのだから、role属性を付与する必要はないです。
が、古いブラウザや音声ブラウザ等がHTML5の新要素をrole属性と同じように正しく解釈できるわけではないので、
後方互換性を保つためにはたとえWarningが出たとしてもrole属性も合わせて記載した方がカバーできる範囲が拡がるのは確かです。

この辺りは過渡期の宿命なので、仕様的な正しさを取るか、実利を取るかで判断するしかないでしょう。

参考サイト

投稿2016/09/02 03:09

aKusano

総合スコア3763

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/09/02 03:21

ARIA in HTMLに解説ありますね
退会済みユーザー

退会済みユーザー

2016/09/02 03:36

ありがとうございます。 数年後には自動的にrole属性はつけられるので、コーダーは何もつけずによくなるのですね。 ただまだ実装されていないので数年はつけていていいのですね。
退会済みユーザー

退会済みユーザー

2016/09/02 03:39

たとえば、 ・nav要素 = role="navigation" ・main要素 = role="main" ・section,articleの子でないheader要素 = role="banner" ・section,articleの子でないfooter要素 = role="contentinfo" などが該当します。 上記は実利をとればつける、仕様をとればwarningが出るようなroleはすべて削除するべきということですね。 面倒なのでroleは相当こだわるサイトでなければ基本つけないという形でよいのですかね。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問