私はこのリンクをボタンのように見せていますが、キーボードでタブナビゲーションをテストするときはいつでも、このリンクは決して使用できません。私のクリックをキーボードタブからアクセスできるようにする方法
どのようにしてADAに準拠させることができますか？また、キーボードからアリアにアクセスできるようにするにはどうすればよいですか？
<div class="styles">
<a class="btn btn-primary" (click)="handlingClick($event)" id="addUser">Add User</a>
</div>
tabindex属性を追加する必要があります。
<a class="btn btn-primary" (click)="handlingClick($event)" id="addUser" tabindex="0">Add User</a>
値0はそれをDOM要素の順序に基づいて、自然のタブインデックスを提供します。
はどこにでもtabindexを使用することに没頭していますか？私は、私はhtmlの変更を行う場合、私はtabindexカウントがすべて最新のものであることを確認する必要がありますように感じる。 – bluePearl
@bluePearl値0を使用すると、href属性を持つ場合と同じように、フォーカス可能になります。あなたは注文を指定していません - ブラウザがこれを行います。そう、いいえ、没落はありません。これはそれが完了した方法です。あなたが興味を持っている場合は、私の答えに追加した追加のドキュメントをチェックしてください。 – Tom
私はこれを試したとき - tabindex = 0を使用したときにリンクをナビゲートまたはクリック（入力）することができませんでしたが、フォーカスを得ていましたが機能しませんでした。 – bluePearl
アンカー要素はネイティブにフォーカス可能です。リンクがフォーカスを受け取らないのは、href属性がないためです。
この問題にアプローチする別の方法は、このように、href属性に存在しないURLのフラグメント識別子を追加することです：
<div class="styles">
<a class="btn btn-primary" href="#void" (click)="handlingClick($event)" id="addUser">Add User</a>
</div>
のhrefがないと、集中することはできません。代わりに 'button'を使用してください。 –
@GregMcMullen - それはうまくいった！ – bluePearl
@ GregMcMullenこれが私たちが "tabindex"属性を持っている理由です。値「0」は、DOM内の位置に基づいて論理タブ順序を与えます。ボタンに切り替える必要はありません。 – Tom