PyCon mini Hiroshima 2019 のサイト制作

Share

2019年10月12日(土曜)に PyCon mini Hiroshima 2019 を開催しました。

イベント自体については別の場で報告を書こうと思っていますが、チームから「ウェブサイト構築の話を共有してほしい」という意見があったので、忘れないうちに、まずここに書いておきます。

hiroshima.pycon.jp は2015から2016にかけては GitHub Pages で私が自分で作りました。

2018 からは参加費をいただくイベントとして開催することに決めて、専門家に制作をお願いして、WordPress で構築されました。
(現在は静的サイトに変換して残しています)

2019 では、もっと自分たちでコントロールしながら制作したいと考えて、Next.js を使いました。

さいわいチームにはコーディングもデザインもやっていただける Nyoho さんがおられて、私は作業をチェックして本番環境にデプロイする、という立場になりました。

今年の PyCon mini Hiroshima チームは GitHub のプライベートリポジトリを作りました。
ウェブサイトのソースコードを Git で管理し、ウェブサイト制作のタスクも、それ以外のタスクも、すべてこのリポジトリの issues として管理しました。

日程だけを告知する私の仮サイト(BootStrap Studioで作成)を、Next.js のサイトに置き換えていく作業は、6月ごろ始まりました。
リダイレクトに必要な nginx の設定をリポジトリに含める提案があり、それを私が pytest と requests でテスト駆動しながら導入する、というのを(すごい広島 with Python のネタにしながら)やったのが6月下旬。

7月上旬には、プルリクエストごとにプレビュー用の Web アプリのビルドが行われるようになり、本番環境を更新する前に、ブラウザでレビューが行える体制が整いました。

このころから、私自身は node.js で React のコードを触るのをやめて、逆に本番環境へのマージの権限は私だけが持つことにして、レビューアーに徹することにしました。

7月末に Nyoho さんが SVG アニメーションで動くヒーロー画像を制作したあたりから、私は、いろいろな環境に配慮したアクセシブルなサイトであることをレビューするようになりました。

残念ながら SVG アニメーションは最後まで IE11 や Microsoft Edge では動かせなかったのですが、かわりに動かないタイトル文字を出してもらうようにしました。
このやりとりの中で、Next.js を使いながらアクセシビリティを確保できそうだ、という見通しが得られました。

やがて、スクリーンリーダーの利用者が適切に操作・閲覧できることを、私自身が「NVDA でアクセシビリティの検証をするディレクター」の立場で行うようになりました。

ページが複数になったときには、タイトルをページごとに変えてもらうようにしました。

アニメーションの機種依存振り分けの議論の途中で、 CSS で display:none するとスクリーンリーダーから読み取れなくなることを紹介すると、そうだったのかと驚かれました。

「日時」や「会場」などの情報を h2 や h3 などの見出しレベルにどう割り当てたらよいのか、あるいは見出し要素に情報そのものを入れてしまっていいのか、といったことも議論しました。

例えば「日時」という見出しがあって、その真下に「10月12日」と書いてあるのと、見出しそのものが「10月12日」になっているのは、どちらがうれしいだろうか。

スクリーンリーダーの「見出しジャンプ」という機能を紹介すると、「じゃあ見出しに情報が入っていたほうが効率的だね」という議論になりました。

一方で「日時」というテキストをスクリーンリーダー利用者にだけ読めるように提示する、というテクニックはどうだろう。
いわゆる sr-only クラスのような実装はあるけれど、想定外の閲覧環境で(例えば -10000px の位置指定が)どうなるかわからないし、みんなが同じコンテンツを読むほうがよいのではないか、と私はアドバイスしました。

テキストの表記についても、「10:00~」はちょっと不安。「10:00開始」はよさそう。「10時00分開始」はさらに安全。

けれど、このあたりの読み上げはユーザーエージェントに依存しているし、読み手は 10:00 を時刻だと解釈できる可能性は高い、などなど。

一方で IE や Edge でレンダリングが崩れる、といった指摘、機種依存文字の指摘、などもありました。

プレビュー Web アプリのおかげで、効率的に検証することができました。

ですが、Nyoho さんもご多忙だったので、実際に解決したい課題がすべてクリアできたのは、イベントの前日の夕方でした。

この話には Python の要素がほとんどないのですが、今回の一連の作業を通じて、PyCon mini Hiroshima チームの中で「アクセシビリティ、こんな風にやっていくんだなあ」という感覚を共有できたこと、私自身も「アクセシビリティやっていき勢」としての活動ができたことを、ちょっぴりうれしく感じています。

今回のイベントにスクリーンリーダーユーザーが参加してくださったわけではなく、リアルなフィードバックをいただくのもまだこれからの課題です。

このチームの経験を、次回の PyCon mini Hiroshima で、かどうかはわかりませんが、どこかで活かしたいと思っています。