React 접근성

📌웹 접근성

웹 접근성(a11y)은 비장애인, 장애인 모두가 사용할 수 있도록 웹사이트를 개발하는 것을 뜻한다. React에서는 접근성을 갖춘 웹사이트를 만들 수 있도록 모든 지원을 하고 있다고 하는데, 이번에는 이 부분을 탐색해보고자 한다. 🤓

🤝WAI-ARIA

WAI-ARIA(Accessible Rich Internet Applications Suite)는 웹 콘텐츠와 UI 요소의 의미(semantic meaning)를 부여하여, 스크린 리더(screen reader)와 같은 보조 기술이 올바르게 인식하고 상호작용할 수 있도록 돕는 역할을 한다.

JSX에서는 모든 aria-* 어트리뷰트를 지원한다. 다만 react에서 대분의 property, attribute가 camel case (onClick 등)로 지원하나, aria-* 의 경우 일반적인 HTML과 같이 hypen-case로 작성한다.

✨참고사항 HTML5는 semantic tag를 이용해 기존의 aria의 역할을 대체하게 되었기에 되도록 aria 대신 sematinc HTML Tag를 활용해 작성하는것이 좋다.

aria 종류	설명
aria-haspopup	elemeent가 팝업(메뉴, 리스트박스, 트리, 그리드, 다이얼로그) 를 트리거할 수 있음
aria-autocomplete	입력필드에 자동완성 기능이 있다고 알려 줌 (기능은 개발자가 구현해야 함)
aria-owns	DOM은 부모-자식 관계가 아니나, 시각적으로 부모-자식 관계일 때
aria-activedescendant	현재 활성화된 하위 elemeent를 식별
aria-controls	해당 element가 다른 element의 내용을 제어하고 있다는 것을 명시함
aria-selected	해당 element가 선택 되었음을 나타낸다.
aria-label	element의 이름을 정의. label이 없거나 아이콘만 있을 경우 유용함
aria-labelledby	element의 접근성을 위한 이름을 정의할 때 다른 요소를 참조하도록 설정함
aria-expanded	요소가 확장되어 보이는지, 축소되어 보이지 않는지를 나타냄
aria-current	현재 활성화된 항목을 나타냄
aria-orientation	요소의 방향 명확히 지정 (키보드를 어떻게 사용해야 할지 알려줌)
aria-pressed	토글 버튼의 현재 눌려있는 상태 나타냄
aria-checked	checkbox, radio button 등이 현재 체크된 상태인지 나타냄
aria-hidden	해당 element가가 스크린 리더에게도 노출시킬 것인지 여부
aria-describedby	해당 element의 설명을 제공하는 다른 element의 ID를 지정함
aria-required	폼(input, select, textarea 등)이 필수 입력값인지 나타냄
aria-invalid	유효성 검사 실패했을 때 사용

다만, 문서 구조, 스타일, 스크립트 등의 기능을 정의하는 데 사용하는 style, meta, html, script 요소의 경우 aria를 지원하지 않는다.

위의 설명만으로 이해하기 어려운 내용은 아래에 정리해 두었다! 😎

🔸 aria-controls

이 aria는 해당 요소가 다른 요소를 제어하는 데 사용된다는 것을 명시한다. 예를 들어,

• 이 탭을 클릭해 탭 내용을 바꿀 수 있음
• combobox로, input 박스를 클릭해 dropdown을 열거나 직접 입력할 수 있음

등이 있다.

<div role="tablist" aria-label="설정 탭 목록">
  <button id="tab1" role="tab" aria-selected="true" aria-controls="panel1">
    일반
  </button>
  <button id="tab2" role="tab" aria-selected="false" aria-controls="panel2">
    고급
  </button>
</div>

<div id="panel1" role="tabpanel" aria-labelledby="tab1">일반 설정 내용</div>
<div id="panel2" role="tabpanel" aria-labelledby="tab2" hidden>
  고급 설정 내용
</div>

위의 예제는 탭을 눌러 내용을 변경하는 예제다. 여기서 aria-controls 와 id를 통해 해당 버튼이 어떤 탭을 control 하는지를 명시한다.

🔸 aria-selected

해당 요소가 선택되어 있음을 나타내며, 특히 tab, option, gridcell, row 등에서 주로 사용된다. 또한 두 개 이상의 요소를 선택할 수 있는 경우 arai-multiselectable='true'를 사용할 수 있으며, 해당 요소의 역할에 따라 aria-current 또는 arai-checked, aria-pressed 설정을 할 수 있다!

종류	설명
aria-selected	선택 가능한 요소에서 현재 선택된 항목 탭, 리스트, 테이블 등
aria-current	현재 위치, 진행 중 상태 내비게이션 등에서 현재 위치 표시 등
aria-checked	체크 여부 체크박스, 라디오 버튼 등
aria-pressed	버튼을 눌렀는지 툴바 등

