アクセスビリティ勉強会
Pocket

今年の2月のD2Dの勉強会に参加したのをきっかけに知った「アクセシビリティ勉強会」
最終回の「D2D アクセシビリティ勉強会 ~HTMLをコーディング~」に参加してきました。

D2Dは勉強会のグループ。

“Dev & Design Draft” 特定の技術やプロダクトに限定せずに、Web制作者が今イチバン気になる情報を知ろうという領域横断型の勉強会シリーズ。
Doorkeeperグループページ

全7回に分けて開催されたアクセシビリティ勉強会がついに最終回を迎えました。

「アクセシビリティって何のこと?」ぐらいのレベルから参加しましたが、D2Dの勉強会はグループ単位のハンズオン形式で、手を動かしつつみんなでワイワイ勉強することができました。

最終目標はアクセシブルなサイトを作り上げることで、
会の後半はアクセシブルなサイトデザインやフォーム作成をし、最終回でマークアップをしました。

毎回、最もアクセシブルにできたグループの成果物を採用して作り上げてきました。
後日、サイトが公開されるはず。

最終回はすごく内容が濃く、初めて知ることもたくさん。

今回の勉強会で知ったことをちょっとだけまとめます。

1.role属性について

ちょいちょい見かけるrole属性。

ページ内での役割を示すものとして使われています。

<main role="main">

ただ、このrole属性、半月前からW3Cのバリデーターで警告が出るようになったそうです。

試しにやってみると…

checker

たしかに出てる!

「Element main does not need a role attribute.」なので、main要素にroleは必要ないと言ってるんですね。

role属性はHTML5へ移行中にタグの役割を示すものとして必要でしたが、HTML5が勧告されてからタグの役割はタグ自身が示すようになり、role属性は不要になったという感じだと思います。

しかも、main role=”main”は「main、そして、main」という意味になるそうです(笑)。

ただ、警告段階なので、今のところあってもいいという話もありました。あったはず。

ですが、その内エラーになるかもしれないので、role属性はなくてもいいかもしれません。

2.〼を読まない問題

「〼」という文字。四角形に斜め線がはいったやつ(機種依存らしいので一応説明)。
たまに看板とかで「◯◯あり〼」と使われたりしてます。

「ます」と読むこの文字、スクリーンリーダーでは読み上げないそうです

この箇所ご指摘受けました。

〼を読まないのはスクリーンリーダー全部ではなくて(手元で試した限りでは)NVDAとVoiceOverです。
PC-Talkerはちゃんと読み上げ〼。

とのことです。失礼いたしました。
ちゃんと読み上げてくれるスクリーンリーダーもあり〼。

今回の勉強会で使われたデザインでは、メインビジュアルにあるテキストにこの「〼」が使われていて
ここをどう対応するかもマークアップする上での課題の一つでした。

自分がいたグループは、メインビジュアルのテキストを画像にしてしまって、altに「ます」を含めたテキストを入れました。

他に解答例としては、「〼」をaria-hiddenで読み上げ回避して、非表示にした「ます」を読ませるものです。

たしかこんな感じで、

<p>.....あり<span aria-hidden="true">〼</span><span class="masu">ます</span>。</p>

ますをCSSで消す。display:noneで消すのは読み上げなくなるのでダメだそうです。

.masu {
    height: 1px;
    width: 1px;
    position: absolute;
    overflow: hidden;
    top: -10px;
}

文字の消し方は、以下のサイトを参考にしました。

C7: CSSを用いて、リンクテキストの一部を非表示にする

visibility:hiddenもダメみたいです。

3.ページ内リンク問題

縦長のサイトでページ内リンクがあるサイト、よく見かけます。

例えば、メニューをクリックすると、該当のセクションまでシューっとスクロールしていくやつです。

デモサイト

このページ内リンク問題というのは、tabでリンクにフォーカスを合わせてenterをクリックし、該当のセクションに移動した後再度tabをクリックすると、
フォーカスがメニューに残ったままでまたメニューからtab操作が開始されてしまう問題です。

