2024年下半期のヌーラボにおけるアクセシビリティ向上の取り組みを振り返る

ヌーラボはアクセシビリティカンファレンス福岡2024におやつスポンサーとして参加します。この機会にヌーラボのアクセシビリティへの取り組みを知っていただくため、2024年下半期の活動をまとめてみました。

私たちが日々どのようにアクセシビリティに取り組んでいるのか、ちょっとだけのぞいてみませんか? イベントに参加される方もそうでない方も、ぜひチェックしてみてください!

月イチ開催!アクセシビリティを気軽に語る会

ヌーラボでは毎月「Accessibility Sharing Meeting」というミーティングを開催しています。日常生活や仕事の中で見つけたアクセシビリティの話題をカジュアルにシェアする場で、職種や部署を超えて誰でも参加できます。最新のWebアクセシビリティ事情からSNSで話題のニュースまで、リラックスして自由に話し合えるのが魅力です。

特によく話題に上がるのがゲームにまつわるアクセシビリティです。最近では、あるエンジニアが、人気ゲーム「ポケモン」の対戦画面を音声で読み上げるツールを開発したというトピックが話題になりました。他にも、カードゲーム「UNO」が色覚特性に配慮したデザイン変更をおこなったニュースなどが紹介されています。

さらに、生活の中の身近なトピックもよく取り上げられます。最近盛り上がったのはYouTuberとしても活動するヌーラバー・レオさんのエピソード。アップロードした動画の字幕を見たレオさんのお子さんが「これなら耳が聞こえない人でも楽しめるね」と話したことが印象的だったそうです。

もちろんWebサービスの会社らしく、Webアクセシビリティやユーザーインターフェースの話題も。あるメンバーが「このパーツのフォーカス順をどうするべきか悩んでいる」という話を持ちかけた際には、皆でアイデアを出し合いながら一緒に解決策を探す場面が見られました。

アクセシビリティの知識がなくても、気軽に参加できるこのミーティング。エンジニア、デザイナー、マーケター、ライター、テクニカルサポート、マネージャーなど、さまざまな職種のメンバーが集い、毎回新しい視点や発見が生まれています!

オンラインミーティング中の画面を撮影したスクリーンショット。7名の参加者と、ブラウザを開いた共有画面が写っており、画面全体に参加者の絵文字リアクションと紙吹雪のエフェクトが舞っている。Accessibility Sharing Meetingの様子

みんなで読めば怖くない!WCAG読み合わせ会

ヌーラボのウェブサイト課はWebアクセシビリティの基準に沿った開発を目指し、これまでfreeeアクセシビリティー・ガイドラインAmeba Accessibility Guidelinesの読み合わせをおこなってきました。そして今年9月からは、課を超えた有志メンバーによるWCAG 2.1の読み合わせ会が新たにスタートしました。

この読み合わせ会では、まず「A」の基準に焦点を当ててガイドラインを一通り読むことを目標にしています。WCAGは広範で複雑な文書ですが、最初から深く掘り下げるのではなく、全体像の把握から始めることで、誰でも参加しやすい内容となっています。

さらに「WCAGって難しそう…」と思っている方でも安心して参加できるよう、事前に「WCAGの読み方」を学ぶ勉強会を開催し、参加者の不安を解消しました。

読み合わせ会には、ウェブサイト課のメンバーだけでなく、サービスの開発エンジニア、ライティングチームなど、さまざまな職種の社員が参加して一緒に学び合っています。

WCAGの原則を説明したスライドの画像。中央に3つの数字が並び、そのうち一番左の数字が原則を表す、ということを説明している。WCAGの読み方を勉強する会で使用したスライド

毎週開催!「アクセシビリティ検定もくもく会」

アクセシビリティに関する資格取得を目指すための「もくもく会」を毎週開催。現在はデジタルアクセシビリティアドバイザー(DAA)認定試験色彩検定UC級を目指すメンバーが積極的に参加しています。

毎週30分間、自由参加のゆるやかな集まりですが、忙しいスケジュールの中でも無理なく参加して情報交換ができる!という点が好評です。

すでに参加者の中からDAA Basicの合格者が2名誕生。合格者が周りのメンバーをサポートする姿も目立っています。

ウェブサイトのアクセシビリティを日々向上