🔸 aria-describedby

<button aria-describedby="trash-desc">휴지통으로 이동</button>
<p id="trash-desc">휴지통에 담긴 파일은 30일 이후 영구적으로 삭제됩니다!</p>

button태그의 aria-describedby와 p태그의 id가 연결되어, button과 관련된 중요한 정보를 쉽게 전달할 수 있도록 한다.

여기서 중요한 점은 p태그(설명)에 aria-describedby를 작성하는 것이 아니라 button에 작성해서, 추가적인 정보를 안내하는 특정 element가 있다고 알려준다는 것이다!

🔸 aria-activedescendant

키보드로 접근 가능한 dropbox, list 등에서 하위요소인 특정 값을 식별하는 데 사용할 수 있다. 따라서, 이 값은 동적으로 업데이트 해주어야 사용자가 올바르게 인식할 수 있다.

<input type="text" aria-activedescendant="option-2" />
<ul>
  <li id="option-1">옵션 1</li>
  <li id="option-2">옵션 2</li> //✨현재 활성화 된 요소
  <li id="option-3">옵션 3</li>
</ul>

🔸 aria-current

현재 활성화 된 항목을 나타내며, 메뉴, 탭, 네비게이션 등에서 다양하게 활용할 수 있다. 사용할 수 있는 값의 종류가 많은데 표로 살펴보자.

값	설명
page	navigation에서 현재 페이지
step	프로세스 진행 중 현재 step
location	breadcrumb에서 사용자의 현재 위치
date	현재 날짜
time	현재 시간
true	현재 선택된 항목
false(default)	비활성 상태

<nav aria-label="Breadcrumb">
  <ol>
    <li>
      <a href="/home">홈</a>
    </li>
    <li>
      <a href="/products">제품</a>
    </li>
    <li>
      <a href="/products/shoes" aria-current="location">
        신발
      </a>
    </li>
  </ol>
</nav>

🔸 aria-orientation

기본적으로 특정 요소들은 방향이 지정되어 있으나, 만약 방향이 바뀌어 있는 요소라면 사용자가 키보드로 탐색하기 쉽도록 이 요소의 방향을 알려주는 역할을 한다.

아래는 기본적으로 지정되어 있는 방향 값으로 이 방향과 반대일 때 명시적으로 적어주면 된다.

🔷 가로

• slider
• tablist
• toolbar
• menubar

🔷 세로

• scrollbar
• tree
• listbox
• menu

🔸 aria-label VS aria-labelledby

두 가지 모두 웹 접근성을 개선하기 위해 추가적인 ‘정보’를 제공하는 것은 동일하나 방식과 사용 시점이 다르다.

aria 종류	사용 방식
aria-label	aria에 직접 문자열 작성
aria-labelledby	다른 요소 id 참고

🔷 aria-label

<button aria-label="검색">
  <img src="search-icon.svg" alt="" />
</button>

• alt를 공백으로 주어 스크린 리더가 불필요하게 img의 alt를 읽지 않는다.
• 대신, aria-label의 검색 을 읽어 검색을 위한 버튼임을 인지할 수 있게 한다.

<button>
  <img src="search-icon.svg" alt="" />
  <span>검색</span>
</button>

• 이 경우, 검색이란 글자가 button안에 작성되어 스크린 리더가 읽기 때문에 aria-label을 굳이 지정할 필요 없다.

🔷 aria-labelledby

id를 연결하여 이미 존재하는 다른 element의 text를 이름으로 사용할 수 있다.

<p id="label-id">검색 버튼</p>
<button aria-labelledby="label-id"></button>

aria-labelledby 와 p 태그의 id를 동일한 값으로 지정해 두 elements를 연결하여 이름을 설정할 수 있다. 이 경우 화면의 텍스트를 재사용할 수 있다는 장점이 있다.

🤝role

특정 HTML 요소가 수행하는 역할을 정의하여 보조기술이 해당 요소의 역할을 올바르게 해석할 수 있도록 한다. 물론, 마크업을 할 때 시멘틱 태그를 이용해 의미를 명확히 드러내며 작성하는 것이 좋지만, Aria role을 사용해 보다 명확한 의미를 부여할 수 있다.

예를들어 <div>와 같은 시멘틱 태그가 아닌 경우, 해당 태그를 이용해 만든 컴포넌트가 무슨 역할을 하는지 명시하여 스크린 리더가 정확히 해당 내용을 인식하게 만든다.

MDN 에서는 role의 역할을 6개로 소개하고 있다.

1️⃣ 문서 구조(Document Structure) role

문서 구조를 설명하는 역할이며, 대부분 시맨틱 HTML 요소로 작성할 수 있으므로 권장하지 않는다. 다만 presentation, toolbar, presentation 등 기본 시멘틱 태그가 없는 경우 사용이 가능한다. HTML5에서 의미를 가진 요소들이 많아지면서, 대부분의 역할은 사용을 권장하지 않는다.

❌ 권장하지 않음

role	대응하는 시멘틱 태그	역할설명 / 비고
role="article"	<article>	독립적인 콘텐츠 블록
role="cell"	<td>	테이블의 셀
role="columnheader"	<th scope="col">	테이블의 열 제목
role="definition"	<dfn>	용어나 개념의 정의
role="figure"	<figure>	이미지, 차트, 코드 블록 등과 함께 사용되는 설명 포함 가능
role="heading"	<h1> ~ <h6>	제목을 나타냄, 계층적 구조 필요
role="img"	<img>, <picture>	이미지 콘텐츠
role="list"	<ul>, <ol>	목록을 나타냄 (순서 없음: <ul>, 순서 있음: <ol>)
role="listitem"	<li>	목록 항목
role="meter"	<meter>	측정 가능한 범위 내의 값
role="row"	<tr> with <table>	테이블의 행
role="rowgroup"	<thead>, <tfoot>, <tbody>	테이블의 그룹화된 행
role="separator"	포커스 되는 경우가 아니라면 <hr>	시각적인 구분선
role="table"	<table>	데이터 테이블, <thead>, <tbody> 활용 가능
role="term"	<dfn>	정의 목록에서의 용어 (<dt>와 함께 사용 가능)
role="application"	-	웹 애플리케이션, <div>, <section> 대체 가능
role="directory"	-	HTML4의 <dir>과 유사하나 사용되지 않음, <ul> 대체 가능
role="document"	-	문서를 나타내며, <html> 태그 자체가 문서를 의미함
role="group"	-	요소 그룹을 묶을 때 사용, <fieldset>, <div>, <ul> 대체 가능

🛑 완성도를 위해 제작되었으나 거의 사용되지 않음

필요한 경유 유용하게 사용할 수 있으나, 이 또한 HTML 시멘택 태그로 대체할 수 있음

role	대응하는 시멘틱 태그	역할설명 / 비고
role="associationlist"		연관된 항목들의 리스트 <dl> 대체 가능
role="associationlistitemkey"		연관된 리스트에서 항목의 키 <dt> 대체 가능
role="associationlistitemvalue"		연관된 리스트에서 항목의 값 <dd> 대체 가능
role="blockquote"	<blockquote>	인용문을 나타냄
role="caption"	<caption>	표나 이미지 등의 캡션(설명)
role="code"	<code>	코드 조각을 나타냄
role="deletion"	<del>	삭제된 텍스트를 나타냄
role="emphasis"	<em>	강조된 텍스트를 나타냄
role="insertion"	<ins>	삽입된 텍스트를 나타냄
role="paragraph"	<p>	단락을 나타냄
role="strong"	<strong>	강한 강조를 나타냄
role="subscript"	<sub>	아래첨자를 나타냄
role="superscript"	<sup>	위첨자를 나타냄
role="time"	<time>	날짜나 시간을 나타냄

⭕ 시멘틱 태그가 존재하지 않아 사용 가능

role	역할 설명 / 비고
role="toolbar"	도구 모음
role="tooltip"	툴팁
role="feed"	사용자가 스크롤 할 수 있는 문서 목록
role="math"	수학 식을 나타낼 때 사용
role="note"	main 콘텐츠에 부수적이거나, 부수적인 내용을 담고있는 섹션
role="presentation", role='none'	보조 기술에서 무시 됨, 기능과 상관없는 장식적 요소

2️⃣ 위젯(Widget) role

위젯 역할을 하는 role은 일반적인 상호작용 패턴을 정의하는데 사용한다. 1번에서 살펴본 문서 구조 roler과 마찬가지로 시멘틱 태그와 동일한 의미를 가진 요소들은 HTML 태그를 사용하는 것이 권장된다.

문서 구조 role과 가장 큰 차이점은 위젯 role의 경우 상호작용을 위해 JS를 사용하는 경우가 많다는 것이다.

🧡 위젯 role 목록

• scrollbar
• searchbox
• separator
• slider
• spinbutton
• switch
• tab
• tabpanel
• treeitem

💛 복합 위젯 역할

• combobox
• menu
• menubar
• tablist
• tree
• treegrid

❌ 권장하지 않음

• grid
• listbox
• radiogroup
• button
• checkbox
• gridcell
• link
• menuitem
• menuitemcheckbox
• menuitemradio
• option
• progressbar
• radio
• textbox

3️⃣랜드마크(Landmark) role

랜드마크 role은 웹 페이지의 구조적인 정보를 식별한다. 스크린 리더는 이 Landmark role을 사용해서 페이지의 중요한 섹션으로 키보드 탐색을 제공하게 된다.

