CloudwithChrisを作るもっとアクセス

この投稿は、2011年4月21日金曜日にFRIに掲載されましたcloudwithchris.com .
最近旅行してきた.私は最近、いくつかのアクセシビリティ問題に遭遇しましたcloudwithchris.com . 私は、サイトをよりアクセス可能にすることに取り組んでいました、そして、私はさらにそれをより包括的にすることに取り組んでいました.このブログ記事では、私の発見のいくつか、私が使用したツール、それらを特定するために使用したツール、およびそれらを修正するためにどのように働いたかを概説します.これは進行中のプロジェクトです、それで、それが意味をなすように、私は更なるポストを提供します.

どうやってここに

多様性と包含は私にとって重要なトピックです.あなたは、最近、ショーで機能を見ましたan excellent session from Melissa Jurkoic . 私も最近、本を読んでジョンDerr、どのようなOKRS(目標キー結果)を使用してビジョンを駆動し、共通の目標に向かってフォーカスを使用して話を読む.クリスとのクラウドに対する私の関心は今までの草の根と有機であり、うまくやった.しかし、私は今私がより意図的で、私がすることを目標にしたいステージでいます.
それに伴い、私はいくつかの目的を持っています.目的は目的です:クリスとクラウドはすべてのプラットフォームとして認識されます.はい、それは大胆です.はい、それは野心的です.私は、私は(これは非常に長いポストになる可能性がありますので、私は潜在的に別の1つにそれを破ることができるように)に取り組んでいる重要な結果のすべてに詳細に行くことはありませんが、我々はこれらの主要な結果のいずれかに焦点を当てるでしょう.重要な結果:クリスのテーマによるクラウドは、2021年9月末までに100 %アクセシビリティ基準に準拠するべきです.
それで、我々には視力があります、そして、我々は定量化されたゴールを持ちます.始めましょう.

どのように我々は現在の状態を見つけるのですか？

まず、サイト上のアクセシビリティの現状を理解する必要があります.これは私が過去に典型的に調査した領域ではありません.私は最近マイクロソフトのAccessibility Insights プロジェクト製品はいくつかの風味(Webのために、Windows用、Android用)になります.Webサイトについて話しているので、Web版(Chromeと新しいマイクロソフトEdgeの拡張機能として利用可能)を使用することを決めました.
一度インストールすると、アドレスバーの右上に新しいアイコンが表示されます.これをクリックすると、問題を検索するさまざまな方法の数が表示されます.私が言及したように、私はまだここで私の旅に行きます.しかし、私はFastPass functionality 最も一般的なアクセシビリティ問題のいくつかを見つけること.
このFastpass機能はあなたのサイトをスキャンします、そして、5分未満であなたのサイトに存在する一般的なアクセシビリティ問題のいくつかを特定します.幸いにも、私はクリスのテーマでクラウドを構築しました.他の誰かによって作られたテーマを使用しているならば、あなたはより少ない制御をするかもしれません(しかし、彼らがそれを許すならば、大きな貢献でありえました!)
だけでなく、FastPass機能リストのWebページとの問題は、それも、ウェブサイトの要素の周りにボックスを置くことによって、あなたのウェブサイト上でそれらを視覚化します.私の発見のいくつか-

色対比問題

スクリーンリーダーのアクセスができない

YouTubeの動画などの外部コンテンツは、アクセス可能な名前を持っていない

スクリーンリーダーにアクセスできないコードブロック

これらの問題は、accessibility insights page . これらの各々が別々のセクションで意味するものを壊しましょう.

色対比問題

なぜ、我々は気にかけるべきですか?ウェブは視覚的な媒体であり、色は重要です.私たちはよくブランディングの視点からそれについて考えます.しかし、ページ上のテキストが読みやすいことを確認することはさらに重要です.あなたは視覚障害、低視力、限られた色の知覚、または老眼症の人々は、Webページ上のテキストを読むことができる方法について考えたことがありますか?
フォアグラウンドの色と背景色の間に利用可能なコントラストの評価があります.小さなテキストでは、4.5 : 1のコントラスト比を探していますが、大きなテキストでは3 : 1のコントラスト比が必要です.私はそれにもっとたくさんあると確信しています、そして、私はここでものを単純化しています-しかし、これはコントラスト比で提供される情報の私の解釈でした.私は、ページのすべてのテキストのために4.5 : 1の比率を目指しました.
この情報は完全に上で文書化されますAccessibility Insights ウェブページ.
今では、質問を上げると、どのようにコントラスト比を評価するのですか?さらに重要なことは、コントラスト比を維持しながら、どのようにあなたのサイトのために働く色を見つけることができますか?これは少しトリッキーだったが、いくつかの掘りの後見つけたthis tool , これにより、RGBまたは16進数のいずれかに基づいて任意の前景と背景色のコントラスト比をテストすることができます.フォアグラウンドの色を変更するか、変更する背景色を指定するかどうかを指定できます.

私は様々なページを移動し、4.5 : 1の最小コントラスト比より低い色の組み合わせを捜しました.これは個々のコードの断片(コードブロックではない)を含んだ背景にピンクの色は、背景に十分なコントラストを持っていなかった.私は、私が現在これらのすべてを捕えたと思っています.

スクリーンリーダーのアクセスができない

