웹사이트의 접근성을 생각하자

웹 접근성의 중요성을 이론적으로는 알고 있었지만, 실제로는 이를 잘 고려하지 못하고 코드를 작성하는 경우가 많았습니다. 제가 개발자가 되려 하는 이유 중 하나가 사람들에게 편의를 제공하는 것임에도 이를 고려하지 못하는 건 맞지 않다 생각하여 이번 기회에 이를 공부해 보고, 웹 접근성을 높이기 위해 어떤 것들을 할 수 있는지 알아보고자 합니다.

| 웹 접근성이란

웹 접근성은 장애인뿐만 아니라 모든 사용자가 웹에서 제공하는 콘텐츠에
동등하게 접근할 수 있도록 웹사이트를 디자인하고 개발하는 것을 의미합니다.
이는 디자인과 개발 과정의 모든 단계에서 고려되어야 하는 아주 중요한 요소입니다.

| 키보드 접근성

마우스를 사용하지 못하는 경우를 대비하여 키보드만으로 웹사이트 내의 요소에 접근할 수 있도록 하는 것이 좋습니다.

onClick

onClick을 사용할 때 onKeyDown, onKeyUp, onKeyPress 핸들러 중에 하나를 같이 사용하는 것이 좋습니다.

<div onClick={handleClick} onKeyDown={handleKeyDown} />
<div onClick={handleClick} onKeyUp={handleKeyDown} />

 

이런 식으로 키보드를 통해 해당 요소를 클릭할 수 있도록 합니다.

onMouseOver, onMouseOut

mouse이벤트를 사용할 때는 onFocus, onBlur 핸들러를 같이 사용하면 좋습니다.

<div onMouseOver={handleMouseOver} onFocus={handleFocus} />
<div onMouseOut={handleMouseOut} onBlur={handleBlur} />

tabindex

tab을 통하여 요소를 선택할 수 있도록 하는 것이 좋습니다.

다만 tab으로 선택이 안 되는 요소는 tabindex를 통해 선택할 수 있도록 만들 수 있습니다.

 

다음 코드를 보면 tab버튼 클릭 시 input과 button 요소에 포커스 할 수 있습니다.

<form>
  <h1>정보 입력</h1>
  <label>이름 입력</label>
  <input type="text" name="name"/>
  <button>버튼</button>
</form>

 

만약 여기서 h1에 속성에 tabindex를 0으로 주면 h1태그 요소도 포커스가 가능합니다.

<form>
  <h1 tabindex="0">정보 입력</h1>
  <label>이름 입력</label>
  <input type="text" name="name"/>
  <button>버튼</button>
</form>

만약 tabindex가 기본적으로 포함된 button, input 같은 요소를
tab으로 포커스가 안되게 하려면 tabindex에 -1을 주면 됩니다.

<form>
  <h1 tabindex="0">정보 입력</h1>
  <label>이름 입력</label>
  <input type="text" name="name" tabindex="-1"/>
  <button>버튼</button>
</form>

tabindex를 양수로 주면 tab으로 전환되는 요소의 순서를 바꿀 수 있습니다.

(양수인 tabindex의 값이 작을수록 먼저 포커스 됩니다.)

다만 순서를 바꾸는 것은 오히려 접근성을 저하시킬 수 있어서 주의해야 합니다.

<form>
  <h1 tabindex="0">정보 입력</h1> // 3순위
  <label>이름 입력</label>
  <input type="text" name="name" tabindex="2"/> // 2순위       
  <button tabindex="1">버튼</button> // 1순위
</form>

| img alt

img태그의 alt 속성을 이용해서 이미지가 나오지 않을 때 이미지 설명을 해줍니다.

스크린 리더가 이를 읽을 때 "이미지"라는 단어를 사용하기 때문에
image, picture, photo 같은 단어는 사용에 주의해야 합니다.

<img src={src} alt="logo"/>

 

img의 role 속성에 presentation을 주게 되면 alt 속성을 넣지 않아도 됩니다.

<img src={src} alt="" role="presentation"/>

 

-> role = "presentation"은 요소가 시각적인 표현을 갖지 않는다는 것을 나타냅니다. 즉, 시각적인 스타일이나 레이아웃에 영향을 주지 않는 요소임을 나타냅니다.  

| no hasg ref

a태그를 사용할 때 링크로 이동시켜 주는 것이 아닌
onMouseOver이벤트로 드롭다운 메뉴를 보여주는 등의 행동을 할 때가 있습니다.

이 경우 a태그의 href속성에 "#"을 넣기도 하지만, 이런 경우 "#"만 사용하는 거보다
설명을 붙여주는 게 접근성이 좋을 수 있습니다.

<a href="#dropdownmenu">링크</a>

 

특별한 경우가 아니면 `button` 태그를 사용하는 것이 좋은 방법입니다.

| role

상호작용 가능하지 않은 태그(div, span 등)에 onClick 핸들러를 줬을 때 스크린 리더가 해당 태그의 클릭 함수가 어떤 동작을 하는지 역할을 알 수가 없습니다. 따라서 role을 주어 해당 태그의 역할이 무엇인지 명시하는 게 좋습니다.

<span onClick={handleClick} role="button">버튼</span>

 

특별한 경우가 아니면 onClick이벤트를 사용할 때 `button`태그를 사용하는 것이 좋습니다.

| aria 속성

aira-role

보조기구가 각 요소의 역할을 인식할 수 있도록 합니다.

role에 대한 정보는 다음 링크에서 확인할 수 있습니다.

WAI-ARIA

WAI-ARIA Roles - Accessibility | MDN

role은 유요한 role을 사용해야 하고 유요 하지 않은 role을 사용하면 안 됩니다.

<div role="button">버튼</div> // 유요한 role 사용
<div role="asd"></div> //유요하지 않은 role 사용

또한 `meta`, `html`, `script`, `style` 태그는 aria- 속성과, role 속성을 지원하지 않습니다.

aria-required

이 속성이 true 되어 있으면 스크린 리더 사용자에게 해당 요소가 필수로 입력돼야 한다는 것을 알려 줍니다.

<input type="text" name="useremail" id="useremail" aria-required="true" />

aria-describedby

어떤 요소에 대한 추가 설명을 제공해 줄 수 있습니다.

<form>
  <label for="email">이메일 입력</label>
  <input type="text" name="email" id="name" aria-describedby="email-desc" />
  <p id="email-desc">유저의 이메일을 입력하는 공간입니다.</p>
</form>

aira-label

aria-describedby와 비슷하지만 aria-describedby가 따로 설명을 작성해 주고 이를 연결하는 거였다면 aria-label은 태그의 속성에 설명을 바로 제공해 줄 수 있습니다.

<button aria-label="send message">메시지 보내기</button>

aria-expanded

어떠한 탭이 있을 때 해당 탭이 열려 있는지 닫혀 있는지를 설명해 줍니다.

<div role="tabpanel" aria-expanded="true">탭</div>

aria-pressed

해당 요소가 현재 눌려 있는지 눌려있지 않은 상태인지를 설명해 줍니다.

<button aria-pressed="ture">버튼</button>