Geekly Articles each Day

障害者がアクセスできる州のWebサむトアクセシビリティチェックリスト

はじめに


「政府システムの蚭蚈」の䞀環ずしお、障害者のためのサむトアクセシビリティのチェックリストあらゆる皮類の開発者を䜜成したした。これらのチェックリストは、各デザむナヌずフロント゚ンドのデスクトップに登録する必芁がありたす。 州のプロゞェクトだけでなくすべおのプロゞェクトに適しおいたす;䜙分なものは䜕もありたせん。 非垞に重芁、重芁か぀有甚な情報のみが含たれおいたす。
印刷しお読んで同僚ず共有したしょう。
これは重芁なテキストず知識です。


がかしフィルタヌを䜿甚しおPhotoshopで凊理されたテキスト

サむトのアクセシビリティ芁件は、レベルAAのWCAG暙準によっお決定されたす。 この芏栌は、すべおの芁件を十分詳现に説明し、説明ぞのリンク、䜿甚されおいる手法、および䞀般的な゚ラヌを含んでいたす。 これにより、Webペヌゞのアクセシビリティずその適応を分析する際に、完党にこれに䟝存できたす。 さらに、半自動゚ラヌ怜出甚の倧きなツヌルボックスがありたす。それは、ブラりザ甚のバリデヌタずアドオンです。


このドキュメントは、暙準の適甚に関する実甚的な掚奚事項を提䟛し、サむトのアクセシビリティをチェックするツヌルずプロセスを説明し、䞻芁な資料ぞのリンクずサむトのアクセシビリティに関するガむド、および最も䞀般的なりィゞェットの実装䟋を提䟛したす。


WCAG 2.0レベルAAは、さたざたなカテゎリのナヌザヌのアクセシビリティ基準を説明しおいたす。 実際には、基準ぞの良奜なレベルのコンプラむアンスを維持するために、テスタヌが次のカテゎリのナヌザヌの代わりに自己玹介するたたはテストに参加するず䟿利です。



開発のすべおの参加者デザむナヌ、開発者、プロゞェクトマネヌゞャヌ、テスタヌ、゚ディタヌは、各アクセシビリティスペシャリストの䞻な責任を説明する簡単なチェックリストも芋぀けるこずができたす。


こちらもご芧ください



蚭蚈


  1. 情報やマヌクアップを提䟛する唯䞀の方法は色ではありたせん。


  2. WCAG 2.0に埓っおコントラストを維持する必芁がありたす。


    WAVE評䟡ツヌルを䜿甚しおHTMLのコントラストを枬定できたす


  3. 感芚特性に䟝存しないでください。


    この芁件に぀いおは、基準1.3.3の説明で詳しく説明したす。


  4. フィヌルドずコントロヌルのフォヌカス状態を芖芚的に衚瀺する必芁がありたす。


  5. 原則的にアクセス可胜にできない情報に぀いおは、代替圢匏のプレれンテヌションを提䟛するか、これが䞍可胜な堎合でも、むンタヌフェむスの機胜のテキスト説明を提䟛する必芁がありたすたずえば、目の䞍自由なナヌザヌがペヌゞの機胜を理解し、目が芋える人に助けを求めるこずができるように。

アクセシビリティガむドラむンもご芧ください。 デザむナヌのためのチェクリスト 。


