就労移行支援事業所で学んでいることと摂食障害の克服。そして発達障害グレーゾーン。

36歳から始めたデザインの勉強と摂食障害をどう克服していくかをつづっていきます。

http://code.jquery.com/jquery-1.7.1.min.js

就労移行支援事業所で学習中のWebアクセシビリティについて②

数日前、Webアクセシビリティに関して書きました。

 

しかし、まだ途中だったので、また続きを書きたいと思います。

 

Webアクセシビリティ

視覚障害の方や、障害の有る・無しに関わらずどのような方が利用しても利用しやすいものを想定して作るものが望ましいとのことです。

 

コンテンツ設計

コンテンツとは??

・content=中身、内容

・~の望みをかなえる、~を満足させる

 

機械が読めて、人間がわかるコンテンツとは

1.内容を推測出来るページタイトル

2.階層構造に沿った見出し

3.概要がわかるシンプルな表

4.画像に頼らない厚生

5.リンク先がわかるリンク

 

ビジュアルデザイン

デザイン

設計全般を指す言葉

ビジュアルデザイン

特に視覚的な部分における設計、スタイリング

 

「わかりやすい」デザイン

1.コントラストを高めて見分けやすくする

2.行間や一行の文字数を工夫して読みやすくする

3.どこが推せるのかわかりやすくする

4.リンクやボタンを大きくして押しやすくする

5.スタイルを一貫させて認識しやすくする

 

必ず守るべきポイント

1.視覚に依存せず、テキストで示す

2.文字は画像にせず、テキストにする

3.フォーカス表示を消さない

4.閃光を使わないようにする(以前にポケモンの話題がありましたね)

5.拡大できるようにする

 

実装とは??

Webコンテンツを実際に機能するようにすること

・HTMLのマークアップ

CSSの作成

JavaScriptの実装

・サーバー側システムの実装

 

アクセシビリティにおけるまとめ、いろいろ

重複するかもしれませんが、まとめてみました。

アクセシビリティを確保するには、プログラムで解釈できるマンシリーダビリティ*1

・一般にマンシリーダビリティが最も高い情報はテキスト

マークアップすると、要素の意味が明確になり、マンシリーダビリティが高まり、アクセシビリティが高まる

・特定の利用者にとっての使いやすさはユーザビリティ

・様々な利用者がアクセス可能であるかを表すのはアクセシビリティ

アクセシビリティの観点で、ナビゲーション設計のポイントとして、独創的な機能を設けるのは不適切

・ユーザーが迷子にならないために行う施策として最も直接的な施策はパンくずリスト*2

・外部リンクは、サイト内リンクと分けるため、外部リンクと明示し、開き方はユーザーに選択する余地を残す

・ページタイトルはどれだけ長くなっても、一意あるものを付けたほうが良い

・代替テキストの内容で悩む時は、画像ファイル名を指定しておく

・Webサイト上で、ユーザーが「どこを見たか」「どこをクリックしたか」などをサーモグラフィで可視化したものをヒートマップという

 

 

全ては、こちらの本で詳しく解説しています。

www.borndigital.co.jp

 

www.borndigital.co.jp

 

BA - ビジネス・アーキテクツの太田 良典先生、伊原 力也先生にSchooさんの動画学習で受講した内容です。

 

先生も仰っていましたが、アクセシビリティとは障害を持った方や高齢者が対象となるわけではなく、様々な人が使えて、使いやすいものが重要であるといったことをお話しされていました。

 

アクセシビリティに限らず、何でもユーザー目線になって考えるということは、心掛けていきたいと思いましたし、そういう冷静な目をもつということも大事なことだと改めて考えました。

 

 

ここまで読んでくださった方がいらっしゃいましたらありがとうございました!

*1:様々なデバイスからの利用の土台となる。「いつでも・どこでも・誰でも・どんなデバイスでも使えるWebサイト」の実現が大切

*2:ユーザーが今WEBサイト内のどの位置にいるのかを視覚的に分かりやすくするため、上位の階層となるWEBページを階層順にリストアップしてリンクを設置したリスト。自分が今どのページにいるのかを示すナビゲーションの事。名前の由来は、童話「ヘンデルとグレーテル」の主人公が森で迷子にならないように、自分が通った道にパンくずを置いたエピソードに由来する。