クラウドワークスのみんなでやってるアクセシビリティ

by のま

Slide 1

Slide 1 text

CrowdWorks Inc.ʛ Ϋϥ΢υϫʔΫεͷ ΈΜͳͰ΍ͬͯΔ ΞΫηγϏϦςΟ

Slide 2

Slide 2 text

CrowdWorks Inc.ʛ 2 εϐʔΧʔʹ͍ͭͯ ͷ· 2 ● 2022೥7݄1೔ೖࣾʢաڈಉࣾͰ1೥UXσβΠφʔͷΠϯ λʔϯʣ ● Ϋϥ΢υϫʔΫε.jpͷσβΠφʔ ○ τοϓϥΠϯͷࢪࡦνʔϜ ○ σβΠϯγεςϜ ○ σβΠϯάϧʔϓͷ͋Ε͜Ε ● WebΞϓϦέʔγϣϯΞΫηγϏϦςΟྠಡձ ● shuffle1on1 etc.

Slide 3

Slide 3 text

CrowdWorks Inc.ʛ 3 ΞΫηγϏϦςΟʹର͢ΔϞνϕʔγϣϯɾߟ͑ʢͷ·ͷ৔߹ʣ ● σβΠϯΛֶͼɺσβΠϯγεςϜΛ࡞͍ͬͯͨΒελΠϧΛߟྀ͢ΔࡍʹΑΓσ βΠϯɾ։ൃ໘͔Βڵຯ͕༙͍ͨ ● ”ࣾձ՝୊Λղܾ͢Δ”ʹϞνϕʔγϣϯ͕͋ΓɺΞΫηγϏϦςΟ΋େࣄͩͱࢥͬ ͨ ● ϛογϣϯϏδϣϯ͔ΒɺΫϥ΢υϫʔΫεͰ΍Δ͜ͱͷҙٛΛݟग़ͨ͠ ● কདྷͲ͏ͳΔ͔Θ͔Βͳ͍ɻΈΜͳ͍͔ͭ͞·͟·ͳࠔ೉͸૿͑ΔՄೳੑ͕͋ Δɻࣗ෼ʢ΋ΈΜͳ΋ʣ͕ࠔΔ 4

Slide 4

Slide 4 text

CrowdWorks Inc.ʛ ʢWebʣΞΫηγϏϦςΟͱ͸ʁ

Slide 5

Slide 5 text

CrowdWorks Inc.ʛ 5 6 ϢʔβʔΤΫεϖϦΤϯεͷ޲্ ࣾձత੹೚ ๏ཁ݅ͱن੍ʢো֐ऀࠩผղফ๏ʣ΁ͷରԠ Ϋϥ΢υϫʔΫεͷMissionͱVisionͷඥ෇͚ ద੾ͳ։ൃʹΑΔੜ࢈ੑͷ޲্ SEOରࡦ ࣄۀͷػձଛࣦͷ཈੍ ѹ͕͋Δ ߟ͑Δ͜ͱ͕ଟ͍

Slide 6

Slide 6 text

CrowdWorks Inc.ʛ 6 ࠞཚ͠·͢Ͷʁ؆୯ʹఆ͚ٛͩ͝঺հ 8

Slide 7

Slide 7 text

CrowdWorks Inc.ʛ 7 ΞΫηγϏϦςΟͱ͸ʁ ಛఆͷো͕͍Λ࣋ͭਓ͚ͨͪͩͰͳ͘ɺߴྸऀ΍Ұ࣌తͳো͕͍ʢࠔ೉ʣΛ࣋ͭਓ ͨͪ΋ؚΊͯ͋ΒΏΔਓ͕৘ใʹΞΫηεͰ͖ΔΑ͏ʹ͢ΔͨΊͷॏཁͳऔΓ૊Έ 9 Accessibility = Access + Ability ΞΫηγϏϦςΟ ΞΫηε ΞϏϦςΟ ۙͮ͘ɾΞΫηε͢Δ ೳྗɾͰ͖Δ͜ͱ

Slide 8

Slide 8 text

