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

資料作りのアクセシビリティ s-dev#11 LT

earlgrayMK
May 20, 2019
3.4k

資料作りのアクセシビリティ s-dev#11 LT

2019年5月20日 s-dev talks #11「定量データ分析」の5分LTでお話した資料です。

earlgrayMK

May 20, 2019
Tweet

Transcript

  1. ࢿྉ࡞ΓͷΞΫηγϏϦςΟ
    s-dev talks ʙαʔϏε։ൃษڧձʙ#11 5෼LT
    $SPXE8PSLT*OD 69&OHJOFFS ྛ ඒل
    FBSMHSBZ.,

    View Slide

  2. Έʔͨ
    $SPXE8PSLT *OD69&OHJOFFS
    TEFWUBMLTӡӦ
    FBSMHSBZ.,
    ࠷ۙɺΠϕϯτࢀՃ͢Δͱʮ͋ɺ͜ͷΞΠίϯ5XJUUFSͰΈͨ͜ͱ͋Γ·͢ʔʂʯͱݴΘΕΔ΄ͲͷπΠഇͰ͢ɻ

    View Slide

  3. 69ΤϯδχΞͰ͕͢ࠓ೔͸ٕज़ͷ࿩͸͠·ͤΜɻ
    ఻͑ΔͨΊͷΞΫηγϏϦςΟʹ͍͓ͭͯ࿩͍ͨ͠ͱࢥ͍·͢ɻ
    FBSMHSBZ.,

    View Slide

  4. FBSMHSBZ.,
    օ͞Μ͸ʮΞΫηγϏϦςΟʯͱฉ͍ͯ
    Ͳ͏͍͏ΠϝʔδΛ͍࣋ͬͯ·͔͢ʁ
    ಥવͰ͕͢

    View Slide

  5. FBSMHSBZ.,
    ো͕͍ऀͷͨΊʁ
    ܾͯ͠ো͕͍ऀͷΑ͏ͳಛघͳ࢖͍ํΛ͢ΔਓͷͨΊ͚ͩͰ͸͋Γ·ͤΜɻ
    ΞΫηγϏϦςΟʹ͍ͭͯ

    View Slide

  6. FBSMHSBZ.,
    αʔϏεʹରͯ͠ͳΒ
    ΈΜͳ͕αʔϏεΛ
    ࢖͍΍͍͢Α͏ʹ͢ΔͨΊ
    Ͱ΋͋Γ·͢ɻ
    今はモバイルデバイスや遅いネットワークを利⽤している⼈々のためのものでもあると
    考えられています。
    ΞΫηγϏϦςΟʹ͍ͭͯ

    View Slide

  7. ⽉末で通信制限!!
    3Gでしか⾒れない&電⾞の中でサイトが全然表⽰されない!
    • ⽂字だけ表⽰したら情報は得られる
    • safariには標準で「リーダー表⽰」機能がある
    FBSMHSBZ.,
    俺はキーボードでサクサク画⾯操作するtab使いさ
    • h7ps://yossense.com/tab-key/
    サイト運営側から⾒てもマシンリーダブル
    =検索クローラーが⾛りやすい=SEOの対策にもなる

    View Slide

  8. FBSMHSBZ.,
    アクセシビリティとは...
    能⼒や環境にかかわらずユーザー全員が、同じ情報を得られ
    ること
    ちなみによく対等に使われるユーザビリティとは...
    リーチできるユーザーに対する「使いやすいか使いづらいか」
    Έʔͨͷղऍ

    View Slide

  9. FBSMHSBZ.,
    ຊདྷͳΒ͜ͷྲྀΕͩͱαʔϏεʹམͱ͠ࠐΉٕज़Λ
    ࿩͢ͱ͜ΖͳΜͰ͕͢ɺΞφϦετ͕ଟ͍͔ͳʔͱ
    ࢥ͏ͷͰɺࠓճ͸ࢿྉ࡞Γʹؔͯ͠࿩͠·͢ɻ

    View Slide

  10. FBSMHSBZ.,
    ࢿྉΛ࡞Δͱ͖ʹҙࣝ͠΍͍͢
    ΞΫηγϏϦςΟରԠͬͯͳΜͩΖ͏

    View Slide

  11. FBSMHSBZ.,
    ৭ऑো֐ͷਓ͸
    உੑͰਓʹਓɺঁੑͰਓʹਓͱݴΘΕ͍ͯ·͢ɻ
    ৭͔͍ͭʹؾΛ͚ͭͯΈΔ

    View Slide

  12. FBSMHSBZ.,
    ৭͔͍ͭʹؾΛ͚ͭͯΈΔ
    ྫ͑͹ɺࢿྉ࡞Γͷࡍʹ
    ͜ͷத͔ΒબΜͰΈΔ
    https://jfly.uni-koeln.de/colorset/CUD_color_set_GuideBook_2018.pdf
    カラーユニバーサルデザイン推奨配⾊セット ガイドブック

    View Slide

  13. FBSMHSBZ.,
    ଟ͗͢Δʂͱײͨ͡ͳΒ
    ͪ͜ΒͷύϨοτΛ
    ࢀߟʹͯ͠΋͍͍͔΋

    https://note.mu/oremega/n/n6a20a4459a6b
    チャートでイイ感じな⾊を模索した話
    ৭͔͍ͭʹؾΛ͚ͭͯΈΔ

    View Slide

  14. FBSMHSBZ.,
    ৭ʹཔΒͳ͍
    • ⽂章中なら太字や「かぎかっこ」下線などの装飾で強調
    • グラフなどは⾯に柄を付けたり、折り線の点を記号にする
    モノクロに印刷しても分かりやすい
    0 1 2 3 4 5
    hoge
    fuga
    系列 3
    系列 2
    系列 1
    ৭͔͍ͭʹؾΛ͚ͭͯΈΔ

    View Slide

  15. FBSMHSBZ.,
    ͜ΕΒΛؾΛ͚ͭΔ͚ͩͰ఻ΘΔਓ͕૿͑Δ͔΋ὑ

    View Slide

  16. 5IBOLZPV

    FBSMHSBZ.,

    View Slide