気まぐれPHPerの頭の中

PHP、a11y等のTech Blog

Webアクセシビリティを支えるための技術

概要

まずはじめに、私はWebサービス屋さんです。 Webサービスを提供し続ける以上、誰もが使えるものを提供するというのは自然なことであり一定の条件を満たさないと使うことができないサービスを提供するのは本意ではないと考えています。

しかしながら、多くの場合Webアクセシビリティを意識してサービスを作る場合には、デザインであったり、デザインを実装するためのマークアップであったりが意識されがちです。 そのためサーバーサイドには無縁であると感じる人も少なくはないのではないかなと私自身は考えています。実際にサーバーサイドに出来ることがどこかに明確に書かれている項目も多くはありません。

そんな中で、サーバーサイドが、Webが、どこまで現在のWebアクセシビリティに取り組むという基礎知識になっているか、またサーバーサイドエンジニアとして出来る何かがないのかということを模索していきたいと思います。

Webアクセシビリティとは

詳しくは『デザイニングWebアクセシビリティ』を読むことをおすすめします。

WebアクセシビリティW3Cで勧告されている規格です。(Web Content Accessibility Guidelines (WCAG) 2.1) 何をもってWebアクセシビリティと言えるかは、WCAGで定義されているレベルA、AA、AAAの項目に準拠しているかどうかが明確な指針とも言えるでしょう。

ただし、Webアクセシビリティに関わるものはそれだけではありません。WCAGに記載されている内容は、これをするとよりアクセシブルになるという内容が多く、その前提についてはガイドラインには含まない内容となっています。

Webアクセシビリティを支えるための技術

先述した書籍にもあるが、Webは圧倒的にアクセシブルです。 今までは本、新聞、回覧板、お店の情報、など何もかもの情報が異なる方法で収集され、それらになんの繋がりもありませんでした。

現代ではインターネットが普及し、誰がどこからでも欲しい情報はインターネットブラウザを経由して得られる時代になりました。 インターネット上にある情報は、URLさえ知っていればなんでも情報を手に入れることができ、情報から他の情報へのリンクだって存在します。さらには、同一のURLでも古い情報は捨てられ、常に新しい情報へ更新することだって可能です。

それらには、Webが成功したいくつかの基本的なものがあるからです。Webが成功したことについてこれから説明していきます。

ハイパーテキスト(ハイパーメディア)

ユーザーはインターネット上の情報を見るためにはURLを辿って、特定の情報にアクセスをすることができます。 私たちは普段あまり意識をせずに使っているが、それにはハイパーテキストという複数のテキストを相互に関連付け、結びつける仕組みがあります。 また、テキスト同士を結びつける参照のことをハイパーリンクと呼びます。 ハイパーテキストはローカルでもインターネット環境でも利用が可能です。

ハイパーテキストは、もう少し意味を広げてハイパーメディアとも呼ばれています。 ハイパーメディアはハイパーテキストに加え、グラフィックス、音声、動画、テキストを絡み合わせた情報媒体です。

それを実装している最も有名な方法がWorld Wide Webであり、WWWは最も有名なハイパーメディアの実装です。

Hyper Text Markup Language(HTML)

ハイパーテキストを記述するためのマークアップ言語のうちの一つであり、World Wide Webで使用されています。テキスト間を結びつける参照のことをハイパーリンクと呼び、HTMLはハイパーリンクをテキスト中に埋め込むことによって、他のハイパーテキストを結びつけることを実現しています。

HTTPプロトコル

ブラウザとブラウザが通信を行うためのプロトコル、お約束です。 大きく分けると、メソッド、ヘッダー、メッセージ、ステータスコードなどがあります。HTTPプロトコルに従うことによって、サーバーとの通信の状態を知ることができたり、リソースの操作をおこなうことができます。

World Wide Web

インターネット上で提供されているハイパーメディアシステムです。俗に、World Wide Webは「インターネット」を指すような言葉でもあります。World Wide Webではドキュメントに主にHTMLやXHTMLなどのハイパーテキストの記述言語が利用されます。

World Wide Webは、急速に普及をし現代では当たり前のものになってきました。その大成功の理由の一つにはシンプルさがあります。

World Wide WebにはHTTPプロトコルが利用されており、それらはシンプルに定義されています。

私たちに出来ること

それでは私たちには何が出来るのでしょうか?WCAGで勧告されているものは、フロントエンドエンジニアやデザイナーが実装するものだと思われがちです。しかしそれ以外にもなにか私たちに出来ることがあるのではないでしょうか?

私は一番は"自分ごと化"することが大事なのではないかと思います。

とはいえ、サーバーサイドエンジニアに何か出来ることがないかという指針についてはいくつか挙げていきたいと思います。 後述することはあくまで指針であり、これらのことに解答はありません。

適切なHTTPメソッドを選択する

GET?POST?PUT?DELETE?

これらは実装によっては、どんなことでも可能です。実装はサーバーサイドエンジニアに委ねられています。HTTPメソッドが適切でなければどうでしょうか?もしGETをしたつもりなのにデータが消えてしまう。

適切なHTTPステータスコードを返却

401?403?それとも500?503?これらは似ているものも多くときに適切なものを間違ってしまうこともあります。極端な例でいうと、200を返しているのに実際にはページのリソースがなかったら?エラーを吐いていたら?

アクセスの速度を保証

レガシーなサービスに限らず、Webはアクセシブルという以上それなりに速さも気にしなければなりません。なんらかの条件に限らず普段からWebページを開くのが遅すぎたら、そのページからすぐに離脱していませんか?Webページが見られることなく閉じられるというのは私はとても悲しいです。

フロントエンドを意識したDB設計

Webサービス内で統一した用語を用いていますか?それらはマスターデータとして管理されていますか?全てが全て管理される必要があるというわけではありません。しかしサービス内での専門用語等に表記ゆれがあると、ユーザーは迷子になってしまいます。Webという広い世界で迷子になってしまったらあなたはどうしますか?

はたまたフロントエンドエンジニアは、こんなのサーバー側でデータ持ってよ…と思っているかもしれません。例えば画像の代替テキスト(alt属性)です。全ての画像にベタ書きで書いていくのは嫌ですよね?設計の初期段階で、タイトルや画像名以外に代替テキストが必要であることが分かっていれば、そのカラムを私たちが持っておくことだってできます。

and more...

これら以外にも、私たちが出来ることは無限にあります。それらは常日頃からやっていることかもしれません。普段の中でちょっとだけ気にすることで、もっともっと自分たちが開発しているサービスを使ってくれる人が増えるかもしれません。

最後に

本記事で述べたことはきっと、私よりも他のサーバーサイドエンジニアのほうが詳しいこともあるでしょう。

World Wide Webを発明したTim Berners-Leeはこんなことを述べています。

The power of the Web is in its universality.Access by everyone regardless of disability is an essential aspect. (Webの力はその普遍性にあります。障害の有無にかかわらず誰もがアクセスできるというのが Webの本質的な側面なのです。)

これこそが、Webの本来の姿です。ときにこれを思い出しながら私たちはWebサービス屋さんとして、日々Webサービスを提供し続けて行きたいと思います。

PHPerKaigi2020 資料

本記事の内容について、2020/02/11にPHPerKaigi 2020にて発表を行いました。下記に公式サイトと、発表時の資料を掲載します。

phperkaigi.jp