WCAG 2.1 最終ワーキングドラフトへのコメント

W3C のウェブアクセシビリティガイドライン (WCAG : Web Content Accessibility Guidelines) が、今年 (2018年) の夏に新バージョン「WCAG 2.1」になる予定です。現バージョン (WCAG 2.0) では十分にカバーできていなかったとされる領域 (ロービジョン、モバイル、認知/学習障害への配慮) を強化したものとなりますが、この記事の執筆時点では2017年12月7日付の最終ワーキングドラフト (Working Draft) が公開中で、2018年1月12日までにパブリックコメントを受け付けています。

パブリックコメント受付終了後、1月中に勧告候補 (Candidate Recommendation) がまとめられ、最終的には6月頃に勧告 (Recommendation) となる予定のようです。

私もこの機会に、W3C の Accessibility Guidelines Working Group にコメントを提出してみました。現バージョンと同様、今回新規で追加される各達成基準も抽象度の高い記述になっているため、私の読解が誤っているかもしれませんが、そういったミスリーディングな点も含めてクリアになる一助になればと思います。

1.3.4 Identify Common Purpose (Level AA)

In content implemented using markup languages, for each user interface component that serves a purpose identified in the Common Purposes for User Interface Components section, that purpose can be programmatically determined.

出典 : Success Criterion 1.3.4 Identify Common Purpose (Level AA)

この達成基準は、「7. Common Purposes for User Interface Components」で挙げられている各種コントロールについて、これらのコントロールの種別をマシンが識別できるようにする、ということでしょうか。(たとえば、Next / Previous のボタンがあったとして、button であるというセマンティクスだけではなく、「previous」もしくは「next」の button であるというセマンティクスを付すべき、ということでしょうか。)

もしそうであれば、現時点では実現のハードルが高すぎるので、レベルを AAA にするのが妥当と考えます。

1.4.10 Reflow (Level AA)

Content can be presented at a width equivalent to 320 CSS pixels without loss of information or functionality, and without requiring scrolling in two dimensions, except for parts of the content which require two-dimensional layout for usage or meaning.

出典 : Success Criterion 1.4.10 Reflow (Level AA)

この達成基準のひとつめの「Notes (注記)」について。

320 CSS pixels is equivalent to a starting viewport width of 1280 CSS pixels wide at 400% zoom. For web pages which are designed to scroll horizontally, the 320px should be taken as the height rather than width.

「320 CSS pixels is equivalent to a starting viewport width of 1280 CSS pixels wide at 400% zoom. 」という例示は (320 CSS pixels の意味の説明として間違ってはいませんが) この達成基準の註釈としてはミスリーディングな気がします。もともと 1280 CSS pixels 幅あるウェブコンテンツを (400%に) ズームした場合、縦横2方向のスクロールが出現するからです。

1.4.11 Graphics Contrast (Level AA)

The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):

  • User Interface Components : Visual information used to indicate states and boundaries of active user interface components, except where the appearance of the component is determined by the user agent and not modified by the author;
  • Graphical Objects : Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.
出典 : Success Criterion 1.4.11 Graphics Contrast (Level AA)

文字だけでなく、グラフィックに対してもコントラスト比に関する達成基準が設けられるのは素晴らしいことです。ただ、現バージョンの達成基準 1.4.3 (文字の場合、4.5:1 のコントラスト比を求めている) との不整合があるので、その理由が明示的であると、ガイドラインとしてすっきりすると思います。(私自身は、これまで関わったプロジェクトで、アイコンやボタンのコントラストについても達成基準 1.4.3 に準じるべきと解釈して、4.5:1 を保持するようにデザインしていました。)

1.4.12 Text Spacing (Level AA)

If the technologies being used allow the user agent to set text style properties, then no loss of content or functionality occurs by setting all of the following and by changing no other style property:

  • Line height (line spacing) to at least 1.5 times the font size;
  • Spacing underneath paragraphs to at least 2 times the font size;
  • Letter spacing (tracking) to at least 0.12 times the font size;
  • Word spacing to at least 0.16 times the font size.
出典 : Success Criterion 1.4.12 Text Spacing (Level AA)

Word spacing (単語間の間隔) も達成要件に入っていますが、日本語のように単語間のスペースがない言語については、例外にすべきと考えます。 たとえば日本語の場合、仮に単語間にスペースを入れると、助詞 (particles) や助動詞 (auxiliary verbs) が分離され、かえって認知的に読みにくくなります。

1.4.13 Content on Hover or Focus (Level AA)