CrowdWorks Inc.ʛ 8 WebΞΫηγϏϦςΟͱ͸ʁ ΑΓଟ͘ͷϢʔβʔ͕ɺΑΓଟ͘ͷར༻؀ڥ͔ΒɺΑΓଟ͘ͷ৔໘΍ঢ়گͰɺWebίϯςϯπ Λ࢖͑ΔΑ͏ʹ͢Δ͜ͱɻʢ※ʣ 10 ೳྗ΍؀ڥʹؔΘΒͣશͯͷਓ͕ɺಉ͡৘ใΛಘΒΕΔΑ͏ʹ͢Δ

Slide 9

Slide 9 text

CrowdWorks Inc.ʛ 9 ΞΫηε͠΍͍͢ʹΞΫηγϏϦςΟͷ جຊ͕ͳ͍ͱͦ΋ͦ΋αʔϏεͷՁ஋Λಧ͚ʹ͍͘ 11

Slide 10

Slide 10 text

CrowdWorks Inc.ʛ ࠔΓ͝ͱࣄྫ ো֐΍ར༻ࠔ೉ͳঢ়ଶʹ͋Δ͕ͨΊʹى͜ΔࠔΓ͝ͱ

Slide 11

Slide 11 text

CrowdWorks Inc.ʛ 11 ো֐΍ར༻ࠔ೉ͳঢ়ଶʹ͋Δ͕ͨΊʹى͜ΔࠔΓ͝ͱ ● ࢹ֮ɾ৭֮ো֐ऀɾߴྸऀ΁ͷσβΠϯελΠϧͷ௿഑ྀ 13 ݟ͑ͳ͍...

Slide 12

Slide 12 text

CrowdWorks Inc.ʛ 12 ো֐΍ར༻ࠔ೉ͳঢ়ଶʹ͋Δ͕ͨΊʹى͜ΔࠔΓ͝ͱ ● ࢹ֮ো֐ɾϩʔϏδϣϯΛ࣋ͭํ΁ͷεΫϦʔϯϦʔμʔඇରԠ 14 ɾɾɾ

Slide 13

Slide 13 text

CrowdWorks Inc.ʛ 13 ো֐΍ར༻ࠔ೉ͳঢ়ଶʹ͋Δ͕ͨΊʹى͜ΔࠔΓ͝ͱɾରࡦ 15 ΞΫηγϏϦςΟͷͨΊͷσβΠϯ ϙελʔ ো֐͸਎ମతͳ΋ͷ͚ͩͰ͸ͳ͍ ҎԼͷΑ͏ͳ͜ͱΛ͠ͳ͍Α͏ɺ ഑ྀ͕ඞཁ ● ඈͼઌ͕ᐆດͳ໊শͷϦϯΫ ͷઃஔ ● উखʹΞχϝʔγϣϯΛ࿈ଓ͠ ͯྲྀ͠ଓ͚Δ ● αϙʔτ΍ϔϧϓʹΞΫηε͠ ʹ͘͘͢Δ

Slide 14

Slide 14 text

CrowdWorks Inc.ʛ ো֐Λ࣋ͭํͱ ΞΫηγϏϦςΟ ো֐Λ࣋ͭํ͸ͲͷΑ͏ʹ΢ΣϒίϯςϯπΛ ར༻͍ͯ͠Δ͔ʁ

Slide 15

Slide 15 text

CrowdWorks Inc.ʛ 15 ো͕͍Λ࣋ͭํͷར༻ঢ়گ ● ऑࢹͷͨΊʹը໘Λେ͖֦͘େͯ͠ར༻ 17

Slide 16

Slide 16 text

CrowdWorks Inc.ʛ ো͕͍ऀ౰ࣄऀ͔Βݟͨ ΞΫηγϏϦςΟʹର͢Δ Ϟνϕʔγϣϯɾߟ͑ 16

Slide 17

Slide 17 text

