W3C Markup Validatorのエラー修正やってみた 2【schema.org以外もあります】

前回の続き。W3C Markup Validatorを本サイトに行った結果のエラー警告を修正していきます。

エラー修正の続き

Attribute datetime not allowed on element li at this point.

これもまずタグを見てみます。

これはブログの記事一覧の各リスト部分のヘッダ項目として記事の公開日、記事の著者名(author)をliタグで並べたところに、microdataのdatePublishedプロパティ(ブログ記事の公開日)を後から定義した箇所で出たエラーでして、liタグにdatetime属性は許可されてません、というエラーです。

これは単純にliタグにmicrodataプロパティを混ぜ込んだのが原因なので、microdataプロパティをliタグの子要素に移します。そもそも、datetime属性を使う必要もありませんでしたので、完全修正版を下記に載せます。

metaタグを使ってスッキリ書くことができました。datePublishedは日付だけでいいので、タイムスタンプを書く必要もありません。これでエラーが解消されました。

Bad value search for attribute role on element form.

これもタグを見てみます。

このエラーは、role=”search”はformタグに付けないで、という内容です。role=”search”はHTML5で導入されたrole属性です。role属性は、Webページの構成としてある役割を持っているという目印を付けるための属性です。Webアクセシビリティの向上のために用いられます。role=”search”は、検索機能を表します。

このタグがどこに使われているかというと、サイト内検索のための検索フォームです。この検索フォーム、Wordpressで最初から用意されているウィジェットなのですが、そいつがHTML検証で引っかかっています。厄介なことをしてくれますねえ。ですので、ウィジェットをちょっと変更して直します。

では、どのように直せばいいのかというと、role=”search”について、WAI-ARIAという、Webアクセシビリティに関する仕様によると、searchロールは、検索機能のformタグの周りに検索補助機能、例えばより詳細な検索が行えるページへのリンクなど、がある場合には、それらを包括するように指定するのがいいとしています。HTML5としては、asideタグsectionタグの仕様にWAI-ARIAのsearchロールを使ってもいいと書かれています。というわけで、修正方法はわかりました。

WordPressのサイト内検索フォームをカスタマイズする方法は、

  • テーマフォルダ以下にsearchform.phpを作る
  • functions.phpにadd_filter( ‘get_search_form’, ‘関数名’ );を追加する
  • 使用しているテーマが既にカスタマイズしている場合は、そのコードを修正する

などといった方法があります。本サイトの場合は、3番にあたるので、それを修正します。だいたいの場合、以下のようになっているので、formタグをasideタグで囲み、role=”search”をそちらへ移します。

これを、

こうしてみたところ、エラーが解消されました。

The text content of element script was not in the required format: Expected space, tab, newline, or slash but found { instead.

このエラーが出ているタグは、以下のようになっています。

これはGoogle+バッジをサイトに挿入している部分です。この波括弧(})が正しいフォーマットになっていないと言われています。

このコードはGoogle+バッジ(Facebookのいいね!ボタンと同じようなもの)の言語指定の部分なのですが、言語指定を強制しなくても基本的にGoogle側で判別してくれるので、この記述はあってもなくてもあまり変わらないかと思います。ですので、この部分は丸ごと削除します。

これで本サイトのトップページに関して、W3C Markup Validatorのエラーはすべて消えました!

警告の修正

次は警告について見ていきます。

The banner role is unnecessary for element header.

bannerロールは、先ほどのsearchロールと同様、WAI-ARIAの仕様でヘッダー部分であることを表すものですが、HTML5のheaderタグの仕様を見ると、デフォルトでbannerロールを指定したことになるようです。W3C警告の内容を見てもbannerロールは不必要とあるので、削除します。

Element nav does not need a role attribute.

この警告が出ている部分を見てみます。

こちらもbanner同様の理由です。navタグにおいては、明示的にnavigationロールを指定しなくてもデフォルトで指定したことになります。同様にnavigationロールを削除します。ちなみに、navigationロールはナビゲーションであることを表します。

Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections.

これはsectionタグには適切にh見出しを付けろということです。文書構造でいうと、節ごとの小見出しとなります。これは適切につけていくしかないでしょう。

これで、本サイトのトップページはW3C Markup Validatorにおいてオールグリーンとなりました!やはりオールグリーンが出ると気持ちいいですね!SEO的に苦労してそこまで修正するメリットがあるのかといわれるとおそらくないと思いますが、こうしてHTML5やその周辺の知識が身に付くのでそういう意味では有意義かと思います。いずれ洗練されたマークアップが自然と書けるようになればいいなあ、と願って今回の勉強を終わりにします。

広告
  • LINEで送る