5つのヒントあなたの角度アプリケーションをよりアクセスできるようにする

この記事の意図は、読者がアクセス可能な角度のアプリケーションを構築するときに従ういくつかのヒントを与えることです.これは、完全なリスト、またはWCAGに準拠するためにしなければならないすべての物事のカンニングペーパーです.私はAA、セクション508、またはそのいずれかについて話すつもりはありません.アイデアは、そこから始めることができるので、基本的なアイデアを与えることです.
私はそれを楽しくしたかったので、私たちは一緒に識別される複数のアクセシビリティの問題がある角のアプリを作成することを決めた.これらの問題のそれぞれについては、解決策になるだろう.これらは生産可能な解決策ではありませんが、良い出発点です.
これを作成repository for the article , 複数の枝がある.各先端には2つのブランチがあります.これらのブランチは以下の手順で簡単にローカルに設定できます.

Gitクローンリポジトリ

コマンドラインツールを使ったディレクトリへのcd

コマンドを実行するnpm install

コマンドを実行するnpm run start

アプリケーションは、ポート4200で実行され、選択のブラウザでそれをアクセスできます.

注意1 : NGIFを使ってDOMから要素を隠す
角度は、開発者の経験を改善するためにここにある.それは私たちの生活を容易にする複数の機能を提供しますが、時々、我々は賢く感じるし、自分自身で物事をしようとする.あなたが問題の例が欲しいならば、アクセスしてくださいbranch with the first tip problem .
この1つの良い例はngIf ディレクティブ.私は、彼らが彼らのスタイルでこのようなものを使うのを好むプロジェクトを見ました:

.hide {
  width: 0;
  height: 0;
  opacity: 0;
}

テンプレートと組み合わせて

<div [ngClass]="{ 'hide': hide }">
  <h2>SAMPLE</div>
  <button>Click me!</button>
</div>

それが要素を隠すけれども、それはまだそこにあります.上記のテクニックを持つhidden要素内のフォーカス可能な要素はまだ表示されません.それによって、我々はそれが見えることなくボタンを集中することができることを意味します.
この問題は簡単に解決できますngIf 新しいクラスを作成し、条件付きで要素に追加する代わりにディレクティブ.次のように使用できます.

<div *ngIf="!hide">
  <h2>SAMPLE</div>
  <button>Click me!</button>
</div>

私があなたに与えた支店のためにそれを解決する方法を疑問に思っている場合は、私はsolution of the first tip .

20.2 :セマンティックHTMLを使う
あなたが私の他のA 11 Y記事に続いていたならば、あなたはおそらくこれに気づいています、しかし、私はまだ誰にでも思い出させるようにしなければなりません.それで、HTMLは実際に私たちを大いに助けます.我々がセマンティックHTMLを使用するならば、ブラウザーはそれを適切に我々にあなたのためにそれをより簡単にするBOX機能から提供することができます.問題の例が欲しい場合はbranch with the second tip problem .
ローカルで実行すると、まったく同じように見えることに注意します.しかし、要素を介してタブを試してみると、ボタンがフォーカスできないことがわかります.これは以下のようにします.

<div tabindex="1">Im focusable</div>

しかし、ボタンもキーボードのサポートを提供し、キーボードを介して入力するか、またはスペースを入力して起動することができます.これは、Keyupイベントを待機するカスタムディレクティブを作成し、現在フォーカスしているボタンをアクティブにすることによっても実現できます.ご覧の通り、代わりにこれを行うことで簡単に多くの作業を行うことができます.

<button>Im focusable</button>

BOOM ---> We achieved the same with almost no code.

これが角で何を持っているか疑問に思っているならば、それは少なくとも直接的でありません.問題は、角を簡単にコンポーネントを作成することができますので、我々は我々自身のボタンのコンポーネントを構築すると思う傾向がある.私のアドバイスは、代わりにボタン要素を拡張することです.
場合は、どのように私はあなたに与えた支店のために解決するために疑問に思っている場合は、アクセスすることができますsolution of the second tip .

○○3:見出しは重要である
私もこの記事を作成しました.私がA 11 Yに私の旅行を始めたとき、私はスクリーンリーダーユーザーのためにどれくらい重要な見出しがあるかについてわかりました.あなたがこの話題についてもっと学ぶことに興味があるならば、あなたは私の記事を読むことができます.
見出しはこの点でボタンに似ています.カスタムコンポーネントを作成する方法を簡単にすると、代わりに見出し要素( h 1 , h 2 , ...)を使用することも考えられます.我々はスパンを作成し、いくつかのカスタムスタイルを与え、それをタイトルとして使用します.
このチップのシンプルさを考えると、すでにそれのための全体の記事がある、私は枝の作成をスキップつもりです.

φ4 :フォーカスフローは論理的でなければなりません
私はすべてのユーザーインターフェイスの開発プロセス中に私を助けるためにできるだけ多くのCSSを使用してのファンです.しかし、時々、それは少し危険でありえます;例えば、あなたが使うときflex そして、あなたはflex-direction: column-reverse or flex-direction: row-reverse , アイテムがCSSからレイアウトされている順序を変更することができるのは良いようです、しかし、それは信じられない弱さを持ちます.

What happens if the elements inside the flex layout contain focusable elements?

あなたがフォーカスが影響を受けると言うならば、あなたは全く正しいです.あなたが行動でそれを見たいならば、あなたはこれにアクセスすることができますbranch with the forth tip problem .
コードから、記事のフォーカス順序が反対方向にあることがわかります、今、それは右から左に行きます.それは明らかにユーザーの大多数のためにより難しくなっているので、我々はflex というわけではなく、型スクリプトを使用して、コンポーネント内でプログラムを順番に設定します.この方法では、フォーカスの順序を乱すことなく要素を配置するために角度のngforに頼ることができます.
あなたが私がそれによって何を意味するかについて疑問に思っているならばcommit diff of the forth tip solution 物事をクリアします.

あなたはCSSを信頼することができます
多分、最後の先端の後、あなたは少し懐疑的で、考えています.しかし、それはちょうどあなたに若干の意識を与えることでした.CSSは実際に非常に有用です.文字列をテンプレートの上部に表示したいとしましょう.あなたが経験豊かな角の開発者であるならば、あなたは言います
たとえそれが働くとしても、あなたが望むものでなく.画面の読者が大文字で文字列を見つけたとき、それはユーザにそれを呪文を付けますtext-transform: uppercase それは視覚的な目的のためだけに大文字になります.

結論
これはあなたがWCAG 2.1 AA準拠ではなく、私の最新研究に関する開発者にいくつかの洞察を与えるために読む楽しい記事であるためにしなければならないすべてのものの徹底的なリストではありません.このリストに追加するより多くのヒントを持っている場合は、ちょうどコメントを送信し、それを追加します.私たちは、角度の開発者として、私たちのアプリをよりアクセス可能なアウトを確保するためのヒントのリストを持つことができれば私は大好きです.
このドット社は、2つの支店を含むコンサルティング会社です.このドットメディアは、Webプラットフォームでの進歩と最新の開発者を維持するための責任部分です.このDOT研究室は、メンタリングやトレーニングなどのメソッドを使用してWebプラットフォームの専門知識チームを提供します.