以下の記事に続いて、Chrome aXe plugin でサイトのアクセシビリティ問題をチェックし対応していきます。

ソーシャルコメントや広告タグ以外のコントロールできる問題はコントラスト調整以外ある程度解消できたので、個別にページを確認して表示された警告をピックアップして、対処していきます。

警告に対処する

以下の警告に対して、修正を実施しました。

スクロール可能な領域にキーボードでアクセスできるようにします

これはブログ上のスクロール可能な、コードシンタックスに対して出力されていました。
コードシンタックスは pre タグで囲まれていますが、 pre タグは デフォルトでフォーカス可能ではないため、tabindex を付与してフォーカス可能にする必要があります。

以下、フォーカスに関する MDN の文書です。
* フォーカスと選択 - Archive of obsolete content | MDN

Markdown の parser側で、pre タグに tabindex を付与するか clinet側で JavaScriptで対応するか選択肢がありますが、 pre 要素（整形済みテキスト）の折り返しを切り替え可能にする | フロントエンドエンジニアのblog – 有限会社Willさんいん での JavaScript での対応が良いと思えましたので、これを参考に折り返しができるようにしてみました。

toggleメソッドが jQuery 2.x では存在しないため、使用しない素のJavaScriptで実装してみました。
動作確認は Mac の Chrome でのみ行なっています。

  • wrapCodeHighlight.js 
    function wrapCodeHighlight () {

     // codeハイライトのの折り返し箇所に、     
     function wrap() {
        this.querySelector('pre').setAttribute("style", "overflow-x:visible; white-space:pre-wrap");
        this.querySelector('a').textContent = '［コードを折り返さないで表示］';
        this.onclick = unWrap.bind(this);
        return false;
    }

    function unWrap() {
        this.querySelector('pre').setAttribute("style", 'overflow-x:auto; white-space:pre');
        this.querySelector('a').textContent = '［コードを折り返して表示］';
        this.onclick = wrap.bind(this);
        return false;
    }

    var elems = document.querySelectorAll('pre');
    for (var i = 0; i < elems.length; i++) {
        var elem = elems[i];
        // 実際のコンテンツが表示幅よりも大きい場合(スクロールバーが表示される場合)
        if(elem.clientWidth < elem.scrollWidth) {
            var parentDiv = document.createElement('div');
            parentDiv.className = "codeWrap";
            var childHref = document.createElement('a');
            childHref.href = "javascript:void(0)";
            childHref.textContent = "［コードを折り返して表示］";
            parentDiv.appendChild(childHref);
            elem.parentNode.insertBefore(parentDiv, elem);
            elem.parentNode.onclick = wrap.bind(elem.parentNode);
            // aXeの警告対策、設定せずともfocusは取れるようになります。
            elem.tabIndex = 0;
        }
    }
}

また、対象のpreタグをフォーカス可能にするのみであれば以下のようにしてもいいかと思いました。

  • enableFocusCodeHighlight.js 
(function() {
    var elems = document.querySelectorAll('pre');
    for (var i = 0; i < elems.length; i++) {
        var elem = elems[i];
        // 実際のコンテンツが表示幅よりも大きい場合(スクロールバーが表示される場合)
        if(elem.clientWidth < elem.scrollWidth) {
            elem.tabIndex = 0;
        }
    }
}());

<html>要素にはlang属性がなければなりません

これは、<html>タグにlang属性がない場合に出力されます。 

<html class="no-js wf-materialicons-n4-active wf-roboto-n5-active wf-roboto-n3-active wf-roboto-n7-active wf-active">
以下のようにlang属性を付与すると解消されます。 
<html lang="ja" class="no-js wf-materialicons-n4-active wf-roboto-n5-active wf-roboto-n3-active wf-roboto-n7-active wf-active">

element must have a lang attribute Axe Rules | Deque University | Deque Systems に付与する理由が記載されていますので、以下引用します。

スクリーン・リーダーの設定をする際、ユーザーは既定の言語を設定します。もし web ページの言語が指定されていない場合、スクリーン・リーダーはユーザーが設定した既定の言語がそのページの言語であると見なします。複数の言語を話し、複数の言語で web サイトにアクセスするユーザーの場合、言語の設定が問題になります。Web サイトのテキストが正確に発声されるよう、言語を指定すること、そしてそれが有効であることを確認することが重要です。

Django を使用していて、lang 属性を settings.py の言語属性に基づいて出力する場合は以下のように実装します。 

{% load i18n %}
{% get_current_language as LANGUAGE_CODE %}
<html lang="{{ LANGUAGE_CODE }}" class="no-js wf-materialicons-n4-active wf-roboto-n5-active wf-roboto-n3-active wf-roboto-n7-active wf-active">

Banner landmark must not be contained in another landmark Axe Rules | Deque University | Deque Systems の修正方法を引用します。

各 banner ランドマークが他のランドマーク内に含まれていないことを確認しましょう。
たとえ HTML5 が同等の <header> ランドマークの複数インスタンスを許可している場合でも、ページ内の role="banner" ARIA ランドマークを使用している各要素が他の ARIA ランドマークに含まれていないことを確認します。ほとんどの web デザインでは、ARIA あるいは HTML5 のどちらを使用しているかに関わらず、これらのランドマークをそれぞれ一つずつ持つこと、さらにそれらが一つかそれ以上のランドマーク内でネストされていないことが適切です。

該当箇所は、headerタグ が複数定義されていて、role=banner は付与していませんが、headerタグは、<aside>、<article>、<main>、<nav>、または <section> の子要素ではない場合、 banner ランドマークと同じ扱いになります。 

<header class="mdc-top-app-bar--fixed-scrolled mdc-top-app-bar mdc-top-app-bar--fixed" style="top: 0px; left: 0px;">
    <header class="mdc-toolbar--flexible-space-minimized mdc-toolbar">
        .....
    </header>
</header>

これは、対象箇所の header タグを一つ削除し対処しました。

参考

以下、参考にした記事になります。

以上です。

コメント

カテゴリー

最近の投稿