いくつかのナビゲーションリンクのドロップダウン機能が含まれます.たとえば、“エピソード”ページには、過去または今後のエピソードの間を移動することができますドロップダウンメニューがあります.これらのリンクは、彼らがそうすることができたように、アクセシブでありませんでした.
なぜですか.さて、補助技術は、ページの特定の目的を特定するためにオブジェクト名と他のメタデータに頼ります.私のドロップダウンリンクのすべてはaria-labelledby これは、補助技術がドロップダウンメニューを正しく認識できなかったことを意味していました.
これは非常に小さなコードの変更、大きな影響を与えた.以下は例です
アンカータグにIDを使用すること、およびAntのLabelledbyを指定していないリストにnavbarDropdownMenuLink (ウェブサイト上のすべてのドロップダウンリスト全体で使用されました).

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
    Series
  </a>
  <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">                      
    {{ range $name, $taxonomy := .Site.Taxonomies.series }}
      {{ with site.GetPage (printf "/%s" ($name | urlize )) -}} 
        <li><a class="dropdown-item" href="{{ .Permalink | absURL }}">{{ .Title }}</a></li>
      {{ end }}
    {{ end }}
  </ul>
</li>

アンカータグにIDを使用し、そのメニューに固有の値を持つ順序なしリストにアリアラベルを使用します.私のシリーズドロップダウンのためにseriesNavbarDropdownMenuLink . 他のdropdownsは、例えば、別の名前を持ちます.episodeNavbarDropdownMenuLink .

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" id="seriesNavbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
    Series
  </a>             
  <ul class="dropdown-menu" aria-labelledby="seriesNavbarDropdownMenuLink">                
    {{ range $name, $taxonomy := .Site.Taxonomies.series }}
      {{ with site.GetPage (printf "/%s" ($name | urlize )) -}} 
        <li><a class="dropdown-item" href="{{ .Permalink | absURL }}">{{ .Title }}</a></li>
      {{ end }}
    {{ end }}
  </ul>
</li>

YouTubeの動画などの外部コンテンツは、アクセス可能な名前を持っていない

リンクの問題と同様に、私は私のサイトでは<iframe> YouTube動画を埋め込むタグ.これらのビデオは、補助技術のためにアクセスできませんでした.があるanother example フレームまたはiframeのために、そして、タイトル、ARIAラベルまたはアリアLabellebyの資産が加えられる必要があることを示します.
YouTubeの動画は、iframeを使用してウェブサイトに埋め込まれています.各々のエピソードのために、私はエピソードのYAML FrontMatter(例えばメタデータ)で、YouTubeビデオIDを保存します.これは、YouTubeのプロパティが存在し、エピソードが公開されている場合は、YouTubeのビデオをレンダリングするテーマのエピソードのレイアウトページで使用されます.
つまり、1つの場所で一つのフィックスを作ることができ、サイト上のすべてのエピソードに影響を及ぼします.それは再び単純な微調整だった.エピソードのタイトルのために変数を加えた後に、私はエピソードレイアウトでコードの1行を変えなければなりませんでした.

<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/{{ . }}" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

ないことに注意してくださいtitle iframeの上の属性?私はエピソードのYAML FrontMatterのその情報を持っています、それで、ちょうど以下のようにIFrameにそれを注入するために必要なだけです.

<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/{{ . }}" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen title="{{ $title }}"></iframe>

これは、再び大きな影響で、単純な修正プログラムでした.私はそれに満足している.

スクリーンリーダーにアクセスできないコードブロック

これは面白いものだった.私は自分のサイトのコードブロックを見てこの問題を考え始めました.私は、補助技術がコード・ブロックを読むことができないことに気づいていませんでした.私はすぐにこれは私のコントロールから少しかもしれないことを実現.コードブロックを使用する場合、3つのbackticksを追加する必要があります.

) before and after the code block. I also need to add a language attribute to the code block. This informs Hugo to render the code block as code.

So, the problem isn't with my website design at this point, but is in fact how Hugo generates codeblocks. From looking into the [accessibility insights explanation](https://accessibilityinsights.io/info-examples/web/scrollable-region-focusable/), it looked like a fairly simple fix (adding tabindex="0" to any generated codeblocks). While it's a simple fix, there is a problem. I don't know the Hugo codebase, so I'm not sure where the fix would be best applied.

As a good open source citizen, I felt it was my responsibility to at least raise this as a [GitHub issue](https://github.com/gohugoio/hugo/issues/8758) in the Hugo project. I'm pleased that within hours of it being raised, I was told that there is already an issue being tracked (my bad for not finding that one!). Not only an issue being tracked, but a Pull Request had been created by another community contributor to fix the problem. Going one step further, the maintainer of the project merged the request soon after the discussion on my issue took palce.

So, while I didn't directly write any code - I have helped contribute an accessibility fix to the Hugo project. Something I'm incredibly pleased of! I haven't seen a new version of Hugo since the PR was merged, but I've no doubt it will come very soon. I've said it many times before, and I'll say it again - Hugo has a brilliant community which supports it, and I'm very happy to be a part of it.

> Are you involved in Open Source? How often do you show your appreciation to others? You should! Even if you're not the one writing the code or part of the project maintenance team/leadership, [it's still important to show your support](https://github.com/gohugoio/hugo/pull/8568#issuecomment-880804128).

So, this fix is not yet live on the site. But, as soon as the new hugo version is available, I will be upgrading so that the code blocks are accessible.

## Conclusion

By no means am I the only one who has come across accessibility issues on the web. And I'm by no means finished with my accessibility journey. But I'm happy to say that I have addressed all of the issues I have come across, and I'm happy with the progress I have made. There is more to be done, and it's on all of us to make the web a better place.

Have you any suggestions for accessibility issues you have encountered on your site? Or have you come across any accessibility issues on the web? I'd love to know which part of this post you found most helpful. Please let me know over on [Twitter, @reddobowen](https://twitter.com/reddobowen).

Until the next time, thanks for reading and good luck with your accessibility journey!