Skip to content

Instantly share code, notes, and snippets.

@beijaflor
Created April 20, 2016 13:22
Show Gist options
  • Select an option

  • Save beijaflor/2adee384275c1dce0cc1d9dde95b8882 to your computer and use it in GitHub Desktop.

Select an option

Save beijaflor/2adee384275c1dce0cc1d9dde95b8882 to your computer and use it in GitHub Desktop.

This memo is taken by Brad Frost

Original Post

CONTENT

  • Cordelia is an accessibility specialist at Dropbox and used to work at Salesforce.

  • アクセシビリティとは個々人の能力に限らないエクスペリエンスを作る事であり。フレキシブルなシステムを作るには、初期段階から障害者の体験を考える必要があり、親切な添え物ではない。

  • スタイルガイドを作るあなたはみんなが読む料理本を作るようなもので、多くの人がいい物だと思ってマネ(コピー&ペースト)する。多くの人があなたのレシピを使うのだから可能な限り良いレシピを作るべきだ。さらにいうと、その先にいるあなたの作った物を使うエンドユーザーがすべてである。

  • 最近はユニバーサルデザインについて語る人が多く、アクセシビリティについて話し人は少なくなっている。あなたと違うニーズをもっているユーザーの事を考えるべきだ。

  • コンポーネントシステムの基礎になる材料:セマンティックなHTMLを利用する事。スクリーンリーダーはHTMLを信頼してコンテンツをクロールする。ボタンのような見た目でボタンのように機能するコンポーネントがあるなら、ボタンとしてマークアップしよう。

  • フォームについて:プレースホルダーを使ってラベルをなくすなどという事はしてはいけない。inputフィールドは目視可能にして、forを使って連携させよう。

  • 画像にはALTテキストを。アイコンにも同様に。もしアイコンのすぐ横にラベルテキストがあるなaria-hidden=trueを使ってスクリーンリーダーに無視させるようにする事も可能。

  • ARIAを利用しよう。特にモーダルやメニュー、アコーディオン、タブ、アラート、ツリーなどで。

  • マウスと同じようにキーボード操作が可能なようにしよう。あなたと同じようにマウスを使いこなせる人はそう多くはない。

  • フォーカス時のスタイルを忘れないように。ほとんどの人がデフォルトのフォーカスのスタイルが好きではない。とはいって、スタイルをなくすのは良くない。良い見た目にカスタマイズされたスタイルを用意すれば、ブランディングとアクセシビリティの両面でよい。

  • 色については2つのルールがある:文字色と背景色で適切なコントラストをたもつ事。色のみで意味を与える事をしないように。

  • 白黒モードにして色に起因するアクセシビリティの課題を見つけよう。

  • ScooterはDropboxのCSSフレームワークで多くのアクセシビリティ機能が組み込まれている。

  • アクセシビリティに関する情報をドキュメントに含めよう。ライトニングシステムとブートストラップにはアクセシビリティの定義が含まれている。コンポーネント固有のドキュメントを書いて、ガイドラインを使う人たちがアクセシビリティに注目してベストプラクティスが広まるように。また、概要ではアクセシビリティの全体ガイドラインを用意して全員が同じ目線で話せるように。両方を揃える事で全体のドキュメントとする。

  • 最初からアクセシビリティに取り組む。セマンティックなHTML、ALTテキスト、ARIA、キーボード操作、色への気遣い、そしてアクセシビリティに関するドキュメント。


Where

Who

When

  • 2016.03.31 - 04.01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment