Webã³ã³ããŒãã³ãåãã®èªåã¢ã¯ã»ã·ããªãã£ãã¹ãã«é¢ããå æ¬çãªã¬ã€ããWCAGæºæ ãšãã°ããŒãã«ãªå©çšè ã«ãšã£ãŠå æ¬çãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãä¿èšŒããŸãã
Webã³ã³ããŒãã³ãã®ã¢ã¯ã»ã·ããªãã£ãã¹ãïŒèªåã³ã³ãã©ã€ã¢ã³ã¹æ€èšŒ
ããžã¿ã«åãé²ãçŸä»£ç€ŸäŒã«ãããŠãã¢ã¯ã»ã·ãã«ãªãŠã§ãäœéšã®æäŸã¯ãåãªããã¹ããã©ã¯ãã£ã¹ã«çãŸãããã€ã³ã¯ã«ãŒã·ããªãã£ãšæ³çã³ã³ãã©ã€ã¢ã³ã¹ã®æ ¹å¹¹ããªãèŠä»¶ã§ããWebã³ã³ããŒãã³ãã¯ããã®åŒ·åãªã«ãã»ã«åãšåå©çšæ§ã«ãããã¢ãã³ãªãŠã§ãéçºã®ç€ãšãªãã€ã€ãããŸããããããèœåããã¯ãããžãŒã«é¢ãããããã¹ãŠã®ãŠãŒã¶ãŒã«ãšã£ãŠãããã®ã³ã³ããŒãã³ããã¢ã¯ã»ã¹å¯èœã§ããããšãä¿èšŒããããšã¯ãç¹æã®èª²é¡ãæç€ºããŸãããã®èšäºã§ã¯ãWebã³ã³ããŒãã³ãã®ã¢ã¯ã»ã·ããªãã£ãã¹ããšããéèŠãªé åãæ·±ãæãäžããèªåã³ã³ãã©ã€ã¢ã³ã¹æ€èšŒãããã«ããã»ã¹ãå¹çåããã°ããŒãã«ãªå©çšè ã«åãããããå ¬å¹³ãªããžã¿ã«ç°å¢ãä¿èšŒã§ãããã«çŠç¹ãåœãŠãŸãã
Webã³ã³ããŒãã³ãã®ã¢ã¯ã»ã·ããªãã£ã®å¿ èŠæ§
Webã³ã³ããŒãã³ãã¯ããŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ãæ§ç¯ããããã®ã¢ãžã¥ãŒã«åã§ä¿å®æ§ã®é«ãæ¹æ³ãæäŸããŸãããããã¯è€éãªã¢ããªã±ãŒã·ã§ã³ãããå°ããªèªå·±å®çµåã®ãŠãããã«åè§£ããã³ãŒãã®æŽçãšéçºå¹çãåäžãããŸããããããæå³çãªæ³šæãæããªããã°ããã®ã«ãã»ã«åãæå³ããã¢ã¯ã»ã·ããªãã£ã®ãµã€ããçã¿åºãå¯èœæ§ããããŸããã¢ã¯ã»ã·ããªãã£ãæåããèæ ®ããã«Webã³ã³ããŒãã³ããéçºããããšãã¹ã¯ãªãŒã³ãªãŒããŒãããŒããŒãããã²ãŒã·ã§ã³ããã®ä»ã®æ¯æŽæè¡ã«äŸåãããŠãŒã¶ãŒãªã©ãé害ãæã€ãŠãŒã¶ãŒã«ãšã£ãŠéå£ãçããå¯èœæ§ããããŸãã
Web Content Accessibility Guidelines (WCAG)ã¯ããŠã§ãã³ã³ãã³ããããã¢ã¯ã»ã¹å¯èœã«ããããã®ãæ®éçã«èªèããããã¬ãŒã ã¯ãŒã¯ãæäŸããŸããWCAGã®ååïŒç¥èŠå¯èœãæäœå¯èœãçè§£å¯èœãå ç¢ïŒãéµå®ããããšã¯ãã°ããŒãã«ãªå±éãç®æããã¹ãŠã®ããžã¿ã«è£œåã«ãšã£ãŠäžå¯æ¬ ã§ããWebã³ã³ããŒãã³ãã®å Žåãããã¯ä»¥äžãä¿èšŒããããšãæå³ããŸãã
- ã»ãã³ãã£ã¯ã¹ãæ£ããå®è£ ãããŠããããšïŒ ãã€ãã£ãHTMLèŠçŽ ã¯åºæã®ã»ãã³ãã£ãã¯ãªæå³ãæã£ãŠããŸããã«ã¹ã¿ã èŠçŽ ã䜿çšããå Žåãéçºè ã¯ARIA屿§ãšé©åãªããŒã«ãéããŠåçã®ã»ãã³ãã£ãã¯æ å ±ãæäŸããå¿ èŠããããŸãã
- ããŒããŒãæäœæ§ãç¶æãããŠããããšïŒ ã³ã³ããŒãã³ãå ã®ãã¹ãŠã®ã€ã³ã¿ã©ã¯ãã£ãèŠçŽ ã¯ãããŒããŒãã®ã¿ã§ãã©ãŒã«ã¹å¯èœãã€æäœå¯èœã§ããå¿ èŠããããŸãã
- ãã©ãŒã«ã¹ç®¡çãé©åã«åŠçãããŠããããšïŒ ã³ã³ããŒãã³ããåçã«ã³ã³ãã³ãã倿Žããããæ°ããèŠçŽ ïŒã¢ãŒãã«ãããããããŠã³ãªã©ïŒãå°å ¥ãããããå ŽåããŠãŒã¶ãŒãèªå°ããããã«ãã©ãŒã«ã¹ã广çã«ç®¡çããå¿ èŠããããŸãã
- æ å ±ãç¥èŠå¯èœã§ããããšïŒ ã³ã³ãã³ãã¯ãŠãŒã¶ãŒãç¥èŠã§ããæ¹æ³ã§æç€ºãããå¿ èŠããããŸããããã«ã¯ãéããã¹ãã³ã³ãã³ãã®ããã¹ãä»£æ¿æäŸããååãªè²ã³ã³ãã©ã¹ãã®ç¢ºä¿ãå«ãŸããŸãã
- ã³ã³ããŒãã³ããå ç¢ã§ããããšïŒ æ¯æŽæè¡ãå«ãå¹ åºããŠãŒã¶ãŒãšãŒãžã§ã³ããšäºææ§ãããå¿ èŠããããŸãã
Webã³ã³ããŒãã³ãã®ã¢ã¯ã»ã·ããªãã£ãã¹ãã«ããã課é¡
åŸæ¥ã®ã¢ã¯ã»ã·ããªãã£ãã¹ãæ¹æ³ã¯äŸ¡å€ããããŸãããWebã³ã³ããŒãã³ãã«é©çšããéã«ã¯ãã°ãã°èª²é¡ã«çŽé¢ããŸãã
- ã«ãã»ã«åïŒ Webã³ã³ããŒãã³ãã®äž»èŠãªæ©èœã§ããã·ã£ããŠDOMã¯ãæšæºçãªDOMèµ°æ»ããŒã«ããã³ã³ããŒãã³ãã®å éšæ§é ãé èœããããšããããäžéšã®èªåãã§ãã«ãŒãã¢ã¯ã»ã·ããªãã£ããããã£ãæ€æ»ããããšãå°é£ã«ããŸãã
- åçãªæ§è³ªïŒ Webã³ã³ããŒãã³ãã¯ãã°ãã°è€éãªJavaScriptã€ã³ã¿ã©ã¯ã·ã§ã³ãåçãªã³ã³ãã³ãæŽæ°ã䌎ããéçè§£æããŒã«ãå®å šã«è©äŸ¡ããããšã¯å°é£ãªå ŽåããããŸãã
- åå©çšæ§ãšã³ã³ããã¹ãïŒ ã³ã³ããŒãã³ãã¯åäœã§ã¯ã¢ã¯ã»ã·ãã«ã§ãã£ãŠããç°ãªãã³ã³ããã¹ãã«çµ±åãããããä»ã®ã³ã³ããŒãã³ããšçµã¿åããããããããšããã®ã¢ã¯ã»ã·ããªãã£ãæãªãããå¯èœæ§ããããŸãã
- ã«ã¹ã¿ã èŠçŽ ãšã·ã£ããŠDOMïŒ æšæºçãªãã©ãŠã¶ã®ã¢ã¯ã»ã·ããªãã£APIããã¹ãããŒã«ã¯ãã«ã¹ã¿ã èŠçŽ ãã·ã£ããŠDOMã®ãã¥ã¢ã³ã¹ãåžžã«å®å šã«çè§£ã§ãããšã¯éãããå°éçãªã¢ãããŒããå¿ èŠãšãªããŸãã
èªåã¢ã¯ã»ã·ããªãã£ãã¹ãã®å
èªåãã¹ãããŒã«ã¯ãå¹ççã§ã¹ã±ãŒã©ãã«ãªã¢ã¯ã»ã·ããªãã£æ€èšŒã«äžå¯æ¬ ãªãã®ãšãªã£ãŠããŸãããããã¯ã³ãŒããè¿ éã«ã¹ãã£ã³ããäžè¬çãªã¢ã¯ã»ã·ããªãã£éåãç¹å®ããå®çšçãªãã£ãŒãããã¯ãæäŸããããšã§ãéçºãµã€ã¯ã«ãå€§å¹ ã«å éããŸããWebã³ã³ããŒãã³ãã®å Žåãèªååã¯ä»¥äžã®æ¹æ³ãæäŸããŸãã
- æ©æã«éåãç¹å®ããïŒ ã¢ã¯ã»ã·ããªãã£ãã§ãã¯ãCI/CDãã€ãã©ã€ã³ã«çµ±åããåé¡ãå°å ¥ããæ¬¡ç¬¬ããã«ç¹å®ããŸãã
- äžè²«æ§ãä¿èšŒããïŒ Webã³ã³ããŒãã³ããã©ãã§äœ¿çšãããŠãããã«é¢ãããããã¹ãŠã®ã€ã³ã¹ã¿ã³ã¹ãšããªãšãŒã·ã§ã³ã«åããã¹ãã»ãããé©çšããŸãã
- æäœæ¥ãåæžããïŒ èªååããŒã«ã§ã¯æ€åºã§ããªããããè€éã§åŸ®åŠãªã¢ã¯ã»ã·ããªãã£åé¡ã«äººéã«ãããã¹ã¿ãŒãéäžã§ããããã«ããŸãã
- ã°ããŒãã«ãªæšæºãæºããïŒ WCAGã®ãããªç¢ºç«ãããã¬ã€ãã©ã€ã³ã«å¯Ÿããæºæ ãæ€èšŒããŸãããããã¯äžçäžã§é¢é£æ§ããããŸãã
Webã³ã³ããŒãã³ãã®ããã®äž»èŠãªèªåã¢ã¯ã»ã·ããªãã£ãã¹ãæŠç¥
Webã³ã³ããŒãã³ãã«å¯Ÿãã广çãªèªåã¢ã¯ã»ã·ããªãã£ãã¹ãã«ã¯ãã·ã£ããŠDOMãééããã³ã³ããŒãã³ãã®ã©ã€ããµã€ã¯ã«ãçè§£ã§ããããŒã«ãšæŠç¥ã®çµã¿åãããå¿ èŠã§ãã
1. éçºã¯ãŒã¯ãããŒãžã®ããŒã«ã®çµ±å
æã广çãªã¢ãããŒãã¯ãèªåã¢ã¯ã»ã·ããªãã£ãã§ãã¯ãéçºè ã®ã¯ãŒã¯ãããŒã«çŽæ¥çµã¿èŸŒãããšã§ãã
a. ãªã³ãã£ã³ã°ãšéçè§£æ
ã¢ã¯ã»ã·ããªãã£ãã©ã°ã€ã³ïŒäŸïŒReactããŒã¹ã®ã³ã³ããŒãã³ãåãã®eslint-plugin-jsx-a11yããããã©JSåãã®ã«ã¹ã¿ã ã«ãŒã«ïŒãåããESLintã®ãããªããŒã«ã¯ãã³ã³ããŒãã³ããã¬ã³ããªã³ã°ãããåã«ãã®ãœãŒã¹ã³ãŒããã¹ãã£ã³ã§ããŸãããããã®ããŒã«ã¯äž»ã«ã©ã€ãDOMäžã§æ©èœããŸãããã³ã³ããŒãã³ãã®ãã³ãã¬ãŒããJSXã«æ³šææ·±ãé©çšããã°ãARIAã©ãã«ã®æ¬ èœãäžé©åãªã»ãã³ãã£ãã¯ãªäœ¿çšæ³ãšãã£ãåºæ¬çãªåé¡ãæããããšãã§ããŸãã
b. ãã©ãŠã¶æ¡åŒµæ©èœ
ãã©ãŠã¶æ¡åŒµæ©èœã¯ãã³ã³ããŒãã³ãããã©ãŠã¶ã§çŽæ¥ãã¹ãããè¿ éãªæ¹æ³ãæäŸããŸãã人æ°ã®ããéžæè¢ã«ã¯ä»¥äžããããŸãã
- axe DevTools: ãã©ãŠã¶ã®éçºè ããŒã«ãšã·ãŒã ã¬ã¹ã«çµ±åããã匷åãªæ¡åŒµæ©èœã§ããã·ã£ããŠDOMã³ã³ããã¹ãå ã§åäœããããã«èšèšãããŠãããWebã³ã³ããŒãã³ãã«éåžžã«å¹æçã§ããDOMïŒã·ã£ããŠDOMãå«ãïŒãåæããWCAGæšæºã«å¯Ÿããéåãå ±åããŸãã
- Lighthouse: Chrome DevToolsã«çµ±åãããŠãããã¢ã¯ã»ã·ããªãã£ãå«ããŠã§ãããŒãžã®å æ¬çãªç£æ»ãæäŸããŸããå šäœçãªã¢ã¯ã»ã·ããªãã£ã¹ã³ã¢ãæäŸããã·ã£ããŠDOMå ã§ãã£ãŠãç¹å®ã®èª²é¡ã匷調衚瀺ã§ããŸãã
- WAVE (Web Accessibility Evaluation Tool): ã¢ã¯ã»ã·ããªãã£ãšã©ãŒãèŠåã«é¢ããèŠèŠçãªãã£ãŒãããã¯ãšè©³çްãªã¬ããŒããæäŸãããããäžã€ã®å ç¢ãªãã©ãŠã¶æ¡åŒµæ©èœã§ãã
äŸïŒã«ã¹ã¿ã ã®`
c. ã³ãã³ãã©ã€ã³ã€ã³ã¿ãŒãã§ãŒã¹ïŒCLIïŒããŒã«
CI/CDçµ±åã«ã¯ãCLIããŒã«ãäžå¯æ¬ ã§ãããããã®ããŒã«ã¯ããã«ãããã»ã¹ã®äžéšãšããŠèªåçã«å®è¡ã§ããŸãã
- axe-core CLI: axe-coreã®ã³ãã³ãã©ã€ã³ã€ã³ã¿ãŒãã§ãŒã¹ã¯ãã¢ã¯ã»ã·ããªãã£ã¹ãã£ã³ãããã°ã©ã ã§å®è¡ããããšãå¯èœã«ããŸããç¹å®ã®URLãHTMLãã¡ã€ã«ãã¹ãã£ã³ããããã«èšå®ã§ããŸããWebã³ã³ããŒãã³ãã®å Žåãã¬ã³ããªã³ã°ãããã³ã³ããŒãã³ããå«ãéçHTMLãã¡ã€ã«ãçæããŠåæããå¿ èŠããããããããŸããã
- Pa11y: Pa11yã¢ã¯ã»ã·ããªãã£ãšã³ãžã³ã䜿çšããŠèªåã¢ã¯ã»ã·ããªãã£ãã¹ããå®è¡ããã³ãã³ãã©ã€ã³ããŒã«ã§ããURLãHTMLãã¡ã€ã«ãããã«ã¯çã®HTMLæååããã¹ãã§ããŸãã
äŸïŒCIãã€ãã©ã€ã³ã§ã¯ãã¹ã¯ãªãããããŸããŸãªç¶æ ã®Webã³ã³ããŒãã³ãã瀺ãHTMLã¬ããŒããçæã§ããŸãããã®ã¬ããŒãã¯Pa11yã«æž¡ãããŸããPa11yãé倧ãªã¢ã¯ã»ã·ããªãã£éåãæ€åºããå Žåããã«ãã倱æãããéæºæ ã®ã³ã³ããŒãã³ãããããã€ãããã®ãé²ãããšãã§ããŸããããã«ããããã¹ãŠã®ãããã€ã¡ã³ãã§ããŒã¹ã©ã€ã³ã¬ãã«ã®ã¢ã¯ã»ã·ããªãã£ãç¶æãããŸãã
d. ãã¹ããã¬ãŒã ã¯ãŒã¯ãšã®çµ±å
å€ãã®äººæ°ã®ããJavaScriptãã¹ããã¬ãŒã ã¯ãŒã¯ïŒäŸïŒJestãCypressãPlaywrightïŒã¯ãã¢ã¯ã»ã·ããªãã£ãã¹ãã©ã€ãã©ãªãçµ±åããããã®ãã©ã°ã€ã³ãæ¹æ³ãæäŸããŠããŸãã
- Jestãš
@testing-library/jest-domããã³jest-axeïŒ Jestã䜿çšããŠã³ã³ããŒãã³ãããã¹ãããéãjest-axeã䜿çšããŠåäœãã¹ããŸãã¯çµåãã¹ãå ã§axe-coreã®ãã§ãã¯ãçŽæ¥å®è¡ã§ããŸããããã¯ãã³ã³ããŒãã³ãã®ããžãã¯ãšã¬ã³ããªã³ã°ããã¹ãããã®ã«ç¹ã«åŒ·åã§ãã - Cypressãš
cypress-axeïŒ äººæ°ã®ãããšã³ãããŒãšã³ããã¹ããã¬ãŒã ã¯ãŒã¯ã§ããCypressã¯ãcypress-axeã§æ¡åŒµããŠãE2Eãã¹ãã¹ã€ãŒãã®äžéšãšããŠã¢ã¯ã»ã·ããªãã£ç£æ»ãå®è¡ã§ããŸãã - Playwright: Playwrightã¯ã¢ã¯ã»ã·ããªãã£ãµããŒããå èµããŠãããaxe-coreã®ãããªããŒã«ãšçµ±åã§ããŸãã
äŸïŒ`jest-axeã䜿çšãããšãã«ã¬ã³ããŒã®å
éšæ§é ãé©åãªARIAããŒã«ãæã¡ãã€ã³ã¿ã©ã¯ãã£ããªæ¥ä»ã»ã«ãããŒããŒãã§æäœå¯èœã§ããããšãèªåçã«æ€èšŒã§ããŸããããã«ãããã³ã³ããŒãã³ãã®åäœãšãã®ã¢ã¯ã»ã·ããªãã£ãžã®åœ±é¿ãæ£ç¢ºã«ãã¹ãã§ããŸãã
2. ã·ã£ããŠDOM察å¿ããŒã«ã®æŽ»çš
Webã³ã³ããŒãã³ãã广çã«ãã¹ãããããã®éµã¯ãã·ã£ããŠDOMãçè§£ããèµ°æ»ã§ããããŒã«ã䜿çšããããšã«ãããŸããaxe-coreã®ãããªããŒã«ã¯ããã®ç¹ã念é ã«çœ®ããŠèšèšãããŠããŸãããããã¯è©äŸ¡ã¹ã¯ãªãããã·ã£ããŠã«ãŒãã«å¹æçã«æ¿å ¥ããã©ã€ãDOMãšåæ§ã«ãã®ã³ã³ãã³ããåæã§ããŸãã
ããŒã«ãéžæããéã«ã¯ãåžžã«ã·ã£ããŠDOMãµããŒãã«é¢ããããã¥ã¡ã³ãã確èªããŠãã ãããäŸãã°ãã©ã€ãDOMã®èµ°æ»ã®ã¿ãè¡ãããŒã«ã¯ãWebã³ã³ããŒãã³ãã®ã·ã£ããŠDOMå ã®éèŠãªã¢ã¯ã»ã·ããªãã£åé¡ãèŠéããŠããŸããŸãã
3. ã³ã³ããŒãã³ãã®ç¶æ ãšã€ã³ã¿ã©ã¯ã·ã§ã³ã®ãã¹ã
Webã³ã³ããŒãã³ãã¯ãã£ãã«éçã§ã¯ãããŸããããŠãŒã¶ãŒã®ã€ã³ã¿ã©ã¯ã·ã§ã³ãšããŒã¿ã«åºã¥ããŠããã®èŠãç®ãšåäœãå€åããŸããèªåãã¹ãã§ã¯ããããã®ç¶æ ãã·ãã¥ã¬ãŒãããå¿ èŠããããŸãã
- ãŠãŒã¶ãŒã€ã³ã¿ã©ã¯ã·ã§ã³ã®ã·ãã¥ã¬ãŒã·ã§ã³ïŒ CypressãPlaywrightã®ãããªãã¹ããã¬ãŒã ã¯ãŒã¯ã䜿çšããŠãWebã³ã³ããŒãã³ãã§ã®ã¯ãªãã¯ãããŒãã¬ã¹ããã©ãŒã«ã¹å€æŽãã·ãã¥ã¬ãŒãããŸãã
- ç°ãªãããŒã¿ã·ããªãªã®ãã¹ãïŒ ç°ãªãçš®é¡ã®ã³ã³ãã³ãã衚瀺ãããããšããžã±ãŒã¹ãåŠçãããããå Žåã§ããã³ã³ããŒãã³ããã¢ã¯ã»ã·ãã«ã§ããããšã確èªããŸãã
- åçã³ã³ãã³ãã®ãã¹ãïŒ ã³ã³ããŒãã³ãããæ°ããã³ã³ãã³ãã远å ãŸãã¯åé€ãããå ŽåïŒäŸïŒãšã©ãŒã¡ãã»ãŒãžãèªã¿èŸŒã¿ç¶æ ïŒãã¢ã¯ã»ã·ããªãã£ãç¶æããããã©ãŒã«ã¹ãæ£ãã管çãããŠããããšã確èªããŸãã
äŸïŒ`cypress-axeã¯ã¢ã¯ã»ã·ããªãã£ã¹ãã£ã³ãå®è¡ãããã©ãŒã«ã¹ã管çãããŠããããçµæãã¹ã¯ãªãŒã³ãªãŒããŒã«ãã£ãŠã¢ããŠã³ã¹ããããïŒè©²åœããå ŽåïŒãããã³ã€ã³ã¿ã©ã¯ãã£ãèŠçŽ ãã¢ã¯ã»ã·ãã«ãªãŸãŸã§ããããšã確èªã§ããŸãã
4. Webã³ã³ããŒãã³ãã«ãããARIAã®åœ¹å²
ã«ã¹ã¿ã èŠçŽ ã¯ãã€ãã£ãHTMLèŠçŽ ã®ãããªåºæã®ã»ãã³ãã£ã¯ã¹ãæããªããããARIAïŒAccessible Rich Internet ApplicationsïŒå±æ§ã¯ãæ¯æŽæè¡ã«ããŒã«ãç¶æ ãããããã£ãäŒããäžã§äžå¯æ¬ ã§ããèªåãã¹ãã¯ããããã®å±æ§ã®ååšãšæ£ç¢ºæ§ãæ€èšŒã§ããŸãã
- ARIAããŒã«ã®æ€èšŒïŒ ã«ã¹ã¿ã èŠçŽ ãé©åãªããŒã«ïŒäŸïŒã¢ãŒãã«ã«ã¯
role="dialog"ïŒãæã£ãŠããããšã確èªããŸãã - ARIAã®ç¶æ
ãšããããã£ã®ãã§ãã¯ïŒ
aria-expandedãaria-haspopupãaria-labelãaria-labelledbyãaria-describedbyã®ãããªå±æ§ãæ€èšŒããŸãã - 屿§ã®åçæ§ã®ç¢ºä¿ïŒ ã³ã³ããŒãã³ãã®ç¶æ ã«åºã¥ããŠARIA屿§ã倿Žãããå Žåãèªåãã¹ãã¯ãããã®æŽæ°ãæ£ããå®è£ ãããŠããããšã確èªããå¿ èŠããããŸãã
äŸïŒ`aria-expandedã®ãããªARIA屿§ã䜿çšãããããããŸãããèªåãã¹ãã¯ãããã«ãå±éããããšãã«ãã®å±æ§ãæ£ããtrueã«èšå®ãããæããããŸãããšãã«falseã«èšå®ãããŠããããšã確èªã§ããŸãããã®æ
å ±ã¯ãã¹ã¯ãªãŒã³ãªãŒããŒãŠãŒã¶ãŒãããã«ã®ç¶æ
ãçè§£ããäžã§äžå¯æ¬ ã§ãã
5. CI/CDãã€ãã©ã€ã³ã«ãããã¢ã¯ã»ã·ããªãã£
èªåã¢ã¯ã»ã·ããªãã£ãã¹ããç¶ç¶çã€ã³ãã°ã¬ãŒã·ã§ã³/ç¶ç¶çãããã€ã¡ã³ãïŒCI/CDïŒãã€ãã©ã€ã³ã«çµ±åããããšã¯ãéçºããã»ã¹ã«ãããŠã¢ã¯ã»ã·ããªãã£ãè²ããªãåŽé¢ãšããŠç¶æããããã«äžå¯æ¬ ã§ãã
- ã³ããã/ãã«ãªã¯ãšã¹ãæã®èªåã¹ãã£ã³ïŒ ã³ãŒããããã·ã¥ããããããã«ãªã¯ãšã¹ããéãããããããã³ã«ãCLIããŒã¹ã®ã¢ã¯ã»ã·ããªãã£ããŒã«ïŒaxe-core CLIãPa11yãªã©ïŒãå®è¡ããããã«ãã€ãã©ã€ã³ãèšå®ããŸãã
- é倧ãªéåã«ãããã«ã倱æïŒ äºåã«å®çŸ©ãããé倧ãŸãã¯æ·±å»ãªã¢ã¯ã»ã·ããªãã£éåã®ãããå€ãæ€åºãããå Žåããã«ããèªåçã«å€±æãããããã«ãã€ãã©ã€ã³ãèšå®ããŸããããã«ãããéæºæ ã®ã³ãŒããæ¬çªç°å¢ã«å°éããã®ãé²ããŸãã
- ã¬ããŒãã®çæïŒ éçºããŒã ãã¬ãã¥ãŒã§ãã詳现ãªã¢ã¯ã»ã·ããªãã£ã¬ããŒãããã€ãã©ã€ã³ã§çæãããŸãã
- 課é¡è¿œè·¡ã·ã¹ãã ãšã®çµ±åïŒ ç¹å®ãããã¢ã¯ã»ã·ããªãã£åé¡ã«ã€ããŠããããžã§ã¯ã管çããŒã«ïŒJiraãAsanaãªã©ïŒã«ãã±ãããèªåçã«äœæããŸãã
äŸïŒã°ããŒãã«ãªEã³ããŒã¹ãã©ãããã©ãŒã ãéçºããŠããäŒæ¥ã¯ããŠããããã¹ããå®è¡ãããã®åŸã¢ããªã±ãŒã·ã§ã³ããã«ãããæåŸã«axe-coreã«ããã¢ã¯ã»ã·ããªãã£ãã§ãã¯ãå«ãPlaywrightã䜿çšããäžé£ã®E2Eãã¹ããå®è¡ããCIãã€ãã©ã€ã³ãæã€ãããããŸãããæ°ããWebã³ã³ããŒãã³ãã«ãããã¢ã¯ã»ã·ããªãã£éåã«ãããããã®ãã§ãã¯ã®ããããã倱æããå Žåããã€ãã©ã€ã³ã¯åæ¢ããéçºããŒã ã«ã¯è©³çްãªã¢ã¯ã»ã·ããªãã£ã¬ããŒããžã®ãªã³ã¯ãšãšãã«éç¥ãéä¿¡ãããŸãã
èªååãè¶ ããŠïŒäººéã®èŠçŽ
èªåãã¹ãã¯åŒ·åã§ãããäžèœè¬ã§ã¯ãããŸãããèªåããŒã«ãæ€åºã§ããäžè¬çãªã¢ã¯ã»ã·ããªãã£åé¡ã¯çŽ30ïœ50%ã§ããè€éãªåé¡ã«ã¯ãæåãã¹ããšãŠãŒã¶ãŒããŒãºã®çè§£ãå¿ èŠãšãªãããšããããããŸãã
- æåããŒããŒããã¹ãïŒ ããŒããŒãã®ã¿ã䜿çšããŠWebã³ã³ããŒãã³ããæäœãããã¹ãŠã®ã€ã³ã¿ã©ã¯ãã£ãèŠçŽ ãã¢ã¯ã»ã¹å¯èœã§æäœå¯èœã§ããããšã確èªããŸãã
- ã¹ã¯ãªãŒã³ãªãŒããŒãã¹ãïŒ äººæ°ã®ããã¹ã¯ãªãŒã³ãªãŒããŒïŒäŸïŒNVDAãJAWSãVoiceOverïŒã䜿çšããŠãèŠèŠé害ã®ãããŠãŒã¶ãŒãã©ã®ããã«Webã³ã³ããŒãã³ããäœéšãããã詊ããŸãã
- ãŠãŒã¶ãŒãã¹ãïŒ ããŸããŸãªé害ãæã€ãŠãŒã¶ãŒããã¹ãããã»ã¹ã«å·»ã蟌ã¿ãŸãã圌ãã®å®äœéšã¯ãèªåããŒã«ãå°éã®ãã¹ã¿ãŒã§ããèŠéãå¯èœæ§ã®ãããŠãŒã¶ããªãã£ã®åé¡ãçºèŠããäžã§éåžžã«è²Žéã§ãã
- æèçã¬ãã¥ãŒïŒ Webã³ã³ããŒãã³ããããåºãã¢ããªã±ãŒã·ã§ã³ã³ã³ããã¹ãã«çµ±åããããšãã«ã©ã®ããã«æ©èœããããè©äŸ¡ããŸããåäœã§ã¯ã¢ã¯ã»ã·ããªãã£ãå®ç§ã§ãã£ãŠããä»ã®èŠçŽ ã«å²ãŸããããè€éãªãŠãŒã¶ãŒãããŒå ã§ã¯åé¡ãçããå¯èœæ§ããããŸãã
å æ¬çãªã¢ã¯ã»ã·ããªãã£æŠç¥ã¯ãåžžã«å ç¢ãªèªåãã¹ããšåŸ¹åºçãªæåã¬ãã¥ãŒããããŠãŠãŒã¶ãŒãã£ãŒãããã¯ãçµã¿åãããŸãããã®ããªã¹ãã£ãã¯ãªã¢ãããŒãã«ãããWebã³ã³ããŒãã³ããåã«æºæ ããŠããã ãã§ãªããçã«èª°ããå©çšã§ãããã®ã«ãªããŸãã
ã°ããŒãã«ãªå±éã®ããã®é©åãªããŒã«ã®éžæ
èªåãã¹ãããŒã«ãéžæããéã«ã¯ã以äžã®ç¹ãèæ ®ããŠãã ããã
- ã·ã£ããŠDOMãµããŒãïŒ Webã³ã³ããŒãã³ãã«ãšã£ãŠããã¯æéèŠã§ãã
- WCAGæºæ ã¬ãã«ïŒ ããŒã«ãææ°ã®WCAGæšæºïŒäŸïŒWCAG 2.1 AAïŒã«å¯ŸããŠãã¹ãããããšã確èªããŸãã
- çµ±åæ©èœïŒ æ¢åã®éçºã¯ãŒã¯ãããŒãCI/CDãã€ãã©ã€ã³ã«ã©ãã ãããŸãé©åããŸããïŒ
- ã¬ããŒãåè³ªïŒ ã¬ããŒãã¯æç¢ºã§ãå®çšçã§ãéçºè ã«ãšã£ãŠçè§£ãããããã®ã§ããïŒ
- ã³ãã¥ããã£ãšãµããŒãïŒ ãã©ãã«ã·ã¥ãŒãã£ã³ã°ã«åœ¹ç«ã€æŽ»çºãªã³ãã¥ããã£ãè¯ãããã¥ã¡ã³ãã¯ãããŸããïŒ
- èšèªãµããŒãïŒ ããŒã«èªäœã¯è±èªã§ãããããããŸããããã°ããŒãã«ãŠãŒã¶ãŒãå©çšããèšèªã®ã³ã³ãã³ããæ£ããè§£éãããã¹ãã§ããããšã確èªããŠãã ããã
ã¢ã¯ã»ã·ãã«ãªWebã³ã³ããŒãã³ãéçºã®ããã®ãã¹ããã©ã¯ãã£ã¹
ã¢ã¯ã»ã·ããªãã£ãã¹ãããã广çã«ããçºèŠãããåé¡ã®æ°ãæžããããã«ã¯ã以äžã®éçºãã¹ããã©ã¯ãã£ã¹ã«åŸã£ãŠãã ããã
- ã»ãã³ãã£ã¯ã¹ããå§ããïŒ å¯èœãªéãããã€ãã£ãHTMLèŠçŽ ã䜿çšããŠãã ãããã«ã¹ã¿ã èŠçŽ ãäœæããå¿ èŠãããå Žåã¯ããã®ç®çãšç¶æ ãäŒããããã«é©åãªARIAããŒã«ãšå±æ§ãæã€ããšã確èªããŠãã ããã
- ããã°ã¬ãã·ããšã³ãã³ã¹ã¡ã³ãïŒ ã³ã¢æ©èœãšã¢ã¯ã»ã·ããªãã£ã«çŠç¹ãåœãŠãŠã³ã³ããŒãã³ããæ§ç¯ãããã®åŸã§æ¡åŒµæ©èœãéããŸããããã«ãããJavaScriptã倱æãããæ¯æŽæè¡ã«å¶éããã£ããããŠããåºæ¬çãªãŠãŒã¶ããªãã£ãä¿èšŒãããŸãã
- æç¢ºã§ç°¡æœãªã©ãã«ïŒ ã³ã³ããŒãã³ãå
ã®ãã¹ãŠã®ã€ã³ã¿ã©ã¯ãã£ãèŠçŽ ïŒãã¿ã³ããªã³ã¯ããã©ãŒã å
¥åïŒã¯ãå¯èŠããã¹ããŸãã¯ARIA屿§ïŒ
aria-labelãaria-labelledbyïŒãéããŠãæç¢ºã§èšè¿°çãªã©ãã«ãæã€å¿ èŠããããŸãã - ãã©ãŒã«ã¹ç®¡çïŒ ç¹ã«ã¢ãŒãã«ãããããªãŒããŒãåçã«çæãããã³ã³ãã³ãã«ã€ããŠã¯ãé©åãªãã©ãŒã«ã¹ç®¡çãå®è£ ããŠãã ããããã©ãŒã«ã¹ãè«ççã«ç§»åããé©åã«æ»ãããããšã確èªããŸãã
- è²ã³ã³ãã©ã¹ãïŒ ããã¹ãããã³ã€ã³ã¿ã©ã¯ãã£ãèŠçŽ ã«å¯ŸããWCAGã®è²ã³ã³ãã©ã¹ãæ¯èŠä»¶ãéµå®ããŸãã
- ããŒããŒãæäœæ§ïŒ ããŒããŒãã䜿çšããŠå®å šã«ããã²ãŒãããã³æäœã§ããã³ã³ããŒãã³ããèšèšããŸãã
- ã¢ã¯ã»ã·ããªãã£æ©èœã®ææžåïŒ è€éãªã³ã³ããŒãã³ãã«ã€ããŠã¯ããã®ã¢ã¯ã»ã·ããªãã£æ©èœãšæ¢ç¥ã®å¶éãææžåããŸãã
çµè«
Webã³ã³ããŒãã³ãã¯ãã¢ãã³ã§åå©çšå¯èœãªUIãæ§ç¯ããããã®èšãç¥ããªãåãšæè»æ§ãæäŸããŸãããããããã®ã¢ã¯ã»ã·ããªãã£ã¯ãæå³çãã€ç¶ç¶çãªåªåãå¿ èŠã§ããç¹ã«ã·ã£ããŠDOMãšã³ã³ããŒãã³ãã®ã©ã€ããµã€ã¯ã«ã®è€éããçè§£ããããŒã«ãçšããèªåã¢ã¯ã»ã·ããªãã£ãã¹ãã¯ãWCAGã®ãããªã°ããŒãã«æšæºãžã®æºæ ãæ€èšŒããããã®äžå¯æ¬ ãªæŠç¥ã§ãããããã®ããŒã«ãéçºã¯ãŒã¯ãããŒã«çµ±åããã·ã£ããŠDOM察å¿ãã¹ãã«çŠç¹ãåœãŠãèªååãæåã¬ãã¥ãŒãšãŠãŒã¶ãŒãã£ãŒãããã¯ã§è£å®ããããšã§ãéçºããŒã ã¯Webã³ã³ããŒãã³ãã倿§ãªåœéçãªãŠãŒã¶ãŒããŒã¹ã«ãšã£ãŠãã€ã³ã¯ã«ãŒã·ãã§ã䜿ãããããæºæ ããŠããããšãä¿èšŒã§ããŸãã
èªåã¢ã¯ã»ã·ããªãã£ãã¹ããåãå ¥ããããšã¯ãã³ã³ãã©ã€ã¢ã³ã¹èŠä»¶ãæºããã ãã§ãªããããããå Žæã®ãã¹ãŠã®äººãå©çšã§ãããããå ¬å¹³ã§ã¢ã¯ã»ã¹ããããããžã¿ã«æªæ¥ãæ§ç¯ããããšã§ããããŸãã