2016年10月16日
から zen
SPA (Single Page Application) のアクセシビリティ (Part2) : 文書構造、ナビゲーション、キーボードのアクセシビリティ はコメントを受け付けていません。

SPA (Single Page Application) のアクセシビリティ (Part2) : 文書構造、ナビゲーション、キーボードのアクセシビリティ

Single page applications, Angular.js and accessibility の翻訳 Part2 です。

SPA (Single Page Application) のアクセシビリティ (Part1) ではイントロダクションを翻訳しました。今回から実装の説明にはいります。


文書構造、ナビゲーション、キーボードのアクセシビリティ

文書構造

アプリケーションのアクセシビリティを考慮する際には、文書構造とキーボードナビゲーションから始めます。なぜなら「たどり着くことができなければ使うことはできない」という単純な事実があるからです。
SPAのナビゲーションにおいて第1のチャレンジとなるのが、正しい見出し(heading)レベルでマークアップしたセマンティックな文書構造の実現です。

支援技術(スクリーンリーダーなど)の利用者の多くは、ドキュメントやアプリケーションの中の重要なパート間の移動を文書構造に頼っています。
たとえば、見出しと見出しの間を行き来するような操作が含まれます。

文書構造化の利点

  • ソリッドで構造化されたウェブページにより、単にタブキーと矢印キーを使うよりすぐれたキーボードアクセスが可能になります。
  • 正しい見出しレベルでマークアップしたドキュメントは同時に、アプリケーションのビュー間を移動する際にフォーカスの対象となるすぐれたアンカーポイントも提供します。(これについては後で触れます)。

コード : 文書構造

以下がサンプルアプリケーションの文書構造です。

<!DOCTYPE HTML>
<html ng-app="a11yTicketApp" lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Accessibility Ticket Tracker</title>
  </head>
  <body>
    <div class="container">
      <header class="header">
        <nav>
          ...
        </nav>
      </header>
      <main class="main" id="main">
        ...
        <h1>Accessibility Ticket Tracker</h1>
        ...
        <h2>Tickets</h2>
        ...
      </main>
      <footer class="footer">
        <p>Copyright</p>
      </footer>
    </div>
  </body>
</html>

ページとビューのタイトル

文書構造においてナビゲーションのために重要だが忘れがちなのがページタイトルです。「シングルページアプリケーションであればタイトルも単一」と考えるのは自然な発想です。しかしSPAではビューからビューへと状態が変わります。これらのビューの変更を、Webのページ遷移に置き換えて考える必要があります。
ユーザーが今どこにいるのかを常にわかるようにするために、Webページと同様にビューが切り替わるたびにページタイトルも変わるべきです。
Angularのすばらしいルーティングの仕組みを使えば、ページタイトルは簡単にアップデートできます。見てみましょう。

コード : Angularのルーティングとページタイトル

Webブラウザーのタブに Accessible Ticket Tracker のタイトルを表示

Angularのビューにページタイトルを設定する第1のステップはデフォルトの index.html の titleタグに root title プロパティをバインドすることです。
htmlドキュメントのheadにバインドするには、htmlタグでアプリケーションを定義する必要があります。
これによりAngularの$routeProviderで使われる$rootScope変数にアクセスできるようになります。
以下が例です。

<html  class="no-js" ng-app="a11yTicketApp" lang="en">
<title ng-bind="title">Accessibility Ticket Tracker</title>

上で定義したアプリケーションのルートにタイトル属性を設定します。

.config(function ($routeProvider) {
    $routeProvider
        .when('/main', {
            templateUrl: 'views/main.html',
            controller: 'MainCtrl',
            title: 'Accessibility Ticket Tracker'
        })
        .when('/edit/:id', {
            templateUrl: 'views/edit.html',
            controller: 'EditCtrl',
            title: 'Edit Ticket'
        })
        ...  
        .otherwise({
            redirectTo: '/main'
        });
})

$on('$routeChangeSuccess') を使ってルート変更のイベントを登録し、変更があれば $rootScope の title 属性をアップデートします。

myApp.run(['$location', '$rootScope', function($location, $rootScope) {
    $rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
        // test for current route
        if(current.$$route) {
            // Set current page title
            $rootScope.title = current.$$route.title;
        }
    });
}]);

キーボードナビゲーション

文書構造に続いて、ng-click をすべてのインターフェースに紐付ける作業に進みます。このディレクティブはアプリケーションの構築において大変便利なしくみですが、あらゆるエレメントに対して ng-click を付加できるという点で、アクセシビリティの観点では危険でもあります。
残念ながらこれらのエレメントはブラウザーのネイティブなフォーカスを受け取ることができず、これはキーボード利用者に対する障壁になってしまいます。
ここは、Web標準に準拠したベストプラクティスのインターフェースを作製するには避けて通れない部分です。
アクションがナビゲーション要素(つまり送信フォーム)と関連付けられたところではボタンを、アプリケーション内を動き回るにはリンクを使いましょう。
私たちの Angularアプリからいくつか例を見てみましょう。

コード : ボタンとリンク

