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
800
TypeScriptでつくるNode.jsパッケージ
yusukehirao
3
600
READMEにバッヂが欲しくてテストを書き始めました
yusukehirao
1
750
ユニバーサルなマークアップをしよう
yusukehirao
2
880
本当に必要ですか?そのJavaScript 〜スクロールイベント・リサイズイベント編〜
yusukehirao
0
590
コードレビュー なんてしてられるかッ!!
yusukehirao
24
14k
自動化をデザインしよう
yusukehirao
1
880
JSONの型のはなし
yusukehirao
0
600
トランスパイラという文化(…とその後) - PHPカンファレンス福岡2016
yusukehirao
1
2.7k
Other Decks in Programming
See All in Programming
ChatGPT とつくる PHP で OS 実装
memory1994
PRO
3
160
良いユニットテストを書こう
mototakatsu
11
3.5k
技術的負債と向き合うカイゼン活動を1年続けて分かった "持続可能" なプロダクト開発
yuichiro_serita
0
250
命名をリントする
chiroruxx
1
560
Запуск 1С:УХ в крупном энтерпрайзе: мечта и реальность ПМа
lamodatech
0
870
アクターシステムに頼らずEvent Sourcingする方法について
j5ik2o
6
670
Итераторы в Go 1.23: зачем они нужны, как использовать, и насколько они быстрые?
lamodatech
0
1.3k
php-conference-japan-2024
tasuku43
0
410
KubeCon + CloudNativeCon NA 2024 Overviewat Kubernetes Meetup Tokyo #68 / amsy810_k8sjp68
masayaaoyama
0
290
QA環境で誰でも自由自在に現在時刻を操って検証できるようにした話
kalibora
1
110
ATDDで素早く安定した デリバリを実現しよう!
tonnsama
1
1k
LLM Supervised Fine-tuningの理論と実践
datanalyticslabo
8
1.8k
Featured
See All Featured
Measuring & Analyzing Core Web Vitals
bluesmoon
5
190
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.1k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.2k
RailsConf 2023
tenderlove
29
960
Why Our Code Smells
bkeepers
PRO
335
57k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Automating Front-end Workflow
addyosmani
1366
200k
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
Keith and Marios Guide to Fast Websites
keithpitt
410
22k
Gamification - CAS2011
davidbonilla
80
5.1k
Designing Experiences People Love
moore
139
23k
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