CrowdWorks Inc.ʛ 17 ͋΍ͷͷ৔߹ ● ௌ֮ো͕͍͕͋Γɺௌ֮Ͱ͸ಘΒΕͳ͍৘ใΛಘ͍ͨ ● ͦ͏͍͏࣌ʹͲ͏͍͏ΞΫηγϏϦςΟ͕͋Δ͔ ● ࣈນˠௌ֮ো͕͍ऀ͚ͩʹศར͔ߟ͑ͯΈΔ ● ߴྸऀʹ΋ɺ΋ͬͱݴ͑͹શһֶ͕ͼʹ΋࢖͑ͨΓ͢Δ →ࣗ෼ࣗ਎ʹରͯ͠ΞΫηγϏϦςΟΛ࢖͏͚ͩͰɺपғ΋Θ͔Γ΍͘͢ͳͬͨΓ͢Δ৔߹͕ ͋Δ ݁ՌతʹΈΜͳwin-winʹͳΔͳΒ΍ͬͨํ͕ྑ͍ͱࢥ͏ ΍Βͣʹ݁ہωΨςΟϒʹͳΔ͘Β͍ͳΒ΍͔ͬͯΒωΨςΟϒ෦෼Λߟ͑ͨํ͕Growthʹ ͳΔ 19

Slide 18

Slide 18 text

CrowdWorks Inc.ʛ ֤ࣄۀ෦ʹ͓͚Δ ΞΫηγϏϦςΟऔΓ૊Έ Ϋϥ΢υϫʔΫε.jpɺΫϥ΢υςοΫɺϏζΞγɺΫϥ΢υϦϯ ΫεʢϦϯΫεΤʔδΣϯτʣɺςοΫμΠϨΫτ

Slide 19

Slide 19 text

CrowdWorks Inc.ʛ 19 Ϋϥ΢υϫʔΫε.jp normanͱ͸Ϋϥ΢υϫʔΫε.jpͰ࡞੒͍ͯ͠ΔʮσβΠϯγ εςϜʢ※ʣʯ σβΠϯɿnormanͱΞΫηγϏϦςΟ σβΠϯγεςϜΛɺΞΫηγϒϧʹ࡞Δ͜ͱͰαʔϏ εͷΞΫηγϏϦςΟͷ޲্ʹ΋ܨ͕Δɻ

Slide 20

Slide 20 text

CrowdWorks Inc.ʛ 20 Ϋϥ΢υϫʔΫε.jp ΧϥʔίϯτϥετΛҙࣝ͠ΧϥʔύϨοτΛ࡞੒ WCAGʢ※ʣͷج४ʮAAʯΛΫϦΞͨ͠΋ͷ͕ normanͷΧϥʔύϨοτʹɻ →ίϯτϥετൺ͕௿͍͕ͨΊʹը໘಺͕ݟʹ͍͘ ໰୊ͷҰͭΛղܾ σβΠϯɿnormanͱΞΫηγϏϦςΟ

Slide 21

Slide 21 text

CrowdWorks Inc.ʛ 21 23 normanͷΧϥʔͷελΠϧΨΠυͷݱঢ় Χϥʔίϯτϥετʹ೰·ͣɺσβΠϯૉࡐΛ࡞ΕΔΑ͏ʹͳΓ·ͨ͠ʂ Color palette ʢৄ͘͠͸ #σβΠϯ ج൫ ϝϯόʔ΁ʣ Thema Color

Slide 22

Slide 22 text

CrowdWorks Inc.ʛ 22 ͦͷ΄͔ʹ΋σβΠϯ໘Ͱͷ normanͷΞΫηγϏϦςΟऔΓ૊Έ͸ ͋Γ·͕͢ࠓճ͸ׂѪ.. 24

Slide 23

Slide 23 text

CrowdWorks Inc.ʛ 23 Ϋϥ΢υϫʔΫε.jp ΦϯϥΠϯͷΞΫηγϏϦςΟࢼݧձʹࢀՃͨ͠ܦ ݧΛ׆͔ͯ͠νΣοΫͯ͠ΈΔ TOPϖʔδɺϩάΠϯϖʔδɺձһϝʔϧΞυϨε ొ࿥ը໘ͷ̏ͭΛνΣοΫ ໰୊఺ΛGitHub Projectʹొ࿥ͯ͠ݟ͑ΔԽ هࣄɿΫϥ΢υϫʔΫεͷWebΞΫηγϏϦςΟ νΣοΫΛ࢝ΊͯΈͨʯ ಠࣗͰWebΞΫηγϏϦςΟνΣοΫ ʢ2020೥ʣ

Slide 24

Slide 24 text

CrowdWorks Inc.ʛ 24 Ϋϥ΢υϫʔΫε.jp ษڧձͰΞΫηγϏϦςΟࢼݧ ʢ2021೥ʣ freeeגࣜձࣾͷҏݪྗ໵͞ΜʹΞΫηγϏϦςΟࢼݧ ͯ͠΋Β͏ νΣοΫͯ͠΋Βͬͨϖʔδͷॏཁ౓͕ߴ͍໰୊Λվ ળͯ̌͠ʹ͢Δ ࡮৽͞ΕͨϩάΠϯϖʔδ͸΄ͱΜͲ໰୊ͳ͠ͱͷධ Ձ͍͚ͨͩΔ ಈըɿଓɾ΋͋͠ͳ͕ͨʰΞΫηγϏϦςΟࢼݧʱΛ ΍Δ͜ͱʹͳͬͨΒ WP ZoomUP #71

Slide 25

Slide 25 text

CrowdWorks Inc.ʛ 25 27 HTMLΛਖ਼͘͠ॻ͚ΔΑ͏ʹ͢ΔνΣοΧʔ - HTML಺෦ʹ࢖༻Ͱ͖Δλάͷ֬ೝ - WAI-ARIAΛਖ਼͘͠࢖༻͍ͯ͠Δ͔֬ೝ - ඞཁͳଐੑΛ෇༩͢Δ - alt ଐੑ - target=”_blank” - button ཁૉ΁ͷ type ଐੑ ҆৺ͯ͠ਖ਼͍͠HTMLΛॻ͚ΔΑ͏ʹ࢓૊ΈԽΛ͢Δ Ϋϥ΢υϫʔΫε.jp Markuplint ͷ׆༻ ʢ2021೥ʙݱࡏʣ

Slide 26

Slide 26 text

CrowdWorks Inc.ʛ Ϋϥ΢υςοΫ 26

Slide 27

Slide 27 text

CrowdWorks Inc.ʛ 27 ࠷ۙऔΓ૊Μͩ͜ͱ ● จࣈͷେ͖͞ʹґଘ͢ΔstyleΛpx͔Βremʹ ● ϑΥʔϜͷΞΫηγϏϦςΟ࠷దԽ 29

Slide 28

Slide 28 text

CrowdWorks Inc.ʛ 28 Ϋϥ΢υςοΫ remʹมߋ͢Δ͜ͱͰϒϥ΢βͷϑΥϯταΠζͷ֦େ ػೳʹରԠɻ  ϑΥϯταΠζʹґଘ͢Δ෦෼ʢpaddingͳͲʣ΋remࢦ ఆʹมߋ͢Δ͜ͱͰϑΥϯτ͕େ͖͘ͳͬͯ΋่Εʹ͘ ͍Α͏ʹมߋ͠·ͨ͠ɻ ϑΥϯταΠζʹґଘ͢ΔstyleΛpx͔Β remʹ

Slide 29

Slide 29 text

CrowdWorks Inc.ʛ 29 Ϋϥ΢υςοΫ labelΛઃఆ͠ϑΥʔϜͷΞΫηγϏϦςΟͷ޲্Λ ߦ͍ͬͯ·͢ɻ ϑΥʔϜͷΞΫηγϏϦςΟ࠷దԽ

Slide 30

Slide 30 text

CrowdWorks Inc.ʛ ਎ۙͳͱ͜Ζ͔Β ·ͣ͸΍ͬͯΈͯ΋Α͍ͷͰ͸ʁ վमͰ͖Δͱ͜Ζ͸ͨ͘͞Μ͋Γͦ͏͚ͩͲ… ࣾ಺Ϣʔβʔ Ϣʔβʔ ΞΫηγϏϦςΟͷվળͰϢʔβϏϦςΟͷվળʹ΋ͭͳ͕Δ

