웹 접근성 시나리오 - 2 — 잉여로운 개발일지

<div>
  <a id="prev" href="..." />
  <a href="..." class="active">1</a>
  <a href="...">2</a>
  <a href="...">3</a>
  <a href="...">4</a>
  <a id="next" href="..." />
</div>

이런식으로 구현되어 있다고 생각해보자.

과연 어떤 문제가 있을까? 바로 시각 장애인은 활성화가 되었는지 알 수 없다는 점이다.

<div>
  <a id="prev" href="..."><span class="blind">이전페이지</span></a>
  <a href="..." class="active"><span class="blind">현재페이지</span>1</a>
  <a href="...">2</a>
  <a href="...">3</a>
  <a href="...">4</a>
  <a id="next" href="..."><span class="blind">다음페이지</span></a>
</div>

다음과 같이 IR 기법으로 해결할 수 있다.

웹 접근성 시나리오 - 제스처 애니메이션

손으로 하는 제스처 애니메이션은 손을 사용할 수 없는 사용자는 제대로 이용할 수 없다.

그러므로 제스처 애니메이션의 경우 단일 조작 포인터로 접근이 가능해야 한다.

여기서 단일 조작 포인터는 클릭을 말한다.

구글 지도에서는 확대 축소 등을 하기 위해서 손으로 제스처를 할 수 있다.

하지만 +와 - 버튼을 제공하기 때문에 이것을 사용해서 확대와 축소를 할 수 있다.

이처럼 손을 사용할 수 없는 사용자도 동일한 기능을 사용할 수 있도록 기능을 제공해줘야 한다.

웹 접근성 시나리오 - SPA

SPA는 전통적인 MPA와는 다르다.

가장 큰 차이점은 SPA에서의 네비게이션은 단 하나의 웹 페이지에서 구성된다는 점이다.

즉, 같은 페이지 안에서 특정 영역에 View가 다시 그려진다.

뉴스 스탠드와 언론사 편집 등 텝이 있고 이를 눌렀을 때 페이지가 변경된다고 생각해보자

MPA 에서는 페이지가 이동된 것을 알 수 있겠지만 SPA에서는 내부 컨텐츠만 변경해준다.

이러한 SPA는 웹 접근성 측면에서 안티패턴이다.

사용자는 웹 페이지가 바뀌면 Title 태그부터 다시 읽어져야 한다.

그리고 포커스는 최상단으로 이동이 될 것이다.

하지만 SPA 자체에서는 해당 기능을 제공하지 않기 때문이다.

이를 개발자인 우리가 직접 구현을 해주어야 한다.

웹 접근성 시나리오 - 툴팁

우리가 툴팁 같은 것을 구현할 때 보통 어떤 방법으로 구현을 할까?

일반적으로 hover 태그를 사용해서 기능을 구현할 것이다. 하지만 웹 접근성 측면에서 이런식으로 작성한게

어떤 문제가 있을까?

.tooltip-content { display: none; }

.tooltip-btn:hover + .tooltip-content {
  display: block;
}

마우스를 사용할 수 없는 상황이라면 툴팁의 내용을 직접 확인할 수 없다는 문제가 있다.

그렇다면 어떤 방식으로 이 부분의 웹 접근성을 만족시킬 수 있을까?

.tooltip-content { display: none; }

.tooltip-btn:focus + .tooltip-content,
.tooltip-btn:hover + .tooltip-content {
  display: block;
}

focus에서도 동일한 기능을 구현해주는 것으로 해결이 가능하다.

저작자표시 비영리 변경금지

'Web' 카테고리의 다른 글

WAI-aria (0)	2024.03.27
랜드마크 롤 (0)	2024.03.24
웹 접근성 기술 학습 (0)	2024.03.16
웹 접근성이 왜 필요할까? (1)	2024.02.25
웹 접근성 시나리오 (1)	2024.02.21

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

'Web' 카테고리의 다른 글

티스토리툴바