yutaponのブログ

javascript界隈の興味あるネタを備忘録的に残しておく場所

AccSell Meetupに行ってVoiceOverの使い方を教えてもらった

a11y

はじめに

2019/01/19 (Sat) に AccSell Meetup #14 に行って、iOS のスクリーンリーダーである VoiceOver の使い方について教えてもらってきた。
二ヶ月月以上前のことだけど、思い出しながらログとして残しておこうと思う。

イベントの概要はこちらのページに載っている。
AccSell Meetup 014『おしえて！iOS VoiceOver 2019新春ver.』｜お知らせ｜AccSell

イベントに参加したときの写真を一枚も取らなかったことが悔やまれるけど、どんな感じだったかは AccSell のホームページや PodCast にて語られている。

accsell.net

ミートアップ中は音声から字幕への変換アプリであるUDトークが活躍し、これはいろんなイベントで使ってほしいなと思った。 udtalk.jp

どういうモチベーションで参加したか

普段業務でアクセシビリティについて取り組むときは、img 要素の alt を適切に設定するだったり、適切に見出し要素を使ってページを構造化したり、どちらかというと SEO 方面を意識したコーディングをしていた。

a11y の文脈でコーディングしても、実際に使われているところを見たことがないのが問題だなと思っていて、全盲でありながら a11y の啓蒙活動を行っている中根さんが講師としてお話しされる機会があるとのことで参加した。

イベントレポ

当日は前半後半で2つのセッションが行われた。
以下、当日の雑なメモ。

イントロダクション w/ 植木さん

マシーンリーダブル?

WAI-ARIA

  • html5 のマークアップだけでは表現できないものを表現できるように仕様化された
    • 表現できないhtmlの例
      • タブを ul li で実装
      • role 属性をつけることでリストではなくタブであることをマシンに伝えることができる
      • aria-expand="true" でリストが開いているか閉じているかを表現できる

ワークショップ w/ 中根さん

VoiceOver

  • iOS と macOS の　VoiceOver は操作性がまったく違う
    • 一歩間違うと帰らぬ人となる..!
  • 全盲の人はスクリーンカーテンをよく使う（ほとんど）
    • スマホを覗き見られないようにするため
  • シングルタップで選択(Activate)
  • ダブルタップで選択中の要素をクリック
    • ダブルタップは選択中の要素の上をダブルタップする必要はない
    • activate にしている要素があるなら、画面上のどこをダブルタップしても決定できる
  • 両手を使うと操作性があがる（スプリットタップ）
    • 左手である要素をactivateしたまま、そこから指を離さない
    • 右手で画面のどこでもいいのでシングルタップする
    • これでダブルタップしたことと同じ動作になる
    • ためしてみるとたしかに操作性がいい
  • ダブルタップして長押し
    • ドラッグアンドドロップのようなふるまいをする
  • ヘルプ
    • 4本指をダブルタップでヘルプモード
    • 2本指のスクラブでヘルプ終了
      • スクラブ: 2本指をスクリーン上でがしゃがしゃする
  • ボタンにラベルが付いていないものに、自分でラベルをつけることができる
  • 【課題】VoiceOver で天気アプリを探してください
    • 3/6ページの official フォルダの2ページ目にあるので難しかった
    • VoiceOver に慣れている人でも、どこにあるのかわからないアプリを探すのは大変
    • 検索を利用して見つけることもできそう..?
  • VoiceOver を使うときは画面の向きをロックしておくと楽
  • 【課題】「今日は AccSell Meetup に来ています。」と VoiceOver を使って入力してみましょう。
    • 最初、日本語入力ができなくて途方にくれた（日本語ローマ字入力キーボードをoffにしているため）
    • このページが参考になった
ロータージェスチャー
  • これを知らないと VoiceOver を7割くらい損をしている..?
  • 一本指の上下フリック のふるまいをローターで設定する
  • テキストを読むときの使われ方 -「行」単位で移動して、「単語」単位で探す
  • コピー＆ペースト(テキストの選択)
    • ローターの編集を使う -ピンチアウト・ピンチインで選択範囲を拡縮する
    • ローターのテキスト選択を使う
    • コピペの操作はめちゃくちゃ大変..
  • 入力モード
    • タッチモードを普段使っていらっしゃる

VoiceOver で Web 閲覧

  • 2本指でシングルタップでページ読み上げ・一時停止をトグルする
  • ローターを活用して読み飛ばしていく
    • ARIAランドマーク?
アクセシビリティチェック
  • 伝えるべき情報は 過不足なく 音声化されるか
    • 情報過多になっていないか?　という視点も必要
  • 1本指上下フリックの各種操作で適切なナビゲーションができるか
    • 見出し、ランドマーク、フォームコントロール、ラベルなどが設定されているか..?
  • img 要素の longdesc 属性はhtmlの仕様には載っているが、対応してもブラウザが対応できていない
    • 仕様を満たしたとしてもアクセシブルではない..

ワークショップのおわりに

  • 昔は視覚障害者の中では携帯といえばらくらくホン一択だった
    • 最近は iPhone を選択し VoiceOver を使う人が増えてきた
    • VoiceOver 人工は増えてきている
  • VoiceOver で正しく動作すると、スイッチインターフェース（指が動かないなどの障害を持つ人が使う）でも正しく動作する