Slide 31

Slide 31 text

CrowdWorks Inc.ʛ ྫ͑͹΍ͬͯΈ͍ͨ͜ͱ… 31 ΩʔϘʔυૢ࡞ͷ࠷దԽ αΠτ಺ݕࡧΛઃஔ ΤϯδχΞ͸Ϛ΢εΛ࢖Θͳ͍ʢͱ͍͏উखͳΠϝʔδʣ  ࣾ಺Ϣʔβʔͷޮ཰΋্͕Δ͔΋?! ࣮࣭Ͳͷϖʔδ΁΋ΞΫηεՄೳʹͳΔɻϔϧϓతͳ໾ׂ΋୲ͬͯ͘ΕΔɻ ύϯΫζϦετͷ࠷దԽ දࣔҐஔ͕มΘͬͯ͠·͏Օॴ͕͋ΔͷͰमਖ਼͍ͨ͠ɻ

Slide 32

Slide 32 text

CrowdWorks Inc.ʛ ϏζΞγ 32

Slide 33

Slide 33 text

CrowdWorks Inc.ʛ ΞΫηγϏϦςΟͷ  վળϦετΛ࡞੒͠·ͨ͠ɻ ΞΫηγϏϦςΟษڧձΛ͖͔͚ͬʹ

Slide 34

Slide 34 text

CrowdWorks Inc.ʛ ϐοΫΞοϓͯ͠͝঺հ

Slide 35

Slide 35 text

CrowdWorks Inc.ʛ 35 ϏζΞγ ● جຊతʹ୯Ґ͸remͰطʹ࣮૷ࡁΈ ● rootཁૉʢhtmlʣʹ font-size: 16px; ͷࢦఆ͕͋ ΔͨΊϒϥ΢βઃఆ͕ޮ͔ͳ͍ঢ়ଶΛղফ͢Δ ϒϥ΢βͰઃఆ͞Ε͍ͯΔϑΥϯτα ΠζͷઃఆΛ൓ө͢Δ ར༻ऀͦΕͧΕ͕ઃఆ͍ͯ͠ΔϑΥϯταΠζͰӾཡ͢Δ ͜ͱ͕Ͱ͖ΔΑ͏ʹͳΔʂ

Slide 36

Slide 36 text

CrowdWorks Inc.ʛ 36 ϏζΞγ ● tabΩʔͰϘλϯʹϑΥʔΧε͕౰ͨΔΑ͏ʹ͢ Δ ● role΍tabindexΛۦ࢖͢Δ λϒͷΞΫηγϏϦςΟ࠷దԽ ΩʔϘʔυͰλϒ͕ૢ࡞Ͱ͖ΔΑ͏ʹͳΔʂ  ϚγϯϦʔμϒϧͳλϒίϯϙʔωϯτʹͳΔʂ

Slide 37

Slide 37 text

CrowdWorks Inc.ʛ 37 ϏζΞγ ● εΫϦʔϯϦʔμʔΛ࣮ࡍʹ࢖༻ͯ͠ΈΔ ʢVoice OverͳͲʣ ● ϦϯΫ΍ը૾ͳͲ࣮ࡍʹεΫϦʔϯϦʔμʔͰ ฉ͍ͯΈͯɺҧ࿨ײ͕͋Ε͹ద੾ͳςΩετΛ ઃఆ͢Δ εΫϦʔϯϦʔμʔରԠ ࢹ֮ো֐͕͋ΔํͰ΋ར༻Ͱ͖ΔΑ͏ʹͳΔʂ

Slide 38

Slide 38 text

CrowdWorks Inc.ʛ Ϋϥ΢υϦϯΫε 38

Slide 39

Slide 39 text

CrowdWorks Inc.ʛ 39 Ϋϥ΢υϦϯΫεͰ͢

Slide 40

Slide 40 text

CrowdWorks Inc.ʛ 40 ΞΫηγϏϦςΟऔΓ૊Έ͍ͨؾ࣋ͪ͸͋Δ ● ։ൃϝϯόʔɺ૝૾Ҏ্ʹ͍ͳ͍ ● ΞΫηγϏϦςΟͱ޲͖߹͍͍ͨҙࢥ͸͋Δ 42

