접근성 공부 03.05

<header id="header" class="header">
        <div class="header-wrapper">
            <a href="#" class="logo">logo</a>
            <nav class="nav-block">
                <ul class="nav-list">
                    <li class="nav-item">item1</li>
                    <li class="nav-item">item2</li>
                    <li class="nav-item">item3</li>
                </ul>
            </nav>
            <div class="header-tab-block hidden">
                <ul class="header-tab-list">
                    <li class="header-tab-item">tab01</li>
                    <li class="header-tab-item">tab01</li>
                    <li class="header-tab-item">tab01</li>
                    <li class="header-tab-item">tab01</li>
                    <li class="header-tab-item">tab01</li>
                    <li class="header-tab-item">tab01</li>
                    <li class="header-tab-item">tab01</li>
                    <li class="header-tab-item">tab01</li>
                    <li class="header-tab-item">tab01</li>
                </ul>
            </div>
        </div>
    </header>

이 html코드에서 부족한 접근성과 웹 표준을 수정해서 고쳐보자!

1. li 요소 안에 a 태그 추가

• li요소는 보통 네이게이션에서 링크를 포함해야함
• <li class="nav-item"><a href="#">item1</a></li>

2. 네이게이션 요소 nav 에 aria-label 추가

• nav 요소가 있을 경우를 대비해 역할을 명확하게해야함.
• <nav class="nav-block" aria-label="메인 메뉴">

3. 탭 블록의 접근성 개선

• .header-tab-block 에 role="tablist", .header-tab-item 에 role="tab" 속성을 추가