[html/css] HTML5 시멘틱 태그, 웹표준, WAI-ARIA

 

 

** 웹 표준은 월드 와이드 웹의 측면을 서술하고 정의하는 공식 표준이나 다른 기술 규격을 가리키는 일반적인 용어이다. 
최근에 이 용어는 웹 사이트를 작성하는 데 중요도가 높아지고 있으며 웹 디자인, 개발과 관계가 있다.

 

 

HTML5 시멘틱 태그

HTML5의 시맨틱(sematic) 태그는 웹 문서의 구조와 의미를 명확하게 나타내는 데 사용된다.

시멘틱 태그는 각요소의 의미를 명확하게 나타내므로, 직관적으로 구조를 이해하기 쉽게 만들고,
유지보수성을 높이는데 도움이 된다.

검색 엔진이 웹 페이지의 콘텐츠를 올바르게 이해해 인덱싱하는데 도움이 되므로,
적절한 검색결과에 노출될 수 있도록 도와주는 검색 엔진 최적화(SEO)에 도움이 된다.

스크린리더와 같은 보조기술을 사용하는 사용자들의 웹페이지 이해와 탐색 편의를 높일 수 있다.

또한 시맨틱 태그를 사용하면 웹 페이지가 웹 표준을 준수하고 있음을 나타내기 때문에,
웹 표준을 준수하는 웹 페이지는 다양한 브라우저와 플랫폼에서 일관된 방식으로 렌더링되고 동작하게된다.

따라서 시맨틱 태그를 사용하여 웹 페이지의 구조를 명확하게 정의하고 웹 표준을 준수함으로써
웹 페이지의 접근성, 검색 엔진 최적화(SEO), 유지보수성을 향상시킬 수 있다.

 

WAI-ARIA

WAI-ARIA는 "Web Accessibility Initiative’s Accessible Rich Internet Applications"의 약자로,

사용자 에이전트 (브라우저, 스크린 리더 등)에게 웹 콘텐츠의 의미와 구조를 명확하게 전달하여 웹 콘텐츠와 웹 애플리케이션의 접근성을 향상시키기 위한 표준이다.

HTML, XHTML, SVG 등의 마크업 언어를 사용하여 개발된 웹 콘텐츠의 접근성을 높이는 데 사용된다.

 

1. 자바스크립트나 다른 동적 언어로 인해 페이지의 요소가 바뀌더라도 새로고침을 하지 않아도 스크린 리더가 바뀐 요소를 읽어줄 수 있다.

 

2. 해당 문자가 화면에는 보이지만 스크린리더에서는 읽을 수 없도록 마크업이 가능하다

<span aria-hidden="true"> | </span>

 

 

3. role 을 통해 요소의 역할을 알려준다. (tab, tablist, banner, button 등)

** 시멘틱 태그에는 role 사용을 자제하는 것이 좋다. (시멘틱 태그와 role을 동시에 사용하면 스크린리더 사용시 시멘틱태그는 무시되고 role만 읽게 된다.)

4. aria-label을 통해 role이 아닌 사용자에게 전달해야할 내용을 상황에 따라 적을 수 있다.

** 현재 요소를 설명할 다른 참조(연결) 요소가 없는 경우에만 사용한다.
만약, 현재 요소를 설명하는 요소가 있으면 aria-labelledby을 이용해서 해당 텍스트영역과 현재요소를 연결시켜준다.
aria-labelledby 예시 ⬇️

<span id="rg-label">
  Drink options
</span>

<div role="radiogroup" aria-labelledby="rg-label">
  <div>
    <input type="radio" name="drink" id="drink1">
    <label for="drink1">Water</label>
  </div>
  <div>
    <input type="radio" name="drink" id="drink2">
    <label for="drink2">Tea</label>
  </div>
 </div>

aria-label은 시멘틱 태그이거나, role 속성 값이 상호작용(interactive)을 하는 값일 때만 사용하는 것이 좋다.
시멘틱 태그가 아닌 의미 없는 태그(`div``span``p``li` 등)에는 role이 붙어있지 않은 이상 aria-label을 쓰지 않는 것이 좋다.

또한 aria-label 속성은 장황하게 작성하지않고 길어질때는 aria-descibedby 속성을 사용한다.

 

⬇️ aria-label을 사용하지 않는 게 좋은 경우에는,
시각적으로 숨겨진 텍스트를 제공하여(class를 이용) 요소의 역할이나 의미를 설명할 수 있다.

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

 

 

캐러셀 구현시에는 접근성에 더욱 신경써야한다.

-키보드 네비게이션 지원, 포커스 관리 등 

⬇️ 예시 

<div class="carousel" role="region" aria-roledescription="carousel" aria-label="생활용품 슬라이드 배너">

  <!-- 캐러셀 목록의 id와 인디케이터의 aria-controls 속성의 값은 고유한 이름을 가질 수 있도록 유형에 맞춰 수정이 필요함. -->
  <div class="carousel__controles">
    <button type="button" class="carousel__indicator is--active" aria-label="2개의 배너 중 1번 배너 보기" aria-controls="housewareSlideBanner"></button>
    <button type="button" class="carousel__indicator" aria-label="2개의 배너 중 2번 배너 보기" aria-controls="housewareSlideBanner"></button>
  </div>
  <!-- 연결하고자 하는 리스트 -->
  <div class="carousel__list" id="housewareSlideBanner" aira-live="off" ></div>

controls="housewareSlideBanner"
컨트롤하고자하는 영역의 id값과 동일하게 맞춰준다

aira-live="off"
동상에 변화가 생겼을 떄 변화를 읽어줄지 않을지를 설정
캐러셀의 이미지가 바뀔 때마다 스크린리더가 읽어주게 된다면, 다른 컨텐츠 탐색에 방해를 받을 수 있기에 off로 설정을 해준다.

 

 

참고

https://velog.io/@a_in/WAI-ARIA-role-aria-label

https://velog.io/@0seo8/HTMLCSS-Carousel-%EA%B3%BC-wai-aria

https://abcdqbbq.tistory.com/77