따라서, Landmark role이 너무 많으면 스크린 리더에서 노이즈가 발생해 페이지의 전체 레이아웃을 이해하기 어렵기 때문에 너무 자주 사용하지 않도록 한다.

💛 주요 랜드마크의 역할

role	대응하는 시멘틱 태그
role="banner"	문서 <header>
role="complementary"	<aside>
role="contentinfo"	문서 <footer>
role="form"	<form>
role="main"	<main>
role="navigation"	<nav>
role="region"	<section>
role="search"	<search>

4️⃣ 라이브 리전 (Live Region) role

Live Region 역할은 동적인 콘텐츠 변경 사항을 스크린 리더가 인식할 수 있도록 돕는다.

role	설명
alert	긴급 경고 메세지
log	실시간 추가 메세지
marquee	자동으로 움직이는 콘텐츠
status	시스템 상태 업데이트
timer	카운트 다운

🌟추가 설명 처음에 이 부분이 헷갈려서 role="alert"가 window.alert('경고')가 같은 건가? 하고 생각했었는데, 아래 예제를 보면 이해하기 쉽다.

<div role="log">작업이 완료되었습니다.</div>
<div role="alert">잘못 입력하셨습니다!</div>
<div role="status">로드중입니다...</div>

필요에 따라 해당 내용을 전달해야 하는 element들이 있는데 그것을 구성할 때 적절히 활용해주면 된다.

5️⃣윈도우 (Window) role

window role은 팝업, 모달과 같이 주 document 내의 하위 window를 말한다.

• alertdialog
• dialog

6️⃣추상적 (Abstract) role

abstract role은 브라우저 내부적으로 문서를 해석할 대만 사용하고, HTML에서 직접 사용해도 효과가 없다. 즉, 개발자가 직접 작성할 일이 없는 role이다.

❌ 개발자가 사용하지 않음

• command
• composite
• input
• landmark
• range
• roletype
• section
• sectionhead
• select
• structure
• widget
• window

🤝시멘틱 태그

mdn 에서 제공하는 태그 목록을 확인한다. 아래는 내가 기억하고 싶은 태그들을 뽑아 표로 작성했다.

❤️ 문서 메타데이터

🔸 <base>

HTML 문서에서 기본 URL을 설정하는데 사용되는 태그로, 문서의 모든 상대 URL에 사용할 기본 url을 지정한다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>base 태그</title>
    <base href="https://www.example.com/" target="_blank" />
  </head>
  <body>
    <a href="page1.html">Page 1</a>
  </body>
</html>

위의 예제에서 base 태그를 통해 모든 상대 경로를 https://www.example.com으로 설정해, body 태그 안에 작성되어 있는 page1.html은 https://www.example.com/page1로 해석된다.

🧡 콘텐츠 섹션

🔸 <address>

가까운 HTML 요소의 사람, 단체, 조직 등에 대한 연락처 정보를 나타낸다.

<div>
  <h1>
    <code className="code">&lt;address&gt;</code>
  </h1>
  <div>
    <p>이메일, 전화번호, URL, 주소등 연락처 정보를 나타낼 수 있어요.</p>
    <address className="text-gray-400">
      <p>전화번호: <a href="tel:+010-1234-5678">+82 (010) 1234-5678</a></p>
    </address>
  </div>
</div>

🔸 <aside>

문서의 주요 내용과 간접적으로만 연관된 부분을 나타내며, 주로 사이드바 혹은 콜아웃 박스에 사용한다.

주제	설명
암시적 ARIA 역할	complementary
가능한 ARIA 역할	feed none note presentation region search

<div>
  <h1>
    <code className="code">&lt;aside&gt;</code>
  </h1>
  <aside>
    <p>✨콜아웃</p>
    <p>main 콘텐츠와 연관된 콜아웃 내용이 들어갑니다.</p>
  </aside>
</div>

💛 텍스트 콘텐츠

🔸 <dd> <dl> <dt>

• <dl> (Definition List): 설명 목록을 나타내는 컨테이너 역할을 한다.

• <dt> (Definition Term): 설명할 용어(항목)를 정의한다.

• <dd> (Definition Description): 해당 용어에 대한 설명을 제공한다.

🌟추가 설명 페이지에서 들여쓰기를 하기 위한 목적으로 <dl> (또는 <ul>) 요소를 사용하지 말자! 작동할 수 있지만, 원래 목적을 흐리며 좋은 방법이 아니다.

