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
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
750
TypeScriptでつくるNode.jsパッケージ
yusukehirao
3
550
READMEにバッヂが欲しくてテストを書き始めました
yusukehirao
1
700
ユニバーサルなマークアップをしよう
yusukehirao
2
830
本当に必要ですか?そのJavaScript 〜スクロールイベント・リサイズイベント編〜
yusukehirao
0
550
コードレビュー なんてしてられるかッ!!
yusukehirao
24
13k
自動化をデザインしよう
yusukehirao
1
850
JSONの型のはなし
yusukehirao
0
580
トランスパイラという文化(…とその後) - PHPカンファレンス福岡2016
yusukehirao
1
2.5k
Other Decks in Programming
See All in Programming
今こそ始める、CDKコンストラクトライブラリ開発 ― 入門から実践まで
tmokmss
1
930
AWS CDKにおける「再利用性」を考える / aws-cdk-reusability
gotok365
6
1.3k
APIのない大学ログインWebサービスをWKWebViewとJavaScriptでアプリ化した話
akidon0000
1
330
유연한 Composable 설계
l2hyunwoo
0
380
CSC307 Lecture 11
javiergs
PRO
0
240
生成AIをkintoneに連携してみた
hideg
0
230
Submission with Numerai Compute using GCP Batch
regonn
0
110
CSC307 Lecture 09
javiergs
PRO
1
500
Harnessing Large Language Models for Training-free Video Anomaly Detection
tereka114
1
1.3k
Exploring the Gradually Lost Technical Skills in the Cloud Native Era
hwchiu
2
3.9k
SRE チーム立ち上げ前に考えたこと・取り組んだこと / Considerations and Preparations Before Establishing an SRE Team
mackey0225
3
320
Webエディタライブラリ 「CodeMirror」から学ぶ Webアプリ開発のテクニック
ryosukeigarashi
0
250
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
17
2.8k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Art, The Web, and Tiny UX
lynnandtonic
291
20k
Building Adaptive Systems
keathley
34
2k
The Cult of Friendly URLs
andyhume
75
5.9k
Documentation Writing (for coders)
carmenintech
63
4.2k
Ruby is Unlike a Banana
tanoku
96
10k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
105
6.8k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
16
1.6k
The Art of Programming - Codeland 2020
erikaheidi
48
13k
Scaling GitHub
holman
458
140k
Automating Front-end Workflow
addyosmani
1362
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