2016-08-09 7 views
3

우리 팀은 시각 장애인 용 화면 판독기로 부트 스트랩 3 드롭 다운 목록 (http://getbootstrap.com/components/#dropdowns)의 인식 문제에 직면했습니다. 그래서 부트 스트랩 3가 508 준수 섹션 (http://www.section508.gov/)과 호환되면 궁금합니다.부트 스트랩 3는 508 준수 섹션과 호환됩니까?

그렇지 않은 경우 508 섹션과 호환되는 부트 스트랩 플러그인이 있습니까?

+0

(비슷한 내용을 다루는 EU 규칙과 비슷한 것이면) 놀랄 것입니다. 그러나 이것은 도움이되는 방향으로 갈 것 같습니다 : https://github.com/paypal/bootstrap-accessibility-plugin –

+0

그들은 자신의 접근성 섹션 (http://getbootstrap.com/getting-started/#accessibility)에서 508 규정을 준수한다고 명시하지 않지만 구운 자원에 대한 개요는 물론 접근성 문제를 결정하는 방법에 대한 링크를 제공합니다. 최소의 노력으로 문제를 해결할 수 있습니다. –

답변

0

NVDA을 사용하여 부트 스트랩 드롭 다운 메뉴를 테스트했으며 태그가 올바르게 지정되었다고 가정하면 올바르게 작동합니다. 드롭 다운 "버튼"에 사용 된 요소가 포커스를받을 수있는 항목인지, div 또는 범위가 될 수 없는지, ul에 role = "menu"가 있어야하는지 확인해야합니다.

예를 들어 당신이 를 사용하여 탐색 한 다음 메뉴를 엽니 다 Enter 키를 누르 NVDA와 드롭 다운을 사용합니다.

<a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown"> Dropdown Menu Button <span class="fa fa-caret-down">&nbsp; </span></a> 

<ul class="dropdown-menu" role="menu"> 
    <li><a href="https://www.google.com/" target="_blank" title="Link to Google">Link to Google</a></li> 
    <li>Just some Text</li> 
    <li><a href="http://www.stackoverlow.com/" target="_blank" title="Stack Overflow">Stack Overflow</a></li> 
</ul> 
0

http://webaim.org/standards/508/checklist에서 http://achecker.ca/checker/index.php 및 체크리스트에 따라 508 준수 섹션 주요 문제가되지 않는 부트 스트랩 3 보인다처럼

코드가 보일 것입니다.

하지만 불행히도 부트 스트랩 드롭 다운은 화면 판독기에서 판독기가 선택 태그에 대해 수행하는 것과 동일한 방식으로 읽을 수 없습니다 (https://github.com/paypal/bootstrap-accessibility-plugin 포함). 따라서 시각 장애가있는 사람들이 긴 목록에서 일부 값을 선택하는 것은 다소 어려울 수 있습니다. 국가 목록을 선택하십시오.