<div>
  <section>
    <h2>HTML 설명 목록 태그</h2>
    <ul>
      <li><code>&lt;dl&gt;</code>: 설명 목록(Definition List)</li>
      <li><code>&lt;dt&gt;</code>: 설명 용어(Definition Term)</li>
      <li><code>&lt;dd&gt;</code>: 설명 (Definition Description)</li>
    </ul>
  </section>

  <section>
    <h2>자주 묻는 질문</h2>
    <dl>
      <dt>배송 문의</dt>
      <dd>주문 후 평균 2~3일 이내에 배송됩니다.</dd>

      <dt>교환 문의</dt>
      <dd>상품 수령 후 7일 이내에 교환이 가능합니다.</dd>

      <dt>반품 문의</dt>
      <dd>반품 신청은 배송 완료 후 7일 이내에 가능합니다.</dd>
    </dl>
  </section>
</div>

🔸 <figure>, <figcaption>

• <figure> : 이미지, 다이어그램, 차트 등과 같은 독립적인 콘텐츠를 표현한다.

• <figcaption> : 부모 <figure>에 포함된 콘텐츠에 대한 설명이나 범례를 나타낸다. 따라서, figcaption은 figure의 자식이어야 한다.

<div>
  <h1 className="flex gap-2">
    <code className="code">&lt;figure&gt;</code>
    <code className="code">&lt;figcaption&gt;</code>
  </h1>
  <figure>
    // chart.js로 만든 차트 컴포넌트
    <ChartComponent />
    <figcaption>가짜 데이터로 만든 chart.js 바 차트</figcaption>
  </figure>
</div>

스크린 리더는 figcaption을 읽어주기 때문에 시각장애인이 해당 차트가 무슨 차트인지 이해하기 쉬우며, SEO 최저고하에도 도움이 된다.

🌟추가 설명 figcaption은 렌더링 되어 사용자에게 보여진다. 만약 해당 내용을 스크린 리더를 위해 작성하였다면 tailwind의 sr-only를 사용해 스크린 리더에게만 보이고 다르사용자들에게는 시각적으로 숨길 수 있다.

💚 인라인 텍스트 시멘틱

🔸 <abbr>

줄임말을 나타낼 때 사용하는 태그로, 스크린 리더에게 추가 정보를 제공할 수 있다. 선택 속성인 title 을 사용해 해당 줄임말의 의미를 작성하면, Hover 했을 때 작성 해 둔 의미가 툴팁으로 표시된다.

<div>
  <h1>
    <code className="code">&lt;abbr&gt;</code>
  </h1>
  <p>
    <abbr title="Cascading Style Sheets">CSS</abbr>는 어떤 것의 줄임말일까요?
  </p>
</div>

🔸 <data>

🔸 <dfn>

🔸 <wbr>

🧡 양식

사용자가 직접 입력 할 수 있게 해주는 요소들이다. 사용하는 HTML을 살펴보기 위해 작성한 예제는 다음과 같다.

🔸 <fieldset> & <legend>

관련된 폼 요소를 그룹으로 묶고, 해당 그룹의 제목이나 설명을 작성하는데 사용한다.

스크린 리더는 먼저 legend에 적힌 그룹의 제목을 읽음으로서, 사용자가 해당 form 요소가 무엇을 위한 요소인지 바로 인식할 수 있도록 한다.

<fieldset className="border border-blue-500 rounded-md p-4">
  <legend className="font-bold text-blue-500">팀원 정보</legend>
  <label className="block mt-2">
    직무
    <select name="job" className="w-full p-2 border rounded">
      <optgroup label="개발자">
        <option value="시스템 개발자">시스템 개발자</option>
        <option value="프론트엔드 개발자">프론트엔드 개발자</option>
        <option value="백엔드 개발자">백엔드 개발자</option>
      </optgroup>
      <optgroup label="기획자">
        <option value="콘텐츠 기획자">콘텐츠 기획자</option>
        <option value="서비스 기획자">서비스 기획자</option>
      </optgroup>
      <optgroup label="디자이너">
        <option value="UX 디자이너">UX 디자이너</option>
        <option value="UI 디자이너">UI 디자이너</option>
      </optgroup>
      <option value="기타">기타</option>
    </select>
  </label>
</fieldset>

🔸 <datalist>

사용자가 직접 입력할 수 있는 input과 자동 완성 가능한 list를 제공한다. select와 다른점은 사용자가 값을 입력할 수 있다는 점으로, 브라우저는 datalist의 option을 dropdown으로 보여준다.

🌟이때 datalist와 input은 id와 list로 연결된다.

<label className="block mt-2">
  소속 팀
  <input list="teamList" name="team" className="w-full p-2 border rounded" />
  <datalist id="teamList">
    <option value="개발실" />
    <option value="기획실" />
    <option value="디자인실" />
    <option value="기타" />
  </datalist>
</label>

✨참고사항 NVDA와 Firefox등의 일부 브라우저는 스크린 리더에게 해당 팝업 내용을 알리지 않는다.

💙 대화형 요소

상호작용 가능한 사용자 인터페이스를 만들때 사용할 수 있다.

🔸 <details> JS 없이도 토글 가능한 컴포넌트를 만들 수 있다. 이때 반드시 <summary> 태그를 사용해 클릭할 제목(레이블)을 지정해야 한다.