ページ内リンクして、そのまま下に読み進めたくても、tabを押すとまたメニューに戻ってしまいます。

こちらがデモサイトで試しに書いてみたサンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>test</title>
</head>
<style>
  div {
    height: 500px;
  }
</style>
<body>

<ul>
  <li><a href="#a">アンカー1</a></li>
  <li><a href="#b">アンカー2</a></li>
  <li><a href="#c">アンカー3</a></li>
  <li><a href="#d">アンカー4</a></li>
  <li><a href="#e">アンカー5</a></li>
</ul>

<div id="a">アンカー1</div>
<div id="b">アンカー2</div>
<div id="c">アンカー3</div>
<div id="d">アンカー4</div>
<div id="e">アンカー5</div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script>
  $(function(){
     $('a[href^=#]').on('click', function() {
        var speed = 400;
        var href= $(this).attr("href");
        var target = $(href == "#" || href == "" ? 'html' : href);
        var position = target.offset().top;
        $('body,html').animate({scrollTop:position}, speed, 'swing');
        return false;
     });
  });
  </script>
</body>
</html>

jQueryのページ内スクロールの記述はよくある記述です。

ページ内スクロール問題は、このjQueryを書いたがために起こるそうです。

この問題が難しかった…!っていうか分からなかった。

答え合わせで、どう対処するかを聞くと、
まずjQueryのreturn=falseを削除

【jQuery】

$(function(){
   $('a[href^=#]').on('click', function() {
      var speed = 400;
      var href= $(this).attr("href");
      var target = $(href == "#" || href == "" ? 'html' : href);
      var position = target.offset().top;
      $('body,html').animate({scrollTop:position}, speed, 'swing');
   });
 });

「return false」は、ページ内リンクをした時にURLにアンカーのid「#なんちゃら」を付けないためのものです。

これを削除すると、リンクした時にアンカーのidがURLに付いちゃいますが、削除します。

あとは各セクションに「tabindex=0」を追加します。

<div id="a" tabindex=0>アンカー1</div>
<div id="b" tabindex=0>アンカー2</div>
<div id="c" tabindex=0>アンカー3</div>
<div id="d" tabindex=0>アンカー4</div>
<div id="e" tabindex=0>アンカー5</div>

こうすると、ページ内リンクしたあと、tabでそのまま下へ読み進めることができます。

デモサイト2

他にもいろいろ勉強になったことありましたが、ブログでは以上で。

さいごに

アクセシビリティ勉強会は毎回新しい発見があり内容が濃い勉強会でした。

最後に話されていたのは、アクセシビリティだからといって、例えば、「目が見えない方がスクリーンリーダーの読み上げでも分かるようにaltを丁寧に書かなくては!」と過剰にならないこと。

カスタマーサービスの電話案内がすんごい丁寧すぎて、次のアクション起こしたくてイライラする、そんな感じですかね。

アクセシビリティは誰もが使いやすくするためのもので、アクセシビリティを配慮したと思ったら、想定していない人が使いづらくなることもあるので、もっともっと考えることがありそうです。奥が深い…。

まだまだ、アクセシビリティについての知識は浅いですが、これからも継続して勉強していこうと思います。

D2Dのアクセシビリティ勉強会、補講もあるそうですよ!

最後に勉強会を企画してくださった@milk54さん、@SawadaStdDesignさんありがとうございました!

Pocket

2 thoughts on “【イベントレポ】最終回 D2D アクセシビリティ勉強会 ~HTMLをコーディング~に参加しました。

  1. 詳しいレポートありがとござい〼!
    気になった点を二つほど。

    〼を読まないのはスクリーンリーダー全部ではなくて(手元で試した限りでは)NVDAとVoiceOverです。
    PC-Talkerはちゃんと読み上げ〼。

    ページ内リンク問題で残っちゃうのは、カーソルではなくてフォーカスですね。

    1. mismith より:

      コメントありがとうござい〼!そして、勉強会ありがとうございました!

      ご指摘ありがとうございます。修正しました!

Comments are closed.