웹접근성 문의드립니다
본문
아미나빌더를 이용해서 사이트를 운영중인데요
웹접근성?? 구글검색이 하도 잘안되서 이런거라도 다 맞춰보려고하는데요
웹접근성 부분에 아래처럼 문제되는부분이 있는데 어떻게 처리해야하는지 모르겠어서요
문제되는부분 사이트쪽메뉴부분입니다.
서브메뉴가 있는 탭을 누르면
class="panel-collapse collapse" 에 in 이 추가되는데요
in이 추가되고나면 접근성 관련 메세지가 뜹니다. in을 제거하니까 안뜨구요
아래는 세번째메뉴 sidebar_menu_s3 여기에 in이 추가되니까
아래와같은 메세지가 나오는것같습니다...
메시지
하위 요소에 특정 [role]을(를) 포함해야 하는 ARIA [role] 지원 요소에 일부 또는 전체 하위 요소가 누락되었습니다.
일부 ARIA 상위 역할은 의도한 접근성 기능을 실행하려면 특정 하위 역할을 포함하고 있어야 합니다. 역할 및 필수 하위 요소에 관해 자세히 알아보기
통과하지못한요소
<div class="sidebar-menu panel-group" id="sidebar_menu" role="tablist" aria-multiselectable="true">
<div id="sidebar_menu_s3" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="sidebar_menu_c3">
답변 1
아래의 내용을 한번 참고해 보시겠어요..
1. 문제상황
<div class="sidebar-menu panel-group" id="sidebar_menu" role="tablist" aria-multiselectable="true">
<div id="sidebar_menu_s3" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="sidebar_menu_c3">
<!-- 서브 메뉴 내용 -->
</div>
</div>
2. 개선코드
<div class="sidebar-menu panel-group" id="sidebar_menu" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="sidebar_menu_h3">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#sidebar_menu" href="#sidebar_menu_s3" aria-expanded="true" aria-controls="sidebar_menu_s3">
메뉴 제목
</a>
</h4>
</div>
<div id="sidebar_menu_s3" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="sidebar_menu_h3">
<div class="panel-body">
<!-- 서브 메뉴 내용 -->
<ul>
<li><a href="#">서브 메뉴 1</a></li>
<li><a href="#">서브 메뉴 2</a></li>
<li><a href="#">서브 메뉴 3</a></li>
</ul>
</div>
</div>
</div>
</div>
답변정말 감사합니다.
그런데 남겨주신 소스로 해보았는데 동일한 메세지가 나옮니다...
제가 해본소스는 아래와같습니다.
<div class="sidebar-menu panel-group" id="sidebar_menu" role="tablist" aria-multiselectable="true">
<div class="panel">
<div class="panel-heading" role="tab" id="sidebar_menu_c1">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#sidebar_menu" href="#sidebar_menu_s1" aria-expanded="true" aria-controls="sidebar_menu_s1">
메뉴 제목
</a>
</h4>
</div>
<div id="sidebar_menu_s1" class="panel-collapse collapse " role="tabpanel" aria-labelledby="sidebar_menu_c1">
<div class="panel-body">
<!-- 서브 메뉴 내용 -->
<ul>
<li><a href="#">서브 메뉴 1</a></li>
<li><a href="#">서브 메뉴 2</a></li>
<li><a href="#">서브 메뉴 3</a></li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="sidebar_menu_c2">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#sidebar_menu" href="#sidebar_menu_s2" aria-expanded="true" aria-controls="sidebar_menu_s2">
메뉴 제목
</a>
</h4>
</div>
<div id="sidebar_menu_s2" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="sidebar_menu_c2">
<div class="panel-body">
<!-- 서브 메뉴 내용 -->
<ul>
<li><a href="#">서브 메뉴 1</a></li>
<li><a href="#">서브 메뉴 2</a></li>
<li><a href="#">서브 메뉴 3</a></li>
</ul>
</div>
</div>
</div>
</div>