기본적으로, 초기 상태는 닫힌 상태다.

<details>
  <summary>더보기</summary>
  <p>클릭하면 이 내용이 나타납니다!</p>
</details>

만약 초기 상태에서 열린 상태로 두고 싶다면 open 속성을 사용한다.

<details open>
  <summary>더보기</summary>
  <p>처음부터 이 내용이 나타납니다!</p>
</details>

🔸 <summary> <details> 태그의 클릭 가능한 제목 역할로, <details> 안에서 첫 번째 요소로 등장해야 한다. 예시는 위의 <details>를 참고하자.

🔸 <dialog> 모달 기능을 제공한다. JS의 .showModal() 과 .show() 메서드를 사용하여 조작할 수 있다. 기본적으로 화면에는 숨겨져 있기 때문에 필요할 때만 표시된다.

<dialog id="myDialog">
  <p>모달입니다!</p>
  <button id="closeDialog">닫기</button>
</dialog>

<button id="openDialog">모달 열기</button>

<script>
  const dialog = document.getElementById("myDialog")
  document.getElementById("openDialog").addEventListener("click", () => {
    dialog.showModal() // 모달 오픈
  })
  document.getElementById("closeDialog").addEventListener("click", () => {
    dialog.close() // 모달 닫기
  })
</script>

react를 사용할 때는 다음과 같이 만들 수 있다.

"use client"

import { useEffect, useRef, useState } from "react"
import { AnimatePresence, motion } from "framer-motion"

export default function Dialog() {
  const [isOpen, setIsOpen] = useState<boolean>(false)
  const dialogRef = useRef<HTMLDialogElement | null>(null)

  useEffect(() => {
    const dialog = dialogRef.current
    if (!dialog) return

    if (isOpen) {
      //showModal은 이미 html의 내장 메서드이기 때문에 따로 function을 만들 필요가 없음
      dialog.showModal()
    } else {
      dialog.close()
    }
  }, [isOpen])

  const closeModal = () => setIsOpen(false)
  const openModal = () => setIsOpen(true)

  return (
    <>
      <button
        className="mt-4 p-2 bg-blue-500 text-white rounded-md"
        onClick={openModal}
      >
        열기
      </button>
      <AnimatePresence>
        {isOpen && (
          <motion.div
            className="fixed inset-0 bg-black/30 backdrop-blur-sm flex items-center justify-center"
            initial=
            animate=
            exit=
            onClick={closeModal}
          >
            <motion.dialog
              ref={dialogRef}
              className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-10 p-4 bg-white rounded-lg"
              onClick={(e) => e.stopPropagation()}
            >
              <p>여기에 다이얼로그 내용이 들어갑니다.</p>
              <button
                onClick={closeModal}
                role="button"
                className="mt-4 p-2 bg-red-500 text-white rounded-md hover:bg-red-500/70 cursor-pointer"
              >
                닫기
              </button>
            </motion.dialog>
          </motion.div>
        )}
      </AnimatePresence>
    </>
  )
}

🤝tabindex

자동으로 사용자가 키보도의 tab키로 상호작용할 수 있는 요소가 몇가지 있다.

• <input>
• <select>
• <textarea>
• <button>
• <a>
• <details>
• <iframe>
• <object>
• <area>

반면에, h1, div, span등은 자동으로 상호작용할 수 없는데, 만약 해당 요소들에 사용자가 접근해야 한다면 tabindex를 사용할 수 있다.

반대로 상호작용이 되는 요소지만, 상호작용을 막고 싶다면, tabindex="-1"을 작성하면 된다.

또한, 사용자가 상호작용하는 순서를 조정하고 싶다면 만약 tabindex에 양수를 주어 tab 순서를 조정할 수 있다.

🤝Click과 Key event

<div> onClick={fn} />과 같은 이벤트를 주었을 때, 자유롭게 마우스를 사용할 수 없는 사람들은 이 이벤트를 사용하기 어렵기 때문에, onKeyDown, onKeyUp, onKeyPress등의 이벤트를 함께 작성하도록 한다.

예를 들어 아래와 같이 작성할 수 있다.

const AccessibleDiv = () => {
  const handleClick = () => {
    alert("div태그의 버튼을 클릭하셨습니다!")
  }

  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
    if (event.key === "Enter" || event.key === " ") {
      event.preventDefault()
      handleClick()
    }
  }

  return (
    <div
      tabIndex={0}
      role="button"
      onClick={handleClick}
      onKeyDown={handleKeyDown}
      className="w-full bg-green-500 px-2 text-white center-flex text-center break-keep py-2 rounded-lg cursor-pointer"
    >
      마우스로 클릭하거나, 키보드로 상호작용 해보세요!
    </div>
  )
}

