2020年2月7日ツイートシェアB!はてブポケットアクセスビリティは「利用しやすさ」という表現されることが多いです。目が不自由な人も、耳が不自由な人も、手が不自由な人も等しくホームページを閲覧できるようにという考え方がWebアクセシビリティになります。体に障害のある方に限らず、どんな人でも利用しやすく設計するのは大前提です。おわりWebアクセスビリティを考慮したコーディング方法それでは早速見ていきましょう。基本的なものですが、意識できていると操作性が大きく変わってきます。簡単に対応できる順番に紹介していきます。タイトルタグの設定タイトルタグはユーザーが目にする部分で使われる文字になります。見出し構造を正しく見出しは、ページを理解しやすく、読みやすくするものです。指定されるものですね。WordPressなどで見出しの指定がユーザーに委ねられる場合は以下の作り方を意識してください。画像に代替テキストを設定する目的としては、以下のように画像の内容を理解できるうようするためですね。代替テキストを入れてあげます。単語よりは画像を説明する文章の方が好ましいとされています。リンク先を分かりやすくリンク先のページ内容が想像できるようなテキストが理想的です。「もっと見る」というリンクと「〇〇のプロフィールについて詳しく見る」というリンクだったら、どっちのほうがリンク先の内容を理解しやすいかということですね。タグを設定する際は、中に入れる文言も意識して作成してあげてください。可読性を高い文章を文字サイズが小さかったり、文字が細かったり、文字間が詰まっていたり、余白がなかったり、略語が分からなかったり、漢字が難しかったりすると、文章を読むことが難しくなります。基本的にWebライティングでは「小学生や中学生が理解できるレベル」が好ましいと言われています。CSSで言うと、margin、padding、line-height、font-size、letter-spacing、font-family、font-weightなどを意識して指定してあげてください。Webライティングの書籍としては「沈黙のWebライティング」が個人的におすすめです。色の見え方は人によって様々です。いろんな色覚の方がホームページを不自由なく見えるようにデザインすることも大切です。「いらすとや」さんの素材が話題になりましたが、色覚障害の方々にどういった見え方になっているかを意識してホームページを作ることはWebアクセシビリティの観点からは大事になってきます。『いらすとや』の素材を色覚障がいの視点から見てみたどのブラウザ、デバイスでも崩れないホームページは様々な媒体で見られます。ブラウザでいうと、「Chrome」「Firefox」「Safari」「IE」「Edge」がメジャーどころです。デバイスでいうと、大きく分けると「PC」「スマホ」の2種類。いろんなブラウザ、デバイスでもちゃんと表示されるように設計することが大切です。(完全に一致させることは難しいと思いますが、少なくとも崩れることはないように...)キーボードでも操作可能にマウスで操作できない人に対する配慮になります。「tab」キーや「矢印」キー、「Enter」キーなどのキーボードの操作で問題なくホームページを閲覧できる設計が求められます。リンクはタブで移動可能にリンクおよび操作性のあるJavaScriptの動き(ドロワーやアコーディオン、モーダル等)は「tab」キーで移動できるようにしてあげます。「Enter」キーや「Space」キー等でアクションを起こせるようにしておくとキーボードだけでの操作が可能になります。そのためには、a、area、button、input、object、select、textareaのHTMLタグでコーディングを設計してあげることが大切です。タブの順番も考慮するtabindex属性を使えば、「tab」キーを押した時の順番を制御することが可能です。順番をこだわる必要がある場合は、tabindex属性で指定して順番を設定してあげてください。フォームの内容を理解しやすくフォームはユーザーのアクションを必要としている部分なので、特に意識してWebアクセシビリティに気をつけて設計する必要があるかと思います。入力する内容を理解できることまずはユーザーにどういった情報を入力してもらうかを理解してもらう必要があります。必要になるのは直前のテキストですね。何の入力項目かを指定してあげましょう。選択されている項目を分かりやすく今どのエリアが選択されているか視覚的に分かりやすくしてあげてください。リセットCSSで標準で消されている場合もありますが、アクセシビリティ的にはよくないので消さないようにしましょう。拡大・縮小でも表示が崩れないブラウザには標準で拡大・縮小の機能が備わっています。スマホではピンチで簡単に拡大できますよね。このように拡大・縮小しても表示が崩れないようにする必要があります。達成方法集この記事では、意識して対応したほうがいい項目を自分なりにピックアップして選んでいますが、網羅的に確認したい場合は以下の記事を参考にしてもらうといいかと思います。2.0は、HTMLやCSSの策定を行っているW3Cが定めているWebアクセシビリティに関するガイドラインです。@haniwa008「まずはここから!」ということで、アクセシビリティの基本を紹介しました。アクセシビリティは「できるところから少しずつ」と言われています。リンクこのページが役に立ったらいいね!お願いします運営の励みになります...。同じカテゴリーの一覧を見る次の記事PhotoshopのデザインカンプをZeplinに連動してコーディングしやすく...前の記事ホームページ制作後の保守費用は必要?払った方がいい人と不要な人はにわまんWordPressが好きなフリーのWebコーダー。300件以上のWordPressカスタマイズを対応してきました。