Slide 41

Slide 41 text

CrowdWorks Inc.ʛ 41 ΞΫηγϏϦςΟऔΓ૊Έ͍ͨؾ࣋ͪ͸ ͋ΔͷͰɺ΍Δͧͱ͍͏࢟੎͔Β

Slide 42

Slide 42 text

CrowdWorks Inc.ʛ 42 ࠷ۙऔΓ૊Μͩ͜ͱ ● ͍ͪ͘͞͸͡ΊΔσβΠϯγεςϜ ● աڈͷෛ࠴ղফΛ໨ࢦͨ͢ΊɺϓϩμΫτΞοϓσʔτத 44

Slide 43

Slide 43 text

CrowdWorks Inc.ʛ 43 Ϋϥ΢υϦϯΫε ։ൃ࣌ʹҰ͔ΒUIΛߟ͑Δػձ͕ଟ͔ͬͨ খ͘͞͸͡ΊΔσβΠϯγεςϜ → σβΠϯͷج४ɾํ਑͕ͳ͔ͬͨ → ڞ௨ͷίϯϙʔωϯτ෦඼͸͕͋ͬͨҰཡੑ͕ͳ͘ɺ֬ೝ͢Δͷ͕େม ϓϩμΫτͷUIʹҰ؏ੑΛ࣋ͨͤɺσβΠϯͱίʔυΛ࿈ܞͤ͞Δ͜ͱͰɺݟͨ໨ɾڍಈͷ૬ޓͷ ζϨΛແ͍ͨ͘͠

Slide 44

Slide 44 text

CrowdWorks Inc.ʛ 44 Ϋϥ΢υϦϯΫε ϦϯΫεͷϑϩϯτΤϯυϦϓϨʔεʹ൐͍ɺϫʔΧʔɾΫϥΠΞϯτͦΕ ͧΕʹ࠷దԽͨ͠γεςϜΛߏங͢ΔͨΊσβΠϯγεςϜ࡞੒ελʔτʂ খ͘͞͸͡ΊΔσβΠϯγεςϜ

Slide 45

Slide 45 text

CrowdWorks Inc.ʛ 45 Ϋϥ΢υϦϯΫε - ࢖͏΋ͷ͚ͩ࡞Δ খ͘͞͸͡ΊΔσβΠϯγεςϜ σβΠϯτʔΫϯ ػೳͷσβΠϯˠڞ௨෦඼ͱͯ͠࢖͏ύλʔϯΛσβΠϯγεςϜͷίϯϙʔωϯτͱͯ͠ఆٛ ϓϩμΫτશମͷελΠϦϯάͰར༻ ࢖͏ύλʔϯ͕૿͑ͨΒɺద֦ٓு͢Δ ίϯϙʔωϯτ Ͱ͖Δ͚ͩ࠷খͷྗͰਐΊΔ ҙࢥܾఆऀˠ2໊Ͱ͢͢Ί͍ͯ·͢

Slide 46

Slide 46 text

CrowdWorks Inc.ʛ 46 Ϋϥ΢υϦϯΫε খ͘͞͸͡ΊΔσβΠϯγεςϜ ΞΫηγϏϦςΟऔΓ૊Έ - markuplintΛಋೖͯ͠ɺҰఆϨϕϧͷΞΫηγϏϦςΟΛ୲อ - ૉૣ͘ߏங͍ͯ͘͠தͰɺηϧϑνΣοΫ͢Δͷ͸೉͍͚͠ͲlinterͷϧʔϧͰΤϥʔʹͳͬͨ෼ ͘Β͍͸ରԠ͍͚ͯ͠Δ - lintͷΤϥʔಡΈͳ͕ΒରԠ͍ͯ͘͠͏ͪʹগ͠ΞΫηγϏϦςΟΘ͔ΔΑ͏ʹͳͬͨؾ͕͢Δ borderपΓ͕ΞΫηγϏϦςΟ͕ѱ͍ͬΆ͍ͷͰվળؤுΓ·͢

