HTML5 요소 의미와 WAI-ARIA(Landmark Role) 의미 겹침

HTML5 요소의 의미와 WAI-ARIA Landmark Role 의미가 겹칠 경우, 과연 어떻게 의미를 부여해야 할까요?

이슈

<nav role="navgitaion"> 상황을 보면 <nav> 라는 의미있는 요소와 WAI-ARIA 에서는 navigation이라는 Landmark Role이 선언되어 있습니다. 혹시 동일한 의미를 두 번 반복 사용하면 문제는 없을까요?

정의를 비교해 보면 다음과 같습니다.

<nav> Element

 

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.

다른 페이지 또는 동일 페이지의 다른 부분으로 이어주는 섹션, 즉 내비게이션 링크로 구성된 섹션을 나타냅니다.

role="navigation" Landmark Role 

 

A collection of navigational elements (usually links) for navigating the document or related documents.

문서 또는 관련된 문서를 탐색 하기 위한 탐색 요소 (보통 링크)의 컬렉션입니다. 

 

보시다시피, 의미(특성)가 일치하여 겹친다는 것을  확인할 수 있습니다. 

이럴 경우를 대비하여, WAI-ARIA 명세에서는 Conflicts with Host Language Semantics 섹션을 마련하여 안내하고 있는데요? 

• * WAI-ARIA의 상태와 속성이 WAI-ARIA 의미가 내포된 동일한 호스트 언어(여기서는 HTML) 특성과 일치할 경우, 특히 WAI-ARIA 기능을 이용하는 것이 문제가 될 수 있다.
• * 강한 기본 의미(Strong Native Semantics)를 가지는 호스트 언어는 WAI-ARIA로 Override(무효화) 할 수 없는 문서 기능을 할 수 있다.
  

 "요소의 의미와 WAI-ARIA 의미가 일치하여 겹칠 시 WAI-ARIA를 사용하면 문제가 될 수 있다."는 것을 알 수 있습니다.

WAI-ARIA 정의를 제거한 <nav>요소 자체만으로 의미가 부여되므로 별도의 WAI-ARIA 정의를 하지 않아도 됩니다.

예제

Element + Landmark Role	Element
<header id= "daumHead" role= "banner" > <article id= "mArticle" role= "main" > <footer id= "daumFoot" role= "contentinfo" > <nav role= "navigation" > <article id= "daumContent" role= "main" > <footer id= "daumFoot" role= "contentinfo" >	<header id= "daumHead" > <article id= "mArticle" > <footer id= "daumFoot" > <nav> <main id= "daumContent"> <footer id= "daumFoot">

 

참고 자료

자세한 W3C 명세 내용은 하기 사항을 참고바랍니다.

 

HTML5 + WAI-ARIA Conflicts with Host Language Semantics 내용 요약

 WAI-ARIA의 roles, 상태 및 속성은 이러한 의미를 이용할 수 없는 네이티브 호스트 언어 요소, 그리고 일반적으로 자체적으로 네이티브 의미가 없는 요소를 사용하는 경우 의미 정보를 추가하기 위한 것이다. 또한 유사하지만 동일하지 않은 의미를 가진 요소에 사용될 수 있다. 

접근성 API로 닿게 하는 방법을 정의 하는 WAI-ARIA 시멘틱를 항상 사용해야 한다. 

단, 아래 이슈로 인해 WAI-ARIA의 상태와 속성이 WAI-ARIA 의미가 내포된 동일한 호스트 언어 특성과 일치할 경우 제외 한다.
(WAI-ARIA 기능을 이용하는 것이 문제가 될 수 있다.) 

• * WAI-ARIA 기능, 호스트 언어의 기능을 모두 제공시 그 값이 동기화(Sync)를 유지하지 않는 경우, 사용자 에이전트와 보조 기술은 사용할 값을 알 수 없다.

  • -- 의미 겹침을 위해 호스트 언어를 명시적으로 선언해야 한다.
    ※ User Agent는 WAI-ARIA 특성을 무시하고 대신 같은 암시적 의미를 가진 호스트 언어의 속성을 사용해야 한다.

• * 강한 기본 의미를 가진 요소는 절대적인 WAI-ARIA의 의미 기능을 할 수 있다.

  • -- 호스트 언어 경우 WAI-ARIA로 덮어 쓸 수 없는 문서 기능을 할 수 있다.
• * 적합성 검사기는 오류 또는 경고 신호 있을 수 있다.
• * 이 경우 의미가 WAI-ARIA로 변경 한 경우의 처리는 불확실하다. 

 

※ 위 내용은 WAI-ARIA 및 HTML5 명세를 토대로 요약 정리된 문서입니다. 

참고

• Accessible Rich Internet Applications (WAI-ARIA) 1.0
  • * 7.5. Conflicts with Host Language Semantics
• HTML5
  • * 3.2.7.3 Strong Native Semantics

by. 접근성파트 bless