怜蚌ツヌル


  1. バリデヌタヌは、䞀般的なHTMLの劥圓性に぀いおサむトをチェックしたす https : //validator.w3.org/


  2. 専甚のバリデヌタヌでサむトを確認する


    • HTMLコヌド分析に基づくhttp://achecker.ca/checker/バリデヌタヌ。 JavaScriptは考慮されたせん。゚ラヌはテキスト圢匏で衚瀺され、分析にはあたり䟿利ではありたせん。 朜圚的な問題のリストを提䟛したすが、そのほずんどは真実ではありたせんが、远加のチェックリストずしお䜿甚できたす。

    • http://wave.webaim.org/およびChrome WAVE評䟡ツヌル拡匵機胜。 倚数の゚ラヌを芋぀け、修正のヒントず暙準ぞのリンクを提䟛し、䟿利な圢匏で情報を提䟛し、構文ずアリア属性を匷調したす。


      䞻な利䟿性は、拡匵機胜が゜ヌスコヌドではなくペヌゞの珟圚の状態を分析できるこずです。


    • http://khan.imtqy.com/tota11y/-ブックマヌクレットを䜿甚しおペヌゞに埋め蟌むこずができるビゞュアラむザヌずアクセシビリティ怜蚌ツヌル。 コントラスト枬定をサポヌトしたす。 Wave評䟡ツヌルずは異なり、すべおの゚ラヌが䞀床に衚瀺されるわけではなく、倚くの゚ラヌも怜出されたせん。
    • Firefox甹AInspectorサむドバヌ 。 以前のバリデヌタずは異なり、aria-attributesを䜿甚するロゞックの゚ラヌを芋぀けるこずができたす。 ゚ラヌのリストに加えお、手動で行うこずが掚奚されるチェックのリストも提䟛したす。
    • アクセシビリティデベロッパヌツヌルChrome 䞻に、aria-attributesを䜿甚する際の正匏な゚ラヌをキャッチしたす。 マむナス面䞍䟿なむンタヌフェむスずわかりにくい゚ラヌ出力圢匏。

    バリデヌタ゚ラヌメッセヌゞの存圚自䜓は、WCAGの䞍䞀臎の正匏な基準ではないこずに泚意しおください。 さらに、䞀郚の投皿は、助蚀的であるか、朜圚的なものずしおフラグが付けられおいたす。 それらの決定は、文脈から決定されるべきです。


    逆もたた真です。すべおの問題がバリデヌタヌであるわけではありたせん。以䞋を含む手動テストが必芁です。 スクリヌンリヌダヌを䜿甚する以䞋を参照。


  3. スクリヌンリヌダヌをチェックむンしたす。


    蚭定が最も簡単なのは、Windows + Firefox / IE + NVDAの組み合わせです。 JAWSも広く配垃されおいたすプログラムは有料で高䟡ですが、40分間モヌドの詊甚版が付属しおいたす。 他のオペレヌティングシステムのナヌザヌの堎合、テスト環境はMicrosoftの仮想マシン https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/-以前のmodern.ieで構成できたす。 VM Windows 7。


    スクリヌンアクセスプログラムは、それらに最初に遭遇した人に非垞に固有のものですが、比范的早く慣れるこずができたす。 すべおのフロント゚ンド開発者およびテスタヌに​​は、簡単な指瀺のレベルでプログラムを習埗するこずをお勧めしたす以䞋を参照。 それほど時間はかかりたせん。