Slide 47

Slide 47 text

CrowdWorks Inc.ʛ ςοΫμΠϨΫτʢچ: ίσΞϧʣ 47

Slide 48

Slide 48 text

CrowdWorks Inc.ʛ ϒϥϯυ໊ɾϩΰ͕มΘΓ·ͨ͠🎉 2023/8/1 ΑΓ 48 2023/7/31 ·Ͱ https://www.codeal.work/ https://techdirect.jp/

Slide 49

Slide 49 text

CrowdWorks Inc.ʛ 49 ϦχϡʔΞϧҎલ͔ΒͷऔΓ૊ΈʢίʔυϨϏϡʔʣ

Slide 50

Slide 50 text

CrowdWorks Inc.ʛ ϦχϡʔΞϧҎલ͔ΒͷऔΓ૊ΈʢϥΠϒϥϦબఆʣ 50 ʦbootstrap-vueʧ Ϟʔμϧ࣮૷࣌ͷϑΥʔΧεͷ੍ޚʢ͘͢͝େมʣ΍ WAI-ARIA ؔ ࿈ͷଐੑʹରԠ͍ͯ͠Δʂ

Slide 51

Slide 51 text

CrowdWorks Inc.ʛ ίσΞϧ → ςοΫμΠϨΫτ ϦχϡʔΞϧΑΓલ͔Β௕Β๊͍͑ͯͨ͘໰୊ 51

Slide 52

Slide 52 text

CrowdWorks Inc.ʛ UIίϯϙʔωϯτͷίϯτϥετൺෆ଍😱 52

Slide 53

Slide 53 text

CrowdWorks Inc.ʛ ʮUI ίϯϙʔωϯτͷ഑৭มߋ͸Өڹൣғ͕ ɹ޿͗ͯ͢खΛ෇͚ʹ͍͘ɾɾɾʯ 53

Slide 54

Slide 54 text

CrowdWorks Inc.ʛ 2023೥4݄ʙ ίσΞϧגࣜձ͕ࣾגࣜձࣾΫϥ΢υϫʔΫεʹ  ٵऩ߹ซ͞ΕΔ ʢαΠτ಺ͷ໊ࣾมߋ, ֤छΞΧ΢ϯτͷ໊ٛมߋ, etc…ʣ 54

Slide 55

Slide 55 text

CrowdWorks Inc.ʛ ʮ഑৭ͷ໰୊Λ௚͢ͳΒࠓ͔͠ͳ͍ʂʯ 55

Slide 56

Slide 56 text

CrowdWorks Inc.ʛ ܾఆͨ͠৽͍͠ϩΰ 56 https://www.codeal.work/ https://techdirect.jp/

Slide 57

Slide 57 text

CrowdWorks Inc.ʛ ςʔϚΧϥʔͷมߋ 57 #dc3068 hsl(340deg 71% 52%) #e75a7f hsl(344deg 76% 62%) ً౓͕10ϙΠϯτݮ ʢएׯ҉͍৭ʣ

Slide 58

Slide 58 text

CrowdWorks Inc.ʛ ςʔϚΧϥʔͷมߋ 58

Slide 59

Slide 59 text

CrowdWorks Inc.ʛ ίϯτϥετ ✅ 59

Slide 60

Slide 60 text

CrowdWorks Inc.ʛ ʢࢀߟʣ࢖༻ͨ͠πʔϧ ίϯτϥετൺ 4.5 Ҏ্Λ໨ࢦͭͭ͠ݩͷ৭ʹ͍ۙ৭Λ୳ͨ͢Ίʹ Contrast Finder Λ࢖༻͠·ͨ͠  https://app.contrast-finder.org/ 60

Slide 61

Slide 61 text

CrowdWorks Inc.ʛ ͜Ε͔ΒΞΫηγϏϦςΟΛ ߴΊΔͨΊʹͰ͖Δ͜ͱ σβΠϯɺ࣮૷ɺ޿ใɺͦͷଞΈΜͳͰҙࣝͯ͠ΈΔͱ ྑ͍͜ͱ

