웹접근성 정리 1

1. aria-hidden="true" 사용 시기

단순 장식 요소: 의미 없는 아이콘, 배경 이미지, 단순 구분선 등 사용자에게 정보를 전달하지 않는 요소에 사용합니다. 
중복 정보: 이미지 바로 옆에 동일한 내용의 텍스트가 이미 있어, 스크린 리더가 같은 내용을 두 번 읽을 필요가 없을 때 사용합니다. 
시각적으로는 보이지만 숨겨야 할 때: 모달창(레이어 팝업)이 떴을 때, 배경이 된 본문 영역을 일시적으로 읽지 못하게 막는 용도로 사용합니다.

 

* 주의사항 (중요!)

초점(Focus) 방지: aria-hidden="true"를 설정하더라도 해당 요소가 버튼(button)이나 링크(a)라면 키보드 Tab 키로 초점은 여전히 잡힐 수 있습니다. 이 경우 스크린 리더는 아무것도 읽지 않는데 초점만 가기 때문에 사용자가 혼란을 느낍니다. 따라서 초점이 가는 요소는 tabindex="-1"을 함께 설정하거나 아예 비활성화해야 합니다.

남용 금지: 실제로 중요한 정보나 텍스트가 포함된 요소에 실수로 적용하면 시각 장애인은 해당 정보를 아예 얻을 수 없게 됩니다.

 

2. 버튼(Button) 필수 요소

텍스트 설명 (Accessible Name): 아이콘만 있는 버튼(예: X 모양 닫기 버튼)은 스크린 리더가 읽을 수 없습니다.

<button aria-label="닫기">X</button>와 같이 aria-label을 사용하거나, 내부에 숨김 텍스트(IR 기법)를 넣어야 합니다.

논리적 상태 표시: 아코디언이나 메뉴 버튼의 경우, 열려 있는지 닫혀 있는지 aria-expanded="true/false"를 통해 실시간 상태를 알려야 합니다.

 

3. 링크(Anchor) 필수 요소

목적지 명시: "여기 클릭", "더보기" 같은 모호한 텍스트 대신 "[공지사항] 더보기"처럼 목적지를 유추할 수 있는 텍스트를 사용해야 합니다.

새 창 알림: 링크가 새 창(target="_blank")으로 열릴 경우, 스크린 리더 사용자에게 이를 미리 알려야 합니다.

링크 텍스트만으로 충분할 때: title 불필요.

링크가 아이콘(이미지)으로만 되어 있을 때: title 대신 이미지의 alt 속성이나 aria-label에 목적지 이름을 작성.

<a href="..." target="_blank" title="새 창 열림">홈페이지</a>

<a href="..." target="_blank">
  네이버 바로가기
  <span class="sr-only">(새 창 열림)</span>
</a>
(sr-only: 화면에는 보이지 않지만 스크린 리더만 읽는 CSS 클래스)

<a href="..." target="_blank" aria-label="네이버 바로가기(새 창)">네이버 바로가기</a>

 

4. 공통 필수 요소

초점 표시 (Focus Indicator): 키보드 Tab 키로 이동했을 때, 현재 어디에 있는지 시각적으로 테두리(Outline)가 반드시 보여야 합니다. CSS에서 outline: none으로 제거했다면 반드시 별도의 :focus 스타일을 제공해야 합니다.

충분한 클릭 영역: 모바일 사용자와 지체 장애인을 위해 최소 44x44 픽셀 이상의 터치/클릭 영역을 확보하는 것이 권장됩니다.

명도 대비: 버튼/링크의 글자색과 배경색의 대비는 최소 4.5:1 이상이어야 눈에 잘 띕니다.