웹접근성 문의드립니다

웹접근성 문의드립니다

QA

웹접근성 문의드립니다

본문

아미나빌더를 이용해서 사이트를 운영중인데요
웹접근성?? 구글검색이 하도 잘안되서 이런거라도 다 맞춰보려고하는데요
웹접근성 부분에 아래처럼 문제되는부분이 있는데 어떻게 처리해야하는지 모르겠어서요
문제되는부분 사이트쪽메뉴부분입니다.

 

서브메뉴가 있는 탭을 누르면 
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>

답변을 작성하시기 전에 로그인 해주세요.
전체 38
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT