웹 접근성 높이기 w/ 기존 프로젝트 리팩터링 (Lighthouse)

웹 접근성을 고려하며 개발해 본 경험

 

채용 공고들을 보면 필수 자격 또는 우대 사항에 위와 같은 내용이 적혀있는 것을 종종 발견할 수 있었습니다.

도대체 웹 접근성이 뭐고, 이를 고려해서 개발하려면 어떻게 코드를 작성해야 할까요?

 

---

웹 접근성

한국웹접근성인증평가원에서는 웹 접근성(정보통신접근성)을 아래와 같이 설명하고 있습니다.

 

⌜지능정보화기본법⌟에 따라 장애인이나 고령자분들이 웹 사이트에서 제공하는 정보를 비장애인과 동등하게 접근하고 이용할 수 있도록 보장하는 것으로 웹 접근성 준수는 법적의무사항입니다.

웹 브라우징에 쓰이는 보조과학기술
• 스크린 리더 소프트웨어
• 화면 확대 도구
• 음성 인식
• 키보드 오버레이

 

이 중 스크린 리더 기능을 문제 없이 사용할 수 있게 돕는 부분을 프론트엔드 개발자들이 할 수 있습니다. 

스크린 리더라는 프로그램을 사용하면 목소리로 서비스를 이용하는 시각 장애인이 우리 서비스를 더 편리하게 사용할 수 있도록 할 수 있습니다. 

 

 

웹 접근성을 고려해 개발하는 방법

1. 시맨틱 태그 사용

semantic : 의미의, 의미론적인

 

시맨틱 태그란, <div>와 기능은 똑같지만 의미가 담겨있는 태그입니다.

정확한 사용법이 있다기보다는, 작성하는 사람의 의도가 중요합니다.

<div>
	<div>
    	<p>innerstella의 블로그</p>
    </div>
	<div>
		<p>home</p>
		<p>login</p>
		<p>pages</p>
	</div>
	<div>
		<p>안녕하세요</p>
	</div>
    <div>
    	<p>innerstella</p>
        <p>2024.01.02.</p>
    </div>
</div>

 

위 코드는 제가 임의로 작성한 페이지의 HTML입니다.

코드를 읽어보면 어떤 부분이 헤더이고, 내용이고, 푸터인지 알 수 있지만 모두 div라는 똑같은 태그로 작성되어 있어 한 눈에 내용을 파악하기에는 어려워보입니다. 또한 웹 접근성 측면에서 생각해보아도 스크린 리더가 모든 내용을 div 태그로 읽기 때문에 최적의 작동을 기대하기는 어려울 것 같습니다.

 

그렇다면 이 HTML을 웹 접근성을 고려하여 수정해본다면 아래와 같이 수정할 수 있을 것 같습니다.

위의 코드와 비교하여 보면, 굳이 코드 내용 전체를 읽어보지 않아도 태그 이름만 보고 코드의 내용을 유추할 수 있습니다.

<div>
	<header>
    	<p>innerstella의 블로그</p>
    </header>
	<nav>
		<p>home</p>
		<p>login</p>
		<p>pages</p>
	</nav>
	<main>
		<p>안녕하세요</p>
	</main>
    <footer>
    	<p>innerstella</p>
        <p>2024.01.02.</p>
    </footer>
</div>

 

시맨틱 태그를 사용하면 웹 접근성을 높이는 것 뿐만 아니라, SEO 측면에서도 효과를 볼 수 있습니다.

검색엔진은 태그를 기반으로 페이지 내 검색 키워드의 우선순위를 판단하는데, 이러한 태그를 의미있게 작성하여 SEO를 높일 수 있습니다.

 

※ HTML 요소

 

2. 대체 텍스트 제공

 

이미지, 동영상과 같은 시각적 콘텐츠를 추가할 때 콘텐츠가 보여주는 내용을 텍스트로 제공하는 것을 말합니다. 

이미지, 동영상 태그 내 alt 속성에 텍스트로 추가할 수 있습니다.

 

사실 vscode를 사용한다면, alt 속성 없이 이미지나 동영상 태그를 사용하면 alt 속성을 지정하라고 노란 줄로 경고를 띄워주는데, 이러한 기능 덕분에 저는 alt 속성을 꼭 표기하는 습관을 들일 수 있었던 것 같습니다. 

 

또한, 대체 텍스트를 제공하는 것은 비장애인 사용자들에게도 장점이 있다고 생각됩니다.

