「目の不自由なユーザー向けのカスタムHTMLコントロールの可用性

この投稿の目的は、一方では、盲目のユーザーがどのように困難であり、アクセシビリティ要件を実装していないhtmlコントロールで作業することができないかを実証することであり、他方では、これらの要件を実装することは難しくないことを示すことです。



ここで、Habréには、サイトのアクセシビリティを実現する方法を説明する記事が既にありましたが、非ネイティブhtmlコントロールのアクセシビリティの問題は最も一般的な方法で対処されましたが、これがWebアクセシビリティに影響する主な要因であると確信しています。



ここでのカスタムまたは非ネイティブhtmlコントロールとは、たとえば、次のタイプの標準タグなどで表されないコントロールを意味します。

<button> </button>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、次のような適切なビジュアルデザインとイベントハンドラーで要素をブロックするだけです。

 <div class="button" onclick"..."> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この記事はアクセシビリティに関する包括的なガイドのふりをするものではなく、一般的な理解を提供し、独自のコントロールを使用する際にwai-ariaの推奨事項に従うことの重要性を伝えることのみを目的としています。



ブラウザ、IAccessible2、WindowsオートメーションなどでサポートされているアクセシビリティAPIの1つ（この場合はスクリーンリーダー）を通じて、処理中のドキュメント内のコントロールに関するすべての必要な情報が、存在する場合にのみ受信されます。



これは、次のようなネイティブ要素に当てはまります。

 <button> </button>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

または

 <input type=”checkbox”> </input>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

デフォルトでは、必要なすべてのロール、プロパティ、制御キーをサポートし、対応するロジックを実装します。



ただし、コントロールが適切な視覚的外観を持つ通常のdivで表される場合、スクリーンリーダー、つまりユーザーにとっては、単なるdivであり、それ以上のものではありません。



たとえば、次のスクリーンリーダーは、盲目のユーザーに標準のチェックボックス（「チェックボックスをオフにする」を選択）が表示された場合に通知します。つまり、要素の種類と状態を通知します。

 <div class=" checkbox on _settings_access " id=" settings_a11y" onclick="checkbox(this); Settings.accessCheck(isChecked(this));"> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

（実際のレイアウトフラグメントはvk.com設定ページにあります）、スクリーンリーダーは「アクセシビリティクリック可能」（つまり、情報なし）のように読み上げます。 盲目のユーザーは、要素の状態だけでなく、そのタイプも判断できません。 場合によっては、この要素は非常に不安定にアクティブになり、ユーザーは現在の状態を見つけることができないため、このオプションの使用は非常に困難になります。



これは、アクセシビリティ要件の非準拠がもたらすものです。 一方、これらの要件に従うことは非常に簡単です。 たとえば、この特定のケースでは、次の操作を行うだけで十分です-ロール属性に対応する値を割り当てます。

 <div class=" checkbox on _settings_access " id=" settings_a11y" onclick="checkbox(this); Settings.accessCheck(isChecked(this));" role="checkbox"> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、スクリーンリーダーは要素をチェックボックスとして認識します。



onclickイベントだけでなくonkeydownも処理して、ユーザーが「スペース」キーを使用してチェックボックスをアクティブにできるようにします

 <div onkeydown”toggleCheckbox(evend)”> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 Function toggleCheckbox(evend) { If (event.keyCode === 32){ … } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

aria-checkedプロパティを変更するロジックをjsイベント処理コードに追加します。 このようなもの：

 var state = node.getAttribute('aria-checked').toLowerCase() if (state === 'true') { node.setAttribute('aria-checked', 'true') } else { node.setAttribute('aria-checked', 'false') }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

それだけです。 レイアウトの小さな編集、数行のコード、および要素は完全にアクセス可能になります。 もちろん、他の要素については、たとえばラジオボタンなど、もう少しコードがあるかもしれません。なぜなら、 もう少しロジックを記述し、より多くのキーを処理する必要がありますが、いずれにしても最終的には非常に簡単です。



ページ： WAI-ARIAオーサリングプラクティスさまざまなコントロールの実装の多数の例が示されています。

まとめ

目の不自由なユーザーにとって最大の問題は、さまざまなコントロールにアクセスできないことです。 可能であれば、特別なhtmlタグを使用する必要があります。これらはデフォルトで使用可能であり、必要な最大値はaria-labelのインストールです。 ただし、これが不可能な場合は、 WAI-ARIA Authoring Practicesにアクセスして、このウィジェットまたはそのウィジェットの実装が推奨される方法を確認する価値があります。