大阪(2018/7/13)に参加しました。C(ペッパーシー)のブログです。大阪(2018/7/13)に参加しました。大阪(2018/7/13)に参加しました。大阪(2018/7/13)」の「セミナー+懇親会」に参加しました。講義の内容にだいぶん抜けがあるかもしれませんが自分なりにアウトプットしておきます。アクセシビリティとは?諸外国では法律でWebアクセシビリティ確保の義務化されていて、アメリカではWebサイトが訴訟される事例が年々増えています。2017年では800件を超えているらしい。なんてこったって思いました。努力義務2020年の東京オリンピックがあるので、これからの時代はWebアクセシビリティの重要性がますます必要になってくると思いました。8341-3:2016のレベルAAへの準拠を目標とする」と方針しています。視覚障害者の点字使用率は約1割らしいので、「視覚障害者=点字」という偏った認識を改めようと思いました。エレベーターに点字がよくあるが、9割近くは「音声」の方がありがたいらしい。視覚障害者:91.7%聴覚障害者:93.4%肢体不自由者:82.7%障がいのある人のインターネットの利用率は53.0%で、半数以上がインターネットを利用している。支援技術とは、障害者がさまざまな機器を使用する際、操作の補助を行うために用いられるハードウェアやソフトウェアの総称です。ハードウェアでは「ジョイスティック」「キーガード」などソフトウェアでは「ドラゴンスピーチ」音声ソフトなど日本はこれから高齢化社会になるので、アクセシビリティは障害者だけでなく高齢者(65歳以上)のユーザーにとっても重要になってくる。スマートフォンやタブレットの普及などにより年齢や障害の有無のみならずデバイスや環境のの多様化も加わって、アクセシビリティの重要性がますます高まってきました。Webコンテンツのアクセシビリティを確保する基本の「キ」は、「マシンリーダブル」にすること。マシンリーダブルとは、マシン(機械、コンピュータのこと)がWebページ内に記述された情報を認識できる状態のこと。検索エンジンがそのページ内に記載された情報を元にページの内容を認識・解釈できること。明日から使えるアクセシビリティTipsアクセシビリティ確保のキホンの「キ」の10項目+事前知識(0番目)を紹介されていました。HTMLコーディングページの内容が分かるページタイトルを記述する見出しやリストなどの文書構造をマークアップするリンクテキストは、リンク先が分かる文言にする情報を伝えている画像に代替テキストを提供する文字色と背景色のコントラストを確保するユーザーがコンテンツを拡大表示できるようにするキーボードだけでも操作できるようにするデータテーブルの構造をマークアップするフォーム・コントロールのラベルを提供するエラーメッセージではエラー箇所を明示する0.HTMLコーディング開始タグと終了タグがある。入れ子は内側から閉じる。要素内で同じ属性を重複させない。id属性値をユニークな値にする。1.ページの内容が分かるページタイトルを記述する<title>ページタイトル|サイト名</title>ページタイトルを前、Webサイト名を後ろに記述している。後半部分の表示が省略されてしまっても、ページタイトルを確認することができる。2.見出しやリストなどの文書構造をマークアップする見た目だけでなく、見出しとしてマークアップする。リストにするとユーザビリティが47%も向上。3.リンクテキストは、リンク先が分かる文言にするリンク名には「ここをクリック」といった具体性のない表現を使わないこと。ユーザーがその場でリンク先へ移動できるかどうかを判断できるようなテキストにする。※リンク先がわかるワードを使う。4.情報を伝えている画像に代替テキストを提供する写真である場合、alt=”写真:家庭用のたこ焼き器”などの説明を過不足なく記述します。画像がデコレーション(装飾)の場合、alt=””空のaltを記述します。画像とテキストを1つのリンクにまとめている場合、画像は空のaltで良い。alt=""><span>テキスト</span></a>5.文字色と背景色のコントラストを確保する情報を伝えている文字の色と背景色とのコントラスト比を4.5:1以上確保する。カラーコントラストアナライザーなどでコントラスト比をチェックする。文字サイズ変更ボタンはいらない。背景を変えるボタンもいらない。音声対応のWebサイトもいらない(音声対応が必要な方は既にソフトを導入しているから)。7.キーボードだけでも操作できるようにするフォーカスインジケータが常に表示する。つけるとフォーカスインジゲータが消えるので設定しない。モーダルウィンドウがある場合、オープン時はモーダル内のみがフォーカスされるようにし、クローズ時はフォーカスが元の位置に戻るようにする。8.データテーブルの構造をマークアップする見出しをthにする。labelで囲う場合もfor属性はつけておく)。ラベルのテキストがないときはtitle属性をつける。補足説明のテキストにはaria-describedby属性を使う。10.エラーメッセージではエラー箇所を明示するユーザーはエラーの内容がわからなくて離脱するケースがある。修正すればよいのかを書く(どこがなぜエラーか?どう修正すれば良いのかを書く)。左側:ワークショップの時にキリンラーメン(前回の名古屋会場のお土産だそうです)をいただきました。右側:懇親会の時にキーホルダーをいただきました。下のAmazonの本を購入して、Webアクセシビリティの勉強を行っていこうと思いました!!Amazon勉強アクセシビリティよかったらシェアしてね!URLをコピーしました!URLをコピーしました!バリデーションサービスについて調べてみました。ライブコーディング」に参加しました。一弥フリーランスWebデザイナー。好きなフルーツはグレープフルーツです。あの苦味と酸味がたまりません。