(그러면 안되겠지만) 이미지나 동영상이 올바르게 보여지지 않는 경우 대체 텍스트로 표시함으로써 유저에게 혼란을 덜 야기할 수 있다고 생각합니다. 

 

웹 접근성 준수 시 개발적 장점

사실 개발하는 사람인 나에게 오는 꼭 필요하다고 느껴지지 않는다면 평소 작업량에 더 추가가 되는 작업 단계를 끼워넣기는 쉽지 않다고 느껴집니다. 하지만 웹 접근성을 준수한다면, 스크린 리더 기능이 필요한 사람들 뿐만 아니라 개발자들에게도 좋은 점이 있습니다.

 

1. 빠른 구조 파악

 

앞서 시맨틱 태그에 대해 작성할 때도 언급한 내용이지만, 태그 자체가 의미를 가지고 있다 보니 코드를 자세히 읽지 않아도 태그 만으로 코드의 전체적인 내용을 대략적으로 파악할 수 있습니다.

 

2. 테스트 이점

 

저는 아직 테스팅 라이브러리를 제대로 사용해본적은 없는데, 테스트 측면에도 이점이 생긴다고 합니다.

 

※ 편해지는 협업과 테스트 (feat. React-Testing-Library)

 

---

기존 프로젝트 코드를 웹 접근성을 고려해서 리팩터링 해보기

 

저는 부끄럽게도 지금까지는 웹 접근성을 준수하며 개발을 했던 경험이 없습니다.

하지만 지금부터는 웹 접근성을 고려하며 개발해보기 위해, 기존 프로젝트 코드의 일부를 리팩터링해보려고 합니다.

 

기존

코드를 개선하기 전, 크롬 개발자 도구에 있는 Lighthouse라는 도구를 이용해 팩터링 전 사이트의 웹 접근성을 검사해보았습니다.

 

 

 

저는 접근성에서 94점의 높은 점수를 받았습니다!

 

단순 점수 외에도, 어떤 부분을 준수했는지, 준수하지 않았는지, 그리고 어떤 부분을 개선하면 좋은지를 알려주기 때문에 웹 접근성을 높이는 데 도움이 될 것 같습니다.

 

리팩터링

 

 

우선, 대비 부분을 개선해보겠습니다.

 

백그라운드 및 포그라운드 색상의 대비율이 충분하지 않다고 하는데, 이로 인해 많은 사용자가 저대비 텍스트를 읽는 데 어려움을 겪거나 전혀 읽지 못한다고 합니다. 디자이너 없이 제가 작업하다보니 이런 디자인적 문제가 발생했군요.

 

Lighthouse가 알려준 색상 대비 체크 사이트를 통해 확인해가며 색상을 조절해보았습니다.

이전 색상은 FAIL이었지만, 폰트 색상을 바꾸니 모든 테스트에서 Pass가 표시됨을 확인할 수 있습니다.

 

이전 / 이후

 

 

결과

 

색상 대비 문제를 해결하기 위해서, 검색 버튼 안내 문구의 폰트 색상과 추천 컨텐츠 박스들의 배경 색상을 변경해주었습니다.

 

 

웹 접근성 100점을 맞았네요 ^-^!

 

---

글을 마치며

개발을 하는 궁극적인 목적에 대해 생각해볼 수 있었습니다. 나 혼자만 편하게 보려고 개발을 하는 것이 아니라, 만든 결과물 사이트를 최대한 많은 사람들이 편리하게 이용할 수 있게 하는 것이 개발자의 역할이라는 생각이 들었습니다. 

 

앞으로 혼자 프로젝트를 진행할 때도, 추후 회사에서 개발에 참여할 때도 lighthouse 도구를 통해 주기적으로 체크하며 웹 접근성을 고려하는 개발을 하도록 노력하려고 합니다.

 

그리고 저는 주로 React를 사용하는데, React 공식 문서에서 웹 접근성에 대해 설명해주는 글이 있습니다.

추후 천천히 읽어보면서 React 프로젝트에서 웹 접근성을 고려하며 개발할 수 있는 방법에 대해 공부해봐야겠습니다.

 

접근성 – React

 

---

참고 자료

 

1. 웹접근성이란?

2. 무엇을 위해 웹 접근성을 지킬까?

3. [번역] 웹 접근성 마스터하기: 프런트엔드 개발자를 위한 가이드

4. 시맨틱 태그란?

5. 웹 접근성 준수가 가져오는 프론트엔드 개발의 이점

6. [React] 웹 접근성 강화하기