Accessibility Step Vol.01
ΞΫηγϏϦςΟνΣοΫΛࣗಈԽ͢ΔͨΊͷNBSLVQMJOUͷϩʔυϚοϓ"DDFTTJCJMJUZ4UFQ7PM
View Slide
©2018 Yusuke Hiraoࣗݾհฏඌ༏యʢͻΒ͓Ώ͏ͯΜʣגࣜձࣾσΟʔθϩϑϩϯτΤϯυΤϯδχΞ#-0(IUUQTOPUFNVZVTVLFIJSBPYusuke Hirao@cloud10designs
©2018 Yusuke HiraoΞΫηγϏϦςΟνΣοΫΛࣗಈԽ͢ΔͨΊͷNBSLVQMJOUͷϩʔυϚοϓ
©2018 Yusuke HiraoࠓͪΐͬͱϑϩϯτدΓͷٕज़Ϊδϡπͨ͠Ͱ͢
©2018 Yusuke HiraoNBSLVQMJOU͝ଘͷํ✋
©2018 Yusuke Hirao&4-JOUɾTUZMFMJOU͝ଘͷํ✋
©2018 Yusuke Hirao-JOUFSͱқ͘͠આ໌͢ΔͱίʔυΛղੳͯ͠ɺϧʔϧʹଇͬͯͳ͍෦Λࢦఠ͢ΔπʔϧͰ͢ɻ
©2018 Yusuke Hirao)5.-ͷ-JOUFSΦʔϓϯιʔε/PEFKT)5.--JOUFS
©2018 Yusuke Hirao)5.-ͷ-JOUFS͖͔͚ͬIUUQTTQFBLFSEFDLDPNZVTVLFIJSBPLPEPSFCJZVOBOUFTJUFSBSFSVLBUV
©2018 Yusuke Hirao)5.-ͷ-JOUFS͓͔͛͞·Ͱ4UBS͑·ͨ͠
©2018 Yusuke Hirao։ൃ్্ ݱࡏWʹؔΘΒ͍͍ͣͨͩͯຊʹخ͍͠Ͱ͢
©2018 Yusuke Hiraoͱ͍͏Θ͚ͰϩʔυϚοϓ ࠓޙͷ։ൃ༧ఆͷͳ͠
©2018 Yusuke HiraoΞδΣϯμࠓ͢͜ͱࠓɺͲ͏͍͏ར༻Λ͍ͯ͠Δͷ͔ࠓޙɺͲ͏͍͏ར༻Λ͍͔ͨ͠ɾͯ͠΄͍͔͠ΞΫηγϏϦςΟνΣοΫͷࣗಈԽʹ͍ͭͯ
©2018 Yusuke Hiraoίʔυ࣭νΣοΫࣾπʔϧͱͯ͠ίϚϯυʢλʔϛφϧʣ͔Β͘͠HVMQλεΫ͔Β࠷ۙ—fixΦϓγϣϯ࣮͠·ͨ͠ࠓɺͲΜͳར༻Λ͍ͯ͠Δͷ͔
©2018 Yusuke HiraoΤσΟλʔͷػೳͱͯ͠7JTVBM4UVEJP$PEF"UPN7JNʹϓϥάΠϯ͕ఏڙ͞Ε͍ͯΔࠓɺͲΜͳར༻Λ͍ͯ͠Δͷ͔
©2018 Yusuke HiraoνΣοΫ͍ͯ͠Δ͜ͱϑΥʔϚοτɾίʔυελΠϧΠϯσϯτεϖʔεɾվߦҐஔ໋໊نଇόϦσʔγϣϯγϯλοΫεن֨ඇਪɾΞϯνύλʔϯࠓɺͲΜͳར༻Λ͍ͯ͠Δͷ͔
©2018 Yusuke HiraoࠓޙɺͲ͏͍͏ར༻Λ͍͔ͨ͠ɾͯ͠΄͍͔͠NBSLVQMJOUͷϩʔυϚοϓ݄WBMQIBΞϧϑΝ൛ύϒϦογϡ݄Wਖ਼ࣜ൛ύϒϦογϡ⾣ੜπʔϧల։ͷͨΊͷ"1*࣮⾣ϓϥάΠϯɾΧελϜϧʔϧͷ"1*࣮⾣ΠϯσϯτϑΥʔϚοτɾίʔυελΠϧΛ౷Ұ͢ΔϏϧτΠϯϧʔϧ࣮⾣ཁૉɾଐੑνΣοΫ͕࠷ݶՄೳͳϏϧτΠϯϧʔϧ࣮⾣7JTVBM4UVEJP$PEF֦ுWਖ਼ࣜ൛ύϒϦογϡ݄WϚΠφʔόʔδϣϯΞοϓ⾣)5.--JWJOHTUBOEBSEͷόϦσʔγϣϯ͕Ͱ͖ΔϏϧτΠϯϧʔϧՃ⾣8$8"*"3*"ͷόϦσʔγϣϯ͕Ͱ͖ΔϏϧτΠϯϧʔϧՃ⾣ϒϥβ༻Ϟδϡʔϧ։ൃ݄पลϓϥάΠϯ։ൃ⾣)5.-JO+4ʢ5FNQMBUFMJUFSBMʣରԠϓϥάΠϯ⾣QVHରԠϓϥάΠϯ⾣QIQରԠϓϥάΠϯ
©2018 Yusuke HiraoࠓޙɺͲ͏͍͏ར༻Λ͍͔ͨ͠ɾͯ͠΄͍͔͠ੜπʔϧల։ͷͨΊͷ"1*࣮ੜπʔϧ͕࡞ΕΔΈʹ͍ͭͯཁ͕͋ͬͨ
©2018 Yusuke HiraoࠓޙɺͲ͏͍͏ར༻Λ͍͔ͨ͠ɾͯ͠΄͍͔͠ੜπʔϧల։ͷͨΊͷ"1*࣮ੜπʔϧ੍࡞ʹऔΓֻ͔ͬͯ͘Ε͍ͯΔํʑ͕͍Δ
©2018 Yusuke HiraoࠓޙɺͲ͏͍͏ར༻Λ͍͔ͨ͠ɾͯ͠΄͍͔͠ੜπʔϧల։ͷͨΊͷ"1*࣮ੜπʔϧͷͨΊͷ"1*ఏڙ ࣮த!// ॊೈͰඪ४ͳAPIΛఏڙ͢ΔຊՈimport * as markuplint from 'markuplint';!// ࣮ߦڥΛΘͳ͍Universal JavaScriptͰར༻Ͱ͖ΔAPIimport { MLCore } from '@markuplint/ml-core';˞@textlint/kernelʹӨڹΛड͚͍ͯ·͢ɻ
©2018 Yusuke HiraoࠓޙɺͲ͏͍͏ར༻Λ͍͔ͨ͠ɾͯ͠΄͍͔͠ϑϩϯτΤϯυΤϯδχΞʹؾܰʹϛχϚϜʹΞυϗοΫʹར༻ͯ͠΄͍͠ͳͷͰϥΠηϯε.*5Ͱ͢
©2018 Yusuke HiraoࠓޙɺͲ͏͍͏ར༻Λ͍͔ͨ͠ɾͯ͠΄͍͔͠NBSLVQMJOUͷϩʔυϚοϓ݄WBMQIBΞϧϑΝ൛ύϒϦογϡ݄Wਖ਼ࣜ൛ύϒϦογϡ⾣ੜπʔϧల։ͷͨΊͷ/PEFKT"1*࣮⾣ϓϥάΠϯɾΧελϜϧʔϧͷ"1*࣮⾣ΠϯσϯτϑΥʔϚοτɾίʔυελΠϧΛ౷Ұ͢ΔϏϧτΠϯϧʔϧ࣮⾣ཁૉɾଐੑνΣοΫ͕࠷ݶՄೳͳϏϧτΠϯϧʔϧ࣮⾣7JTVBM4UVEJP$PEF֦ுWਖ਼ࣜ൛ύϒϦογϡ݄WϚΠφʔόʔδϣϯΞοϓ⾣)5.--JWJOHTUBOEBSEͷόϦσʔγϣϯ͕Ͱ͖ΔϏϧτΠϯϧʔϧՃ⾣8$8"*"3*"ͷόϦσʔγϣϯ͕Ͱ͖ΔϏϧτΠϯϧʔϧՃ⾣ϒϥβ༻Ϟδϡʔϧ։ൃ݄पลϓϥάΠϯ։ൃ⾣)5.-JO+4ʢ5FNQMBUFMJUFSBMʣରԠϓϥάΠϯ⾣QVHରԠϓϥάΠϯ⾣QIQରԠϓϥάΠϯ
©2018 Yusuke HiraoࠓޙɺͲ͏͍͏ར༻Λ͍͔ͨ͠ɾͯ͠΄͍͔͠8$8"*"3*"ͷόϦσʔγϣϯSPMFଐੑBSJBଐੑࢦఆཁૉͷଥੑଐੑͷنఆɾλΠϙνΣοΫaria-***byଐੑͳͲͱ#idͷ߹ੑaria-labelͷ্ॻ͖νΣοΫͳͲ
©2018 Yusuke HiraoࠓޙɺͲ͏͍͏ར༻Λ͍͔ͨ͠ɾͯ͠΄͍͔͠8$8"*"3*"ͷόϦσʔγϣϯSPMFଐੑBSJBଐੑࢦఆཁૉͷଥੑଐੑͷنఆɾλΠϙνΣοΫaria-***byଐੑͳͲͱ#idͷ߹ੑaria-labelͷ্ॻ͖νΣοΫͳͲਓ͕ؒνΣοΫ͢Δͷʹݶք͕͋Δͭ
©2018 Yusuke HiraoΈͳ͞ΜŊͪΖΜςετॻ͍ͯ·͢ΑͶʁʢಥͳἤΓʣ
©2018 Yusuke HiraoΞΫηγϏϦςΟνΣοΫͷࣗಈԽ͏ͻͱͭར༻͍ͨ͠γʔϯίϯϙʔωϯτςετ✕ΞΫηγϏϦςΟ 8"*"3*"νΣοΫ✕ࣗಈςετπʔϧ
©2018 Yusuke HiraoΞΫηγϏϦςΟνΣοΫͷࣗಈԽίϯϙʔωϯτςετ7VFKTͷྫimport { render } from '@vue/server-test-utils';import Foo from './Foo.vue';describe('Foo', () !=> {it('renders a div', () !=> {const wrapper = render(Foo);expect(wrapper.text()).toContain('!');});});Ҿ༻IUUQTWVFUFTUVUJMTWVFKTPSHKBBQJSFOEFS
©2018 Yusuke HiraoΞΫηγϏϦςΟνΣοΫͷࣗಈԽίϯϙʔωϯτςετʹ8"*"3*"νΣοΫΛಋೖNBSLVQMJOU)5.-ͷஅย %PDVNFOU'SBHNFOUΛѻ͑Δimport { render } from '@vue/server-test-utils';import * as markuplint from 'markuplint';import Foo from './Foo.vue';describe('Foo', () !=> {it('renders a div', () !=> {const wrapper = render(Foo, { propsData: { pressed: true } });expect(markuplint.verify({sourceCodes: wrapper.html(),reportType: 'exception',}),).toBe(true);});});ࢀߟIUUQTWVFUFTUVUJMTWVFKTPSHKBBQJSFOEFS
©2018 Yusuke HiraoΞΫηγϏϦςΟνΣοΫͷࣗಈԽίϯϙʔωϯτςετʹ8"*"3*"νΣοΫΛಋೖNBSLVQMJOU)5.-ͷஅย %PDVNFOU'SBHNFOUΛѻ͑ΔࢀߟIUUQTWVFUFTUVUJMTWVFKTPSHKBBQJSFOEFSimport { render } from '@vue/server-test-utils';import * as markuplint from 'markuplint';import Foo from './Foo.vue';describe('Foo', () !=> {it('renders a div', () !=> {const wrapper = render(Foo, { propsData: { pressed: true } });expect(markuplint.verify({sourceCodes: wrapper.html(),reportType: 'exception',}),).toBe(true);});});ීวతͳଐੑςετ·ͱΊͯ୲͏
©2018 Yusuke HiraoΞΫηγϏϦςΟνΣοΫͷࣗಈԽίʔσΟϯάίϯϙʔωϯτςετϦϯτνΣοΫgit pushϦϙδτϦpost-receive$*αʔόʔϔουϨεϒϥβʔtest —watchlint —watchίϯϙʔωϯτςετ
©2018 Yusuke Hiraoͱ͜ΖͰNBSLVQMJOUΞΫηγϏϦςΟνΣοΧʔͳͷ͔
©2018 Yusuke HiraoΞΫηγϏϦςΟνΣοΫͷࣗಈԽNBSLVQMJOUΞΫηγϏϦςΟνΣοΧʔͳͷ͔νΣοΧʔͱ໊Δͱ͜Ζ·Ͱػೳ࣮͢ΔͭΓͳ͍Ͱ͢ɻ͋͘·ͰNBSLVQMJOUϚʔΫΞοϓϥϯήʔδ༻ͷϦϯλʔͰ͢ɻͳͷͰɺཁૉଐੑΛνΣοΫ͢Δ্Ͱid foraltɺͦͯ͠8"*"3*"ରʹ͍ͯ͠Δ͚ͩͰ͢ɻάϥϑΟΧϧͳ෦$44࣮ʹٴͿͱ͜Ζ·Ͱαϙʔτ͠·ͤΜ͠ɺͰ͖·ͤΜɻNBSLVQMJOUΛར༻ͯ͠ΞΫηγϏϦςΟνΣοΧʔΛ։ൃ͍ͯͨͩ͘͠ͷͿ͔͞Ͱͳ͍Ͱ͢
©2018 Yusuke HiraoΞΫηγϏϦςΟνΣοΫͷࣗಈԽ͍ͯ͠ΔΞΫηγϏϦςΟνΣοΧʔ"ZD8FC্ͰΞΫηγϏϦςΟνΣοΫ͕Ͱ͖ΔαʔϏεπʔϧɻ.*5ϥΠηϯεͷΦʔϓϯιʔεͰ1)1Ͱॻ͔Ε͍ͯΔͷͰ$.4ͳͲʹΈࠐΈՄೳɻ8PSE1SFTTϓϥάΠϯ͕͞Ε͍ͯ·͢ɻCBTFS$.4ϓϥάΠϯ΄͍͠ʜ
©2018 Yusuke Hirao·ͱΊ
©2018 Yusuke Hirao·ͱΊؾܰʹɺϛχϚϜʹɺΞυϗοΫʹར༻ͯ͠΄͍͠ίϯϙʔωϯτςετʹ͑ΔࣗಈςετπʔϧʹΈࠐΉͷ͕ΦεεϝΞΫηγϏϦςΟνΣοΫ͋͘·Ͱཁૉɾଐੑ͕ର
yusukehirao
hiroyaonoe
huffon
ivargrimstad
mazrean
pospome
tomokusaba
niftycorp
okuzawats
parttimenerd
faithandbrave
chururi
sonatard
skipperchong
maltzj
ddemaree
michaelherold
brettharned
shpigford
sugarenia
smashingmag
aleyda
searls
wjessup