Helpfeelのアクセシビリティ改善ニュース 2023年7・8月号

id:Pasta-K です。Helpfeel社内全体でのアクセシビリティ改善への取り組みについて定期的にお知らせする「Helpfeelのアクセシビリティ改善ニュース」、早速先月はお休みしてしまいましたが、今月まとめてお届けしようと思います。

というわけで、2023年7月・8月のアクセシビリティ改善に関するトピックスを紹介します!

プロダクトのアクセシビリティ改善情報

Gyazo

代替テキスト入力に対応

Gyazoにアップロードした画像に代替テキストを設定するできるようになりました。また、Gyazo ProおよびGyazo Teamsをお使いの場合、生成AIによって代替テキストの執筆を支援する機能の提供も開始しました。

この機能によって設定される代替テキストは共有メニューでのMarkdownやHTML断片のコピー時に含まれる他、外部サービス向けに提供しているoEmbedにも含まれています。対応状況はサービスにより異なります。サービス運用者の方で対応したい場合は type: "photo"のときの titleキーの値を<img>alt属性に設定してください。

また、X( Twitter )連携による投稿機能を利用する際にも画像に代替テキストとして自動で設定されます。

その他

  • シェアメニュー内のショートカットキー表示部分のフォントサイズを大きくしました

Scrapbox

Gyazo上の画像利用時に代替テキストをサポート

前述のGyazoの代替テキスト入力への対応に追随して、ScrapboxGyazo上の画像を利用する際に、代替テキストを取得して設定が反映されるようになりました。

イコン画像の読み込み中に代替テキストを表示

主に低速回線環境でアイコン画像が完全に読み込まれるまでの間に、アイコンの元ページ名が表示されるようになりました。

イコン画像が完全に読み込まれるまでの間は元のページ名が並んで表示される様子

その他

  • ドロップダウンメニューのタッチ操作時のメニュー表示サイズを改善しました

Helpfeel

ランディングページのアクセシビリティの改善

  • プロダクトのランディングページの最新情報部分の文字色をオレンジから青へ変更しました。
  • ルーセルが自動再生せずに止まるようになりました。
  • コンテンツ更新の際に、代替テキストの設定を徹底していくようにマーケティング部内で改めて周知を実施しました。また、過去に公開したコンテンツについても随時代替テキストの設定を行っています。
  • ヘッダーメニューの要素の一部にTabキーなどによるフォーカス遷移が出来ないものがあったのを修正しました。

一番左のHelpfeelロゴが0番目、右に線が伸び、「ソリューション」「顧客事例」「セミナー」をとばして、「機能アップデート情報」が1番目、そこからさらに右に線が伸び、「お問い合わせ」が2番目、その右の「お役立ち資料」が3番目、そこからさらに画像外の左下に線が伸びている
taba11yを利用したTabキーによるフォーカス遷移の可視化の修正前の様子

一番左のHelpfeelロゴが0番目そこから順番に右に線が伸び、「ソリューション」が1番目、「顧客事例」が2番目、「セミナー」が3番目、「機能アップデート情報」が4番目、「お役立ち資料」が5番目、「お問い合わせ」が6番目、一番右の「サービス資料」が7番目、そこからさらに画像外の左下に線が伸びている
taba11yを利用したTabキーによるフォーカス遷移の可視化の修正後の様子

その他のアクセシビリティに関する取り組み

アクセシビリティカンファレンス福岡にゴールドスポンサーとして開催を支援しています

アクセシビリティカンファレンス福岡の開催をゴールドスポンサーとして支援しています。id:Pasta-K をはじめ、社内のメンバーも参加予定なので会場で是非皆さんとお会いできるのを楽しみにしています!