カラーモード

accrefsの公開に寄せて

Advent Calendar
accessibility

乙です。越智です。

Web アクセシビリティ Advent Calendar 2020 の 8 日目です。

accrefs というウェブアクセシビリティ関連のまとめサイトを公開して一年とちょっとが過ぎました。

https://accrefs.jp

このサイトはもともと、株式会社 freee の UX デザイナーである伊原力也氏（magi1125）と有志が Google ドキュメントでまとめていたものを、「ウェブにあるというだけで圧倒的にアクセシブル」の理念の下に、ウェブサイト化したものです。

僕は accrefs のリポジトリを立て、プロトタイプをコミットした経緯から、リポジトリのアドミンとしてレビューとコミットをしています。

このサイトを構築した時の話を記録しておきたいと思い、このエントリを書きました。

構成はシンプルに

どんな構成になっているかは実際にサイトを見ていただければと思います。大変お手数ですがご確認のほどよろしくお願いいたします。

accrefs のコンテンツはすでに Google ドキュメントに揃っていましたが、ウェブサイト化するにはウェブサイトたる仕様が必要になります。accrefs は誰か個人のパッションを綴ったブログでもないし、踊ってみた動画を羅列するウェブサイトでもありません。ウェブでアクセシビリティを何らかしたい人が訪れ、ここをハブにするウェブサイトです。そのため、accrefs 自身は無味無臭にならなくてはいけないと思いました。

とにかく見てすぐわかることが大事だと思ったので、できるだけ簡素な構造になるよう、magi1125 とワイヤーを議論しました。ちょっと説明口調だと長くなるので箇条書きにします。

というような流れがあって、現状の構成になりました。必要なテンプレートは２画面。表示する情報に差をつける意味がないので、記事ごとの個別ページは持たずにタグトップに全部表示するスタイルでやってます。

この手のサイトはコンテンツ量が膨大になりますから、それを小綺麗に整理しようとすると階層も深くなりがちです。accrefs ではそうならないように設計しました。

コントリビュートはいつでも誰でも

accrefs は作って終わりのアーカイブではなく、生きたリファレンスサイトであるべきと考えています。ウェブアクセシビリティは UA と支援技術の進化によって課題が変わっていきます。載っている情報が古くて参考にならないとなっては意味がありません。

元のドキュメントが１人の力で作られたものではなかったので、更新も複数人の力でされなくてはならないと思い、誰もが更新できることを目指しました。同時に、更新する手段が複数あることも目指しました。

編集は管理者の知り合いによるものだけでなく、第三者からも受け付けたかったので、GitHub にリポジトリを置き、OSS 的に公開することにしました。

編集する入り口が多ければ多いほど、accrefs はまとめサイトとして、常に新鮮さと確かさを保てると考えました。しかし、GitHub を利用できるのはウェブ制作に携わる人の中でもエンジニアに寄っていますから、別口として Google フォームと、Slack チームへの動線も用意しました。

ウェブアクセシビリティを広める側にある accrefs には、それ自体にも高いアクセシビリティが備わっていなくてはなりません。それは閲覧時だけでなく、この取り組みに参加するときにも提供されるべきです。現在、下記の４つの方法でコントリビュートできるようになっています。

コントリビュートの選択肢が多ければ多いほど、アクセシビリティ推進活動がアクセシブルになり、結果として世の中のウェブサイトがどんどんアクセシブルになるという算段です。

開発環境は自分たちができる最大のシンプルさで

閲覧と編集の大枠の設計は終わり、いよいよコーディングに入りました。

構築は僕と株式会社シフトブレインの安田祐平氏（_yuheiy）が担当しました。accrefs のコンテンツをどうデータ管理するか、これには少し悩みました。WordPress のような CMS を入れるのか、静的 HTML で持つのか。

流行りのウェブフロントエンドの技術スタックで構築することも一案でしたが、JS フレームワークのメンテナンスをしたくないという気持ちが通じ合ったので、accrefs ではマークダウンファイルを原稿として保持し、静的サイトジェネレーターの 11ty(eleventy)でビルドする形に決めました。

