2018年9月28日

東京五輪ボランティア応募サイトのコードがいかに酷いか

ボランティア応募サイトの使い勝手が悪いと話題になってますが、ソースコードもなかなかの品質でした。 HTMLのコードが悪いと、アクセシビリティ（音声読み上げやキーボード操作）にも支障があるので、開発者だけでなく利用者にも不便を強いることになります。

CSS WAI-ARIA JavaScript HTML React カネを使わせなかった結果

clockmaker
84038
87
547
299
283

154

リンク東京2020大会ボランティア | 東京オリンピック・パラリンピック競技大会組織委員会東京2020大会ボランティア東京2020大会のボランティア活動についてご紹介します。 11 users 11076

池田泰延 @clockmaker

オリンピックのボランティア募集サイトが酷いと話題だったので、コードを見てみたら残念品質でした･･･・重複したid属性・javascript:void(0) ・まともに実装されてないWAI-ARIA 　（音声読上も酷い）・body内にstyleタグが頻出これらは一例。ちなみにReact製。 tokyo2020.org/jp/special/vol… pic.twitter.com/ed6TrpByy1

2018-09-27 14:50:01

拡大

Masahiko Sakakibara @rdlabo

五輪のWebサイト、ボランティアのページだけ・コントラスト低くて視認性が低い・無駄なDOM操作いれてて見にくい・というか自分たちで策定したウェブアクセシビリティ方針を満たしていないというやんちゃっぷりで、なかなかに絶句してる。 --- 東京2020大会ボランティア tokyo2020.org/jp/special/vol… pic.twitter.com/0Mlbi8RDTL

2018-09-27 11:07:08

拡大

深津貴之 / THE GUILD / note @fladdict

地獄UIオブ・ザ・イヤーをいきなりとれそうな大物きたな・・・ news.yahoo.co.jp/byline/kandato…

2018-09-27 18:10:13

リンク Yahoo!ニュース個人むずかしすぎる！五輪大会ボランティア応募フォーム（神田敏晶） - Yahoo!ニュースいよいよ東京五輪のボランティアの募集がはじまった！しかし、すぐに登録しようとすると、この応募フォームがとってもむずかしい！これでは誰も登録できないのではないだろうか？ 1342 users 10827

HTML

池田泰延 @clockmaker

オリンピックのボランティア募集サイトで、HTMLコーディングで気になる箇所（2） volunteer.tokyo2020.org pic.twitter.com/Q4d7i2C2s1

2018-09-28 11:32:32

拡大

池田泰延 @clockmaker

<a href="javascript:void(0);">がいけてない理由・ステータスバーに表示される・モダンな代替手段があるので、この記述が古くさいユーザーにとって理解不能な情報、意味のない情報がステータスバーに表示されるのは微妙。残念なことに、今も多くの国内サイトで使われていますよね･･･。 pic.twitter.com/cwz2kbb7bA

2018-09-28 14:29:37

拡大

池田泰延 @clockmaker

あと、aタグにalt属性もついています。 title属性ならわかりますが･･･。 ※alt属性はimgタグに使うもの pic.twitter.com/KCKeoCnCtd

2018-09-28 16:16:19

拡大

音声読み上げ

Kazuhito Kidachi @kazuhito

“マイページにおいて、パソコンのキーボードを使った操作や音声読み上げソフト使用時等、アクセシビリティに関する対応が不十分となっております。” 応募登録｜東京2020大会ボランティア tokyo2020.org/jp/special/vol…

2018-09-27 14:43:10

すこや @sukoyakarizumu

東京五輪のボランティア申し込みフォーム、力強い代替テキストですね。この代替テキストを書いた人は、この文章を読み上げられて、自分にあったユニフォームをきちんと選べるのでしょうか･･･ tokyo2020.org/jp/special/vol… pic.twitter.com/cKNlkCuKOL

2018-09-27 18:35:27

拡大

kzhrk//Kazuhiro Kobayashi @kzhrk0430

東京2020大会ボランティアのWAI-ARIA、ヘッダメニューとフッタメニューのaria-labelしかないので健常者以外お断り感ある

2018-09-27 23:51:26

池田泰延 @clockmaker

音声読み上げはズタズタの状況。 macOSの標準機能VoiceOverを使うと、応募フォームの読み上げを検証できます。異なった入力フォームの説明が読み上げられるので、どのフォームを入力しているのか、目が不自由な方は、音声だけで判断できない。やはり、HTMLコーディングの品質が重要。 pic.twitter.com/yfm8YUNE9L

2018-09-28 23:58:01

拡大

補足

ソースコードの不備は、特にアクセシビリティの恩恵を必要とする方に不便を強いることになります。

目の不自由な方は、音声読み上げをヒントにして操作します。間違った音声読み上げがされるようなソースコードだと、応募フォームへの入力がひどく困難になります。

CSS

\\ uto-usui // @uto_ao

やべえ、こんなコード久々に見た ... 😭 #visual img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; max-width: none !important; width: 100%; height: 100%; } twitter.com/clockmaker/sta…

2018-09-27 15:23:42

いくら @YamadaIkra

html, body { min-width: 1200px; } togetter.com/li/1270944#c54… 「東京オリンピックのボランティア応募ページが『webサイトでやっちゃダメな事を..」togetter.com/li/1270944 にコメントしました。

2018-09-27 18:16:21

いくら @YamadaIkra

なんで media="screen and (min-width: 768px)" のcssファイルで min-width:1200pxに指定してるんだ？そういう作法があるのだろうか。 togetter.com/li/1270944#c54… 「東京オリンピックのボランティア応募ページが『webサイトでやっちゃダメな事を..」togetter.com/li/1270944 にコメントしました。

2018-09-27 19:23:03