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.2k
アクセシビリティチェックを自動化するための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
850
TypeScriptでつくるNode.jsパッケージ
yusukehirao
3
670
READMEにバッヂが欲しくてテストを書き始めました
yusukehirao
1
800
ユニバーサルなマークアップをしよう
yusukehirao
2
940
本当に必要ですか?そのJavaScript 〜スクロールイベント・リサイズイベント編〜
yusukehirao
0
680
コードレビュー なんてしてられるかッ!!
yusukehirao
24
14k
自動化をデザインしよう
yusukehirao
1
920
JSONの型のはなし
yusukehirao
0
630
トランスパイラという文化(…とその後) - PHPカンファレンス福岡2016
yusukehirao
1
2.8k
Other Decks in Programming
See All in Programming
テーブル定義書の構造化抽出して、生成AIでDWH分析を試してみた / devio2025tokyo
kasacchiful
0
300
Cursorハンズオン実践!
eltociear
2
1.2k
CSC509 Lecture 07
javiergs
PRO
0
250
フロントエンド開発のためのブラウザ組み込みAI入門
masashi
7
3.5k
AI 駆動開発におけるコミュニティと AWS CDK の価値
konokenj
5
250
GC25 Recap: The Code You Reviewed is Not the Code You Built / #newt_gophercon_tour
mazrean
0
110
Foundation Modelsを実装日本語学習アプリを作ってみた!
hypebeans
1
130
オープンソースソフトウェアへの解像度🔬
utam0k
17
3.1k
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
560
スマホから Youtube Shortsを見られないようにする
lemolatoon
27
34k
ALL CODE BASE ARE BELONG TO STUDY
uzulla
28
6.7k
What's new in Spring Modulith?
olivergierke
1
170
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
A designer walks into a library…
pauljervisheath
209
24k
BBQ
matthewcrist
89
9.9k
The World Runs on Bad Software
bkeepers
PRO
72
11k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Leading Effective Engineering Teams in the AI Era
addyosmani
7
640
How to train your dragon (web standard)
notwaldorf
97
6.3k
The Power of CSS Pseudo Elements
geoffreycrofte
80
6k
It's Worth the Effort
3n
187
28k
Side Projects
sachag
455
43k
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