[ 対応検討中 ] 【機能追加要望】Font Awesome のタグに aria-hidden=”true” が自動で追加されると嬉しい

[Chi-izu]

■ 期待する動作
お世話になっております。いつもLightningを活用させていただいてます。

現状と望むこと

Font Awesome で追加するアイコンのタグに、アクセシビリティ対応として、毎回手動で aria-hidden="true" を追加しています。

多いときは１ページで10箇所以上対応することもあり、何かしら、より簡単に追加できるような工夫ができないでしょうか。

既に aria-hidden=”true” を手動で追加しながら使用している人もいると思いますので、色々と処理が難しいのかもしれないですが、ご検討いただけると幸いです。

こんな機能だと嬉しいです

例えば下記のいずれか、

• Lightningの全体的な設定で「FontAwesomeの自動アクセシビリティに対応する」のチェックマークがあり、オンにすると自動で aria-hidden=”true” が入るようになる。注意書きで既に aria-hidden="true" を手入力している場合は削除が必要です、と案内するとか？（この機能が一番嬉しいです）
• アイコンのタグ指定入力部分に、チェックマークがついていて、チェックを入れると aria-hidden="true" が入るようになる
• アイコンのタグ指定入力部分の側に、コピペしやすいようにテキスト情報で aria-hidden="true" が置いてあり、追記推奨であると明記していただく

思いつくのが上記のような感じです。
無理な感じのことを書いていたら申し訳ないです。よろしくお願いいたします。

■ 自分で試した事
現状では、毎回全ての <i> タグに手動で aria-hidden=”true” を追記しています。

■ その他特記事項
参考情報として、
FontAwesomeの関連しそうなドキュメントはこの辺りです。
https://fontawesome.com/docs/web/dig-deeper/accessibility#when-is-auto-accessibility-available

[対馬 俊彦]

Font Awesome のアイコンすべてに aria-hidden を設定すればいいのであれば、
以下の JavaScript ファイルを子テーマに追加すればいけそうです。

jQuery(function($){

$("i[class^='fa']").attr('aria-hidden', 'true');

});

テーマやプラグイン側に実装するのが大変そうな気がして、
案のひとつとして書いてみました。

Font Awesome のサイトで aria-hidden のあり・なしを選べるのが理想のように思います。

• この返信は4ヶ月、 1週前に対馬 俊彦が編集しました。

[対馬 俊彦]

i タグって、いまアイコンでしか使わなくなっているので、
icon の i だと錯覚して昨日は安易なスクリプトを書きましたが、
italic の i でしたね。

昨日のスクリプトだと、

<p>FAX番号 <i class="fax">000-000-0000</i></p>

のFAX番号を読み上げてくれなくなってしまうので、
行が長くなってしまいますが、
以下のように Font Awesome のクラスを列挙する方がよさそうです。

jQuery(function($){

$("i:is(.fa, .fa-brands, .fa-duotone, .fa-light, .fa-regular, .fa-solid, .fa-thin, .fab, .fad, .fal, .far, .fas, .fat)").attr('aria-hidden', 'true');

});

[Chi-izu]

対馬様

ご丁寧な解説、コードのご提供、並びにフォロー情報も誠にありがとうございます。
ぜひ参考にさせていただき、更新担当者とアクセシビリティ担当者と確認させていただこうと思います。しばらくお時間いただきますが、検証でき次第ご報告させていただきます。本当にありがとうございます。

[Chi-izu]

対馬様
返信が遅くなっており、大変申し訳ありませんでした。
自前のプラグイン化し、運用してみましたところ、うまくできているようでございました。
複数名で運用してみておりますので、何かフィードバックがありましたら追記させていただこうと思います。
遅くなりましたがベストアンサーの指定をさせていただきました。
この度は誠にありがとうございました！

[石川＠Vektor,Inc.]

ご意見ありがとうございます。今後の検討課題とさせていただきます。

[Chi-izu]

石川様

ご検討いただけるとのこと、誠にありがとうございます！
FontAwesomeもアクセシビリティ対応推奨していると思いますので、Lightning利用の皆さんにも活用できると良いのではと思った次第でした。
ひとまず自前の案件については、対馬様よりいただいたコードで対応していきますね。

何卒、よろしくお願いいたします。

[投稿者]

投稿