When pointer hover or keyboard focus triggers additional content to become visible, the following are true:

  • Dismissable : A mechanism is available to dismiss the additional content without moving pointer hover or keyboard focus, unless the additional content communicates an input error;
  • Hoverable : If pointer hover can trigger the additional content, then the pointer can be moved to hover the additional content;
  • Persistent : The additional content remains visible until the hover or focus trigger is removed, the user dismisses it, or its information is no longer valid.

Exception: The visual presentation of the additional content is controlled by the user agent and is not modified by the author.

出典 : Success Criterion 1.4.13 Content on Hover or Focus (Level AA)

「Dismissable」について。addditional content を非表示にさせるメカニズムを "without moving pointer hover or keyboard focus" で実装する、というのがよくわからなかったのですが、これはたとえば [Esc] キーを押して追加コンテンツを閉じる、といったインタラクションを意味していますか？

「Hoverable」について。これは「Ben Kamens, Breaking down Amazon's mega dropdown」で議論されている問題 (利用者にとって予期せぬ形で additional content が閉じてしまう) を解決する主旨だと推察します。であれば、「たとえ利用者がポインタを "近道" で (もとの hover フォーカスが外れる形で) 動かしたとしても」のような記載があるとよいと思いました。

「Persistent」について。hover が外れ次第 additional content が閉じることをよしとしているように読み取れるのですが、そうなると、たとえば「Ben Kamens, Breaking down Amazon's mega dropdown」で指摘されている問題 (同ページの3つめの GIF アニメーションのような、ユーザーにとって不快な挙動) を引き起こす可能性があり、ややミスリーディングな気がします。

2.2.6 Accessible Authentication (Level A)

Essential steps of an authentication process which rely upon recalling or transcribing information have one of the following:

  • alternative essential steps, which do not rely upon recalling or transcribing information
  • an authentication-credentials reset process, which does not rely upon recalling or transcribing information

Except for when any of the following are true:

  • Authentication process involves basic personal identification information to which the user has easy access, such as name, address, email address and identification or social security number.
  • This is not achievable due to legal requirements.
出典 : Success Criterion 2.2.6 Accessible Authentication (Level A)

ユーザー認証の際に、記憶 (recalling) や転記 (transcribing) に依存しないようにすることが求められており、その方向性は賛成なのですが、レベル「A」の達成基準として見た場合、一般的に広く用いられているパスワード認証は、これに抵触しそうな気がします。

パスワード認証をさせていても、Cookie への保存を妨げていなければ、この達成基準は満たしている、という理解で正しいですか？(その場合、Cookie の保存期間についての指針があるとよいと思います。)

2.5.3 Target Size (Level AA)

The size of the target for pointer inputs is at least 44 by 22 CSS pixels except when:

  • Equivalent : The target is available through an equivalent link or control on the same page that is at least 44 by 22 CSS pixels;
  • Inline : The target is in a sentence or block of text;
  • User Agent Control : The size of the target is determined by the user agent and is not modified by the author.
  • Essential : A particular presentation of the target is essential to the information being conveyed;
出典 : Success Criterion 2.5.3 Target Size (Level AA)

一辺が 22 CSS pixels でよいと書かれていますが、たとえば幅 (width) が44px、高さ (height) が22pxの横長のタッチターゲットが縦に隙間なく配置されている場合、(幅の狭いタッチターゲットが隣接しすぎていて) 誤タップを引き起こしそうな気がします。例外として「Inline」などが挙げられているので、であれば、基本的にタッチターゲットのミニマムサイズは 44 x 44 CSS pixles としてよいのでは？(Success Criterion 2.5.4 Target Size (Enhanced) をミニマムの条件としては？) と思います。

ちなみに、iOS Human Interface Guidelines では "Provide ample touch targets for interactive elements" として 44pt x 44pt をミニマムのタッチターゲットサイズとしています (参照 : Adaptivity and Layout - Visual Design - iOS Human Interface Guidelines)。また、Android の UI ガイドラインでは 48dp x 48dp をミニマムのタッチターゲットサイズとしています (参照 : Metrics & keylines - Layout - Material Design)。

私からのコメントは以上ですが、これに対して、Accessibility Guidelines Working Group (Andrew Kirkpatrick さん) より公式回答をいただきました。(WCAG 2.1 public comment - sent Dec 28, 2017 : Issue #736)

...など、諸々訂正が入ります。具体的には、2018年1月30日に開示された勧告候補 (Candidate Recommendation) で確認できます。当サイトの記事「WCAG 2.1 勧告候補 (Candidate Recommendation)」も併せてご参照ください。

関連記事