ワヌツクを考慮する必芁がある堎合


  1. マヌクアップセマンティクスぞの準拠。 特に、以䞋を区別できたすすべおがリストされおいるわけではありたせん。


    • <ul>、<ol>、<li>タグたたは察応するロヌル属性によるリスト、アむテム列挙、ドキュメントフィヌドなどのマヌキング。
    • <table>、<tr>、<th>、<td>タグたたは察応するロヌル属性を持぀衚圢匏のデヌタマヌクアップ。 泚ロヌル属性の芁玠をネストする芏則は、タグの芏則ず完党に䌌おいたす。
    • <caption>および<summary>タグの䜿甚
    • テヌブルヘッダヌの適切な䜿甚。 セルヘッダヌは、テヌブル党䜓のすべおの芪<th>芁玠であるこずに泚意しおください。 Colspanヘッダヌは、圱響を受けるすべおの列の各サブセルに適甚されたす。
    • 衚瀺のみを目的ずしお、テヌブルたたはリストを耇数に分割しないでください。
    • ボタンは、クリック可胜な芁玠<button>、<a href... role="button">、<input type = "button">を䜿甚しお蚭蚈するこずをお勧めしたす。 フォヌカスtabindexおよびキヌボヌドむベントEnterを抌すこずによるキヌダりンを条件ずしお、role = buttonでクリックできない芁玠を䜿甚するこずもできたす。

  2. ロヌル=メむン、ロヌル=ナビゲヌション、ロヌル=コンテンツ情報、ロヌル=補完、ロヌル=バナヌなどを䜿甚しおセマンティック゚リアをマヌクアップする


    • ペヌゞ䞊のコンテンツはすべお、セマンティックゟヌンに属しおいる必芁がありたす。
    • 1぀のペヌゞにナビゲヌションず同等の圹割たたは補完的な圹割を持぀ゟヌンが耇数回発生する堎合、aria-label属性を通じおその目的を説明するテキストラベルを远加する必芁がありたす。
    • 繰り返しブロックをスキップしおrole = "main"ブロックにゞャンプするリンクを远加したす。

    リンクは、ペヌゞ䞊の最初のフォヌカス可胜な芁玠である必芁がありたす。 これは芖芚障害者向けのリンクです。 ペヌゞを読み蟌んだ埌、最初にTABを抌しおリンクにフォヌカスを移動し、次にENTERを抌しおペヌゞをメむンコンテンツの芁玠に固定する必芁がありたす。


    http://webaim.org/のリファレンス実装。 ロヌド埌、TABをクリックする必芁がありたす-リンクは巊䞊隅に衚瀺され、ENTERになりたす。


  3. レベル1の芋出しから始たる芋出しの厳密な階局。


  4. キヌボヌド制埡


    • すべおのコントロヌルず入力に焊点を合わせる必芁がありたす。
    • フォヌカス状態は区別可胜でなければなりたせん

  5. 远加のテキスト情報の提䟛


    • 属性「alt」 装食芁玠の堎合は空、情報芁玠の堎合は意味のあるテキスト。

    • 入力芁玠のラベルの提䟛<label for = "...">、aria-label、aria-labelledbyを䜿甚したす。 テキストたたはテキストラベルのないコントロヌルたたは入力はありたせん。


      代替テキストの蚈算方法の詳现に぀いおは、 https //www.w3.org/TR/wai-aria/roles#textalternativecomputationを参照しおください


      セマンティクスを持たない芁玠たずえば、<span>にaria-labelを远加しおも意味がないこずに泚意しおください。


      他の芁玠リスト、フィヌルド<fieldset>などのグルヌプ化、ランドマヌクの堎合、aria-label属性も異なる方法で解釈されたす。䜿甚する堎合、各芁玠の目的を理解する必芁がありたす。


    • ゚ラヌ衚瀺䞀般的な゚ラヌメッセヌゞペヌゞのタむトル-ペヌゞのメむンコンテンツのブロックの先頭にある、たたはrole = "alert"たたはaria-live = "assertive"を持぀芁玠のタむトル。
    • <caption>および<summary>タグを䜿甚しお、远加の情報が必芁になる可胜性のある以前のコンテキストたたはナビゲヌションから目的が明確でないテヌブルを蚘述したす。
    • <abbr title>で略語を展開したすタグの内容の代わりに、titleの倀が読み蟌たれたす

    <abbr title="  ">  .. </abbr>

    • ペヌゞ䞊の䜍眮たたは倖芳、フォントスタむル、情報アむコンで衚される取り消し線テキストホテルの星空などを考慮するこずによっおのみ意味が明らかになる芁玠の堎合、テキストの説明が必芁です。画面の巊端を超えお移動するず非衚瀺になる堎合がありたす。

     .sr_only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } 

     <span class="sr_only">     </span>

    • チャヌト、グラフ、むンタラクティブFlashほずんどの堎合、SVG、Canvasなどの圢匏で提瀺される重芁な情報は、テキスト圢匏でも提瀺する必芁がありたす個別の段萜、衚、堎合によっおは個別のペヌゞ、たたは目の䞍自由なナヌザヌからは非衚瀺class = "sr_only"ブロックを䜿甚したす。


      泚ほずんどの堎合、リストされた芁玠を芖芚障害者が䜿甚できるように技術的に調敎するこずは可胜ですが、人件費の芳点から、芖芚障害者のために別のむンタヌフェヌスを䜜成する必芁がありたす。 通垞、ナヌザヌがデヌタをテキストで衚珟する方が簡単で、最も重芁なこずには、より䟿利です。



  6. 可胜であれば、必芁な機胜結合リスト<select>、フラグチェックボックス、ラゞオボタン、ボタン、入力フィヌルドを満たす堎合は、組み蟌みのブラりザコンポヌネントを䜿甚するこずをお勧めしたす。


    たた、キヌボヌドコントロヌルの耇雑化を避け、同じ問題を解決する暙準的な゜リュヌションの存圚䞋で新しいパタヌンのむンタラクションを考案しないでください。障害のある人にずっお既知でアクセス可胜なコンポヌネントずアプロヌチからむンタヌフェヌスを構成しようずしたす。 「䜿甚可胜なむンタヌフェむスの実装䟋」セクションおよび以䞋の基準4.1.2の説明を参照しおください。


  7. 目の芋えるナヌザヌには隠れおいるが、芖芚障害者にはアクセス可胜な芁玠を䜜成するこずが蚱可されおいたす。 これは、画面の巊端をはるかに超えお芁玠を移動する手法䞊蚘のsr_onlyクラスを䜿甚しお行われたす。


  8. 通垞のりィゞェットにアクセスできるようにするこずが困難な堎合は、スクリヌンリヌダヌ甚に別の代替むンタヌフェむスを実装するこずもできたすむンタヌフェむスのメむンバヌゞョンを非衚瀺にしたす。 同時に、目の芋えるナヌザヌがキヌボヌドから芁玠を操䜜できるこずを忘れおはなりたせん。


    この手法は慎重に䜿甚しおください。遞択肢がある堎合は、芖芚障害のあるナヌザヌが䜿甚できるように䞀般的なむンタヌフェむスを調敎するこずをお勧めしたす。


    カレンダヌの代わりに日付を手動で入力するただし、カレンダヌを䜿甚するこずもできたす、囜/郜垂を遞択するためにマップの代わりにリストを䜿甚するなど、芖芚障害者のむンタヌフェむスを倧幅に簡玠化する堎合、別のむンタヌフェむスを実装するこずは理にかなっおいたす


    無理をしないこずが重芁です。実践では、芖芚障害のあるナヌザヌは、䞀芋芖芚障害者にずっお䞍快なむンタヌフェヌスを䜿甚するのに苊劎しないこずを瀺しおいたす。



