覚醒するアクセシビリティ (WordCamp Tokyo 2019)

by Lena Morita

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

http://mysite.com

Slide 6

Slide 6 text

΢Σϒ͡Όͳ͍ ΋ͷͬͯʁ

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

@mirka Accessibility Web

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Who am I?

Slide 12

Slide 12 text

@mirka Lena Morita ! ݩσβΠφʔ ! Women Who Code Tokyo  ӡӦελοϑ ! ͍Ζ͍Ζ͕Μ͹ͬͯݱࡏ͸  ถAutomatticࣾͰ  JavaScript Engineer

Slide 13

Slide 13 text

We’re hiring! NEW!

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

@mirka 2016

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

ΞΫηγϏϦςΟۀք

Slide 21

Slide 21 text

@mirka 2017೥ͷ WebΞΫηγϏϦςΟ ಈ޲Λ઎͏

Slide 22

Slide 22 text

@mirka 2017೥ͷ WebΞΫηγϏϦςΟ ಈ޲Λ઎͏ ΞΫηγϏϦςΟ Ψν੎

Slide 23

Slide 23 text

@mirka ΞΫηγϏϦςΟ Ψν੎ ! ΞΫηγͷઐ໳Ո ! ࣾ಺֎ͰΞΫηγͷਪਐΛͯ͠Δਓ ! Twitter bio ʹ “ΞΫηγϏϦςΟ”  “a11y” ͳͲͷݴ༿͕͋Δ 

Slide 24

Slide 24 text

@mirka Φϥ Θ͘Θ͘͢Δͧ

Slide 25

Slide 25 text

@mirka ͑ͬ

Slide 26

Slide 26 text

@mirka ΞΫηγʹ ৐Γؾ͡Όͳ͍ਓΛ ͍͔ʹઆಘ͢Δ͔

Slide 27

Slide 27 text

@mirka ো֐ऀࠩผ ղফ๏ ⚖

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 ݱ࣮͸ ͦΜͳʹ؁͘ͳ͍Α

Slide 33

Slide 33 text

ݱ࣮

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

υʔύϛϯͷਖ਼ମ

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

@mirka ো֐ऀରԠ

Slide 41

Slide 41 text

@mirka ݈ৗऀ ো֐ऀ

Slide 42

Slide 42 text

@mirka disability dis-ability

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

@mirka Inclusive Design

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

@mirka Permanent Temporary Situational ߃ٱత Ұ࣌త ঢ়گత

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

@mirka Web

Slide 52

Slide 52 text

@mirka HTML ߏ଄ͷ ҙຯ͚ͮ

Slide 53

Slide 53 text

@mirka ػց Machines

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

@mirka Steve Yegge ͷ͓࿩͠

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

@mirka αʔϏε ɾ ΠϯλʔϑΣʔεͬͯʁ

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

@mirka WordPress Ͱ͍͏ͱʁ

Slide 64

Slide 64 text

@mirka ޿ใνʔϜ DTPνʔϜ

Slide 65

Slide 65 text

@mirka

Slide 66

Slide 66 text

@mirka WordPress REST API

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

@mirka

Slide 69

Slide 69 text

@mirka

Slide 70

Slide 70 text

@mirka

Slide 71

Slide 71 text

@mirka ΠϯλʔϑΣʔε

Slide 72

Slide 72 text

@mirka Disability Ability Machine Human Accessibility Usability

Slide 73

Slide 73 text

΢Σϒͱ͸

Slide 74

Slide 74 text

@mirka

Slide 75

Slide 75 text

@mirka

Slide 76

Slide 76 text

@mirka

Slide 77

Slide 77 text

@mirka

Slide 78

Slide 78 text

@mirka Extensions Userscripts

Slide 79

Slide 79 text

@mirka Reader mode VoiceOver Font size

Slide 80

Slide 80 text

@mirka ?

Slide 81

Slide 81 text

Open & Standardized

Slide 82

Slide 82 text

No content

Slide 83

Slide 83 text

΢Σϒͷຊྖൃش

Slide 84

Slide 84 text

@mirka Ӧۀத Ӧۀத Ӧۀத

Slide 85

Slide 85 text

@mirka WCAG Web Content Accessibility Guidelines

Slide 86

Slide 86 text

@mirka ࢖͍ͮΒ͍ ࢖͍΍͍͢ Accessibility Usability ࢖͍΍͍͔͢ͳʁ ࢖͑ͳ͍ਓ͍Δ͔ͳʁ

Slide 87

Slide 87 text

໰͑ʂ ΞΫηγϏϦςΟ

Slide 88

Slide 88 text

@mirka جຊͷ໰͍ 1. ݟ͑ʹ͍͘ঢ়گͰ΋࢖͑Δʁ 2. ΩʔϘʔυ͚ͩͰ࢖͑Δʁ 3. Ի੠ಡΈ্͛Ͱ࢖͑Δʁ

Slide 89

Slide 89 text

@mirka શ͘࢖͑ͳ͍ ࢖͍΍͍͢ After શ͘࢖͑ͳ͍ ࢖͍΍͍͢ ࢖͑ΔϥΠϯ Before

Slide 90

Slide 90 text

@mirka جຊͷ໰͍ 1. ݟ͑ʹ͍͘ਓͰ΋࢖͑Δʁ 2. ΩʔϘʔυ͚ͩͰ࢖͑Δʁ 3. Ի੠ಡΈ্͛Ͱ࢖͑Δʁ

Slide 91

Slide 91 text

໰͍ 1 ݟ͑ʹ͍͘ਓͰ΋ ࢖͑Δʁ

Slide 92

Slide 92 text

@mirka

Slide 93

Slide 93 text

@mirka

Slide 94

Slide 94 text

໰͍ 2 ΩʔϘʔυ͚ͩͰ ࢖͑Δʁ

Slide 95

Slide 95 text

@mirka

Slide 96

Slide 96 text

@mirka

Slide 97

Slide 97 text

@mirka

Slide 98

Slide 98 text

໰͍ 3 Ի੠ಡΈ্͛Ͱ ࢖͑Δʁ

Slide 99

Slide 99 text

@mirka alt

Slide 100

Slide 100 text

@mirka

Slide 101

Slide 101 text

@mirka

Save changes

Slide 102

Slide 102 text

@mirka جຊͷ໰͍ 1. ݟ͑ʹ͍͘ਓͰ΋࢖͑Δʁ 2. ΩʔϘʔυ͚ͩͰ࢖͑Δʁ 3. Ի੠ಡΈ্͛Ͱ࢖͑Δʁ

Slide 103

Slide 103 text

΢Σϒɺ͘͢͝ͳ͍ʁ

Slide 104

Slide 104 text

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