たまにはHTMLを見直そう!Another HTMl LINT5でHTMLの構文をチェック

普段はWebサイトのhtmlソースコードはコーディングの工程で確認します。
しかし、構文チェックは定期的にチェックしないといけません。

理由は、htmlの構文の基準はW3C(World Wide Web Consortium)という団体によって常に見直され、改良されているからです。

そこで本日はHTML5チェックをAnother HTMl LINT5というツールで確認していきたいと思います。

Another HTMl LINT5でチェック

Another HTML LINT5に進み、調べたいウェブサイトのURLを入力して「チェック」

エラーの内容

チェック結果ですが、以下の内容が返ってきました。
点数は72点(100点中)
意外と多くてちょっと驚きました。

 

・<LINK> の HREF 属性の URI `//s.w.org` はうまく評価されないかも知れません。(Severity:3)
・<IFRAME> には TITLE 属性を指定するようにしましょう。(Severity:4)
・<BUTTON> には TABINDEX 属性を指定するようにしましょう。(Severity:0)
・<BUTTON> には ACCESSKEY 属性を指定するようにしましょう。(Severity:0)
・<MAIN> に不明な属性 `ROLE` が指定されています。(Severity:6)
・`&nbs` は不明な実体参照です。(Severity:3)
・<LINK>要素は<BODY>要素の下位要素にはなれません。(Severity:9)

 

WordPressをインストールしてるので自分でコードを書いている部分とWordPressで出力されたものがあるので、早速対策していきます。

<LINK> の HREF 属性の URI `//s.w.org` はうまく評価されないかも知れません。

ソースコードを確認すると
<link rel='https://api.w.org/' href='https://■■■■■■■■.com/wp-json/' />
とあります。

この<LINK>タグの属性"w.org"は"https://wordpress.org/"にリダイレクトされるようになっているもので、当ウェブサイトのリンクとしては不要と判断します。
上記タグは、<?php wp_head(); ?>の中に入っているのでfunctions.phpにフックを追記して削除します。

削除方法は、functions.phpに
remove_action('wp_head','rest_output_link_wp_head');
を追記するだけ。

<head>タグから<link rel='https://api.w.org/' href='https://■■■■■■■■.com/wp-json/' />が削除されてたら完了です。


<IFRAME> には TITLE 属性を指定するようにしましょう。

googletagmanagerから取得したiframeだったのでそのまま貼り付けてました。
title属性の必要性は正直わかりませんが、指定しない理由もないので素直に対応します。

googletagmanagerのソースを編集するのは変な感じですが、title="googletagmanager-frame"等と属性を追記します。

<BUTTON> には TABINDEX 属性を指定するようにしましょう。

tabindex属性とは、キーボードの「Tabキー」を押すことでフォーカスされる移動順序のことです。
モニター左上のドロワーのハンバーガーメニューが該当箇所です。

<button type="button" class="drawer-hamburger"> ~ </button>

メーンナビゲーションなので値は「1」にします。
下記が編集後のソースです。

<button type="button" class="drawer-hamburger" tabindex="1"> ~ </button>

<BUTTON> には ACCESSKEY 属性を指定するようにしましょう。

accesskey属性を簡単に説明するとショートカットキーの設定と思っていただけるとわかりやすいと思います。

 

WindowsとMacでショートカットの組み合わせが違います。
・Windows:Control + Alt + accesskeydで設定した値
・Mac:Control + Option + accesskeydで設定した値

 

tabindex属性と同じように<button>タグにaccesskey属性も設定します。
ボタンなので値は"b"にします。

<button type="button" class="drawer-hamburger" tabindex="1"> ~ </button>
<button type="button" class="drawer-hamburger" tabindex="1" accesskey="b"> ~ </button>

<MAIN> に不明な属性 `ROLE` が指定されています。

<main id="main" class="site-main" role="main">が該当したソースです。
WordPressのテンプレートの中でよくみる一行です。
WordPressのテンプレートだからと安心してたのですが、油断はできないですね。

role属性は、W3C団体の中のARIA in HTMLという部署?で確認できます。
ARIA in HTMlのサイトを確認すると<main>タグ属性のrole="main"は「Implicit ARIA semantics -SHOULD NOT be used:使用すべきではない」と記述されてました。
アクセシビリティーの観点からは何かしらの設定はした方がよいと思うのですが、今回はrole属性を削除します。

 

`&nbs` は不明な実体参照です。

get_the_excerpt();で記事を抜粋していたので、特殊文字がそのまま取得されていました。

問題は特殊文字(&nbsp;)が全部取得されてない(&nbsのようにp;が切れている)のが原因でした。

取得する文字数を調整しても解決しないので、本文を抜粋するthe_excerpt();をカスタマイズします。

function custom_excerpt($length) {
  global $post;
  $content = mb_substr(strip_tags($post->post_excerpt),0,$length);
  if(!$content){
    $content = $post->post_content;
    $content = strip_shortcodes($content);
    $content = strip_tags($content);
    $content = str_replace("/&nbsp;|/&amp;|/&gt;|/&lt;|/&quot;","",$content);
    $content = html_entity_decode($content,ENT_QUOTES,"UTF-8");
    $content = mb_substr($content,0,$length);
  }
  return $content;
}

今回の構文チェックでは該当しませんでしたが、「&nbsp;」の他にも「&amp;」「&lt;」「&gt;」「&quot;」もついでに設定しました。

<LINK>要素は<BODY>要素の下位要素にはなれません。

先日Google PageSpeed Insightsの点数アップのために、レンダリングを優先していました。
<link>タグを<body>内の最後に設置していたのがいけなかったみたいです。

<body>内に<link>タグを設置してJavaSscriptで読み込み順を調整する方法もありますが、<body>内に設置しているというのには変わりないので、素直に<head>タグに移動します。

 

以上のエラーを一つずつ対応して再度チェックすると点数は95点にまで回復しました。
定期的な構文チェックが実施した方がよさそうですね。

現在の稼働率
120%

お仕事のご依頼は
受け付けておりません。