ヌーラボ‧ウェブサイト課の⼀年間の取り組みをふり返る

by 株式会社ヌーラボ

Slide 1

Slide 1 text

Slide 2

Slide 2 text

⾃⼰紹介 ● ウェブサイト課 ● マークアップ&フロントエンドエンジニア ● 最近京都から滋賀に引っ越しました楠欣士  (Yoshito Kusunoki)  

Slide 3

Slide 3 text

ヌーラボについて ● 「“このチームで⼀緒に仕事できてよかった”を世界中に⽣み出していく。」 ● チームで利⽤する業務コラボレーションツールを開発、提供 ● Backlog、Cacoo、Nulab Passという3つのサービス

Slide 4

Slide 4 text

今⽇の発表テーマヌーラボ‧ウェブサイト課の⼀年間の取り組みをふり返る

Slide 5

Slide 5 text

背景 ● アクセシビリティカンファレンス福岡2023でウェブサイト課の松永が登壇 ○ 「ヌーラボのウェブサイト課におけるアクセシビリティ関連の取り組み」 ● この登壇からちょうど⼀年経ったので、この⼀年間をふり返ってみたい

Slide 6

Slide 6 text

余談 ● 私のヌーラボ⼊社の⼤きなきっかけがこの昨年の発表 ● アクセシビリティは採⽤に効きます（N=1）

Slide 7

Slide 7 text

ウェブサイト課って？ ● ウェブサイトの開発、運⽤、保守（約20サイト） ● ミッションステートメントの1つ⽬に「すべての⼈に等しい情報を」を掲げてアクセシビリティに注⼒

Slide 8

Slide 8 text

ウェブサイト課って？ ● 昨年と⽐べ、新メンバーが3名増えて6名体制に ● 6名全員「アクセシビリティやっていき」

Slide 9

Slide 9 text

⼀年間の取り組みを⾒ていきましょう！

Slide 10

Slide 10 text

①ウェブサイトの改善

Slide 11

Slide 11 text

ウェブサイトの改善動き続けるロゴスライダーを廃⽌

Slide 12

Slide 12 text

ウェブサイトの改善フォームの必須を表す「＊」を「必須」に変更

Slide 13

Slide 13 text

ウェブサイトの改善リンク⽂⾔を「こちら」から具体的な内容に変更〇〇についての概要はこちらをご覧ください詳しくは〇〇の概要をご覧ください

Slide 14

Slide 14 text

ウェブサイトの改善他にも... ● pxでのサイズ指定をremに変更 ● フォーカスインジケータの可視化 ● モーダルの実装をdialog要素にアップデート ● axe DevToolsやHTMLバリデータの警告をひたすら解消

Slide 15

Slide 15 text

ウェブサイトの改善などなど...⼀年間で60件以上の改善すぐに着⼿できなくてもとりあえず課題を起票することを⼼がけています

Slide 16

Slide 16 text

②アクセシビリティレポート

Slide 17

Slide 17 text

アクセシビリティレポート ● ウェブサイトの改善内容を3ヶ⽉に⼀度ブログで公開 ● これまでに4回リリース

Slide 18

Slide 18 text

アクセシビリティレポート ● ヌーラボアクセシビリティレポート #1 ● ヌーラボアクセシビリティレポート #2 ● ヌーラボアクセシビリティレポート #3 ● ヌーラボアクセシビリティレポート #4

Slide 19

Slide 19 text

アクセシビリティレポート昨年のカンファレンスで「⼩さい単位でも改善に取り組んで発信してみよう」という話を聞いたことがきっかけささいなことでも、勇気を持って発信し続けます

Slide 20

Slide 20 text

③WCAGの読み合わせ会

Slide 21

Slide 21 text

WCAGの読み合わせ会 ● 昨年から続けてきた各社ガイドラインの読み合わせを無事完⾛ ○ freeeアクセシビリティー‧ガイドライン ○ Ameba Accessibility Guidelines ● 今年9⽉からいよいよWCAG2.1の読み合わせを開始

Slide 22

Slide 22 text

WCAGの読み合わせ会 ● ハードルを低く設定 ○ Aの基準のみに絞る ○ まずは⼀周することを⽬標に

Slide 23

Slide 23 text

WCAGの読み合わせ会 ● WCAGの「読み⽅」を勉強する会も事前に開催 ○ とっつきにくさを解消

Slide 24

Slide 24 text

WCAGの読み合わせ会とにかくハードルを下げて、多くの⼈が参加‧継続しやすいように参加者が増えてきている（開発エンジニアやUXライティングチーム）

Slide 25

Slide 25 text

④資格勉強

Slide 26

Slide 26 text

④アクセシビリティ関連の資格勉強 ● 毎週もくもく会を開催 ● DAA(Digital Accessibility Advisor) Basic 合格者2名 ● ⾊彩検定UC級結果待ち2名（保持者1名）

Slide 27

Slide 27 text

④アクセシビリティ関連の資格勉強体系的に学ぶ機会は意外と少ないので良いきっかけに勉強仲間が集まるとモチベーションアップに繋がります

Slide 28

Slide 28 text

⑤外部への発信活動

Slide 29

Slide 29 text

⑤外部への発信活動 ● イベント登壇 ● 会社ブログで記事を執筆

Slide 30

Slide 30 text

⑤外部への発信活動 ● LT「悪い実装例から学ぶウェブアクセシビリティ改善のヒント」 ● ブログ「私の、あなたの、全ての⼈のためのアクセシビリティ」

Slide 31

Slide 31 text

⑤外部への発信活動社外‧社内へ向けた「アクセシビリティやってるぞ」アピール外部からフィードバックをいただくことでより深い理解に

Slide 32

Slide 32 text

⑥社内での推進活動

Slide 33

Slide 33 text

⑥社内での推進活動 ● アクセシビリティについて話す会を⽉⼀で開催 ● WCAG読み合わせ会の主導 ● ライティングチームと代替テキストについてディスカッション

Slide 34

Slide 34 text

⑥社内での推進活動少しずつ着実に仲間を増やすことを⽬指しています

Slide 35

Slide 35 text

ふり返り

Slide 36

Slide 36 text

ふり返り ● 従来からの取り組みをコツコツ継続 ● 新たな取り組みも増やせている ● 仲間が少しずつ増えてきている

Slide 37

Slide 37 text

つぎはどうする

Slide 38

Slide 38 text

つぎはどうする ● 来年もこの場で⼀年間の報告をすることが第⼀⽬標 ● 明⽇の学びを糧に、次の打ち⼿を考える ○ もっと社内に広めていきたい ○ WCAG試験を実施したい ○ アクセシビリティ⽅針を公開したい