気づき

  • イベントに来て思ったのが、視覚に障害のある方が参加されていたこと
    • 全盲、ロービジョン
    • ロービジョンというのを今まで意識できていなかった
    • トイレ休憩のときなど、植木さんが付き添って案内されていたのが印象に残ってる
  • パブリックなプロダクトを開発しているのであれば、常に a11y を考慮して作る必要がある
    • Web、ネイティブアプリどちらも必要
    • どんなにハイパフォーマンスなサイトを作っても、一部の人が使えないのでは可用性が低い

おわりに

このイベントに参加して a11y に対する意識が結構変わった。
画像に alt が設定されていないことがどれだけ深刻なことなのかを理解できた。

a11y とバリアフリーは割と似ていると思った。
例えば、どんなにキレイでオシャレな建築物であっても段差だらけでは利用しにくい、みたいな。

まだアクセシブルなWebを作る力がないと分かったので、引き続き勉強していきたい。

インクルーシブHTML+CSS & JavaScript: 多様なユーザーニーズに応えるフロントエンドデザインパターン

インクルーシブHTML+CSS & JavaScript: 多様なユーザーニーズに応えるフロントエンドデザインパターン

これに行く予定なのでまたレポを書きたい。

connpass.com

ES2018で入ったUnicode property escapes in regular expressionsを調べてみた

es2018 regexp

はじめに

  • はじめに
  • 使い方
  • 書式について
    • UnicodePropertyName
      • General_Category
      • Script, Script_Extensions
      • Binary Unicode property
  • 調べ方
    • UnicodePropertyValue に属する文字一覧を調べる
    • ある文字に指定されている属性を調べる
  • おわりに
  • 参考にした記事

ES2018で正規表現まわりの機能にいくつかの便利な表現が入った。

例えばこんな感じ。
いずれもChrome*1 のコンソールで入力して試すことができる。

// `ひらがな` のみの文字列ならtrue
/^\p{sc=Hiragana}+$/u.test('あいうえお') // true

// `カタカナ` のみの文字列ならtrue
/^\p{sc=Katakana}+$/u.test('アイウエオ㍑㍍') // true

// `漢字` のみの文字列ならtrue
/^\p{sc=Han}+$/u.test('𠮷野家') // true

// `漢字` 以外が含まれているのでfalse
/^\p{sc=Han}+$/u.test('㍻㍼') // false

// `漢字っぽい文字` のみの文字列ならtrue
/^\p{scx=Han}+$/u.test('平成昭和㍻㍼') // true

*1:Chrome v64から実装された

続きを読む

webpack+babel-loader+power-assert+jsdomでフロントエンド開発環境を作る

webpack jsdom tdd build

この記事は JavaScript Advent Calendar 2015 10日目の記事です。

去年は主に gulp にフォーカスした内容でしたが、今回はJSのビルドとテストにフォーカスした入門記事です。

  • やること
    • ES2015で書いたコードをWebpackでビルドする
      • babel@6系を使う
    • Mocha + power-assert + jsdom でテストを書く
  • やらないこと
    • gulpまわり
    • React.js
    • CSSビルドまわり

最終的なコードはこちらに上げておきました(すごく簡素な出来です)。

GitHub - sskyu/webpack-power-assert-jsdom-skeleton

はじめに

今年はReact.jsがJSerの中で定着した感がありました。
Fluxの考え方を昇華させたReduxがFlux系フレームワークでデファクトになりそうな雰囲気を出しつつ、Reactive方面からはCycle.jsが登場してフロントエンドの技術は流れが早いですね。

一方でビルド周りは去年からほとんど変わっていません。
ES2015のシンタックスを使いたい場合は babel.js でトランスパイルをして、ブラウザ向けのビルドに browserify または webpack を使います。

Browserify vs Webpack

それぞれの特徴を列挙してみると

  • Browserify
    • コアはCommonJS形式のモジュールをブラウザでも扱えるようにすること
    • 単一のファイルを出力する
      • 工夫すれば複数ファイルの出力も可能
    • 他の機能はプラグインとして提供される
      • e.g. babelify, coffeeify, etc...
  • Webpack
    • デフォルトで多機能
      • CommonJS, AMD形式のモジュールをブラウザでも扱えるようにする
      • CSSのビルド
    • 複数ファイルの出力がデフォルトでサポートされている
    • loaderを加えることで様々な機能を加えることが可能
    • JSファイルからCSSやImageを読み込むことが可能

平たく言えば、Browserifyはシンプルな機能を提供していて、Webpackはフロントで必要そうな機能をたくさん提供しています。

Webpackの方が多機能だから良さそうに見えますが、沢山の機能が密結合しているためバグが生まれやすいリスクがあります。
BrowserifyでWebpackと同じことをしようとすると書き方を工夫しなくてはならず最初は難しいかもしれないですが、長期的に見ると機能がシンプルで拡張性のあるBrowserifyの方がメンテナンスしやすいかもしれません。

Webpackを非難している訳ではないので、この記事ではWebpackを採用したケースで紹介していきます。

続きを読む

YAPC::Asia Tokyo 2015に行ってきた

その他

8/21, 8/22とYAPC::Asia Tokyo 2015@ビッグサイトに行ってきた。
ブログを書くまでがヤップシー。

はじめに

自分が見てきたトークだけ書きます。
聞けなかったトークはtogetterを見るとライブ感ありつつ読めるので 後ほど読んでみる。

togetter.com

続きを読む

ES6構文の ... (Spread operator)と { prop } (shorthand property names)について

es6

昨日twitter見てたらこんなのが流れていまして

何だこの書き方〜と気になったので調べてみた。

続きを読む