Upgrade to Pro — share decks privately, control downloads, hide ads and more …

サイボウズ開発運用研修_アクセシビリティ(2020年度) / Cybozu Dev Train...

サイボウズ開発運用研修_アクセシビリティ(2020年度) / Cybozu Dev Traininng Accessibility 2020

2020年5月1日に行われた、サイボウズ開発運用研修の発表資料です。
以下のリンクからPPT形式の資料をダウンロードできます:
https://cybozu-my.sharepoint.com/:p:/g/personal/daisuke-kobayashi_cybozu_onmicrosoft_com/Ed2m5Do6A6VLi_bxG-VCacIBMOQv-2TgTtqhDuwddXvG1A?e=eiR9WU

Daisuke Kobayashi

May 01, 2020
Tweet

More Decks by Daisuke Kobayashi

Other Decks in Technology

Transcript

  1. ⾒る ロービジョン 全盲 話す ⾔語障害 聞く ろう 難聴 読む ディスレクシア

    集中する うつ ADHD 動く 肢体不⾃由 ⾻折・怪我 ⼩さい画⾯ 電⾞内 時差 海外出張 在宅ワーク ⽇光下 急な予定 育児中 満員電⾞ 運転中 英⽂ 騒⾳ 静⾳環境
  2. <img src="piechart.gif" alt="Pie chart: Browser Share - Internet Explorer 25%,

    Firefox 40%, Chrome 25%, Safari 6% and Opera 4%."> 代替テキストの例 – 円グラフ
  3.    " " " " " " "

    " " " ⽂字と背景⾊のコントラスト⽐を4.5:1以上にする 5 情報を伝える⾊の使い⽅に注意する
  4. • ブラウザのデフォルトのCSSではキーボードが視認できる • outline: none; すると、デフォルトスタイルが消える • この場合、必ず:focusスタイルをつける • reset.css

    / normalize.css を使う場合は要注意︕ キーボード操作を視認できるようにしよう a:focus { text-decoration: underline; }
  5. • Web Content Accessibility Guideline 2.1 https://waic.jp/docs/WCAG21/ • W3Cが勧告しているアクセシビリティ基準リスト •

    各国のアクセシビリティに関する法律は、この基準を採⽤ ガイドラインを読んでみよう