[HTML-1일차] 웹 접근성과 활용

Urther·2021년 10월 25일

html

Html,Css

목록 보기

12/12

웹 접근성이란(Web accessbility)

모든 사람들이 동등하게 접근 가능하고 이해가능하게끔 해주는 것이다.

웹 접근성은 장애가 있는 사람에게만 국한되지 않는다. 예를 들어 느린 인터넷 환경 또한 장애의 일부가 될 수 있다. 이런 사람들에게 동일한 서비스를 제공해줄 수 있게끔 도와주는 것이 웹 접근성이다.

웹 접근성의 중요성

프론트엔드 초기 주요 초점은 성능 효율적이고 반응이 빠른 프론트엔드 웹 애플리케이션을 개발하는 것이었다. 하지만 공개 응용 프로그램을 개발하는 회사라면 장애가 있는 사람을 포함한 대규모 사용자를 기반으로 서비스를 제공해야하기 때문에 웹 접근성에 대한 중요도는 늘어나고 있다.

그러나 현재, 많은 사이트와 도구가 일부 사람들이 사용하기 어렵거나 불가능하게 만드는 접근성의 장벽으로 개발되었다.

[HTML 바로 알기] Semantic Web을 위한 Semantic Elements

웹 접근성 예제

bbc 홈페이지

aria-hidden 을 통해 사용자에게는 숨겨져있지만 스크린리더 사용자들이 어떤 기능인지 인식하게끔 설계하였다.

영국정부 홈페이지

ARIA 속성을 사용하여 스크린 리더 사용자가 올바른 양식을 찾고 올바르게 채우도록 돕는다.

'아니요'와 '이 페이지에 문제가 있습니까?' 링크에는 현재 숨겨져 있는 페이지의 근처 섹션을 제어함을 나타내는 aria-controls및 aria-expanded=”false”속성이 있다.

WAI-ARIA 사용

aria-label="속성"

설명이 필요한 요소에 속성을 부여

<button type="button" aria-label="상세정보 닫기" title="상세정보 닫기"></button>

aria-labelledby="id"

디테일한 설명을 제공하고 있는 태그의 아이디를 삽입한다.

<section aria-labelledby="hot-brownie-chocolate">
  <h3 id="hot-brownie-chocolate">
    HOT 브라우니 쇼콜라
    <span lang="en">Brownie Chocolate</span>
  </h3>
  <p>
    깊고 진한 초콜릿의 맛에 부드러운 휘핑크림과 브라우니를 
    함께 어울러져 고급스러운 디저트 같은 초콜릿 음료
  </p>
</section>

aria- haspopup="true|menu|dialog|listbox|tree|grid|false(default)"

어떤 종류의 popup이 있다는 정보(상태)를 제공한다.

<button type="button" aria-haspopup="dialog">
  클릭하시면 상세정보를 확인할 수 있습니다.
</button>

aria-pressed="true|false|mixed|undefined(default)"

요소의 눌림 상태를 제공한다.

<button type="button" aria-pressed="false">
  클릭하시면 상세정보를 확인할 수 있습니다.
</button>

웹 접근성 중 menu에 대한 접근성은 가장 중요하다. 접근하기 어려운 메뉴는 사용자들의 접근 장벽을 높힌다.

메뉴 코드는 nav 태그 안에 넣는다

특정 순서가 있는 메뉴는 ol 안에, 특정 순서가 없는 메뉴라면 ul 안에 넣어준다.

aria-label을 이용한다.

코드 설명

계획한 코드

        <nav class="nav" role="navigation" aria-label="Primary navigation">
          <h2 class="menu">메인 메뉴</h2>
          <ul>
            <li>
              <button>Html이란</button>
              <ul class="sub-menu">
                <li><a href="#">HTML5</a></li>
                <li><a href="#">레퍼런스 소개</a></li>
              </ul>
            </li>
            <li>
              <button>CSS란</button>
              <ul class="sub-class">
                <li><a href="#">CSS3</a></li>
                <li><a href="#">CSS 좋은 예</a></li>
              </ul>
            </li>
            <li>
              <button>웹표준</button>
              <ul class="sub-class">
                <li><a href="#">표준이</a></li>
                <li><a href="#">뭘까</a></li>
              </ul>
            </li>
          </ul>
        </nav>