最近ホームページをリニューアルしている理由

ホームページのコードを書き換えている

最近、頻繁にホームページをリニューアルしているには理由があります。一つはそもそもの不具合対応です。

 

最近はスマホ向けに読みやすい環境にすべく手を加えています。ようやくパソコンでもスマホでも適切なフォントサイズで読めるようになりました。

以前は、スマホ向けの表示変換が上手いことできなかったため、スマホで表示した場合でもパソコン向けの画面を強制的に表示させていました。


バリアフリーとユニバーサルデザインを考える

ホームページをスマホ対応した中でバリアフリーやユニバーサルデザインを考えてみました。その走りとして多言語翻訳機能を追加しました。バリアフリーとユニバーサルデザインの違いについてはこちらのサイトを参照ください。

ユニバーサルデザイン/バリアフリー プラザ

私のホームページはどれほどの人が見ているかというと、それほど多くはありません。訪問者数は一日3桁人くらいで、プレビュー数(閲覧回数)は3桁~4桁回くらいです。

すくなくとも2桁人くらいは海外からアクセスが来ています。そのような理由によりユニバーサルデザインの一環として多言語翻訳機能を追加しました。しかし、それだけでユニバーサルデザインになったかというと違います。

私自身に視野欠損がありますが「これが酷かった場合はどうなるのか?」ということを考えてみました。そこで手元にあるiPhoneのVoiceOver機能を実際に目を閉じた状態で試してみました。

 

VoiceOver機能とは画面上の文字を音声で読み上げてくれる機能です。ブラウザ内の文書だけでなく、iPhoneのアイコンや設定画面なども読み上げてくれます。実際に目を閉じてこの機能を利用してみました。

 

VoiceOverを有効にするには「設定」アイコンより「一般」→「アクセシビリティ」→「VoiceOver」を開くことで設定できます。以下が設定画面のキャプチャー画像です。

 

VoiceOverを有効にする画面 1/2
VoiceOverを有効にする画面 1/2
VoiceOverを有効にする画面 2/2
VoiceOverを有効にする画面 2/2

試した感想

酷いものでした。音声にすると文章の稚拙さがよく分ります。それ以外に気付いたことがあります。

それは画像を利用している場合、どのような内容か理解できないことです。考えてみれば当たり前だと思いますが、実際に試すまで意識することはありませんでした。

 

ホームページの作り方としてaltタグというものがあります。これはアナログやISDN回線が主流だった時代に活躍していたタグです。
通信速度が遅いために画像表示がされないこともありました。そんな時のために白塗り(透明?)の画像の上に文字が表示されていました。これを表示させていたのがaltタグです。

残念ながら時代を経て、altタグをスパム目的での利用が大流行したことがあります。そんな背景もあり、現在はaltタグを使いすぎるとスパムサイトと見なされホームページの評価として下がってしまうことがあります。
そのような経緯を知っているので、私のホームページではaltタグをあまり使っておりませんでした。しかし、それではユニバーサルデザインに近寄ることができないため、altタグではなくtitleタグとして画像の内容を記述することにしました。
titleタグは画像下の小さいコメントのような文字です。実際にVoiceOver機能を使うと、シッカリと読み上げてくれます。ここ数日はこのようなことを意識して書いていますが、結果として視覚障害の無い方にも観やすくなったと思います。そう思うのは自分だけですかね?

今後

 

ホームページのアクセス統計を見ても視覚にハンディキャップをもたれた方が閲覧されているかどうかは分りません。いないかも知れません。しかし、結果的にホームページの見栄えも良くなり、多言語翻訳機能を利用した際の精度も向上しそうなので、取り組みを続けたいと思います。

さて、本日はこれから外来へ行ってきます。道中、次回VAD交流会で利用する新機能を試す予定です。
facebookを利用しますので、暇な方は覗いてみてください。おそらく9時過ぎくらいかな?やらなかったらごめんなさい。

facebook等でシェアしていただけると幸いです。

発信を続ける以上、多くの方に知ってもらいたいと考えております。移植医療啓発に少しでも役立てればと思います。

いいね」と思った記事がありましたらシェアいただけると励みになります♪

facebook以外でのシェアもどうぞ


コメントをお書きください

コメント: 1
  • #1

    プチ(管理人) (火曜日, 26 7月 2016 08:43)

    書き忘れました・・・
    スマホ対応していますが、スマホからアクセスしてきているか判別はしていません。
    表示される解像度(画面サイズ)で表示を変えています。そのような仕組みなので、パソコンのブラウザでもスマホ並みの小ささにすると表示が変わります♪