キーボードアクセシビリティのためのUXの改善
公開: 2022-03-10他のユーザーのエクスペリエンスに影響を与えることなく、キーボードのみの支援技術ユーザーにアクセシブルなユーザーエクスペリエンスを提供するにはどうすればよいでしょうか。 DequeSystemsのプリンシパルUXデザイナーであるAaronPearlmanに、ユーザーに包括的でアクセスしやすいエクスペリエンスを提供するための実用的なツールとテクニックを共有するようにお願いしました。
Smashing Membershipの一環として、一連のライブウェビナーであるSmashingTVを毎週開催しています。 綿毛はありません—業界で尊敬されている実務家によって運営されている、ライブQ＆Aを備えた実用的で実用的なウェビナーです。 確かに、Smashing TVのスケジュールはすでにかなり密集しているように見え、Smashingメンバーはレコーディングと一緒に無料です—明らかに。
ウェビナーを私たちと同じように楽しんでいただければ幸いです。
アーロン・パールマン：私の画面が見えるはずです。 さて、今、私にだけさせてください…そこに行きます、とても良いです。 みなさん、こんにちは。 私が言ったように、私はDequeのプリンシパルユーザーエクスペリエンスデザイナーであるAaronPearlmanです。 そして、私は思います—ええと、私を動かさせてください—ズームは少しUIを邪魔する傾向があるので、私が必死に動いているように見えて、マウスが表示されないことを願っています。 そこで、今日は、キーボードのみおよび支援技術のユーザー向けに実行できる最適化の種類について説明します。 少し前に述べたように、これらのタイプの最適化は、他の誰かがあなたを使用することを妨げることはありません…他の人々によっても利用されないことはありません。 それらは、キーボードのみのユーザー支援技術を備えたシステムを主に使用するユーザーにとってより有利になる傾向があるだけです。
Aaron Pearlman：それが何を意味するのかよくわからない人にとって、キーボードのみのユーザー支援技術とは何ですか。キーボードのみのユーザーは、通常、キーボードを使用してシステムをトラバースする人です。 したがって、彼らはタブとShiftタブを頻繁に使用し、矢印キーを使用してシステムをトラバースするため、フォーカスは非常に重要です。 この1人の個人が運動能力の問題を抱えている可能性があり、視覚障害もある可能性があります。キーボードのみのユーザー、そして支援技術のユーザーもキーボードを使用してシステムをトラバースし、画面などの他の支援技術を使用している可能性がありますVoiceOverや点字リーダーなどのメーター。
アーロン・パールマン：それで、私たちが焦点を当てているのはそのようなものです。障害を持つ個人のかなりの部分がこのキャンプに陥る傾向があるため、その性質のユーザーです。 それは皆を意味するものではありません。 確かに、その間には無数のさまざまな障害や挫折がありますが、この目的のために、これが今日私たちが焦点を当てているものです。
アーロン・パールマン：それで、私たちがカバーしようとしていることの概要を少し説明します。私たちは、私たちが行うような運動タイプのことを少し行うことで、設計プロセスについて少し話します。スキップリンクに移動する前に、入るかもしれませんが、そうではないかもしれません。 そして、スキップリンクは、これから取り上げる機能の1つであり、モーダルを最適化する方法と、フォーカスを処理する方法です。 したがって、これらは私たちがカバーする3つの大きなカテゴリーになり、すべてが終わったら質問する時間があります。
Aaron Pearlman：まず、UXデザインプロセスの概要を少し説明できると思いました。 私はさまざまなワークショップなどに参加していましたが、さまざまな分野のさまざまな個人が無数にいることがわかりました。すべての人がユーザーエクスペリエンスデザイナーであるとは限らないため、多くのUXデザイナーが採用しているプロセスに精通していない可能性があります。 ですから、このために、私たちはそれを簡単に説明するつもりでした。私たちはそれに多大な時間を費やすつもりはありませんが、それは簡単に説明するメリットがあると思います。 また、アクセシブルなデザインにも結びつくからです。 そのため、ほとんどのUXデザインはディスカバリーと呼ばれるプロセスを経る傾向があります。これは必ずしもディスカバリーと呼ばれるわけではなく、ラピッドアイディア、ラピッドイテレーションと呼ばれることもあります。 多くの人がそれに対して異なる名前を持っていますが、重要なのは、それが多くの製造が行われる設計プロセスの一部であるということです。
アーロン・パールマン：さまざまなアイデアや要件を収集することもよくあります。多くの調査とそれを組織の目標に合わせて統合し、そのすべての情報でフィルタリングします。通常、そこから得られるものは次のとおりです。作成するシステムまたは作成する機能を構築できるようにするアーティファクト。 それらはそうなる傾向があります—常にではありません—しかし、それらはプロトタイプのようなものである傾向があり、時にはそれらから出てくるメンタルモデルも見られるでしょう。 ただし、ターゲットユーザーが目標を達成する方法を反映した、ある程度の忠実度のプロトタイプ。 TLDRは、設計を繰り返すことであり、ユーザーとのテストと繰り返し、ユーザーとのテスト、繰り返し、ユーザーとのテストを行い、最終的には構築されることになります。
Aaron Pearlman：それは重要だと思いますが、アクセシビリティに関する考慮事項は、その設計プロセス全体を通してアクセシビリティについて考え、実行したいということです。 そして、さまざまなレベルの忠実度は、さまざまな種類のことを考えて、メリットがあります。それは本当に異なります。 あまり詳しくは説明しませんが、一般的には、これらのヒューリスティックとメソッドを取り入れたいと考えています。デザイナーがアクセシビリティの力を徐々に高めていくのと同じように、優れた存在の力を育てていきます。時間の経過に伴うユーザーエクスペリエンスデザイナー。 最初は、WCAG 2.1に行って読んでから、ARIA仕様を読んで、それから完了して、これ以上間違いを犯さないという期待はありません。または、デザインやアクセシブルなデザインに関しては、何も見逃すことはありません。 それは想像力の範囲によって必ずしも合理的ではありません。
アーロン・パールマン：あなたが時間をかけて学んでいくことを知っておいてください。 確かに、私はまだアクセシビリティの間違いを犯しています。私が取り組んでいることはすべて、改善することだけです。 だから、[inaudible]私はいつもアクセシブルにデザインしているから。 したがって、今日取り組む予定のプラグに関連する1つの小さなプラグは、Traneと呼ばれます。 これは、Dequeで完全にアクセス可能なパターンライブラリであり、独自の製品を構築するために使用します。 これはHTML、CSS、JavaScriptのフロントエンドフレームワークであり、そのようなものを使用したことがある場合は、Bootstrapと非常によく似ています。 シスターライブラリーであるreactライブラリーもあります。 私たちのチームは反応して成長します。 しかし、今日ここにあるいくつかのことを例として見ていきます。 しかし、これはオープンソースであり、利用可能です。このデッキの最後にリンクがあり、誰でも利用できるようにします。
Aaron Pearlman：そして、ブランチを使用して取得し、心ゆくまで使用したり、貢献したりするのは無料です。貢献も期待しています。 小さなプラグですが、これから説明します。 したがって、最初に確認するのはスキップリンクです。 また、スキップリンクとは何かをよく知らない人にとっては、スキップリンクは、WebアプリケーションまたはWebサイトの最初のタブストップとして表示される傾向がある小さなリンクです。 そして、彼らがあなたにできることは、あなたがウェブサイトの一部をバイパスすることを可能にすることです。 なぜあなたはそれをしたいのですか？
Aaron Pearlman：ええと、もしあなたが本当に豊富なメニューを持っているウェブサイトを持っているなら、それは大きな看板メニューかもしれませんし、あなたがキーボードのみまたは支援技術のユーザーなら、それに到達したとき、それにたくさんのものがあるかもしれませんサイトとVoiceOverがそれを読み始めます。あるいは、そうでない場合でも、目の見えるユーザーである場合は、キーボードのみを使用します。これらのさまざまなアイテムをすべてタブサイクルして移動する必要があります。あなたがそこで行っているあなたの活動が何であれ、あなたが始めたいコンテンツまたはワークスペースへ。 したがって、スキップリンクを使用すると、通常はバイパスして、通常はナビゲーションを使用して、そのアプリケーションのワークスペース領域に移動できます。
Aaron Pearlman：複数のリンクが存在する場合があり、通常は1つしか表示されませんが、いくつかの例があります。 複数のスキップリンクを使用できる例を示します。 ですから、いくつかの異なるタイプのスキップリンクまたはいくつかの異なるタイプのスキップリンクを見ることができると思いました。次に、スキップリンクがない別のページを見て、どこにあるかについて少し話します。そこで役立つかもしれません。 私たちが最初に見るもの、うまくいけばあなたは私の画面を見ることができます。 最初に確認するのは、deque.comで使用するこのスキップリンクです。これは、ページを移動するという点で、移動要素と呼ばれるものです。 したがって、ここにタブで移動すると、スキップリンクがあり、コンテンツにスキップするように指示されます。
アーロン・パールマン：それを選択すると、以下のコンテンツに移動します。文字通り挿入および非表示になり、そこに挿入して移動するため、移動と呼びます。 これは、コンテンツに使用することを選択したスキップリンクでしたが、非常に一般的なものです。 WebサイトまたはWebアプリケーションの上部に挿入されていることがわかります。 次に見ていくのは、多くの人がかなり頻繁に使用または使用していると確信しているサイトの1つです。 アマゾンです。スキップリンクを見ていきます。 そこをタブで移動すると、左上隅を見ると、オーバーレイされていることがわかります。これはオーバーレイスタイルです。これは、コンテンツをオーバーレイする場所で非常に一般的であるため、多くの場合、何もスキップされます。その背後にあるメインコンテンツへのスキップを表示します。
アーロン・パールマン：変位とオーバーレイの長所と短所はごくわずかです。 コンテンツが難読化されたくないものであることがわかった場合は、何かを挿入してそれを使用することもできます。その逆も同様です。問題ありません。 アラビア語のコンテンツのように、右から左に読むコンテンツを設計している場合は、スキップリンクを右上隅に配置すると、それに値する場合があります。 それは本当に適切なものに帰着します。 しかし、最終的には、その裁量はチームの設計者に委ねられます。 したがって、これは単一のスキップリンクである2つのスキップリンクの例であり、スキップリンク内に複数のオプションがある1つを紹介すると思いました。
Aaron Pearlman：その例を取り上げます。これは、パターンライブラリからのものです。 この特定の例では、実際にはメリットがないため、複数のスキップリンクを持つものを実際に設計することはしませんが、それを示す目的で作成しました。 そこで、左上隅にタブで移動します。ここで2つのスキップリンクを表示するオーバーレイを使用します。 これらはここにあるタブストップなので、もう一度タブを押すと次のタブに移動し、タブを離すと移動します。 もう一度タブを押すと、そのままになり、上部のヘッダーに入ります。 タブを後ろにシフトし、タブを後ろにシフトして、ここに出入りできることを確認します。
アーロン・パールマン：それから、あなたがそれを見ることができるように、私は先に進んでこれらの1つを入力します。 そして、それを選択すると、この時点で何が起こるか、それは私をワークスペース領域に送り、実際にそのワークスペース領域に焦点を合わせます。 多くのWebアプリケーションで見られるのは、実際にはフォーカス自体が表示されないことです。アプリケーションでは、これはいわば要素のフォーカスではないことを示したかったのですが、集中。 そして、ここから焦点を合わせて、そこにあるすべての要素、[inaudible 00:12:28]要素の焦点である、そこにあるさまざまなアイテムに移動できます。 したがって、これらはスキップリンクを実行できるいくつかの異なる方法の例です。
Aaron Pearlman：私が言ったように、パターンライブラリ内に例があります。それを使用することを歓迎します。また、バージョンもあります。ここにはエラーがあると思います。 スキップリンクの例も1つあり、それを使用することもできます。 したがって、ここにいくつかの異なる例があります。 ただし、これらはスキップリンクを使用できる一般的な方法の例です。 そして、それらは主に、その結果としてシステムテクノロジーを使用するときに、キーボードを使用してシステムをトラバースするだけの個人にとって有益です。
アーロン・パールマン：しかし、時には、スキップリンクが潜在的に有益である可能性がある他の例があるかもしれません。 私はそれが潜在的に有益である可能性があることを見てきました。 あなたのサイトの大きなワークスペースが検索結果の集まりであり、下にスクロールしてさらに結果をロードし、下にスクロールしてそれを実行するという怠惰なスコアを実行するインスタンスを想像することができます。より多くの結果をロードし、一番下までスクロールすると、より多くの結果がロードされます。
アーロン・パールマン：では、どうやってフッターにたどり着くのですか？ そして、私は実際に以前にこの問題を抱えていました。そこでは、検索エンジンに行ったことがあり、フッターにたどり着くことができませんでした。 そして、フッターで情報を探していたので、実際にフッターにスキップできるスキップリンクがあればよかったと思います。 したがって、リンクをスキップすることが有益な方法があります。 その問題を解決できるのはそれだけではありません。 確かに、ハードキーやショートカットメニューも使用できます。 これらの目標を達成するためのさまざまな手法がたくさんありますが、それはリンクをスキップすることが[inaudible00：14：13]で非常に優れている傾向がある手法です。 スキップリンクを設計する際に留意すべき点は、通常、それがWebサイトWebアプリケーションの最初のタブストップになるということです。
Aaron Pearlman：それはよくあることです。ですから、私が叫んでいる場合やキーボードのみのユーザーの場合は、すぐにアクセスできます。 これは、入力したときに最初にできることです。したがって、頻繁に使用するWebアプリであれば、自分がやろうとしていることを正しく理解できます。 また、基本的にAIの情報のどこにあるかを視覚的に表現する必要があります。これにより、スキップリンクやアプリケーションの他の部分も配置できます。たとえば、必要に応じてここに配置して、長いものを見つけることができます。スクロールスタックサイトと私はそれをやりたかった、そして私は何かの中にスキップリンクを持ちたかった。 そのようなさまざまなものに固定できると確信していますが、アプリケーション内の本来あるべき場所に視覚的に表現する必要があります。
アーロン・パールマン：一般的に、それは非常にまれです。 ほとんどのスキップリンクは常に最初のタブストップにあります。 一般的に、それをしないでください。 技術的にはできると思いますが、できないと思います。 そして最後に、それはインタラクティブな要素であり、過去の色のコントラストであるため、画像などのように使用する場合は、必ず使用するようにしてください。ただし、使用する場合は、それと一緒に適切なアクセス可能な名前も。 一般的に、ほとんどの人はテキストとリンクを使用するので、リンクとしてマークアップされます。 [inaudible 00:16:07]になるように、色のコントラストを通過していることを確認してください。 とても良い。 スキップリンクについては、これですべてです。
Aaron Pearlman：どこにでも見られる、かなり簡潔ですが非常に一般的なパターンであり、公平に追加できるものです。Webアプリケーションに追加するのはかなり簡単ですが、キーボードやシステムテクノロジー。 それでは、先に進んでこれを閉じて、モーダル最適化に移りましょう。 モーダルはほとんどのWebアプリで非常に、非常に、非常に一般的であり、モーダルが形成および作成されるさまざまな方法でさまざまなフォーラムに参加しているため、これを選択しました。
Aaron Pearlman：しかし、キーボードのみのユーザーと支援技術のユーザーにとってより良いエクスペリエンスを実現するために実行できるいくつかの最適化が行われるまで、修正できるものの多くに現れる一般的なものがいくつかあります。 そして一般的に、私はあなたのモーダルがはるかに優れていると思います。 ここですぐに紹介したいと思ったのは、モーダルが行う必要のある重要なことの1つは、その中にフォーカスを閉じ込めることができる必要があるということです。 例を示したかったのですが…ここにあります。 ちなみに私はドリブルが大好きなので、これは彼らに対する掘り出し物ではありません。 これはおそらくここでの小さな見落としです。 私はいつもそれらを楽しいサイトとして使用し、素晴らしいものを載せています。
アーロン・パールマン：サインインを押した場合、おっと、申し訳ありませんが、サインアップしてください。 ここにモーダルがあり、時々発生する可能性があります。 注意深く気づいたら、私はタブ、タブ、タブ、タブ、タブを押しています。 画面の後ろに見えるように、少し見づらいです。 フォーカスがモーダル内に完全に閉じ込められていないことがわかります。これは時々発生する可能性があります。 したがって、私が支援技術またはキーボードのみを使用しているユーザーである場合、これに戻ることは非常に困難です。
アーロン・パールマン：それは非常に、非常に、非常に、非常に一般的に起こることであり、モーダルにさまざまな興味深いものを挿入しているときに確かに起こる可能性があります。 だから私たちが確認したいこと、そして私がそれを提起する理由、実際に非常に非常に重要な理由は、モーダルが引き起こされたときに、それを引き起こした個人にそれ自体を発表する必要があるということです、何を知っていますか基本的には開いたばかりですが、実際には正しいものを開いています。
アーロン・パールマン：それで、それ自体を発表できる方法は、モーダルの本体に焦点を合わせる必要があるか、モーダルを呼び起こしている個人にそれを伝えることができるように、モーダルのヘッダーに焦点を合わせることができるということです何が起こっているのかです。 したがって、音声がある場合は、たとえばVoiceOverを使用していると、何を見ているのかがわかります。 そこで、ボディに焦点を合わせる方法の例をいくつか挙げてから、モデルが代わりにヘッダーに焦点を合わせる方法の例と、それを使って何ができるかを示したいと思いました。
アーロン・パールマン：ここでこれをすぐに開きます。 とても良い。 そして、彼らがこれのために持っているモーダルなので、私はそれがまさにここの衣料品サイトだと思います。 そして何が起こったのかというと、それは体に焦点を合わせており、私はそれを最もよく示すことができます…私はVoiceOverを本当に素早くオンにするつもりです。 引き上げます。
VoiceOver： ChromeのVoiceOver。] Bonobos、[inaudible00：20：10]-
アーロンパールマン：そしてあなたはそれを聞くことができないでしょう-
VoiceOver： Google Chrome、Aaron.pearlman @ deque.com-
アーロンパールマン：しかし、あなたはそれを見ることができるでしょう。
VoiceOver：カードを閉じます。カードは空で、グループにはキーボードフォーカスがあります。 あなたは現在、あなたのカードを開いて、カードを閉じて、あなたのカードが空のグループであるグループにいます。 現在、VoiceOverをオフにしてWebコンテンツ内のグループに参加しています。
アーロン・パールマン：それで、私がそれに焦点を合わせたとき、それはあなたのカードに起こっていたすべてのことを少し読み上げました、そしてあなたのカードはその時点で購入が焦点を合わせられたので空です。 そして、それは完全に有効です。 これは、モーダルに焦点を合わせるための完全に有効な方法です。 それはまったく問題ではありません。 そして、そこから、その中にあるすべてのものをタブサイクルすることができます。 モーダルが呼び出されるときのもう1つの一般的な方法は、ヘッダーにフォーカスを合わせる方法です。
Aaron Pearlman：それが、アプリケーションに使用するモーダルで行うことです。ヘッダーに焦点を合わせます。 モーダルを呼び起こすつもりです。ここでわかるように、フォーカスはここにあり、フォーム付きのモーダルと表示されています。フォーカスはヘッダーにあります。 実際には、インデックスのように示すのではなく、プログラムでそれに焦点を合わせています。 そして、ここをタブで移動するときにプログラムで焦点を合わせる理由は、ヘッダーにある閉じるボタンに移動し、次に最初のインタラクティブ要素に移動します。これは、次のフィールド、次のフィールド、次のフィールドで、もう一度タブを押して保存し、もう一度タブを押してキャンセルします。
Aaron Pearlman：そして、ここからタブキーを押すと、そのヘッダーがタブストップの場合、そこに移動しますが、それを行わないことを選択しました。 代わりに、私たちは終わりに行きます、そしてそれをする理由は、あなたが書かれているもののいくつかを同時に見たかもしれないので誰かがボイスオーバーを使っていた場合だけです、それは実際には非常に少しでしたそれは非常に速く話すので気が散る、それは少しおしゃべりです。 そのため、ここでのエクスペリエンスのために作成したかった最適化の1つは、おしゃべりを少し少なくすることでした。 そうです、私たちはそれを発表します、それは行きます、私たちは彼らが最初にそこに着いたときにプログラムでモーダルに焦点を合わせます、それで彼らが引き起こしたモーダルが実際に彼らが現在焦点を合わせているものであることを彼らに知らせます。
アーロン・パールマン：しかし、彼らがこのモーダルを循環するこのシフトを循環するのであれば、何度も何度も発表する必要はありません。 したがって、これは小さな最適化であり、引用されたマウスのみのユーザーの大多数には完全に見えない可能性があります。 しかし、その小さな最適化では、フォームに頻繁に入力するためにモーダルを頻繁に使用し、キーボードのみまたは支援技術を使用して最適化が時間の経過とともに加算されるユーザーであった場合を想像できます。 ですから、小さなユーザーエクスペリエンスは、私たちができることを体験します。これは、私たちがデザインに取り入れることができるケアに全体的に大きな違いをもたらす可能性があるため、私たちが提供できる最も頻繁なエクスペリエンスです。
アーロン・パールマン：フォーカスの処理について言えば、最後に取り上げるのはフォーカスの処理そのものです。 そして、その一例を見ました。特定の種類の処理でフォーカスが失われる可能性がある場合はどうなるでしょうか。 しかし、重要な問題になる可能性のあるものではなく、フォーカスを処理する方法によって、個人の体験が大幅に変わる可能性があります。 フォーカスの処理に関する実際のルールは、特に今から検討する2つのインスタンス、つまり、作業スペースまたは作業中の要素の削除と追加です。これは、誰かのやり方を確実に変える可能性があります。それと相互作用します。 そのため、マウスのみのユーザーまたは目の見えるユーザー、つまりマウスのみのユーザーに期待されるエクスペリエンスに準拠させたいと考えています。
アーロン・パールマン：この例では…を見ていきます…ここでは…見ていきます。さて、それをドラッグさせてください。 1秒待ってください。 これを一時的にここから取り出さなければなりません。 そこに行きます。 したがって、私が設計したモーダルの例を見ることができないはずです。これは実際には単一のモーダルです。2種類の画像があり、1つだけでは、実際に1つを作成するのではなく、折り目の下にあるものを表示しています。 、本当に間違っているか、私はそれを分割して、下にあるものを折りたたんで見ることができるようにしました。 そして右側に、あなたが見ると、現在焦点を合わせているゴミ箱のアイコンがあります。 したがって、そのゴミ箱アイコンをクリックすると、「本当に削除してもよろしいですか？」というダイアログが表示されないと仮定します。
アーロン・パールマン：そうではないと仮定しましょう。 本当の問題は、そこで焦点を合わせるとどうなるかということです。 そのゴミ箱アイコンがヒットまたは選択されると、ここにある指示が削除され、それ自体も削除されるためです。 では、焦点はどこに行くのでしょうか？ ですから、私たちはデザイナーとして、フォーカスがどこに行くかを選択したいと思っています。そうしないと、Webアプリケーション内でWebアプリケーションを作成している場合に、フォーカスを選択するブラウザーが選択され、フォーカスがどこに行くかをブラウザーに選択させたくないからです。体に物を投げる傾向があります。 したがって、この場合、本当にフォーカスを移動したいのは、フォーカスを次のフォーカス可能な要素に移動することです。必ずしも…次のゴミ箱にフォーカスするアナログと呼んでいます。代わりに、指示をそれ自体に集中させます。
アーロン・パールマン：それをやりたい理由は、誰かが誤ってキーボードを使ってリターンを押した後、もう一度リターンを押した場合を想像できるからです。 1つではなく2つの命令セットを削除しただけです。 そして、私たちは、文字通りそれらのものを物理的に遠くに置くことによって、マウスのみのユーザーにとってそれを防ぎたいと思います。 しかし、フォーカスはこれをトラバースするために使用しているものであるため、これを防ぐこともできるようにしたいと考えています。 そこで、ここでセクション全体の最後の項目を削除するときに何をするかについて、別の例を示したいと思いました。
アーロン・パールマン：これで、料理の説明があります。これは、説明1の最後の説明ですが、ここではどこに焦点を当てますか？ さて、この特定のものについては、前のものに追随します。つまり、実際には次の焦点に移動しますが、再び満たされます。これは、投げたくないのと同じ理由で成分1です。誰かがもう一度selectを押すか、もう一度returnを押すと、私たちは…意図せず、望まなかった2つのものを誤って削除してしまうためです。
Aaron Pearlman：同じ理由で、これらのリンクの1つにそれをスローする必要はありません。これは、誤って追加するという逆の問題が発生するためです。 そして、私たちは必ずしもそれが体に行くことを望んでいません。なぜなら、私たちは体に行き、あなたのボイスオーバーユーザー、あなたのアシスタントテクノロジーユーザーは、モーダルについて再びおしゃべりを始めるか、あなたに対話を続けさせるのではなく、意図したことを実行します。
アーロン・パールマン：そして最後に、ここにある最後の例は、この場合、最後のアイテムを削除するときに何をするかです。ここのモーダルでは、何も残っていません。 どこに送ればいいですか？ そして、これは間違いなく、それがどこに行くべきかについての設計者の裁量次第です。 いいえ、服に送るか、キャンセルに集中するために送ることを選択した場合、アクセスできなくなることはありません。 それは必ずしもアクセスできないようにするわけではありません、それはただそれだけです、それは本当にあなたが何を期待するかということになりますか？ どんな情報を伝えたいですか？ そのユーザーにどのような物語を伝えたいですか。また、ヘッダーに送り返すことを選択したときに、どこに送信するかを選択して、ユーザーがまだモーダルにいること、まだそこにいることをユーザーに知らせます。たとえば、そこで閉じました。
アーロン・パールマン：それは実際にはプログラムによる変化です。なぜなら、私が言ったように、それはひどい声ではないからです。 それはそのようなひどいフォーカス可能な要素ではありません。 したがって、この特定の例では、プログラムで焦点をそれに移します。 したがって、これらは、アイテムを削除するときに焦点を合わせて何をすべきかを示す良い例です。 だから私はあなたができると思いました…あなたがアイテムを追加しているときにあなたがすることの例を示します。 だから私はここにフォーカス保持のためのその本当のクイックの例を持っています。
アーロンパールマン：そしてここで、これを追加します…ここに焦点を合わせ、別の材料を追加して焦点を合わせ、この場合は実際の材料に移ります。この場合、2つの理由で追加したフィールドです。前提は、操作したい次のフィールドを追加することです。これは、私がマウスのみのユーザーである場合に予想される動作です。おそらく、実際にテキストを入力し始めることができるように追加します。
アーロン・パールマン：繰り返しになりますが、同じ理由で、必ずしも別の材料に焦点を合わせ続ける必要はありません。同じ理由で、それらが再び戻ってきた場合、1つではなく2つの材料を追加したくないからです。 前の例とは逆の問題になるはずです。 そして最後の、私が見せたかった最後の例は、示す価値があるかもしれないと思うので…実際に私はその例を持っています、私はそれを少し引き上げるかもしれません。 しかし、私はそれをかなり適切に説明することができます、あなたがモーダルを呼び起こすときにあなたが何をしているのですか？ たとえば、何かを保存すると、モーダルがなくなり、フォーカスがどこに移動し、私たちが何をする傾向があるかがわかりますが、経験則では、それを任意の要素に送り返します[inaudible 00:31:03]取得。
アーロンパールマン：それで、もしあなたが小さな編集鉛筆を持っていてそれを選択し、モーダルを開き、そのモーダルに記入し、保存を押すと想像すると、フォーカスをそのインタラクティブな要素に戻したいと思うでしょう…またはそうします。 他の場所に送信したい場合があります。 それが魔法使いであり、その後どこか別の場所に行く場合は、再びデザイナーの裁量で、あなたがどこに行くべきかを私たちに伝えようとしている物語に行きます。 しかし、私が今説明したようなインスタンスのようなものについては、これは非常に一般的です。 モーダルを呼び起こすか、それを使って何かをすると、その結果として却下され、コンテキストは必ずしも変更されません。
アーロン・パールマン：そしてあなたはその焦点を元の場所に戻したくありません。 そして、それを行う理由は、キーボードのみまたは支援技術のユーザーが自分のいる場所に戻ることができるようにするためです。 彼らはその空間にいることを忘れないでください、そしてその空間は彼らがどのように横断するかに関して、そして特にあなたがすべてを通り抜けるために町を使っているとき、いくらか直線的です。 ですから、私たちはちょうど40分くらいだと思います。私が持っていたすべての例と物事については、ちょうど時間通りです。 だから私はそれをスコットに返すつもりです。
スコット：アーロン、ありがとう。 それはかなり素晴らしかったです、そして私達は出席者からたくさんの質問をします、そして彼が旅行しているので今日それをすることができなかった個人からのいくつかの質問があります。 そのため、ウェビナーの定期的な参加者であるPoanは、「アイテムを削除するときに、アクションを確認してそこにフォーカスを移動してから、次の要素に移動する必要がありますか？」と質問します。
アーロン・パールマン：アイテムを削除するとき、あなたは…トーストのような通知のように言及しているのですか、それとも何が起こっているのかを知らせるライブリージョンがあるべきだと言っていますか？ たとえば、その特定のインスタンスで示したようなアイテムを削除するためにフォーカスをシフトしている場合、その削除の呼び出しは、実際に削除されたことを知らせるのに十分なはずです。
アーロン・パールマン：それはなくなるはずです。 また、彼らがボイスオーバーを使用している場合、それもそれを拾うでしょう。 何かを操作していて、たとえば、何かをした後、どこかでいくつかのメトリックを変更した場合など、別の場所で変更を加えている場合は、丁寧に何かを実行してそれらを許可するライブリージョンを使用することをお勧めします。それが起こったことを知っています。 それは、あなたが具体的にどこで働いているのかという範囲から外れたものです。 それがあなたの質問に答えることを願っています。 もう少し技術的なものに飛び込んでいる可能性があります。 技術的な実装について深く掘り下げる場合は、そのいくつかについてもう少しフォローアップする必要があるかもしれません。
スコット：完璧です。
Aaron Pearlman：私の開発者なので、彼らはあなたが到着するのを操縦しませんが、一般的にはそうなる傾向があります。 私が示した例は適切なはずです。 削除であるために必要な場合は、アラートをスローして「彼にこれを削除してもよろしいですか？」と言う暫定的な部分を含めることができます。 どちらの場合、あなたはそれをさらに強化しているだけです。
スコット：素晴らしい。 だから、ええ、ユーザーエクスペリエンスに焦点を当てた質問を続けてみてください。 では、ユーザーエクスペリエンスの観点から、通知メッセージのフォーカスをどのように管理しますか？
アーロンパールマン：通知に焦点を当てますか？ ご覧になりたい方はお見せします。
スコット：もちろんです。
アーロンパールマン：通知であるトーストがあるので、ランダムに取り戻すことができます。 だからここで乾杯をします。 ですから、これは実際に現在焦点を合わせています。 このトーストは喚起され、現在焦点が当てられており、実際には、ご覧のとおり、ここで句にタブで移動できます。 だから、それは異なります。 So, if I finished something and I wanted to notify them that it's been finished and I toasted it, then I want to focus it so that they can see that it's been … that I'm communicating that information to them. So you want to shift focus to it.
Scott: Melanie is asking, “Do you have any tips for tips or resources for navigating slideshows?”
Aaron Pearlman: For navigating slideshows?
Scott: [crosstalk 00:36:00]. Very specific.
Aaron Pearlman: Yes. So navigating slideshows. We don't use them very often, so I'm going to answer this as best as I can. So one slideshows especially ones that are like carousels, they need to have a control so that you can stop them. I think that's an accessibility need, is that they have to have some control and a mechanism so that they can be stopped. Anything that's an animation wise can't animate for more than five seconds at a time and then the animation has to stop.
Aaron Pearlman: That may not be relevant to what you're doing, but it is moving. And those controls then need to be focusable most carousels have … A lot of fancy new ones. we'll have menus that can come up when they get hovered over or focused on, just consider that all those controls need to be traversable, and then their very image heavy. A lot of carousels and slideshows need to be, so that you're going to need to have proper alternative texts on them. Just the things that you would expect.
Aaron Pearlman: Off the top of my head, I don't know of any fully accessible carousel that I can think of. But let me see if I can find a better example and I will try and pass it along through smashing and have that available if I can find it. It's a great question because they come up a lot. I ended up tending to solve that problem in a slightly different way because I think they're tricky, but that doesn't mean that they can't be done.
Scott: Rebecca is asking, “Can you give a use case for skip links?” And then similar early related, Patricia's asking, “Do you know how to solve the issue with skip links in Safari plus the VoiceOver?” [crosstalk 00:38:18]. Again, maybe more technical than user experience related.
Aaron Pearlman: Yes. The second one, I'm not entirely sure what actually is going on that, that there may be an issue there. Again, I can try and see if that's something that our developers have encountered before and how they've gotten around it. So we'll make a note of that and I'll try and circle back. But for the first one what's a use case for Skip links? I want to avoid giant banner menus and I want to get straight to a sale that I heard that there is today and I don't want to have to do that.
Aaron Pearlman: If I was a sighted a mouse only user, I would just visually ignore it and then go move my mouse over and just click on the sale item. If I'm a keyboard only ora assisted technology user, I would have to tab through all of that menu, potentially bunch of banner items as well before I could finally get to the workspace. that has maybe the sale items. So that would be a great use for a Skip link to get right to the content. Skip to main content is a phrase you see very, very common. メインコンテンツにスキップします。
Scott: Okay. That's a good, good point. And I think in terms of all the user related questions from the attendees that covers them. We do have some general questions that we like to ask. So, low hanging fruit for people that are trying to build an accessible website. If somebody wants to put together a site in a few hours and make sure it's accessible, what are some the easy things that just they can check off the list right away.
Aaron Pearlman: Sure. So some things that you can do immediately with any site or application that you're working on, you can review your font choices for things like color contrast, there are plenty of color, if you put in color contrast, selector, picker or something like that, you'll get it and you'll just put it in the Hex value or the RGB value of what your font is and then what the background, whatever element the background color is sitting on and make sure that it's meeting at 4.5 to one.
Aaron Pearlman: So that's one that you can do immediately. Check your color Palette, you want to do color contrast where I see that color contrast fails a lot is when people use the endless shades of gray to have various levels of first class, second class, third class elements and things like that. Just make sure that if it's an interactive element that it's a passing color contrast.
Aaron Pearlman: Another thing, check your the images that are important, that are non decorative images. Make sure that they have all texts. Just one that you can add immediately. And then check your review, your heading structure, make sure that your h1 tags, h2 tags, h3 tags, h4 tags and so on. They all make sense with the structure of it and make sure that the content is properly paired with those heading tags.
Aaron Pearlman: That's things that you can do immediately. And then also you can just, this is a small blog but you can download AX, that's our accessibility engine. それは完全に無料です。 It's a little extension for chrome and Firefox and just hit the run button and see what you find. It's a lot of things that you can help alleviate immediately or change immediately. You can also turn on VoiceOver, for example, if you're on a Mac and start to go through your site and see what it sounds like for somebody who uses just a technology. It's a great thing that we can do immediately.
Scott: Okay. Janat, has a question here. So what is it about accessibility that interests you and how did you know you've been doing design and UX for so long, but you've only been doing accessibility for smaller period of time, so that catch your attention?
Aaron Pearlman: It had been something that had been on the purview of some of the design that I had done in a later part of my design career till I got here. In my design career, I've always wanted to work on things that I felt in some way tried to make the world a slightly better place and I felt that working. And accessibility was one way to make … Very much believe in the core value of universal design or more importantly adapted design. Design that adapts itself to two different types of individuals to provide what we call GQ like digital equality. We want everyone to be able to use everything as best as we can possibly provide that universal experience that we can have. I don't know as a person that very much appeals to me. And so it was just a good fit to learn design. かっこいい。
Aaron Pearlman: Designing accessibly is a one way street. Like once you start to design accessible, you never don't not design accessible anymore. It's like UX designers don't design unless you're being tongue in cheek, you're not going to design something to have a really poor user experience. It's going to be part of your vernacular from that point forward. And once you begin to design accessibly, it never goes away. I can't like not think about accessibility as I do designing and that's a really, really cool thing.
Aaron Pearlman: It also affords you to start to think about things that you didn't think you had access to. Like, did you know that your focus on your page, you can design focus to look differently for different elements on the page? That blew my mind when I found that out and I thought that was so cool that gave me a little bit more control, I knew you could create really cool Hover States, but I didn't know focus was a state that you had full control over as well.
Scott: Our industry there's always a new trend that's just kind of how it goes, that's the web. Are there any design trends right now that you know that are inhibiting accessibility? And if so, is there any recommendations you can make to avoid that?
Aaron Pearlman: I don't know if there's anything that's super trendy right now when I look at different sites and web applications that couldn't be designed excessively. I think there are pitfalls that that we've been falling into longer than any one trend as existed or at least has existed for some time. I just mentioned one, what I call the endless shades of gray. それは1つです。 In general, just being mindful of the contrast for your text. It is rampant.
Aaron Pearlman: It is by an order of magnitude, the most accessibility issues, if you were to like run an engine against it, like AX, it'll be color contrast almost always. So just being really, really, really mindful of that regardless of where your text is on the page. Again, I mentioned it again, just being careful with your images. If you have an image that's conveying important information to a sited user, that information needs to be conveyed to the user. That is user as well.
Aaron Pearlman: And what I mean by information that's conveyed is if what's being conveyed is that the person is doing something that's, you wouldn't necessarily describe it as a man standing. It could be that they're playing baseball. Maybe that's the important part. So make sure that the, that the, the alternative text matches with the intended information that's trying to be conveyed, received out a lot too. Even when all texts is there, it just doesn't accurately describe what is trying to be portrayed.
Aaron Pearlman: And then the other one too is progressive disclosure menus, many times you see on Hover Menus and stuff like that. They don't do a great job of being evoked on focus as well. And they don't always do a good job of … So that is a trend I do see. I do see a lot of menus coming up on Hover, when you hover over something you get the secondary menu that was hidden before that now finds itself to the front.
Aaron Pearlman: Also making that be able to Hover or a mechanism that allows you to evoke it and that will properly capture focus inside there so that you can use it. Those are a few things off the top of my head that I can say I would see a lot.
Aaron Pearlman: So as a graphic designer, you obviously work with development teams and a lot of the times when we're doing wireframes and design of the onset of the project, they're inherently not inaccessible. It doesn't really become an issue, it seems until it comes to the development stage and people start taking that design and turning it into code. So how do you work with developers to make sure that the design that is being made from the start is going to be accessible when they're done with it. Do you do audits throughout the process, at the end of the process? Like what's the workflow with developers?
Aaron Pearlman: Sure. So the workflow for our development team is going to be, I think somewhat similar to a lot of other organizations. We work in scrum, so we work in sprints and scrum and I'll go through a discovery process. They're going to be privy to that, they're not going to see it when the design is fully finished.
Aaron Pearlman: They're going to see it throughout the design. I'll have opportunities to talk with them a little bit about what the intent of the design is. They will probably set in on some of the user research that I've done, some of these ability testing that I've done. So, hopefully at that point nothing's really new to them that I'm not going to get any 11th hour that we can't even do this thing. I still have to deal with all the other things outside of accessibility that every other designer has to deal with, like is this feasible? Is it valuable? Is it all of those things that we have to deal with.
Aaron Pearlman: With regards specifically to accessibility, sometimes I will annotate the designs in a particular way that will indicate where tab focus should go. At the end of the slide deck that I have, there's a great resource that one of the designers from Adobe put together. I know there's like a pdf, there may be. There's like a sketch file as well in there, there may be an XD file as well.
Aaron Pearlman: I don't think, maybe just sketch. But it shows you like all of these different ways that you can annotate things like, accessible names, tab order and basically are little objects that you can place on your design to indicate some of those things as you go through. It's a really, really wonderful resource. It's all included in here as well. That's a great way of saying, “Here's part of my prototype and here's the expected tab, order for it.” So that you have that as part of your artifact as part of the digital documentation or annotation that goes along with it.
Aaron Pearlman：それが私たちがしていることの1つは、自分のデザインにかなり大きな注釈を付けることです。 特定のものがどのようにあるべきかというサイズから、どのように見え、どのように感じられるべきかについての16進コードまたはRGBA値まですべて。 しかし、それに追加できるアクセシビリティ注釈もあります。
Aaron Pearlman：それから、コミュニケーションを取り、ビルドが進行するのを見て、カスタムフォーカスを作成した場合、それらのカスタムフォーカスが見栄えが良く、色のコントラストをチェックし、それが通過することを確認し、フォントが通過することを確認します。あなたが持っていた選択肢は、それらの重みがより高く、それらがより大きくなるとき、いくつかのフォントがあります。 それらの色のコントラストは4.5である必要はありません。 実際には少し低くなる可能性がありますが、これらのことを監視したいだけです。 あなたが経験のものにも目を光らせているのと同じように。 あなたは、あなたが気を配り、あなたのデザインに注釈を付けてきたものに目を光らせたいと思うでしょう。
スコット：それで、ここに数分残っています。 では、もう1つ質問します。 一部の人々は、アクセシビリティが設計プロセス全体を通して創造性を阻害する可能性があると感じています。 それはあなたが遭遇したものですか？ 創造性はアクセシブルなデザインにどのように適合すると思いますか？
アーロン・パールマン：もちろんです。 それは、アクセシブルにデザインしなければならないことに対する私の最初の反応の1つでした。誰かが基本的に私に手錠をかけ、「あなたが作業できるようにしなければならないはるかに小さな箱があります」と言いました。 確かに、アクセシブルに設計するということは、従わなければならないルールが増えるため、さらに多くの課題が発生する可能性があることを意味します。 しかし、結局、私は経験がより良くなることに気づきました、そして私はそうではありませんでした…私がその誤称を取り除き、WCAG 2.0 AAにアクセス可能なより多くのアクセス可能なデザインを始めたら、私はほとんどすべてを行うことができることに気づきましたやりたかったこと。
アーロン・パールマン：以前とは少し違う方法で問題を表現したり解決したりする必要があるかもしれません。 アクセシブルなデザインを考える人は多いと思います…具体的な例を挙げましょう。 彼らがアクセシビリティの設計について考えるとき、彼らは次のように考えます。 アクセスできないため、これらすべてを実行することはできません。個人がそれらを見ることができない場合、私はそれを実行できなくなるからです。」
Aaron Pearlman：私は基本的な視覚化を設計していました。その下には折れ線グラフがあり、x軸には時間、y軸には使用法などがありました。それ。 そして、そこから下がるこの素敵な小さなグラデーションがあり、月と時間を描くためにその後ろにある種の細い線がありました。 そして、対象分野の専門家の1人とアクセス可能にすることについて話し合ったとき、彼は「いいえ」のようになるだろうと確信していました。 しかし、彼は、この本当に見栄えの良いグラフにアクセスできるようにするために、実際に私がしなければならないことがいくつかあると言いました。 1つは、上部の線が色のコントラストを通過する必要があることです。これは、実際には、時間の経過に伴うトレンドの情報を伝達しているためです。
アーロンパールマン：その下にあるすりおろしたものは単なる装飾であり、それとy軸とx軸の線の色のコントラストの通過を妨げない限り、問題はありませんでした。 その後ろの線は大丈夫でしたが、それを示すためにその下に目盛りを追加することになりました。 次に、ホバーしてフォーカスを合わせると、ホバーすると線グラフの一部にドットが追加され、ドット自体が色を通過することを確認できる場合があります。 対比。 私は、白い点を別の点と一緒に置くようなドーナツのようなことをすることによってそれをしました、または私はそれをその外側にも大きなストロークのように持っていると言うべきです。
アーロン・パールマン：それから、フェードバックしたラインを前に戻すためのトリートメントを少し追加しました。 そして、それはすべて色のコントラストを通過し、最終的には問題ありませんでした。 通過したのは本当にきれいな視覚化でした。 確かに、私はアクセシブルな名前のすべてに精通しているわけではなく、それを行うことができます。 多くの図書館がその上にあります。 それはさておき、少なくとも私たちはコントラストと呼んでいます。なぜなら、多くのデザイナーが苦労していると思うからです。 あなたはそれを行うことができます。
アーロン・パールマン：それは、そのような種類のことについて本当に気を配り、より多くの例を取得し、さまざまなことを試してみて、他の人にそれらのアイデアを売り込み、前後にバウンスさせて、もう一度チェックできるようにすることです。それを行う。 私はそれが本当に何も阻害するとは思わない。 それはあなたがそれをどのように行うかについてもう少し明確に考える必要があり、彼らが低視力を持っていた場合、または彼らができなかった場合に個人がこれにどのように関与したかについてレンズを通して見ていることを確認する必要がありますメディアアプリケーションを構築している場合は、まったく表示されないか、聞こえませんでした。
スコット：もう1つ質問がありますが、それに触れるべきだったと思います。 プロセスのどの段階でアクセシビリティについて考え始めますか？ プロセス全体を通して想定します。
アーロン・パールマン：ええ、それはプロセス全体を通してです。 私はもう少しではなく…私が誰と言っているか知っています、そしてそれは少しばかげているように聞こえます。 したがって、忠実度の低いプロトタイピングなどを行うときは、タブオーダーなどのことを考えることになります。 おそらく見出しや構造などについて考えることになります。 それらはあなたが考えるアクセシビリティのもののタイプです。 後で忠実度が高くなるにつれて、選択した色やパレット、アクセシブルな名前、それに値する可能性のあるものの代替テキストなどについて考えるようになります。たとえば、カスタムフォーカスを実行している場合は、おそらくそこから考え始めます。
アーロン・パールマン：忠実度が低いときにそれについて考えることができなかったという意味ではありません。一般的に、私がプロセスを実行すると、それらはこれらのカテゴリに分類される傾向があります。 あなたはずっとアクセシビリティについて考えていますが、あなたは忠実度の低いものにいるので、常にそれですべてを考えているわけではありません、そしてあなたは考えています、そしてあなたはただアイデアについて考えています、そしてあなたはただアイデアに取り組み、アクセシビリティに慣れてきたら、その創造的なものを通過させてください。それは本質的に浸透し、意識的なものが少なくなります。
スコット：うん。 けっこうだ。 ええと、その点で、私たちは時間を使い果たしました、アーロン。 お時間をいただき、誠にありがとうございました。
アーロン・パールマン：それは素晴らしかったです。 私は素晴らしい時間を過ごしました。
スコット：あなたは次の数回のスマッシング会議に参加するつもりだと思います。
アーロン・パールマン：私はニューヨークにいます。 私はニューヨークにいます。
スコット：わかりました。 そして、皆さんはそこでワークショップを行っていますか？
アーロン・パールマン：はい、そうです。
スコット：わかりました。 素晴らしい。 お時間をいただき、ありがとうございました。まだ視聴しているメンバーに会うために、来週は2回のウェビナーを開催します。 1つ目は、KristinaPodnarによるデジタルピープルの力です。 そして、Andrew Clarke、Inspired Designs Decisions、ErnestJournalに触発された3番目のシリーズの3番目があります。 本日はご参加ありがとうございました。 繰り返しになりますが、このレコーディングは、編集が完了したら、メンバーシップパネルのディスパッチで利用できるようになります。来週お会いできることを楽しみにしています。 だから、エリンにもう一度感謝します。
おしまいです！
Smashingメンバーの継続的で親切なサポートに心から感謝します。今後さらに多くのウェビナーを開催するのが待ちきれません。
アーロンを次のSmashingConfニューヨーク（10月15〜16日）に迎えることができて嬉しいです。そこでもお会いしましょう！
この一連のインタビューが役に立ったかどうか、誰にインタビューしてほしいか、またはどのトピックを取り上げてほしいかをお知らせください。すぐに対応します。