[접근성] Landmark와 role

브리셀·2021년 11월 9일
a11yaccessibilitylandmarkrole
2

Landmark

  • 스크린 리더 사용자가 페이지 탐색을 용이하게 하기 위해 웹페이지를 큰 영역으로 나눈 것
  • 각 랜드마크에는 (<h2> 등의) 헤딩이나 레이블을 두는 것이 좋으며, 특히 같은 랜드마크가 페이지에 둘 이상 존재할 경우 서로를 구별할 수 있는 레이블이 반드시 필요함
    • 헤딩이 있는 경우 aria-labelledby 속성 활용
    • 헤딩이 없는 경우 aria-label 속성 활용
      • lable이 아니다!
      • labelled 중간에 l이 두 번 들어간다!
    • 레이블에는 역할 정보를 포함하지 않음.
      예를 들어 role="search"에 "페이지 탐색"이라는 레이블을 달면, 스크린 리더는 "페이지 탐색 탐색"이라고 읽게 된다고 함

Landmark의 종류와 role

  • role은 ARIA 속성 중 하나로, 말 그대로 요소의 역할을 명시해주는 속성
    • ARIA이지만 접두어로 aria-를 붙이지 않음
    • landmark role 외에도 다양한 role이 있음
      • 대부분 HTML 태그와 1:1 연관이 있지만, HTML 태그만으로 대체할 수 없는 role도 있음

role="banner"

  • <body> 바로 하위의 <header>에 해당
    • <article>, <aside>, <main>, <nav>, <section> 등의 하위 <header>는 banner로 간주 되지 않음
  • 최상위 landmark (다른 landmark의 아래에 있으면 안 됨)
    • 예외적으로 중첩 문서 구조(<iframe role="document"> 등)에서는 해당 요소 안에 banner role이 있을 수 있음

role="navigation"

  • <nav>에 해당
  • 페이지 안에 동일한 내용의 navigation이 또 있다면, label도 동일하게 사용

role="search"

  • 일치하는 태그 없음
  • form(<form> 또는 role="form")이 탐색 목적으로 만들어졌다면 해당 role을 사용할 것

role="form"

  • 레이블을 가진 <form>에 해당
  • 어떤 역할을 폼인지를 나타내는 레이블을 시각적으로도 달 것
  • 하위 요소는 가능한 한 <button>, <input>, <select>, <textarea> 등의 semantic 태그를 사용할 것

role="main"

  • <main>에 해당
  • 최상위 landmark
  • 다른 최상위 landmark들이 있으므로 <body>에 main을 부여하면 안 됨

role="complementary"

  • <aside>에 해당
  • 최상위 landmark
  • main(<main> 또는 role="main")과 연관 있는 보조 내용에 대해 사용
    • 연관이 없는 경우 일반적인 role="region"을 사용할 것
      • (광고 배너 같은 것들이 여기에 해당할지?)

role="contentinfo"

  • <body> 바로 하위의 <footer>에 해당
    • <article>, <aside>, <main>, <nav>, <section> 등의 하위 <footer>는 contentinfo로 간주 되지 않음
  • 최상위 landmark

role="region"

  • 레이블을 가진 <section>에 해당
  • 앞서 언급된 역할에는 해당하지 않지만, 사용자의 접근을 용이하게 할 때 사용할 수 있음
  • 그 자체로는 특별한 역할을 나타내지 않기 때문에 각 region은 반드시 역할을 명시하는 유일한 레이블을 가져야 함

기타 role

  • 종류가 워낙 많아 여기서는 간단한 소개만 함
  • 각 role에는 요구되는 구현 내용들이 있음
    • role을 적용한다는 것은 그러한 요구사항을 지켰다는 의미
  • 추상(abstract): ARIA 분류를 위한 역할로, 문서에 직접 사용해선 안 됨
    • command, composite, input, landmark, range, roletype, section, sectionhead, select, structure, widget, window
  • 문서 구조(document structure): 일반적으로 interactive 하지 않은, 페이지 구성 요소
    • application, article, cell, columnheader, definition, directory, document, feed, figure, group, heading, img, list, listitem, math, none, note, presentation, row, rowgroup, rowheader, (포커스를 잡을 수 없는)separator, table, term, toolbar, tooltip
  • 위젯(widget): 단독으로, 또는 composite의 하위 요소로 사용되는 UI 위젯
    • button, checkbox, gridcell, link, menuitem, menuitemcheckbox, menuitemradio, option, progressbar, radio, scrollbar, searchbox, (포커스를 잡을 수 있는) separator, slider, spinbutton, switch, tab, tabpanel, textbox, treeitem
  • 'composite': 반드시 하위 widget을 포함
    • WAI-ARIA의 공식 분류명은 아니지만 공식에서도 일반 widget과 분리해서 소개하고 있고, MDN에서도 따로 소개하고 있음
    • combobox, grid, listbox, menu, menubar, radiogroup, tablist, tree, treegrid
      • 예를 들어 listbox는 하나 이상의 option을 포함
  • live region: 실시간으로 띄워지는 요소들
    • alert, log, marquee, status, timer
  • 창(window): 브라우저 내에서 새 창처럼 동작하는 요소들
    • alertdialog, dialog

랜드마크 태그와 role 속성을 동시에 사용(예: <header role="banner">)하는 것을
태그 자체에서 landmark를 인식할 수 없는 보조공학기기를 위해 권장하는 경우도 있고,
반대로 보조공학기기에서 충돌을 일으킬 수 있으므로 지양하라는 경우도 있다.
어떤 게 맞는지 잘 모르겠다...

최소한의 접근성을 보장하는 가장 쉬운 방법은
태그를 적재적소에 사용하는 것이다.

참고한곳

profile
브리셀
풀스택도 프론트부터
이전 포스트

[Vuex] 기본 사항

다음 포스트

[CSS] 글자 사이에 구분선 넣기

0개의 댓글