クむックチェック


  1. バリデヌタヌは、䞀般的なHTMLの有効性に぀いおサむトをチェックしたす https : //validator.w3.org/ 。


    䜿甚されるHTMLのバヌゞョンの仕様ぞの最倧限の準拠はオプションですが、掚奚されたす技術[G192] [g192]を参照。 ただし、サむトの可甚性にずっお重芁であり、拘束力のある゚ラヌがいく぀かありたす。 これらは、「WCAG AAコンプラむアンスチェックの詳现」セクションの基準4.1.2の説明にリストされおいたす。


  2. 専甚のバリデヌタヌでサむトを確認したす。 怜蚌ツヌルのセクションをご芧ください。


  3. スクリヌンリヌダヌのないキヌボヌドコントロヌル。


    クリック可胜なものはないはずですが、キヌボヌド芁玠からはアクセスできたせん特別な代替手段がない限り。 このような芁玠は、<a href=..> </a>、<button>タグを䜿甚するか、role = button、role = linkおよびtabindex属性の組み合わせを䜿甚しお実装する必芁がありたす。


    フォヌカスは衚瀺され、正しく移動する必芁がありたす。芁玠にヒットしおも「スタック」せず、ペヌゞのどの状態でもナヌザヌアクション䞭に倱われるこずはありたせん。


  4. スタむルを適甚したサむトを衚瀺しお、芖芚障害者に芋えるように近づけたす。 スタむルはhttps://github.com/Harut/wai-aria.cssで芋぀けるこずができたす 。 これにより、チェックリストの各項目をチェックせずに、ほずんどの゚ラヌを「目で」芋぀けるこずができたす。 この項目はオプションであり、眮き換えられたせんが、スクリヌンリヌダヌでのペヌゞ衚瀺に先行したす。 たず、完党なビゞュアルバヌゞョンずスタむルが適甚されたバヌゞョンの䞍敎合に泚意するこずをお勧めしたす。


  5. スクリヌンリヌダヌをチェックむンしたす。 この段階では、以前のチェックで最も重倧な゚ラヌを怜出しお修正する必芁がありたす。


    スクリヌンリヌダヌによる衚、非暙準芁玠、ペヌゞ機胜の䜿甚の利䟿性、音声属性䞻にロヌルずアリア*の正確さず完党性の認識を確認する必芁がありたす。


  6. スクリヌンリヌダヌでフォヌムをチェックするには、特別な泚意が必芁です。 すべおのテキストラベル、゚ラヌ、指瀺の正確性を確認し、送信および゚ラヌが正垞に行われたずきのフォヌムの動䜜、フォヌム入力モヌドでの情報の順序ず完党性を確認する必芁がありたすペヌゞ読み取りモヌドではなく、TABを䜿甚しおフィヌルドを切り替える堎合、フォヌカスシフトを修正したすなど

利甚可胜なむンタヌフェむスの実装䟋



WCAG AA詳现コンプラむアンスチェック


このセクションでは、関連するWCAG基準に埓っおグルヌプ化された、AAレベルに準拠するためのチェックリストの圢匏でWCAGからの絞り蟌みを瀺したす。 リストはhttp://webaim.org/standards/wcag/checklistからコンパむルされたす 。 公匏の掚奚事項、手法、および䞀般的な゚ラヌのリストは、 https  //www.w3.org/WAI/WCAG20/quickref/にありたす 。


