以下の
ソーシャルコメントや
警告に 対処する
以下の
スクロール可能な 領域に キーボードで アクセスできるようにします
これは
コードシンタックスは
以下、
* フォーカスと
Markdown の
toggle
メソッドが
動作確認は
- 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; } } }
また、
- 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 >
タグに
<html class="no-js wf-materialicons-n4-active wf-roboto-n5-active wf-roboto-n3-active wf-roboto-n7-active wf-active">
<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 を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ランドマークは 他の ランドマークに 含まれるべきでは ありません
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 の どちらを 使用しているかに 関わらず、 これらの ランドマークを それぞれ 一つずつ 持つこと、 さらに それらが 一つかそれ以上の ランドマーク内で ネストされていないことが 適切です。
該当箇所は、role=banner
は<aside >
、<article >
、<main >
、<nav >
、<section >
の
<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>
これは、
参考
以下、
- Document.querySelector() - Web API | MDN
What is the equivalent of jQuery’s .before() function in Javascript? - Stack Overflow
Django: display the current language in a template
Django template で言語コードを 取得する。 その1。 internationalization - Django: How to get language code in template? - Stack Overflow
Django template で言語コードを 取得する。 その2。 ARIA: banner ロール - アクセシビリティ | MDN
MDN のbanner ロールに 対する 説明文書です。
以上です。
コメント