覚醒するアクセシビリティ (JSConf Japan 2019)

by Lena Morita

Slide 1

Slide 1 text

֮੧͢ΔΞΫηγϏϦςΟ ৿ాϦʔφ @mirka

Slide 2

Slide 2 text

΢Σϒ ͬͯ Կͩͱࢥͬͯ·͔͢ʁ

Slide 3

Slide 3 text

@mirka Accessibility Web

Slide 4

Slide 4 text

@mirka ѭͻݟͯͷͷͪͷ৺ʹ ͘ΒͿΕ͹ੲ͸΋ͷΛ ࢥ͸͟Γ͚Γ ΞΫηγ

Slide 5

Slide 5 text

Who am I?

Slide 6

Slide 6 text

@mirka Lena Morita ! ݩσβΠφʔ ! Women Who Code Tokyo  σΟϨΫλʔ ! ถAutomatticࣾͰ  JavaScript Engineer

Slide 7

Slide 7 text

We’re hiring! NEW!

Slide 8

Slide 8 text

ΞΫηγϏϦςΟͱͷग़ձ͍

Slide 9

Slide 9 text

@mirka 2016

Slide 10

Slide 10 text

@mirka ͦ͏͍͑͹ ΞΫηγϏϦςΟͬͯ ͳΜ͔͋ͬͨͳ

Slide 11

Slide 11 text

@mirka ϢʔβϏϦςΟͳΒ ೚ͤͯʂ

Slide 12

Slide 12 text

@mirka ΞΫηγϏϦςΟ ௐ΂ͨ

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

ݱ࣮

Slide 15

Slide 15 text

@mirka ΞΫηγϏϦςΟ͕ 㚽Ζʹ͞ΕΔཧ༝

Slide 16

Slide 16 text

@mirka Ӧۀத अຐͳ͜ͱʹ ؾ͍ͮͯͳ͍

Slide 17

Slide 17 text

@mirka Ӧۀத ·͔͞ंҜࢠͷਓ͕ ௨Δͱࢥͬͯͳ͍

Slide 18

Slide 18 text

@mirka υʔύϛϯ͕ ग़ͯͳ͍ʂ ✨ Ӧۀத

Slide 19

Slide 19 text

υʔύϛϯͷਖ਼ମ

Slide 20

Slide 20 text

υʔύϛϯͷਖ਼ମ 1 ର৅͕ ҙ֎ʹ޿͍

Slide 21

Slide 21 text

@mirka ো֐ऀରԠ

Slide 22

Slide 22 text

@mirka ݈ৗऀ ো֐ऀ

Slide 23

Slide 23 text

@mirka ΞϏϦςΟ͸ଟछଟ༷ ঢ়گʹΑͬͯมԽ͢Δ ೳ ྗ

Slide 24

Slide 24 text

@mirka “ো֐͸ਓͰ͸ͳ͘ ؀ڥʹ͋Δ”

Slide 25

Slide 25 text

@mirka Inclusive 101 by Microsoft Design (CC BY-NC-ND)

Slide 26

Slide 26 text

@mirka “͏ͪͷϓϩμΫτ͸ ো֐ऀ͕λʔήοτ ͡Όͳ͍͔Β”

Slide 27

Slide 27 text

υʔύϛϯͷਖ਼ମ 2 ͜ΜͳʹͰ͖Δͷ ΢Σϒ͚ͩͰ͸ʁ

Slide 28

Slide 28 text

@mirka

Slide 29

Slide 29 text

@mirka

Slide 30

Slide 30 text

@mirka

Slide 31

Slide 31 text

@mirka

Slide 32

Slide 32 text

@mirka Extensions Userscripts

Slide 33

Slide 33 text

@mirka ?

Slide 34

Slide 34 text

Open & Standardized

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

@mirka Web

Slide 37

Slide 37 text

@mirka ΍ͬͺ HTML!!

Slide 38

Slide 38 text

@mirka ػց Machines

Slide 39

Slide 39 text

υʔύϛϯͷਖ਼ମ 3 ޿ٛͷ ΞΫηγϏϦςΟ

Slide 40

Slide 40 text

@mirka ݪٛͷΞΫηγϏϦςΟ ো֐ɺো֐ऀʹ য఺Λ౰ͯͨ΋ͷ

Slide 41

Slide 41 text

@mirka ϕκεͷ API ϚχϑΣετ

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

@mirka ϕκεͷ͓ୡ͠ ͢΂ͯͷνʔϜ͸ σʔλͱػೳΛ αʔϏε ɾ ΠϯλʔϑΣʔεΛ ௨ͯ͠ެ։ͤΑ

Slide 44

Slide 44 text

@mirka ϕκεͷ͓ୡ͠ ଞνʔϜͷσʔλΛ ௚ʹಡΈग़ͨ͠Γ ཪޱΛઃ͚Δͷ͸ېࢭ

Slide 45

Slide 45 text

@mirka ϕκεͷ͓ୡ͠ ͢΂ͯͷαʔϏε ɾ   ΠϯλʔϑΣʔε͸  ࠷ऴతʹ֎෦ͷ։ൃऀʹ  ެ։͢Δ͜ͱΛલఏʹઃܭͤΑ

Slide 46

Slide 46 text

@mirka ϕκεͷ͓ୡ͠ ͜ͷ໋ྩʹ ैΘͳ͍΍ͭ͸ ΫϏʂ

Slide 47

Slide 47 text

@mirka — Steve Yegge “It’s called Accessibility, and it’s the most important thing in the computing world.”

Slide 48

Slide 48 text

@mirka

Slide 49

Slide 49 text

@mirka

Slide 50

Slide 50 text

@mirka ΠϯλʔϑΣʔε

Slide 51

Slide 51 text

@mirka ✖

Slide 52

Slide 52 text

@mirka UI man–machine interface

Slide 53

Slide 53 text

@mirka API machine–machine interface

Slide 54

Slide 54 text

৘ใͷந৅Խ

Slide 55

Slide 55 text

΢Σϒ͕୆ແ͠

Slide 56

Slide 56 text

@mirka

Slide 57

Slide 57 text

@mirka

Modal title

Lorem ipsum dolor sit amet

Save

Slide 58

Slide 58 text

@mirka ϞʔμϧμΠΞϩάͷඪ४ڍಈ ! ։͍ͨΒfocus͕Ϟʔμϧ಺ʹҠಈ͢Δ ! ดͨ͡Βfocus͕ݩͷཁૉʹ໭Δ ! Ϟʔμϧ಺ͰTabΩʔΛଧͪଓ͚ͯ΋  focus͕Ϟʔμϧ֎ʹಀ͛ͳ͍ ! EscΩʔͰด͡Δ

Slide 59

Slide 59 text

@mirka

Modal title

Lorem ipsum dolor sit amet

Save

Slide 60

Slide 60 text

΢Σϒͷຊྖൃش

Slide 61

Slide 61 text

@mirka ਖ਼͘͠ઃܭˍ ࣮૷͞Εͨ৘ใ͸ ࣗ༝Ͱ͋Δ

Slide 62

Slide 62 text

ࣗ༝Λ࠷େԽ͍ͨ͠

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

@mirka ࢠͲ΋ͷ༧๷઀छ ೕ༮ࣇ݈߁਍ࠪͷ͝Ҋ಺ ҭࣇֶڃɾ࠙ஊձͷ͝Ҋ಺ ࢠͲ΋ͷ݈߁ڭࣨ ೛࢈්ɾ৽ੜࣇͷ๚໰ࢦಋ