위의 예제는 일부러 div를 사용했는데, 해당 예제에서는 아래와 같은 접근성을 위한 요소를 추가해주었다. ✔️ tabIndex={0} → 키보드 포커스가 가능하도록 함 ✔️ role="button" → 이 요소가 버튼 역할을 한다는 것을 정확히 전달 ✔️ onKeyDown → Enter 및 Space 키 입력을 감지

✨참고사항 만약 tabIndex를 사용하지 않는다면 키보드로 Div를 focus 할 수 없다는 것에 주의하자!

다만 가능한 button태그와 같은 시멘틱 태그를 쓰는 것이 좋다.

const AccessibleButton = () => {
  const handleClick = () => {
    alert("버튼을 클릭하셨습니다!")
  }

  const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {
    if (event.key === "Enter" || event.key === " ") {
      event.preventDefault()
      handleClick()
    }
  }

  return (
    <button
      onClick={handleClick}
      onKeyDown={handleKeyDown}
      className="w-full bg-blue-500 text-white center-flex text-center break-keep py-2 rounded-lg cursor-pointer"
    >
      마우스로 클릭하거나, 키보드로 상호작용 해보세요!
    </button>
  )
}

🤝Hover와 Key event

Click 처럼 Hover 또한 마우스를 이용해 발생시키는 이벤트이기 때문에, mouseOver, mouseOut또한 키보드로도 해당 이벤트를 발생시킬 수 있도록 해야 한다.

각각의 이벤트 대응은 다음과 같이 할 수 있다.

🔸onMouseOver ↔️ onFocus 🔸onMouseOut ↔️ onBlur

이 에제에서는 hover 했을 때 div의 color가 변경되도록 했다. 이때 Mouse이벤트와 Key 이벤트를 대응하여, key로 접근하는 경우 해당 요소가 focus 되었을 때 color를 변경해 주었다.

const AccessibleHoverDiv = () => {
  const [isHovered, setIsHovered] = useState<boolean>(false)

  return (
    <div
      onMouseOver={() => setIsHovered(true)}
      onMouseOut={() => setIsHovered(false)}
      onFocus={() => setIsHovered(true)}
      onBlur={() => setIsHovered(false)}
      tabIndex={0}
      role="button"
      className={`w-full px-2 text-white text-center break-keep py-2 rounded-lg cursor-pointer ${
        isHovered ? "bg-yellow-500" : "bg-red-500"
      }`}
    >
      마우스로 호버하거나, 키보드로 상호작용 해보세요!
    </div>
  )
}

🤝Focus Trap

접근성을 위해 또 시도해볼 수 있는 것은 무엇인가 검색하던 중 발견한 Focus trap! Focus trap이란, 모달, 팝업을 사용할 때 해당 요소 내에서 포커스를 가두어(trap) 사용자의 focus가 그 요소 밖으로 이동하지 않도록 해주는 것을 말한다.

만약 사용자가 모달을 열고 탐색할 때, 포커스가 모달의 경계를 넘어 나가게 되면 사용자는 모달 내에서 특정 액션을 취하고 싶어도, 현재 포커스된 요소를 찾지 못하게 되어 원하는 작업을 수행하기 어려워질 수 있다. 이를 방지하기 위해 Focus trap과 같은 기능을 사용하는 것이다.

🔑구현 흐름

1. 먼저 Focus 가능한 요소들을 찾는다.
2. Focus 가능한 요소들 중 First(첫번째 요소)와 Last(마지막 요소)를 찾는다.
3. Modal이 열리면 가장 먼저 First를 Focus 해준다.
4. 만약 Last에 Focus한 경우, 사용자가 tab을 하면 강제로 First를 Focus할 수 있게 해준다.

💻예제

구현은 어렵지 않다! 이해하기 좋게 미리 몇가지를 정리해보면, 다음과 같다.

• activeElement은 document에러 focus되어 활성화 된 개체를 말한다.
• div를 이용해 modal(dialog)를 만들어 주었기 때문에 role은 dialog라고 명시했다.