Slide 62

Slide 62 text

CrowdWorks Inc.ʛ ● ϓϥΠϕʔτ΍ۀ຿ͰSNSɺϒϩάʹը૾౤ߘ͢Δͱ͖ɺaltଐੑΛ͚ͭͯΈΔ ϋʔυϧ௿͘ɺ ੈͷதͱ͍ͭ΋ͷ࢓ࣄͷৼΔ෣͍Λม͑ͯΈΔ 62 ʲXʢTwitterʣʳ ʲnoteʳ Ωϟϓγϣϯ ୅ସςΩετ

Slide 63

Slide 63 text

CrowdWorks Inc.ʛ ● ۀ຿ʹ͓͍ͯ”Ͱ͖Δͱ͜Ζ͔Β”ΞΫηγϏϦςΟΛҙࣝͯ͠ΈΔ ϋʔυϧ௿͘ɺ ੈͷதͱ͍ͭ΋ͷ࢓ࣄͷৼΔ෣͍Λม͑ͯΈΔ 63 બ୒͠΍͍͢UIʹ alt໋໊ͷఏҊʢࢦఆʣ Ͱ͖ΔൣғͰϨϏϡʔ

Slide 64

Slide 64 text

CrowdWorks Inc.ʛ ● ຊ΍ωοτʹ͋ΔυΩϡϝϯτΛಡΜͰΈΔ ● ݟ͑ʹ͍͘ɺಡΈʹ͍͘ʮࠔͬͨʂʯΛղܾ͢ΔσβΠϯ ● WebΞϓϦέʔγϣϯΞΫηγϏϦςΟ──ࠓ೔͔Β࢝ΊΔݱ ৔͔Βͷվળ ● σδλϧிɿ΢ΣϒΞΫηγϏϦςΟಋೖΨΠυϒοΫ ·ͣ͸͜Ε ϋʔυϧ௿͘ɺ ੈͷதͱ͍ͭ΋ͷ࢓ࣄͷৼΔ෣͍Λม͑ͯΈΔ 64

Slide 65

Slide 65 text

CrowdWorks Inc.ʛ ● ΞΫηγϏϦςΟͷΠϕϯτʹࢀՃͯ͠ΈΔʢΦϯ/ΦϑϥΠϯʣ ○ connpass΍SNS͔Βʢ※ʣ ϋʔυϧ௿͘ɺ ੈͷதͱ͍ͭ΋ͷ࢓ࣄͷৼΔ෣͍Λม͑ͯΈΔ 65 σβΠφʔɾΤϯδχΞͰͳͯ͘΋ڵຯ͕ ͋Δํ͸ͥͻࢀՃͯ͠Έ͍ͯͩ͘͞ʂ

Slide 66

Slide 66 text

CrowdWorks Inc.ʛ ͓·͚

Slide 67

Slide 67 text

CrowdWorks Inc.ʛ ● Slackɿ #accessibility ● NotionɿΞΫηγϏϦςΟʹؔ͢Δϖʔδ(WIP) ● QiitaهࣄʢΈʔͨ͞Μʣ ○ UDGษڧձ 2019/03/06 ○ σβΠφʔษڧձ ΞΫηγϏϦςΟ 22.10.27 ● ΄͔ʢେࢁ͞Μݸਓʣ ○ awesome-japanese-a11y-companies Ϋϥ΢υϫʔΫεͷΞΫηγϏϦςΟ৘ใ 67

Slide 68

Slide 68 text

CrowdWorks Inc.ʛ ● ຊ΍ωοτʹ͋ΔυΩϡϝϯτΛಡΜͰΈΔ ● ݟ͑ʹ͍͘ɺಡΈʹ͍͘ʮࠔͬͨʂʯΛղܾ͢ΔσβΠϯ ྠಡձ։࠵༧ఆͰ͢✋ 68 ษڧձޙɺ#accessibility ͷνϟϯωϧͷ౤ߘ͔ΒྠಡձࢀՃر ๬ͷํ͸ڍख✋ ͓ئ͍͠·͢