ããŒããŒãããã²ãŒã·ã§ã³ã®åãè§£ãæŸã¡ãŸãããïŒãã®å æ¬çãªã¬ã€ãã§ã¯ããã©ãŒã«ã¹ç®¡çæè¡ãã¢ã¯ã»ã·ããªãã£ã®ãã¹ããã©ã¯ãã£ã¹ããããŠäžçäžã®éçºè ãšãŠãŒã¶ãŒã®ããã®é«åºŠãªãã³ãã解説ããŸãã
ããŒããŒãããã²ãŒã·ã§ã³ïŒã¢ã¯ã»ã·ããªãã£ãšå¹çæ§ã®ããã®ãã©ãŒã«ã¹ç®¡çã®ç¿åŸ
仿¥ã®ããžã¿ã«äžçã§ã¯ããŠã§ããµã€ããã¢ããªã±ãŒã·ã§ã³ããŸããŸãè€éã«ãªãäžã§ã代æ¿çãªããã²ãŒã·ã§ã³æ¹æ³ãæäŸããããšãäžå¯æ¬ ã§ããå€ãã®ãŠãŒã¶ãŒãããŠã¹ãã¿ãããããã«äŸåããŠããŸãããããŒããŒãããã²ãŒã·ã§ã³ã¯ã³ã³ãã³ããšå¯Ÿè©±ããããã®åŒ·åã§ããã°ãã°èŠéããããã¡ãªæ¹æ³ãæäŸããŸãããã®ã¬ã€ãã§ã¯ãããŒããŒãããã²ãŒã·ã§ã³ã®éèŠæ§ãæãäžãããã©ãŒã«ã¹ç®¡çãšããéèŠãªæŠå¿µã«çŠç¹ãåœãŠãŸããç§ãã¡ã¯ãèœåã奜ã¿ã®å¯Ÿè©±æ¹æ³ã«é¢ãããã誰ããã¢ã¯ã»ã¹ããããå¹ççãªäœéšã確ä¿ããããã®æè¡ããã¹ããã©ã¯ãã£ã¹ããããŠéçºè ãšãŠãŒã¶ãŒã®ããã®é«åºŠãªãã³ããæ¢ããŸãã
ãªãããŒããŒãããã²ãŒã·ã§ã³ãéèŠãªã®ã
ããŒããŒãããã²ãŒã·ã§ã³ã¯ãåã«ããŠã¹ãŠãŒã¶ãŒã®ããã®ä»£æ¿ææ®µã§ã¯ãããŸãããããã¯ã¢ã¯ã»ã·ããªãã£ãšãŠãŒã¶ããªãã£ã®åºæ¬çãªåŽé¢ã§ãããªããããéåžžã«éèŠãªã®ãã以äžã«ç€ºããŸãã
- ã¢ã¯ã»ã·ããªãã£ïŒ éåé害ãèŠèŠé害ããŸãã¯èªç¥é害ãæã€äººã ã¯ãããŒããŒããŸãã¯ããŒããŒãå ¥åããšãã¥ã¬ãŒãããæ¯æŽæè¡ã®ã¿ã«äŸåããå ŽåããããŸãããããã®ãŠãŒã¶ãŒãããžã¿ã«ã³ã³ãã³ãã«ã¢ã¯ã»ã¹ãã察話ããããã«ã¯ãé©åãªããŒããŒãããã²ãŒã·ã§ã³ãäžå¯æ¬ ã§ããäŸãã°ãã¹ã¯ãªãŒã³ãªãŒããŒã䜿çšãã人ã¯ãäž»ã«ããŒããŒãã䜿ã£ãŠãŠã§ããµã€ããããã²ãŒãããŸãã
- å¹çæ§ïŒ ãã¯ãŒãŠãŒã¶ãŒã¯ãç¹ã«å埩çãªã¿ã¹ã¯ã«ãããŠãããŠã¹ã䜿çšãããããããŒããŒãããã²ãŒã·ã§ã³ã®æ¹ãéããå¹ççã ãšæããããšããããããŸããIDEã§ããŒããŒãã·ã§ãŒãã«ããã䜿çšãããœãããŠã§ã¢éçºè ãããã©ãŒã ãè¿ éã«ããã²ãŒãããããŒã¿å ¥åã®å°éå®¶ãèããŠã¿ãŠãã ããã
- æ¯æŽæè¡ãšã®äºææ§ïŒ ã¹ã¯ãªãŒã³ãªãŒããŒãé³å£°èªèãœãããŠã§ã¢ãã¹ã€ããããã€ã¹ãªã©ãå€ãã®æ¯æŽæè¡ã¯ãã¢ããªã±ãŒã·ã§ã³ãšå¯Ÿè©±ããããã«ããŒããŒãå ¥åã«äŸåããŠããŸããæç¢ºã«å®çŸ©ãããããŒããŒãããã²ãŒã·ã§ã³äœéšãæäŸããããšã§ããããã®ããŒã«ãšã®äºææ§ã確ä¿ãããŸãã
- è² æ ã®è»œæžïŒ äžéšã®ãŠãŒã¶ãŒã¯ãé·æéããŠã¹ã䜿çšãããšäžå¿«æãçã¿ãçµéšããŸããããŒããŒãããã²ãŒã·ã§ã³ã¯ãããå¿«é©ã§äººéå·¥åŠã«åºã¥ããä»£æ¿ææ®µãæäŸã§ããŸãã
- ãŠãããŒãµã«ãã¶ã€ã³ïŒ ããŒããŒãããã²ãŒã·ã§ã³ãèæ ®ããèšèšã¯ãèœåã«é¢ãããããã¹ãŠã®ãŠãŒã¶ãŒã«ãšã£ãŠãŠã§ããµã€ããã¢ããªã±ãŒã·ã§ã³ã®å šäœçãªãŠãŒã¶ããªãã£ãæ¬è³ªçã«åäžãããŸããããã«ãããéçºè ã¯ã³ã³ãã³ãã®è«ççãªæµããšæ§é ãèæ ®ããããåŸãªããªããŸãã
ãã©ãŒã«ã¹ç®¡çã®çè§£
ãã©ãŒã«ã¹ç®¡çãšã¯ãããŒããŒããã©ãŒã«ã¹ïŒéåžžã¯èŠèŠçãªãã©ãŒã«ã¹ãªã³ã°ã§ç€ºãããïŒããŠã§ãããŒãžãã¢ããªã±ãŒã·ã§ã³äžã®å¯Ÿè©±åèŠçŽ ãã©ã®ããã«ç§»åããããæããŸããé©åã«ç®¡çããããã©ãŒã«ã¹é åºã¯ãè«ççã§ãäºæž¬å¯èœã§ãçŽæçã§ããã¹ãã§ããããŠãŒã¶ãŒãç°¡åã«ã³ã³ãã³ããããã²ãŒããã察話ã§ããããã«ããå¿ èŠããããŸããäžé©åãªãã©ãŒã«ã¹ç®¡çã¯ããã©ã¹ãã¬ãŒã·ã§ã³ãæ··ä¹±ãåŒãèµ·ãããäžéšã®å人ã«ãšã£ãŠã¯ãŠã§ããµã€ãã䜿çšäžèœã«ããããšãããããŸãã
äž»èŠãªæŠå¿µïŒ
- ãã©ãŒã«ã¹é åºïŒ ãŠãŒã¶ãŒãTabããŒãæŒãããšãã«èŠçŽ ããã©ãŒã«ã¹ãåãåãé åºãããã©ã«ãã®ãã©ãŒã«ã¹é åºã¯ãéåžžããœãŒã¹é åºïŒHTMLã³ãŒãã§èŠçŽ ãå®çŸ©ãããŠããé åºïŒã«åŸããŸãã
- ãã©ãŒã«ã¹ãªã³ã°ïŒ çŸåšãã©ãŒã«ã¹ãããŠããèŠçŽ ã匷調衚瀺ããèŠèŠçãªã€ã³ãžã±ãŒã¿ãŒïŒéåžžã¯å¢çç·ãŸãã¯ã¢ãŠãã©ã€ã³ïŒãããã«ããããŠãŒã¶ãŒã¯ããŒããŒãå ¥åãã©ãã«åããããããçè§£ã§ããŸãããã©ãŒã«ã¹ãªã³ã°ã®ã¹ã¿ã€ã«ãšå€èгã¯ãå€ãã®å ŽåCSSã䜿çšããŠã«ã¹ã¿ãã€ãºå¯èœã§ãã
- ã¿ãã€ã³ããã¯ã¹ïŒ éçºè
ãèŠçŽ ã®ãã©ãŒã«ã¹é åºãæç€ºçã«å¶åŸ¡ã§ããããã«ããHTML屿§ïŒ
tabindexïŒãtabindexã誀ã£ãŠäœ¿çšãããšãæ··ä¹±ãæããèŠåœèã倱ããããããªäœéšãçã¿åºãå¯èœæ§ããããŸãã - ãã©ãŒã«ã¹å¯èœãªèŠçŽ ïŒ ãªã³ã¯ïŒ
<a>ïŒããã¿ã³ïŒ<button>ïŒããã©ãŒã ãã£ãŒã«ãïŒ<input>ã<textarea>ã<select>ïŒãããã³tabindex屿§ãæã€èŠçŽ ãªã©ãããŒããŒããã©ãŒã«ã¹ãåãåãããšãã§ããèŠçŽ ã
ããŒããŒãããã²ãŒã·ã§ã³ãå®è£ ããããã®ãã¹ããã©ã¯ãã£ã¹
广çãªããŒããŒãããã²ãŒã·ã§ã³ãå®è£ ããã«ã¯ãæ éãªèšç»ãšçްéšãžã®æ³šæãå¿ èŠã§ãã以äžã«ãåŸãã¹ããã¹ããã©ã¯ãã£ã¹ãããã€ã玹ä»ããŸãã
1. è«ççãªãã©ãŒã«ã¹é åº
ãã©ãŒã«ã¹é åºã¯ãäžè¬çã«ããŒãžã®èŠèŠçãªæµãã«åŸãã¹ãã§ãããŠãŒã¶ãŒã¯ãéåžžã¯å·Šããå³ãžãäžããäžãžãšãè«ççã§äºæž¬å¯èœãªæ¹æ³ã§èŠçŽ ãããã²ãŒãã§ããå¿ èŠããããŸããããã«ããããŠãŒã¶ãŒã¯ã³ã³ãã³ããç°¡åã«è¿œè·¡ããæå³ããé åºã§èŠçŽ ãšå¯Ÿè©±ã§ããããã«ãªããŸããã³ã³ãã³ãã®èšèªã®æžåæ¹åãèæ ®ããŠãã ãããå³ããå·Šãžèšè¿°ããèšèªïŒäŸïŒã¢ã©ãã¢èªãããã©ã€èªïŒã®å Žåããã©ãŒã«ã¹é åºãããã«åŸã£ãŠæµããã¹ãã§ãã
2. å¯èŠçãªãã©ãŒã«ã¹ã€ã³ãžã±ãŒã¿ãŒ
ãã©ãŒã«ã¹ãªã³ã°ãæç¢ºã«è¡šç€ºãããåšå²ã®èŠçŽ ãšåºå¥ã§ããããã«ããŠãã ããããã©ãŒã«ã¹ã€ã³ãžã±ãŒã¿ãŒã¯ãäœèŠåãèªç¥é害ãæã€ãŠãŒã¶ãŒãç°¡åã«èŠãããšãã§ããããã«ãååãªã³ã³ãã©ã¹ããšãµã€ãºãæã€ã¹ãã§ãããã©ãŒã«ã¹ãªã³ã°ãå®å šã«åãé€ãããšã¯é¿ããŠãã ãããããŒããŒããŠãŒã¶ãŒãçŸåšã©ã®èŠçŽ ããã©ãŒã«ã¹ãããŠãããã倿ã§ããªããªãå¯èœæ§ããããŸããCSSã䜿çšããŠãã©ãŒã«ã¹ãªã³ã°ããŠã§ããµã€ãã®ãã¶ã€ã³ã«åãããŠã«ã¹ã¿ãã€ãºããŸãããåžžã«èŠèŠçã«ç®ç«ã€ããã«ããŠãã ããã
äŸïŒCSSïŒïŒ
button:focus {
outline: 2px solid blue; /* ã·ã³ãã«ã§å¯èŠçãªãã©ãŒã«ã¹ã€ã³ãžã±ãŒã¿ãŒ */
}
3. tabindexã®é©åãªäœ¿çš
tabindex屿§ã¯èŠçŽ ã®ãã©ãŒã«ã¹é åºãå¶åŸ¡ããããã«äœ¿çšã§ããŸãããæ³šæããŠäœ¿çšããå¿
èŠããããŸãã以äžã«ã广çã«äœ¿çšããæ¹æ³ã瀺ããŸãã
tabindex="0"ïŒ èŠçŽ ãèªç¶ãªã¿ãé åºïŒãœãŒã¹é åºã«åŸãïŒã§ãã©ãŒã«ã¹å¯èœã«ããŸããããã¯ãæ¬è³ªçã«å¯Ÿè©±åã§ãããããã©ã«ãã§ã¯ãã©ãŒã«ã¹å¯èœã§ãªãå¯èœæ§ã®ããèŠçŽ ïŒäŸïŒã«ã¹ã¿ã ãã¿ã³ãšããŠäœ¿çšããã<div>ïŒã«äœ¿çšããŸããtabindex="-1"ïŒ èŠçŽ ãããã°ã©ã çã«ïŒJavaScriptã䜿çšããŠïŒã®ã¿ãã©ãŒã«ã¹å¯èœã«ããŸããããã¯ããŠãŒã¶ãŒã«ãã£ãŠãã©ãŒã«ã¹ãããã¹ãã§ã¯ãªãããã¹ã¯ãªããã«ãã£ãŠãã©ãŒã«ã¹ãããå¿ èŠãããèŠçŽ ã«åœ¹ç«ã¡ãŸãã- 0ãã倧ãã
tabindexå€ã¯é¿ããïŒ æ£ã®tabindexå€ã䜿çšãããšãèªç¶ãªã¿ãé åºãä¹±ããæ··ä¹±ãæããäºæž¬äžå¯èœãªäœéšãçã¿åºãå¯èœæ§ããããŸãããŠãŒã¶ãŒãè«ççãªæ¹æ³ã§ããŒãžãããã²ãŒãããããšãå°é£ã«ãªããŸãã
äŸïŒ
<div role="button" tabindex="0" onclick="myFunction()">ã«ã¹ã¿ã ãã¿ã³</div>
4. åçã³ã³ãã³ãã«ããããã©ãŒã«ã¹ç®¡ç
åçã³ã³ãã³ããããŒãžã«è¿œå ãŸãã¯åé€ãããå ŽåïŒäŸïŒJavaScriptã䜿çšããŠã¢ãŒãã«ãã€ã¢ãã°ã衚瀺ãããããªã¹ããæŽæ°ãããããå ŽåïŒããã©ãŒã«ã¹ãé©åã«ç®¡çããããšãéèŠã§ããäŸãã°ãã¢ãŒãã«ãã€ã¢ãã°ãéããããšãããã©ãŒã«ã¹ã¯ãã€ã¢ãã°å ã®æåã®ãã©ãŒã«ã¹å¯èœãªèŠçŽ ã«ç§»åããå¿ èŠããããŸãããã€ã¢ãã°ãéãããããšãããã©ãŒã«ã¹ã¯ãã€ã¢ãã°ãããªã¬ãŒããèŠçŽ ã«æ»ãããã¹ãã§ãã
äŸïŒJavaScriptïŒïŒ
const modal = document.getElementById('myModal');
const openModalButton = document.getElementById('openModal');
const closeModalButton = document.getElementById('closeModal');
openModalButton.addEventListener('click', () => {
modal.style.display = 'block';
closeModalButton.focus(); // ã¢ãŒãã«å
ã®éãããã¿ã³ã«ãã©ãŒã«ã¹ãç§»å
});
closeModalButton.addEventListener('click', () => {
modal.style.display = 'none';
openModalButton.focus(); // ã¢ãŒãã«ãéãããã¿ã³ã«ãã©ãŒã«ã¹ãæ»ã
});
5. ã¹ãããããã²ãŒã·ã§ã³ãªã³ã¯
ããŒãžã®æäžéšã«ãããã²ãŒã·ã§ã³ãã¹ãããããªã³ã¯ãæäŸãããŠãŒã¶ãŒãã¡ã€ã³ããã²ãŒã·ã§ã³ã¡ãã¥ãŒããã€ãã¹ããŠã¡ã€ã³ã³ã³ãã³ãã«çŽæ¥ãžã£ã³ãã§ããããã«ããŸããããã¯ãã¹ã¯ãªãŒã³ãªãŒããŒãããŒããŒãã䜿çšããŠããã²ãŒããããŠãŒã¶ãŒã«ãšã£ãŠç¹ã«åœ¹ç«ã¡ãŸããåããŒãžã§é·ãããã²ãŒã·ã§ã³ãªã³ã¯ã®ãªã¹ããã¿ãã§ç§»åããå¿ èŠããªããªãããã§ãã
äŸïŒHTMLïŒïŒ
<a href="#main-content" class="skip-link">ã¡ã€ã³ã³ã³ãã³ããžã¹ããã</a>
<main id="main-content">...</main>
äŸïŒCSS - ãªã³ã¯ããã©ãŒã«ã¹ãåãåããŸã§èŠèŠçã«é ãïŒïŒ
.skip-link {
position: absolute;
top: -999px;
left: -999px;
}
.skip-link:focus {
top: 0;
left: 0;
z-index: 1000; /* ä»ã®ã³ã³ãã³ãã®äžã«è¡šç€ºãããããã«ãã */
}
6. ããŒããŒããã©ãã
ããŒããŒããã©ããã¯ããŠãŒã¶ãŒãããŒããŒãã䜿çšããŠç¹å®ã®èŠçŽ ãããŒãžé åãããã©ãŒã«ã¹ãç§»åã§ããªããªã£ããšãã«çºçããŸããããã¯ãç¹ã«ã¢ãŒãã«ãã€ã¢ãã°ãè€éãªãŠã£ãžã§ããã§äžè¬çãªã¢ã¯ã»ã·ããªãã£ã®åé¡ã§ãããŠãŒã¶ãŒãåžžã«TabããŒããã®ä»ã®é©åãªããŒããŒãã·ã§ãŒãã«ããïŒäŸïŒEscããŒã§ã¢ãŒãã«ãéããïŒã䜿çšããŠãã©ã®å¯Ÿè©±åèŠçŽ ãããè±åºã§ããããšã確èªããŠãã ããã
7. ARIA屿§
ARIAïŒAccessible Rich Internet ApplicationsïŒå±æ§ã䜿çšããŠãç¹ã«ã«ã¹ã¿ã ãŠã£ãžã§ãããåçã³ã³ãã³ãã«ã€ããŠãèŠçŽ ã«é¢ãã远å ã®ã»ãã³ãã£ãã¯æ å ±ãæäŸããŸããARIA屿§ã¯ãæ¯æŽæè¡ãèŠçŽ ã®åœ¹å²ãç¶æ ãããããã£ãçè§£ããã®ã«åœ¹ç«ã¡ãããŒãžã®å šäœçãªã¢ã¯ã»ã·ããªãã£ãåäžãããŸãã
äŸãã°ã<div>èŠçŽ ã䜿çšããŠã«ã¹ã¿ã ãã¿ã³ãäœæããŠããå Žåãrole="button"屿§ã䜿çšããŠããã®èŠçŽ ããã¿ã³ã§ããããšã瀺ãããšãã§ããŸãããŸããARIA屿§ã䜿çšããŠãã¿ã³ã®ç¶æ
ã瀺ãããšãã§ããŸãïŒäŸïŒãã°ã«ãã¿ã³ã®å Žåã¯aria-pressed="true"ïŒã
8. ããŒããŒãããã²ãŒã·ã§ã³ã®ãã¹ã
ããŒããŒãã®ã¿ïŒããŠã¹ãªãïŒã䜿çšããŠãããŒããŒãããã²ãŒã·ã§ã³ã培åºçã«ãã¹ãããŠãã ãããããŒãžäžã®ãã¹ãŠã®å¯Ÿè©±åèŠçŽ ãããã²ãŒãããŠã¿ãŠããã©ãŒã«ã¹é åºãè«ççã§ããããšããã©ãŒã«ã¹ãªã³ã°ãèŠããããšãããŒããŒããã©ããããªãããšã確èªããŸãããŸããããŒããŒãããã²ãŒã·ã§ã³ã®åäœã¯ãã©ãŠã¶ããªãã¬ãŒãã£ã³ã°ã·ã¹ãã ã«ãã£ãŠç°ãªãå¯èœæ§ããããããç°ãªãç°å¢ã§ãã¹ãããŠãã ãããã¹ã¯ãªãŒã³ãªãŒããŒãªã©ã®æ¯æŽæè¡ã䜿çšããŠãã¹ãããäºææ§ã確èªããããšãæ€èšããŠãã ããã
é«åºŠãªãã©ãŒã«ã¹ç®¡çæè¡
åºæ¬çãªãã¹ããã©ã¯ãã£ã¹ãè¶ ããŠãããŒããŒãããã²ãŒã·ã§ã³äœéšãããã«åäžãããããšãã§ããããã€ãã®é«åºŠãªæè¡ããããŸãã
1. ããŒãã³ã°tabindex
ããŒãã³ã°tabindexã¯ãããŒã«ããŒãã°ãªãããªã©ã®ã«ã¹ã¿ã ãŠã£ãžã§ããã§äœ¿çšããããã¿ãŒã³ã§ããŠã£ãžã§ããå
ã®1ã€ã®èŠçŽ ã®ã¿ãåžžã«tabindex="0"ãæã¡ãŸãããŠãŒã¶ãŒããŠã£ãžã§ããå
ãïŒäŸïŒç¢å°ããŒã䜿çšããŠïŒããã²ãŒããããšãtabindex="0"ã¯çŸåšãã©ãŒã«ã¹ãããŠããèŠçŽ ã«ç§»åããä»ã®ãã¹ãŠã®èŠçŽ ã¯tabindex="-1"ã«ãªããŸããããã«ããããŠãŒã¶ãŒã¯ããŒãžã®å
šäœçãªã¿ãé åºãä¹±ãããšãªããç¢å°ããŒã䜿çšããŠãŠã£ãžã§ããå
ãããã²ãŒãã§ããŸãã
äŸïŒJavaScript - ç°¡æçïŒïŒ
const items = document.querySelectorAll('.toolbar-item');
items[0].tabIndex = 0; // åæã®ãã©ãŒã«ã¹å¯èœã¢ã€ãã
items.forEach(item => {
item.addEventListener('keydown', (event) => {
if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
event.preventDefault();
let currentIndex = Array.from(items).indexOf(event.target);
let nextIndex = (event.key === 'ArrowRight') ? currentIndex + 1 : currentIndex - 1;
if (nextIndex >= 0 && nextIndex < items.length) {
items[currentIndex].tabIndex = -1;
items[nextIndex].tabIndex = 0;
items[nextIndex].focus();
}
}
});
});
2. ã«ã¹ã¿ã ãã©ãŒã«ã¹ã¹ã¿ã€ã«
å¯èŠçãªãã©ãŒã«ã¹ã€ã³ãžã±ãŒã¿ãŒãæäŸããããšã¯éèŠã§ããããã©ãŠã¶ã®ããã©ã«ãã®ãã©ãŒã«ã¹ãªã³ã°ãåžžã«ãŠã§ããµã€ãã®ãã¶ã€ã³ãšäžèŽãããšã¯éããŸãããCSSã䜿çšããŠãã©ãŒã«ã¹ãªã³ã°ãã«ã¹ã¿ãã€ãºã§ããŸãããã«ã¹ã¿ã ãã©ãŒã«ã¹ã¹ã¿ã€ã«ãèŠèŠçã«ç®ç«ã¡ãã¢ã¯ã»ã·ããªãã£èŠä»¶ãæºãããŠããããšã確èªããããšãäžå¯æ¬ ã§ããoutlineãbox-shadowãèæ¯è²ã®å€æŽãçµã¿åãããŠãèŠèŠçã«é
åçã§ã¢ã¯ã»ã¹ãããããã©ãŒã«ã¹ã¹ã¿ã€ã«ãäœæããããšãæ€èšããŠãã ããã
3. ã¢ãŒãã«å ã§ã®ãã©ãŒã«ã¹ãã©ãã
ã¢ãŒãã«ãã€ã¢ãã°å ã«å ç¢ãªãã©ãŒã«ã¹ãã©ãããäœæããããšã¯å°é£ãªå ŽåããããŸããäžè¬çãªã¢ãããŒãã¯ãJavaScriptã䜿çšããŠããŠãŒã¶ãŒãã¢ãŒãã«å ã®æåãŸãã¯æåŸã®ãã©ãŒã«ã¹å¯èœãªèŠçŽ ã«å°éããããšãæ€åºãããã©ãŒã«ã¹ãã¢ãŒãã«ã®ããäžæ¹ã®ç«¯ã«æ»ãããšã§ããããã«ããã埪ç°çãªãã©ãŒã«ã¹ã«ãŒããäœæããããŠãŒã¶ãŒã誀ã£ãŠã¢ãŒãã«ããã¿ãã¢ãŠãããªãããã«ããŸãã
4. JavaScriptã©ã€ãã©ãªã®äœ¿çš
ããã€ãã®JavaScriptã©ã€ãã©ãªã¯ãç¹ã«è€éãªã¢ããªã±ãŒã·ã§ã³ã«ãããŠããã©ãŒã«ã¹ç®¡çãç°¡çŽ åããã®ã«åœ¹ç«ã¡ãŸãããããã®ã©ã€ãã©ãªã¯ããã©ãŒã«ã¹é åºã®ç®¡çãã¢ãŒãã«å ã§ã®ãã©ãŒã«ã¹ãã©ãããã«ã¹ã¿ã ãã©ãŒã«ã¹ã¹ã¿ã€ã«ã®äœæã®ããã®ãŠãŒãã£ãªãã£ãæäŸããŸããäŸãšããŠã¯ä»¥äžã®ãããªãã®ããããŸãã
- ally.jsïŒãŠã§ãã¢ããªã±ãŒã·ã§ã³ãããã¢ã¯ã»ã·ãã«ã«ããããã®JavaScriptã©ã€ãã©ãªã
- FocusTrapïŒDOMããŒãå ã«ãã©ãŒã«ã¹ããã©ããããããšã«ç¹åãã軜éã©ã€ãã©ãªã
ããŒããŒãããã²ãŒã·ã§ã³ã«é¢ããã°ããŒãã«ãªèæ ®äºé
ã°ããŒãã«ãªãªãŒãã£ãšã³ã¹åãã«èšèšããå Žåãç°ãªãå°åã®æåçãªéããã¢ã¯ã»ã·ããªãã£åºæºãèæ ®ããããšãéèŠã§ãã
- èšèªã®æžåæ¹åïŒ åè¿°ã®ããã«ããã©ãŒã«ã¹é åºã¯ã³ã³ãã³ãã®èšèªã®æžåæ¹åã«åŸãã¹ãã§ãã
- ããŒããŒãã¬ã€ã¢ãŠãïŒ åœã«ãã£ãŠç°ãªãããŒããŒãã¬ã€ã¢ãŠãïŒäŸïŒQWERTY, AZERTY, DvorakïŒã䜿çšãããŠããããšã«æ³šæããŠãã ãããããŒããŒãã·ã§ãŒãã«ãããããã²ãŒã·ã§ã³ãæ£ããæ©èœããããšã確èªããããã«ãç°ãªãããŒããŒãã¬ã€ã¢ãŠãã§ãŠã§ããµã€ãããã¹ãããŠãã ããã
- ã¢ã¯ã»ã·ããªãã£åºæºïŒ WCAGïŒãŠã§ãã³ã³ãã³ãã»ã¢ã¯ã»ã·ããªãã£ã»ã¬ã€ãã©ã€ã³ïŒãEN 301 549ïŒICT補åããã³ãµãŒãã¹ã®ã¢ã¯ã»ã·ããªãã£èŠä»¶ã«é¢ããæ¬§å·èŠæ ŒïŒãã»ã¯ã·ã§ã³508ïŒç±³åœã®ã¢ã¯ã»ã·ããªãã£æ³ïŒãªã©ãããŸããŸãªå°åã®ã¢ã¯ã»ã·ããªãã£åºæºãã¬ã€ãã©ã€ã³ã«ç²ŸéããŠãã ããã
- æ¯æŽæè¡ïŒ JAWSãNVDAãVoiceOverãªã©ãããŸããŸãªå°åã§äœ¿çšãããŠããäžè¬çãªæ¯æŽæè¡ã§ãŠã§ããµã€ãããã¹ãããŠãã ããã
çµè«
ããŒããŒãããã²ãŒã·ã§ã³ã¯ãã¢ã¯ã»ã·ããªãã£ãšãŠãŒã¶ããªãã£ã®éèŠãªåŽé¢ã§ããé©åãªãã©ãŒã«ã¹ç®¡çæè¡ãå®è£
ããããšã§ãéçºè
ã¯ããåºç¯ãªãŠãŒã¶ãŒãã¢ã¯ã»ã¹ã§ãããŠã§ããµã€ããã¢ããªã±ãŒã·ã§ã³ãäœæãããã¹ãŠã®äººã«ãšã£ãŠããå¹ççã§æ¥œããäœéšãæäŸã§ããŸããè«ççãªãã©ãŒã«ã¹é åºãå¯èŠçãªãã©ãŒã«ã¹ã€ã³ãžã±ãŒã¿ãŒãããã³tabindexã®å¹æçãªäœ¿çšãåªå
ããããšãå¿ããªãã§ãã ãããããŒããŒãã®ã¿ã§åŸ¹åºçã«ãã¹ãããARIA屿§ã䜿çšããŠã¢ã¯ã»ã·ããªãã£ãåäžãããããšãæ€èšããŠãã ããããããã®ãã¹ããã©ã¯ãã£ã¹ã«åŸãããšã§ãããªãã®ãŠã§ããµã€ããã¢ããªã±ãŒã·ã§ã³ãçã«ãã¹ãŠã®äººã«ãšã£ãŠã¢ã¯ã»ã¹å¯èœã§äœ¿ãããããã®ã§ããããšãä¿èšŒã§ããŸãã
ããŒããŒãããã²ãŒã·ã§ã³ãšãã©ãŒã«ã¹ç®¡çãžã®æè³ã¯ãåã«ã¢ã¯ã»ã·ããªãã£åºæºãžã®æºæ ã«é¢ãããã®ã§ã¯ãããŸãããããã¯ãããå æ¬çã§ãŠãŒã¶ãŒãã¬ã³ããªãŒãªããžã¿ã«äžçãåµé ããããšã§ãããããã®æè¡ãåãå ¥ããèœåã奜ã¿ã®å¯Ÿè©±æ¹æ³ã«é¢ããããäžçäžã®ãŠãŒã¶ãŒãããªãã®ã³ã³ãã³ããšå¹æçã«å¯Ÿè©±ã§ããããã«åãäžããŠãã ãããææ ®æ·±ãããŒããŒãããã²ãŒã·ã§ã³ã«æ³šãåªåã¯ããŠãŒã¶ãŒæºè¶³åºŠãšãããåºãããããšã³ã²ãŒãžãããªãŒãã£ãšã³ã¹ãšãã圢ã§å ±ãããã§ãããã