Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
アクセシビリティチェックを自動化するためのmarkuplintのロードマップ
Search
Yusuke Hirao
August 10, 2018
Programming
2
2.1k
アクセシビリティチェックを自動化するためのmarkuplintのロードマップ
Accessibility Step Vol.01
Yusuke Hirao
August 10, 2018
Tweet
Share
More Decks by Yusuke Hirao
See All by Yusuke Hirao
ユニバーサルHTMLとWebのポテンシャル
yusukehirao
1
810
TypeScriptでつくるNode.jsパッケージ
yusukehirao
3
630
READMEにバッヂが欲しくてテストを書き始めました
yusukehirao
1
770
ユニバーサルなマークアップをしよう
yusukehirao
2
900
本当に必要ですか?そのJavaScript 〜スクロールイベント・リサイズイベント編〜
yusukehirao
0
620
コードレビュー なんてしてられるかッ!!
yusukehirao
24
14k
自動化をデザインしよう
yusukehirao
1
900
JSONの型のはなし
yusukehirao
0
610
トランスパイラという文化(…とその後) - PHPカンファレンス福岡2016
yusukehirao
1
2.7k
Other Decks in Programming
See All in Programming
英語文法から学ぶ、クリーンな設計の秘訣
newnomad
1
270
아직도 SOLID 를 '글'로만 알고 계신가요?
sh1mj1
0
360
PHPのガベージコレクションを深掘りしよう
rinchoku
0
240
PHPでお金を扱う時、終わりのない 謎の1円調査の旅にでなくて済む方法
nakka
3
1.2k
私の愛したLaravel 〜レールを超えたその先へ〜
kentaroutakeda
12
3.5k
本当だってば!俺もTRICK 2022に入賞してたんだってば!
jinroq
0
250
RubyKaigiで手に入れた HHKB Studioのための HIDRawドライバ
iberianpig
0
1k
ニックトレイン登壇資料
ryotakurokawa
0
140
生成AIの使いどころ
kanayannet
0
100
SQL Server ベクトル検索
odashinsuke
0
110
Devin , 正しい付き合い方と使い方 / Living and Working with Devin
yukinagae
1
530
goにおける コネクションプールの仕組み を軽く掘って見た
aronokuyama
0
140
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Understanding Cognitive Biases in Performance Measurement
bluesmoon
28
1.6k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Designing Experiences People Love
moore
141
23k
Building Adaptive Systems
keathley
41
2.5k
The Invisible Side of Design
smashingmag
299
50k
A Philosophy of Restraint
colly
203
16k
Being A Developer After 40
akosma
90
590k
How to Ace a Technical Interview
jacobian
276
23k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
GraphQLとの向き合い方2022年版
quramy
45
14k
Automating Front-end Workflow
addyosmani
1369
200k
Transcript
ΞΫηγϏϦςΟνΣοΫΛࣗಈԽ͢ΔͨΊͷ NBSLVQMJOUͷϩʔυϚοϓ "DDFTTJCJMJUZ4UFQ7PM
©2018 Yusuke Hirao ࣗݾհ ฏඌ༏యʢͻΒ͓Ώ͏ͯΜʣ גࣜձࣾσΟʔθϩ ϑϩϯτΤϯυΤϯδχΞ #-0(IUUQTOPUFNVZVTVLFIJSBP Yusuke Hirao
@cloud10designs
©2018 Yusuke Hirao ΞΫηγϏϦςΟνΣοΫΛࣗಈԽ͢ΔͨΊͷ NBSLVQMJOUͷϩʔυϚοϓ
©2018 Yusuke Hirao ࠓͪΐͬͱϑϩϯτدΓͷ ٕज़Ϊδϡπͨ͠Ͱ͢
©2018 Yusuke Hirao NBSLVQMJOU͝ଘͷํ✋
©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 "UPN 7JN ʹϓϥάΠϯ͕ఏڙ͞Ε͍ͯΔ ࠓɺͲΜͳར༻Λ͍ͯ͠Δͷ͔
©2018 Yusuke Hirao νΣοΫ͍ͯ͠Δ͜ͱ ϑΥʔϚοτɾίʔυελΠϧ Πϯσϯτ εϖʔεɾվߦҐஔ ໋໊نଇ όϦσʔγϣϯ γϯλοΫε
ن֨ ඇਪɾΞϯνύλʔϯ ࠓɺͲΜͳར༻Λ͍ͯ͠Δͷ͔
©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 ࠓޙɺͲ͏͍͏ར༻Λ͍͔ͨ͠ɾͯ͠΄͍͔͠ 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Ͱར༻Ͱ͖ΔAPI import { 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 Έͳ͞ΜŊͪΖΜςετॻ͍ͯ·͢ΑͶʁ ʢಥͳἤΓʣ
©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ΞΫηγϏϦςΟνΣοΧʔͳͷ͔
©2018 Yusuke Hirao ΞΫηγϏϦςΟνΣοΫͷࣗಈԽ NBSLVQMJOUΞΫηγϏϦςΟνΣοΧʔͳͷ͔ νΣοΧʔͱ໊Δͱ͜Ζ·Ͱػೳ࣮͢ΔͭΓͳ͍Ͱ͢ɻ ͋͘·ͰNBSLVQMJOUϚʔΫΞοϓϥϯήʔδ༻ͷϦϯλʔͰ͢ɻ ͳͷͰɺཁૉଐੑΛνΣοΫ͢Δ্Ͱid foraltɺ ͦͯ͠8"*"3*"ରʹ͍ͯ͠Δ͚ͩͰ͢ɻ
άϥϑΟΧϧͳ෦$44࣮ʹٴͿͱ͜Ζ·Ͱαϙʔτ͠·ͤΜ͠ɺͰ͖·ͤΜɻ NBSLVQMJOUΛར༻ͯ͠ΞΫηγϏϦςΟνΣοΧʔΛ ։ൃ͍ͯͨͩ͘͠ͷͿ͔͞Ͱͳ͍Ͱ͢
©2018 Yusuke Hirao ΞΫηγϏϦςΟνΣοΫͷࣗಈԽ ͍ͯ͠ΔΞΫηγϏϦςΟνΣοΧʔ "ZD 8FC্ͰΞΫηγϏϦςΟνΣοΫ͕ Ͱ͖ΔαʔϏεπʔϧɻ .*5ϥΠηϯεͷΦʔϓϯιʔεͰ 1)1Ͱॻ͔Ε͍ͯΔͷͰ
$.4ͳͲʹΈࠐΈՄೳɻ 8PSE1SFTTϓϥάΠϯ͕͞Ε͍ͯ·͢ɻ CBTFS$.4ϓϥάΠϯ΄͍͠ʜ
©2018 Yusuke Hirao ·ͱΊ
©2018 Yusuke Hirao ·ͱΊ ؾܰʹɺϛχϚϜʹɺΞυϗοΫʹར༻ͯ͠΄͍͠ ίϯϙʔωϯτςετʹ͑Δ ࣗಈςετπʔϧʹΈࠐΉͷ͕Φεεϝ ΞΫηγϏϦςΟνΣοΫ͋͘·Ͱཁૉɾଐੑ͕ର
ΞΫηγϏϦςΟνΣοΫΛࣗಈԽ͢ΔͨΊͷ NBSLVQMJOUͷϩʔυϚοϓ "DDFTTJCJMJUZ4UFQ7PM