ヌーラボのウェブサイト課は「すべての人に等しい情報を」というミッションのもと、誰もが情報へアクセスできるウェブサイトを目指して、アクセシビリティの向上に取り組んでいます。

管理するサイト数が多く、改善点もたくさんありますが、できることからコツコツと改善を進めています。

最近の改善例

  • 自動再生する要素を廃止
  • 代替テキストを追加・更新
  • 英語のテキストにlang属性を付与

さらにウェブサイト課内だけでなく、マーケティングチームとの定例ミーティングでもしばしばアクセシビリティに関する議論が生まれています。

  • 伝わりやすいリンクテキストにしよう
  • 迷わないグローバルナビゲーションにしよう

など、マーケティングチームが追っている指標以外の観点からもウェブサイトを改善する動きが印象的です。

最新の取り組みは三ヶ月に一度の「アクセシビリティレポート」でも報告しているので、ぜひご覧ください!

登壇しました!失敗例から学ぶアクセシビリティ

福岡を拠点とする企業が集結するイベント「Design Dontaku vol.4」にて、ウェブサイト課の榎本(@uraranbon)が登壇しました。このイベントには、マネーフォワード、ふくおかフィナンシャルグループ、D-ZERO、ヌーラボの4社のエンジニア・デザイナーが参加。「アクセシビリティの実践と学び」というテーマで、各社の発表とパネルディスカッションをおこないました。

榎本の登壇テーマは「悪い実装例から学ぶ ウェブアクセシビリティ改善のヒント」。自身の失敗談をもとにしながら、代替テキストやフォーカスインジケータ、リンクテキストの重要性を語りました。

実体験に基づき具体的な実装例を交えた解説は「分かりやすい!」と参加者に好評で、洗練されたスライドも目を引きました。

登壇の様子を撮影した画像。スクリーンには「悪い実装例から学ぶ ウェブアクセシビリティ改善のヒント」という見出しのスライドが映し出されている。その隣で榎本が観客に向けて話をしている。
ウェブサイト課・榎本の登壇の様子

アクセシビリティ向上へ!Backlogの開発に新たな変化

Backlog開発チームでは、アクセシビリティ向上を目指して、開発フローの改善が進んでいます。

新機能の開発時にはデザイン段階からアクセシビリティが検討されることが増えてきました。フロントエンド実装においても、適切なマークアップをしたコンポーネントを作ってからロジック開発を進めることで、アクセシビリティを担保しつつ手戻りを減らすフローが実現しています。

既存機能の改修においてもアクセシビリティの視点が積極的に反映されており、最近ではチーム内から「マークアップとアクセシビリティのガイドラインを作成しよう」という声が上がっています。 ガイドラインの基本的な部分はすでに作成が進められており、議論の中では

  • 「キーボード操作ができることを標準にしよう」
  • 「バックエンド寄りのエンジニアでも対応できるように、シンプルで分かりやすい基準を設けよう」

といった意見も挙がりました。

コードレビューにもアクセシビリティの観点を加えて、チェック体制を強化しようとする動きが見られます。

今後も、すべてのユーザーにとって快適で使いやすいサービスを提供するため、Backlog開発チームは一歩一歩、改善を続けていきます。

代替テキストは奥が深い!ライティングチームのガイドライン

ヌーラボのライティングチームは、現在ライティングガイドラインの作成を進めており、その中には画像の代替テキストに関する項目も含まれています。

サービスのヘルプページを更新する際に「スクリーンショットにはどのような代替テキストを付けるべきか?」という問いが生まれました。これについてライティングチームとウェブサイト課がディスカッションをおこない、その議論の結果が現在のガイドラインに反映されています。

またディスカッションを通じて「代替テキストって想像以上に奥が深い」「もっとワイワイ話し合ってみたい」という声も挙がり、今後も代替テキストについて考えるミーティングが開催される予定です。

これからも、ヌーラボはアクセシビリティ向上に取り組みます。

これまでヌーラボは、サービスやウェブサイトのアクセシビリティの改善を積み重ねてきました。そしてこれからも「“このチームで一緒に仕事できてよかった”を世界中に生み出していく。」というメッセージのもと、誰もが等しく快適に情報にアクセスできるよう、アクセシビリティ向上の取り組みを推進していきます。

開発メンバー募集中

より良いチームワークを生み出す

チームの創造力を高めるコラボレーションツール

製品をみる