アクセシビリティチェックを自動化するためのmarkuplintのロードマップ

ΞΫηγϏϦςΟνΣοΫΛࣗಈԽ͢ΔͨΊͷ NBSLVQMJOUͷϩʔυϚοϓ "DDFTTJCJMJUZ4UFQ7PM

©2018 Yusuke Hirao ࣗݾ঺հ ฏඌ༏యʢͻΒ͓Ώ͏ͯΜʣ גࣜձࣾσΟʔθϩ ϑϩϯτΤϯυΤϯδχΞ #-0(IUUQTOPUFNVZVTVLFIJSBP Yusuke Hirao
@cloud10designs

©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*࣮૷ ೿ੜπʔϧͷͨΊͷ"1*ఏڙ ࣮૷த !// ॊೈͰඪ४ͳAPIΛఏڙ͢ΔຊՈ
import * as markuplint from 'markuplint'; !// ࣮ߦ؀ڥΛ໰Θͳ͍Universal JavaScriptͰར༻Ͱ͖ΔAPI import { MLCore } from '@markuplint/ml-core'; ˞@textlint/kernelʹӨڹΛड͚͍ͯ·͢ɻ

©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 ΞΫηγϏϦςΟνΣοΫͷࣗಈԽ ΋͏ͻͱͭར༻͍ͨ͠γʔϯ ίϯϙʔωϯτςετ ✕ ΞΫηγϏϦςΟ 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('<div>!</div>'); }); }); Ҿ༻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 Λѻ͑Δ ࢀߟIUUQTWVFUFTUVUJMTWVFKTPSHKBBQJSFOEFS 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); }); }); ීวతͳଐੑ஋ςετ͸·ͱΊͯ୲͏

©2018 Yusuke Hirao ΞΫηγϏϦςΟνΣοΫͷࣗಈԽ ίʔσΟϯά ίϯϙʔωϯτ ςετ ϦϯτνΣοΫ git push
ϦϙδτϦ post-receive $*αʔόʔ ϔουϨε ϒϥ΢βʔ test —watch lint —watch ίϯϙʔωϯτ ςετ

©2018 Yusuke Hirao ΞΫηγϏϦςΟνΣοΫͷࣗಈԽ NBSLVQMJOU͸ΞΫηγϏϦςΟνΣοΧʔͳͷ͔ νΣοΧʔͱ໊৐Δͱ͜Ζ·Ͱػೳ࣮૷͢Δͭ΋Γ͸ͳ͍Ͱ͢ɻ ͋͘·ͰNBSLVQMJOU͸ϚʔΫΞοϓϥϯήʔδ༻ͷϦϯλʔͰ͢ɻ ͳͷͰɺཁૉ΍ଐੑΛνΣοΫ͢Δ্Ͱid ΍for΍altɺ ͦͯ͠8"*"3*"΋ର৅ʹ͍ͯ͠Δ͚ͩͰ͢ɻ
άϥϑΟΧϧͳ෦෼΍$44࣮૷ʹٴͿͱ͜Ζ·Ͱ͸αϙʔτ͠·ͤΜ͠ɺͰ͖·ͤΜɻ NBSLVQMJOUΛར༻ͯ͠ΞΫηγϏϦςΟνΣοΧʔΛ ։ൃ͍ͯͨͩ͘͠ͷ͸΍Ϳ͔͞Ͱ͸ͳ͍Ͱ͢

©2018 Yusuke Hirao ΞΫηγϏϦςΟνΣοΫͷࣗಈԽ ஫໨͍ͯ͠ΔΞΫηγϏϦςΟνΣοΧʔ "ZD 8FC্ͰΞΫηγϏϦςΟνΣοΫ͕ Ͱ͖ΔαʔϏεπʔϧɻ .*5ϥΠηϯεͷΦʔϓϯιʔεͰ 1)1Ͱॻ͔Ε͍ͯΔͷͰ
$.4ͳͲʹ૊ΈࠐΈՄೳɻ 8PSE1SFTTϓϥάΠϯ͕഑෍͞Ε͍ͯ·͢ɻ CBTFS$.4ϓϥάΠϯ΋΄͍͠ʜ

ΞΫηγϏϦςΟνΣοΫΛࣗಈԽ͢ΔͨΊͷ NBSLVQMJOUͷϩʔυϚοϓ "DDFTTJCJMJUZ4UFQ7PM

アクセシビリティチェックを自動化するためのmarkuplintのロードマップ

アクセシビリティチェックを自動化するためのmarkuplintのロードマップ

More Decks by Yusuke Hirao

Other Decks in Programming

Featured

Transcript