マークダウンファイルで原稿を持つ方法はややマニア向けであるものの、リポジトリに全てを収められることと、データベースのメンテがいらないことをメリットとして採用した次第です。

11ty によるビルド環境の構築は大半を _yuheiy が整備しました。彼が所属するスタンダードデザインユニットのブログでテクニカルな話が紹介されていますので是非ご覧ください。

https://standard.shiftbrain.com/blog/accrefs

素の HTML でひとつひとつ書いておけばビルドだのデータベースだのと考える必要はありませんが、例えば新しいタギングを該当する既存の HTML に追加しようとなると正直面倒くさいですよね。機械的な仕事は機械にやらせるのが一番です。

この accrefs の構成がデータ管理と更新作業のバランスに於いてベストだとは思っていません。あくまで僕と_yuheiy がやったらこうなった、という話です。格好良くサステナビリティと言いたいところですが、圧倒的に In My Opinion なベストエフォートです。

管理画面は楽さを求めて

ウェブサイトを公開するにはリソースがウェブサーバーに置かれていなくてはなりません。レンタルサーバーを利用するプランがメンバーから提案されたものの、個人的にはナシでした。利用する外部サービスを増やしたくなかったのです。

手元でビルドして生成物をコミットするのは生理的に無理なので、どうしたものかと考えながら、一旦テストバージョンを確認するために Netlify に連携してみました。そうしたら Netlify の楽なこと楽なこと……。

PR に対して自動でサブドメインを作ってデプロイしてくれる機能が素晴らしすぎて、ああもうたとえ管理画面が増えたとしても Netlify がセクシーすぎるから問題ない、そう思えてしまったのでした。

こうして、2019 年 7 月 25 日に発案された accrefs は同年の 9 月 17 日にリリースされました。2 ヶ月弱の間、コンテンツの見直しと構築にご協力していただいた皆様、改めてお礼を申し上げます。ありがとうございました。

オンラインコントリビュート会

公開後しばらく経過したこともあり、年明けに一度オンラインコントリビュート会というのを開催しました。

https://ca11y.connpass.com/event/155368/

当日は A11YJ の Slack にチャンネルを作ってワイワイしています。こちらについても、参加していただいた皆様ありがとうございました。

1 人で情報を集めるよりもイベントを開いてみんなでやったほうがクオリティも高くなりますから、コントリビュート会は今後も継続的にやっていきたいと思っています。

イベントがあってもなくても編集リクエストは常時受け付けています。良さそうに思った資料は随時 Google フォームなりで送っていただければと思います。

終わりに

僕にとってアクセシビリティとは、誰もがフェアでいるための前提条件だと考えています。

特定の誰かにむけたコンテンツならばその人に直接渡せば良いでしょう。しかし、個への枠を超えて多へその価値を提供しようとなると、アクセシビリティを欠かすことはできません。ただシンプルに HTML を書けばよかった時代ではなくなってしまった今、アクセシビリティの向上には無視できないコストがかかります。ですが、人にむけてコンテンツを提供している以上、人が使えなければ話になりません。

人が使えるとはなんなのか、人が使えないとはどういうことなのか、アクセシビリティを向上していくためにたくさんの知識が必要です。accrefs でそれを学ぶその手助けができれば幸いです。

最後に、一緒に構築を担当した _yuheiy と magi1125 からメッセージを頂いたのでご紹介します。

_yuheiy: コンテンツあっての Web サイトであり、運用あっての Web サイトであると思います。accrefs の価値もそれらに支えられているため、維持していくための足かせにならないように可能な限り簡潔な設計を目指しました。ですから、あなたのコントリビューションこそが accrefs の価値になるはずです。

magi1125:「まとめること」こそが Web の情報設計の初期衝動であり、それが Web アクセシビリティの土台です。文脈に合う有意なコンテンツまでの道筋が示されることで、我々はそこへのアクセス可能性を求めるのです。accrefs はそれをメタ的に体現する存在であり、良い Web を生み出していくためのエコシステムだと言えます。あなたの Web を愛する気持ちをぜひ accrefs にぶつけてください！コントリビュートお待ちしています。

LOVE & PEACE!