発生するアクセシビリティの問題はすべて修正する用意があります。これらは Chrome に内蔵されている Lighthouse アudit によって発見されているのでしょうか、それとも別の方法でしょうか？
素晴らしい！
はい、Google Lighthouse の監査を使用しています。
「いいね！」 1
このトピックを独立させて、問題点をさらに掘り下げることにしましょう。まずは…
トピック一覧
コントラストは現時点では CSS で修正可能ですが、それ以外に 2 つの問題があります。
- 最初のリスト項目に関する問題は、監査ツールのバグか、あるいは監査ツールが当社のページのレンダリングをどのように解釈しているかという特殊な挙動によるものかもしれません。これらのリスト項目は確かに含まれています。
-
2 つ目の問題は「[aria-*] 属性に有効な値が設定されていない」です。これは特にカテゴリとタグのドロップダウンを指摘しています。問題の核心は
aria-haspopupのようです。こちらの例 Navigation Menu Button Example | APG | WAI | W3C に従うと、単にaria-haspopupとするのではなくaria-haspopup="true"とすべきです。真偽値
trueを文字列として渡していなかったようですが、こちらで修正しました: True should be a string to display properly in aria-haspopup · discourse/discourse@b848bd4 · GitHub
「いいね！」 7
トピック
1 つの問題（コントラストと前述の li の非問題を除く）
リンクに明確な名前がない
リンクテキスト（リンクとして使用される画像の代替テキストを含む）が明確で、一意であり、フォーカス可能であることは、スクリーンリーダーユーザーのナビゲーション体験を向上させます。詳細はこちら。
2 つの発生箇所：
-
各投稿に、寸法のない
a.tabLoc要素が割り当てられています。これらはキーボードでの投稿移動用と思われます。スクリーンリーダーには不要であるためaria-hidden: trueで非表示にされています。Hide empty anchor tag from screen readers · discourse/discourse@bdaf07a · GitHub -
トピックが個人メッセージであることを示すために使用される封筒アイコンは、PM 受信トレイへのリンクとしても機能しており、すべてのトピックに対してそのリンクを読み込んでいました… 個人メッセージでない場合でも。そのリンクを PM の場合に限定し、さらに title 属性と aria-label を追加しました。Don't load PM icon in title unless topic is a PM · discourse/discourse@1983f0d · GitHub および UX: Add title attribute and aria-label to PM icon link · discourse/discourse@aa71818 · GitHub
「いいね！」 6