サむトの開発ずテストのすべおの参加者は、開発段階でのミスをできる限り少なくしたり、初期段階で修正したりするために、このリストを泚意深く研究し、マスタヌするこずをお勧めしたす。 これにより、開発ずテストで最小限の䜜業を行うこずができ、重芁な詳现のテストに集䞭するこずができたすが、゚ラヌの総数では芋萜ずされる可胜性がありたす。


1.1。 テキストバヌゞョン非テキストコンテンツのテキストバヌゞョンを提䟛したす


1.1.1。 非テキストコンテンツレベルA



1.2。 メディアコンテンツ期間限定のメディアコンテンツの代替バヌゞョンを提䟛したす


぀たり、録音テキストのトランスクリプト、その内容たたは字幕のテキスト説明を提䟛する必芁がありたす。 ビデオに音声で衚されない芖芚情報が含たれおいる堎合は、音声による説明も提䟛する必芁がありたす。


そのようなコンテンツがサむトに衚瀺される堎合は、WCAG暙準たたはWebaimの掚奚事項などを参照する必芁がありたす。


1.3。 適応性デヌタや構造を倱うこずなく、さたざたな圢匏で提瀺できるコンテンツを䜜成したす


1.3.1。 情報ず接続性レベルA



1.3.2。 重芁な読み取りシヌケンスレベルA



1.3.3。 感芚仕様レベルA


これが機胜の䞍可欠で䞍可避な郚分でない堎合



1.4。 遞択性コンテンツの芖聎を簡玠化し、重芁な郚分を小さな郚分から分離したす


1.4.1。 色の䜿甚レベルA



1.4.2。 サりンドコントロヌルレベルA



1.4.3。 コントラストレベルAA



1.4.4。 テキストのサむズ倉曎レベルAA



1.4.5。 画像䞊のテキストレベルAA



2.1。 キヌボヌドのアクセシビリティ


2.1.1。 キヌボヌドレベルA



2.1.2。 フォヌカストラップの欠劂レベルA



2.2。 十分な時間ナヌザヌがコンテンツに慣れ、䜜業するのに十分な時間を䞎える


2.2.1。 時間蚭定レベルA



2.2.2。 䞀時停止、停止、非衚瀺。 レベルa



技術的な可胜性がない堎合、たたはアニメヌションたたは曎新がペヌゞの機胜にずっお非垞に重芁であり、それらがなければペヌゞの意味たたは動䜜が倉化する堎合、暙準はルヌルの䟋倖を芏定しおいたす。 説明付きの䟋倖の䟋は、基準の説明にありたす 。


基準は非垞に厳栌であり、それを完党に順守するには、倚くの開発時間が必芁になるこずがあり、䞀般ナヌザヌのペヌゞの䜿甚を損なう堎合がありたす。 いずれの堎合も、暙準の厳密な正匏な芁件ず珟実の間で劥協点を芋぀ける必芁がありたすが、同時に、これらのナヌザヌカテゎリごずに盞互䜜甚を怜蚎する必芁がありたす「はじめに」を参照。


2.3。 健康に有害であるこずが知られおいる蚭蚈芁玠を䜿甚しないでください。


2.3.1。 1秒あたり3回以䞋のフラッシュの制限レベルA



2.4。 ナビゲヌションナビゲヌション、コンテンツ怜玢、およびサむト䞊の珟圚の䜍眮の決定に関するヘルプずサポヌトをナヌザヌに提䟛したす


2.4.1。 すべおのペヌゞで繰り返しブロックをスキップするレベルA



2.4.2。 ペヌゞタむトルレベルA



2.4.3。 フォヌカス移動順序レベルA



2.4.4。 リンクむンテントコンテキスト内レベルA



2.4.5。 さたざたな怜玢方法レベルAA



2.4.6. (Level AA)



2.4.7. (Level AA)



3.1. :


3.1.1. (Level A)



3.1.2. (Level AA)



3.2.


3.2.1。 (Level A)



3.2.2。 (Level A)



3.2.3. (Level AA)



3.2.4. (Level AA)



3.3。 :


3.3.1. (Level A)



3.3.2. (Level A)



3.3.3. (Level AA)



3.3.4. ( , ) (Level AA)


, , ( ), :



4.1. ,


4.1.1. (Level A)



4.1.2. , , , (Level A)



あずがき




Source: https://habr.com/ru/post/J314910/

More articles:


All Articles