1. HOME
  2. セミナー
  3. WCAN mini 2016 Vol.1 に参加しました!!

WCAN mini 2016 Vol.1 に参加しました!!

セミナー

ベースキャンプ名古屋で行われたWCAN mini「WCAN mini 2016 Vol.1 そのモヤモヤをWebアクセシビリティの達人がスッキリ晴らす! Webアクセシビ リティ はじめの一歩、キホンの「キ」とアリアの「ア」!」に参加してきました!
そちらの内容をまとめておきます。

【今日から始めるWebアクセシビリティ、まずはココから!】植木 真さん

現代では新しいデバイスがどんどん出てきてデバイスが多様化していきている。
UXにおいてアクセシビリティを軽視してはいけないもので、アクセシビリティがすべての土台になっている。

何から手をつけたらいいのか?

【header】【nav】【main】【aside】【footer】でまず箱を作る。
それぞれにはrole属性をつける。

<header role=“banner”>

role属性bannerはページに1つしか使えないためheader部分のみに使う。

<nav role=“navigation”>
<form role=“search”>

header内の検索にはrole属性のsearchをつける。

<nav role=“navigation” aria-label=“現在地”>

パンくずリストにはnavigationをつける。aria-label属性には一般の人にわかるような名前をつける。
例:パンくずリスト→現在地

<main role=“main>
<aside role=“complementary">

マークアップで気をつけなきゃいけないことは?

マシンリーダブル

  • 開始タブと終了タグ
  • 仕様に準じた入れ子にする
  • 要素内で同じ属性を重複させない
  • id属性値をユニークな値にする

リンク

「ここをクリック」「こちら」「一覧」などの具体性のない表現を使わないこと。
リンクテキストとリンク先の大見出しは大きく違わないようなレベルで一緒にする。

placeholder属性

placeholder属性を使ってラベルを提供するのは入力したあとにはなんの入力欄かわからなくなってしまうのでNG×
placeholderで提供する場合は入力例・補足説明にする。

コントラスト

コントラストを考えると使える色は限られる。
少なくとも4.5:1のコントラストがなければならないので赤には特に注意する。
FF0000 4.0:1 ×
EF0000 4.5:1 ◯

キーボード操作のチェック

  • フォーカス移動Tab Shift+Tab
  • リンクの選択がEnter、スペースでできること
  • 選択の切り替えが矢印キーでできること
  • フォーカスインジゲーターが常に表示されているか
  • キーボードトラップがないか
  • フォーカスを移動する以外の予期しない動作をしないか

ページタイトル

ページタイトルは前後の文脈がなくても意味がわかり、その上で簡潔であること。
そのWebサイトに属しているかわかること。
推奨されるページタイトルは[ページタイトル]+[Webサイト名]

【HTML5で今日から使えるWAI-ARIA】大藤 幹さん

WAI-ARIAとは

アクセシブルなアプリケーションを作るための要素を追加するもの

role属性は既存のrole属性を上書きする

よく使われるのはタブパネルなど

<ul role=“tablist”>
  <li role=“tab” ></li>
  <li role=“tab” ></li>
  <li role=“tab” ></li>
</ul>
<div role=“tabpanel” >
</div>
<div role=“tabpanel” >
</div>
<div role=“tabpanel” >
</div>

role属性はCSSの属性セレクタが利用可能。

WAI-ARIAで実際に追加されるのは3種類

  • role属性
  • aria-◯◯◯属性
  • tabindex属性

tabindex属性

インタラクティブな要素はすべてフォーカス可能にする必要がある。
ユーザとやりとりするフォームのようなものはフォーカスを可能にしなければいけない
=TABキーで移動できるようにする必要がある

  • tabindex=“正”Tabキーでの移動順序
  • tabindex=“0”フォーカス可能にする
  • tabindex=“負”フォーカス不可にする

role属性

  • ランドマーク・ロール
  • 文書構造ロール
  • ウィジェット・ロール
  • 抽象ロール

aria-◯◯◯属性

  • 関係を示す属性
  • ウィジェット属性
  • ライブ領域属性
  • ドラッグ&ドロップ属性

【aria-label属性】【aria-labelledby属性】【aria-controls属性】
の3つは覚えておくべき属性。

aria-label属性

aに指定しておくとリンクでの読み上げ際に読まれる。
見た目では「続きを読む」というリンクにしておいても、aria-label属性で書くことでlabelを上書きできる。

aria-labelledby属性

一番優先順位が高い。
ラベルを関連付けることができ、aria-controlsとは逆の視点になる。

aria-controls属性

コントロールしてるものを関連付けることができる。
aria-labelledbyとは逆の視点になる。

role属性 + aria-◯◯属性

role=“heading” + aria-level=“7”

などとしていすることで【h6】以降の見出しも作ることができる。

複数の画像にまとめて1つのalt属性をつける

画像をdivで囲い、そこに

role=“img”aria-labelledby=“[id]”

で画像を1つにまとめておくことができる。

HTML5におけるWAI-ARIA使用の制限事項

  • header要素 role=“banner”
  • main要素 role=“main”
  • footer要素 role=“contentinfo”

※他のロールに変更は不可
※role=“presentation”のみは可能

h1〜h6の見出しには

  • role=“heading”
  • role=“tab”
  • role=“presentation”

のみ可能。

感想

アクセシビリティは全くといっていいほど手をつけていない部分も多く、難しいイメージもありましたがお話を聞いてWAI-ARIAならできそうだと感じることができました。
OpenAjax Accessibility: OpenAjax Examples(http://oaa-accessibility.org/)ではサンプルも見ることができるので、わからない部分はすぐ解決もできるし、属性を覚えるだけでできるとのことなのでブログからどんどん改修していこうと思いました。
ランドマークroleは将来はいらなくなるとのことでしたが、今はつけなければいけないそうで、そういったことを考えずにマークアップしているほうが多かったので、これからはしっかりとつけるようにしていきたいと思います。


WCAN

この記事を読んだ方におすすめ