はじめに、最近よく見かけるアプローチです。ネイティブや要素を使うべきところで、クリッカブルな要素として divを使用しています。

<div ng-click="doSomething(id);" class="im-a-button">I'm  not a button</div>

こちらが私たちのアプリケーションからの例です。クリッカブルなインターフェース要素に対して buttonを使用します。ネイティブな要素に固執するのは、アクセシビリティに関する利点のすべてを享受することができるからです。

<input type="button" value="Cancel" class="btn btn-primary" ng-click="go('main')">

次にリンクをどのようにセットアップしたかを見ていきます。このリンクをクリックするとチケットの詳細が表われます。このとき ng-clickが href 属性を上書きしています。しかしながら、ここではまだ href 属性が保持されているのでそれぞれのリンクに固有の行き先を付与することができ、これがスクリーンリーダーに登録されます。またここでは、リンクの状態をスクリーンリーダーに伝えるために、リーダーがアクセスできるが画面に表示されない、視覚的に隠されたテキスト(visually hidden text)を使用しています。Angularの式(expressions)を使えばテキストの有効化/無効化を大変簡単に設定することができます。

<a href="#expandDetails-{{ ticket.$id }}" ng-click="toggleTicketDetails($event,$index)">
  {{ ticket.summary  }}
  <span class="visuallyhidden">{{ index==$index ? " - click to hide details" : " - click to show details"}}</span>
</a>

CSS

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  position: absolute !important;
}

注記: これは視覚的に隠された(visually hidden)テキストで、隠された(hidden)テキストではありません。このためCSSの display:none は使いません。


※順次更新の予定です

2016年10月9日
から zen
SPA (Single Page Application) のアクセシビリティ (Part1) はコメントを受け付けていません。

SPA (Single Page Application) のアクセシビリティ (Part1)

きっかけ

SPAはパフォーマンスの観点や制作コストの観点から、近年多くのサイトで採用されています。
数ヶ月前にこのSPAのアクセシビリティについて少し調査をする機会がありましたが、W3Cでもまだ作業中で指針が出ていないようでした。

先日とある勉強会に参加し、その中でこの件に触れる時間があったので、こちらのページを紹介しました。
Single page applications, Angular.js and accessibility

今回あらためて読んでみると参考になる内容だと思いますので、こちらに日本語訳を掲載したいと思います。(勝手に) 続きを読む →

2016年10月2日
から zen
CLIC(調布市地域情報化コンソーシアム)総会 はコメントを受け付けていません。

CLIC(調布市地域情報化コンソーシアム)総会

先日、地元のNPO「調布市地域情報化コンソーシアム(略称CLIC,くりっく)」の年次総会に出席してきました。私は会員になってからかれこれ10年近くになります。

CLICは 続きを読む →

cfbfca9b9d86384b0a5d221b75cc3a31

2016年9月25日
から zen
PyCon JP 2016に参加しました はコメントを受け付けていません。

PyCon JP 2016に参加しました

去る9月21日と22日の2日間にわたって開催された PyCon JP 2016に参加してきました。2014年に続いて2回めの参加です。

トークセッションで話す

今回は見るだけでなく、トークセッションで「Plone5のOSSにおける進化と適応 〜 PyCon (US) 2016 Keynoteの日本語での再演」というタイトルでプレゼンテーションを行いました。
これは、今年6月の PyCon US で Plone Foundation のChris Ewing氏が行った Keynote 講演 を日本語化したものです。 続きを読む →

2014年2月22日
から zen
0件のコメント

Pods Framework 日本語リソースファイル

WordPress でサイト構築をする際に、ほぼ必ず Pods Framework を使用しています。

WordPress のプラグインなのですが、TTW (Through the web) でコンテンツタイプを定義する(モデル定義をする) ことができ、大変重宝します。

オープンソースのプロジェクトですが、大変よくできていると思います。

続きを読む →

IMG_2326

2012年10月30日
から zen
0件のコメント

2012/10/27 リバイブジャパンのツアーで石巻市牡鹿半島にて漁業支援

リバイブジャパンさんが催行するボランティアバスツアーに参加。5月の田代ジャパン七ヶ浜以来、ちょうど5ヶ月ぶりの復興支援活動。

リバイブジャパンとしては2回目のツアーとのことですが、同じバスでNPO法人甲斐のめぐみとしてすでに70回も復興支援ボランティアバスを運行してこられた方々がその活動を継続するために立ちあげた団体のようです。甲斐のめぐみ時代に私も昨年12月に一度陸前高田に連れて行ってもらいました。今回が通算72回目のツアーで、参加者もほとんどがリピーター。 続きを読む →

2012年5月29日
から zen
0件のコメント

5/26-27 田代ジャパンで七ヶ浜町の田圃復旧のお手伝いに参加

以前複数のバスで一緒になった大学3年生の田代くんが自分で団体を立ち上げた。その名も「田代ジャパン」。学生・初心者を中心に気軽に参加できる団体を目指すのが基本コンセプト。でも、誰でも参加できる。日程もちょうどよさそうだったので参加を決意。

続きを読む →