웹 접근성 시나리오

웹 접근성 공부를 위해서 공부한 내용 시리즈

▶ 2024.02.17 - [Web] - 웹 표준, 웹 호환성, 웹 접근성

▶ 2024.02.21 - [Web] - 웹 접근성 시나리오 <= 현재 글

▶ 2024.02.25 - [Web] - 웹 접근성이 왜 필요할까?

▶ 2024.03.16 - [Web] - 웹 접근성 기술 학습

▶ 2024.03.20 - [Web] - 웹 접근성 시나리오 - 2

▶ 2024.03.24 - [Web] - 랜드마크 롤

▶ 2024.03.27 - [Web] - WAI-aria

▶ 2024.03.31 - [Web] - 웹 접근성 시나리오 - 3

▶ 2024.04.04 - [Web] - 사용자가 입력하는 이미지

▶ 2024.04.06 - [Web] - 구글 SEO

---

웹 접근성 시나리오 - 버튼

// 1
<span class="btn">버튼</span>

// 2 
<div class="btn">버튼</div>

// 3
<a href="/" class="btn">버튼</a>

// 4
<button>버튼</button>

1 ~ 4번 버튼 중 어떤 버튼이 [ 잘 만든 버튼 ]일까? 

정답은 전부 잘 만들지 못한 버튼이다. 

 

버튼의 조건 

1. 버튼의 역할을 가지고 있어야 한다 ( 토글, 팝업 열기 등 )
   페이지 이동과 같은 기능은 버튼의 역할이 아니다. 
   
   
2. 버튼의 이름을 식별할 수 있어야 한다. 
   스크린리더를 통해 듣더라도 버튼인 것을 인지할 수 있어야 한다. 
   
   
3. Native 버튼처럼 조작이 가능해야 한다.
   마우스 외에도 Tab 키를 통한 접근, 엔터키와 스페이스바를 통해서 누를 수 있어야 한다. 

1번 버튼

<span class="btn">버튼</span>
=> span 태그는 Interactive 태그가 아니므로 키보드 포커스가 가지 않는다. 
=> tabindex = "0"을 통해서 포커스가 가도록 수정 

<span class="btn" tabindex="0">버튼</span>
=> span 태그는 스크린리더가 읽을 때 " 버튼 " 이라고 읽지 않는다. 
=> role을 버튼으로 수정 

<span class="btn" tabindex="0" role="button">버튼</span>
=> role="button"을 지정해도 태그의 네이티브 기능은 변하지 않는다. 
=> 버튼 동작을 위해서 키보드로 "엔터", "스페이스바"를 눌렀을 때 동작하도록 수정

<span class="btn keyboard_event" tabindex="0" role="button">버튼</span>

 

 

※ tabindex 

키보드 많으로 웹 전 항목을 접근할 수 있도록 하는 속성이다. 

마우스 사용이 불편한 사용자를 위해서 제공되는 속성

<span role="button" tabindex="-1">버튼</span> // 키보드 포커스 X

<span role="button" tabindex="0">버튼</span> // 키보드 포커스 O

Interactive 태그 [ a, button, input ,,,, 등등 ] 가 아닌 태그에게는 기본적으로 포커스가 가지 않는다. 

하지만 tabindex가 -1이 아니라면 탭을 눌렀을 때 포커스를 가도록 할 수 있다. 

 

2번 버튼

1번 버튼인 span과 동일한 문제를 가지고 있다. 

단지 2번 버튼은 span 태그에서 div 태그로 변경된 것이므로 1번과 동일하다고 보면 된다. 

 

3번 버튼

<a href="/" class="btn">버튼</a>
=> a 태그는 스크린리더가 읽을 때 "버튼"이 아닌 "링크"라고 읽는다. 
=> 버튼이 되도록 수정해준다. 

<a href="/" class="btn" role="button">버튼</button>
=> role="button"를 사용하더라도 네이티브 기능 자체는 변하지 않는다. 
=> 버튼이 되기 위해서는 키보드에서 "엔터", "스페이스바"를 눌렀을 때 클릭이 되어야 한다. 
=> a 태그는 "엔터"만 동작하고, "스페이스바"는 동작하지 않는다. 

<a href="/" class="btn keyboard_event" role="button">버튼</a>

 

4번 버튼

<button>버튼</button>
=> button 태그는 type 속성을 명시하지 않으면 기본저긍로 type="submit"을 갖게 된다.
=> 이때 스크린리더는 "버튼"이 아닌 "제출 버튼"으로 읽게 된다. 

<button type="button">버튼</button>