Accessibilityの最近のブログ記事
テキスト以外の要素に、同等の役割を果たす代替テキストがついていますか。
テキスト以外の要素というのは、写真やイラストなどの画像、タイトルなどのテキストを特殊なフォントを使って画像にしたもの、イメージマップ、アニメーション、箇条書きの行頭についているマーク、画像を使用したボタンなどです。
音声ブラウザーやスクリーン・リーダーなどで、音声で閲覧したり、テキストベースのブラウザーで閲覧する場合などには、この代替テキストが使用されます。テキスト以外の要素に適切な代替テキストがついていないと、何も表示されなかったり、画像のファイル名が読み上げられたりすることになってしまいます。
ですので、代替テキストには画像の内容を適切に説明するテキストを入れるようにし、画像が表示されなくても正確に意味が伝わるようにします。
【検証方法】
- Internet Explorerで対象のホームページを表示します。
- ツール(T) → インターネット オプション(O) → ［詳細設定］のタブをクリックします。
- ［マルチメディア］から［画像を表示する］のチェックを外し、［OK］ボタンをクリックします。
- 表示(V) → 最新の情報に更新(R) で画面を更新します。
【検証結果】
- 画像のあったところに代替テキストが表示され、画像がなくても同じように理解できる＝★★★（星三つ）
- 画像のあったところに代替テキストが表示されるが、意味の分からないテキストもたくさんある＝★★（星二つ）
- 画像のあったところには何も表示されない＝★（星一つ）
そのホームページ、すべての人にやさしいですか？
ということで、あなたのホームページがアクセシビリティに対応しているかどうかをチェックしてみませんか。
文字の大きさは大丈夫？
今ご覧になられているホームページ、また、あなたが管理されているホームページ、見る人の環境の違いによって文字の大きさが違って見えることをご存知ですか。
Windows、MacOSなど、OS（Operating System）の違い、Internet Explorer、Netscape、FireFox、Opera、Safariなどホームページを閲覧するためのソフトウェアの違い、またディスプレイの大きさや各種設定によって、本当にいろいろな大きさに見えます。
文字が少し小さくて読みにくいな、と感じたらInternet Explorer等の設定を少し触ってやるだけで大きく表示することが出来ます。
ところが、制作する側で文字のサイズを固定してしまっているサイトが星の数ほどあります。文字のサイズを固定してしまうと、閲覧者側では文字を大きくすることが出来なくなってしまいます。
あなたの環境では十分な文字の大きさかも分かりません。しかし、あの方の環境ではどうでしょう。また、数年、数十年後のあなたにも十分な文字の大きさでしょうか。
ぜひ、検証してみて、閲覧者が読みやすい文字の大きさに設定できるサイトにしてみてはいかがでしょうか。
【検証方法】
- Internet Explorerで対象のホームページを表示します。
- 表示(V) → 文字のサイズ(X) → 大(L) または 最大(G) にします。
【検証結果】
- 文字のサイズが大きくなり、レイアウトもさほど崩れないできちんと読むことが出来る＝★★★（星三つ）
- 文字のサイズは大きくなったけど、レイアウトが少し崩れて読みにくくなった＝★★（星二つ）
- 文字のサイズが大きくならない＝★（星一つ）
注意：検証結果の基準は、アートネクストが考えるアクセシビリティに配慮したホームページの基準です。
普段 Windowsコンピュータだけを使われているとなかなか気が付かないのですが、実は、「Windowsコンピュータでなければ正しく表示されない」という文字がかなりあります。
WindowsやMachintoshなど機種に依存する特殊文字ということから、機種依存文字と呼ばれますが、コンピュータの環境も多岐に渡り、実際には使用するフォントによって表示できる文字が変化するため、機種依存文字という言い方も正しくはないという現状になってきています。
また、指定フォントの中で表示できない文字があっても、表示可能な他ののフォントがOSにインストールされている場合は、それを利用して表示しようとするブラウザーもあったりします。
けれどもホームページは、一般的にそれを見る人がどんな種類のコンピュータを使っているのか、書き手側では分かりません。 ですので、ホームページに情報を発信する際には、以下に示す機種依存文字は使用しないように心がけていくと良いと思います。
またこれらの文字は、ホームページばかりでなく、電子メールなどでも、使用しないほうが良いでしょう。
Windowsで入力する際に、他の環境でも問題なく表示できる文字と他の環境では文字化けしてしまう可能性のある文字を一覧表示しておきますので、参考にしてください。
他の環境でも問題なく表示できる文字
記号類
、。，．・：；？！゛゜´｀¨＾￣＿ヽヾゝゞ）
〃仝々〆〇ー―‐／＼～∥｜ …‥‘’“”
（）〔〕［］｛｝〈〉《》「」『』【】
＋－±×÷＝≠＜＞≦≧ ∞∴♂♀∠⊥⌒∂∇≡≒≪≫
√∽∝∵∫∬∈∋⊆⊇⊂⊃∪∩∧∨￢⇒⇔∀∃° ′″℃
￥＄￠￡％ʼn＃＆＊＠§☆★○●◎◇◆□■△▲▽▼
※〒→←↑↓〓 ♯♭♪†‡¶◯´｀¨＾
罫線
─│┌┐┘└├┬┤┴┼
━┃┏┓┛┗┣┳┫┻╋
┠┯┨┷┿┝┰┥┸╂
全角英数字
０１２３４５６７８９
ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺ
ａｂｃｄｅｆｇｈｉｊｋｌｍｎｏｐｑｒｓｔｕｖｗｘｙｚ
半角英数字
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
!"#$%&'()*+,-./:;<=>?@[]^_{|}~
ギリシャ文字
ΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩ
αβγδεζηθικλμνξοπρστυφχψω
ロシア文字
АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ
абвгдеёжзийклмнопрстуфхцчшщъыьэюя
Windowsでしか使えない文字
記号類
①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯⑰⑱⑲⑳
ⅠⅡⅢⅣⅤⅥⅦⅧⅨⅩ
ⅰⅱⅲⅳⅴⅵⅶⅷⅸⅹ
㍉㌔㌢㍍㌘㌧㌃㌶㍑㍗㌍㌦㌣㌫㍊㌻
㎜㎝㎞㎎㎏㏄㎡
㍻〝〟№㏍℡㊤㊥㊦㊧㊨㈱㈲㈹㍾㍽㍼≒≡∫∮∑√⊥∠∟⊿∵∩∪
半角カタカナ
ｱｲｳｴｵｶｷｸｹｺｻｼｽｾｿﾀﾁﾂﾃﾄﾅﾆﾇﾈﾉﾊﾋﾌﾍﾎﾏﾐﾑﾒﾓﾔﾕﾖﾗﾘﾙﾚﾛﾜｦﾝ
ｶﾞｷﾞｸﾞｹﾞｺﾞｻﾞｼﾞｽﾞｾﾞｿﾞﾀﾞﾁﾞﾂﾞﾃﾞﾄﾞﾊﾞﾋﾞﾌﾞﾍﾞﾎﾞﾊﾟﾋﾟﾌﾟﾍﾟﾎﾟ
最近、ブログやCMS（Contents Management System）、また、ホームページ制作アプリケーションを使用したりして、社内などで自らホームページを更新されている方が増えてきています。そこで、アクシビリティに配慮したライティング（文章を書くこと、照明に非ず）について、ちょっと思うことなどを書いてみたいと思います。
今回は、ホームページと印刷物の違いを考えて見たいと思います。まず、決定的な違いはホームページの文章は、データであるということです。そんなんあたりまえやん、とおっしゃると思いますが、ここが大きなポイントになってきます。
データであるがゆえに、いろいろな形に姿を変えることが可能です。例えば高齢者は文字を大きくして見ることができます。視力が不自由な方は音声のデータに変えたり、また、色を変えることもできます。いろいろな形に変えて使えるのはデータだからです。しかし、データとして正確に書かれていないと全然別の意味になってしまいます。
例えば、「オーディオ」の横棒は音引きといいますが、これを音引きではなくマイナスの記号を使って「オ－ディオ」と書いてみます。書体によって見た目は同じですが、音声で聞いたときには「オマイナスディオ」と読み上げられ、全然別のものというより、まったく意味が分からなくなってしまいます。
同じような意味から以下に、べからずリストをあげておきますので参考にしてみてください。
- 文字などを間違えない（あたりまえですね）
- 英語数字は、全角を使用しない
Audio（半角）は「オーディオ」ですがＡｕｄｉｏ（全角）は「エーユーディーアイオー」です。おなじように１００％（全角）は「イチゼロゼロパーセント」になってしまいますので、100%（半角）と書きましょう。 - 強制改行を入れない
単語の途中などに改行を入れてしまうと、意味がつながらなくなります。 - スペースを入れない
「時 間」などのように、字間を広げるためにスペースを入れると単語としての意味がなくなります。
他にもいろいろあるのですが、きょうはこの辺で。
第2回以降もエントリーできるように、がんばっていきたいと思いますのでよろしくお願いします。