const FocusTrap = () => {
  const [isOpen, setIsOpen] = useState<boolean>(false)
  const modalRef = useRef<HTMLDivElement | null>(null)

  // focus 가능한 요소들
  const focusableElements = `button, [href], input, select, textarea, iframe, [tabindex]:not([tabindex="-1"])`

  // 모달 열고 닫기 trigger
  const openModal = () => setIsOpen(true)
  const closeModal = () => setIsOpen(false)

  // Mouse로 모달 닫기
  const handleClick = () => {
    openModal()
  }

  // KeyDown으로 모달 열고 닫기
  const handleKeyDown = (event: React.KeyboardEvent) => {
    if (event.key === "Enter" || event.key === " ") {
      event.preventDefault()
      openModal()
    } else if (event.key === "Escape") {
      closeModal()
    }
  }

  // Focus Trap
  useEffect(() => {
    if (!isOpen || !modalRef.current) return

    const focusableContent =
      modalRef.current.querySelectorAll(focusableElements)
    if (!focusableContent.length) return

    const firstElement = focusableContent[0] as HTMLElement
    const lastElement = focusableContent[
      focusableContent.length - 1
    ] as HTMLElement

    const handleTabKey = (event: KeyboardEvent) => {
      if (event.key !== "Tab") return

      if (event.shiftKey) {
        // Shift + Tab은 거꾸로 이동함
        // Shift + Tab: 첫 번째 요소에서 마지막 요소로 이동
        if (document.activeElement === firstElement) {
          event.preventDefault()
          lastElement.focus()
        }
      } else {
        // Tab: 마지막 요소에서 첫 번째 요소로 이동
        if (document.activeElement === lastElement) {
          event.preventDefault()
          firstElement.focus()
        }
      }
    }

    document.addEventListener("keydown", handleTabKey)

    return () => {
      document.removeEventListener("keydown", handleTabKey)
    }
  }, [isOpen])

  // 모달이 열리면 포커스 가능한 첫 번째 요소에 자동으로 포커스
  useEffect(() => {
    if (isOpen && modalRef.current) {
      const focusableContent =
        modalRef.current.querySelectorAll(focusableElements)
      const firstElement = focusableContent[0] as HTMLElement

      firstElement?.focus()
    }
  }, [isOpen])

  return (
    <>
      <div
        onClick={handleClick}
        onKeyDown={handleKeyDown}
        tabIndex={0}
        role="button"
        className="w-full bg-purple-500 px-2 text-white center-flex text-center break-keep py-2 rounded-lg cursor-pointer"
      >
        마우스로 클릭하거나, 키보드로 상호작용 해서 모달을 열어보세요!
      </div>
      <AnimatePresence>
        {isOpen && (
          <motion.div
            aria-hidden="true" // 단순히 시각적 디자인을 위한 것이므로 스크린 리더가 읽지 않도록 함
            className="fixed inset-0 bg-black/30 backdrop-blur-sm flex items-center justify-center"
            initial=
            animate=
            exit=
            onClick={closeModal}
          >
            <motion.div
              role="dialog" // div이기 때문에 role로 역할 명시
              aria-modal="true"
              aria-labelledby="dialog_label"
              aria-describedby="dialog_desc"
              ref={modalRef}
              className="absolute top-1/2 left-1/2 w-[300px] -translate-x-1/2 -translate-y-1/2 z-10 p-4 bg-white rounded-lg"
              onClick={(e) => e.stopPropagation()}
            >
              <h2
                id="dialog_label"
                className="text-lg text-center font-bold mb-1	"
              >
                a11y
              </h2>
              <p id="dialog_desc" className="break-keep text-center">
                a11y 실습중! 완료 버튼을 누르면 모달이 close 됩니다.😊
              </p>
              <div className="flex gap-2">
                <button
                  role="button"
                  className="mt-4 p-2 w-1/2 bg-white focus:ring-4 focus:ring-yellow-400 text-black border-gray-200 border rounded-md hover:bg-gray-100 cursor-pointer"
                >
                  취소
                </button>
                <button
                  onClick={closeModal}
                  role="button"
                  className="mt-4 p-2 w-1/2 bg-black focus:ring-4 focus:ring-yellow-400 text-white rounded-md hover:bg-black/60 cursor-pointer"
                >
                  완료
                </button>
              </div>
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>
    </>
  )
}

참고로, 나는 완료 버튼을 black을 로 지정해두었는데, outline의 기본 색상이 black이라 focus되어도 눈에 잘 띄지 않았다. 처음엔 outline 자체 컬러를 변경할까 했는데, tailwind에서 제공하는 ring기능을 이용해 focus 되었을 때 해당 요소가 bg-black 이어도 focus 되었음을 사용자가 쉽게 인식할 수 있도록 했다.

✨참고사항 위에서 살펴본 <dialog>는 자동으로 ESC로 모달 Close와 Focus trap을 지원한다!

🗂️참고 사이트

• https://ko.legacy.reactjs.org/docs/accessibility.html
• https://developer.mozilla.org/ko/docs/Web/HTML/Element
• https://codingeverybody.kr/html-role-%EC%86%8D%EC%84%B1%EC%9D%98-%ED%99%9C%EC%9A%A9-%EB%B0%A9%EB%B2%95/
• https://stackoverflow.com/questions/75189187/semantic-tags-vs-aria-role-why-one-or-the-other
• https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles
• https://medium.com/cstech/achieving-focus-trapping-in-a-react-modal-component-3f28f596f35b
• https://zachpatrick.com/blog/how-to-trap-focus-inside-modal-to-make-it-ada-compliant
• https://nuli.navercorp.com/tool/waiAria