웹 개발의 기본, 웹 접근성 정복하기

이 게시글은 접근성에 대한 많은 정보를 담고 있습니다. 다소 지루할 수 있으니 참고 바랍니다.

웹 접근성은 무엇인가요?

가능한 한 많은 사람이 웹 사이트를 사용할 수 있도록 하는 방법

'가능한 한 많은 사람이 웹 사이트를 사용' 이라는 말을 쉽게 설명하면,
웹 사이트에 접근하려는 모든 사용자를 차별없이 접근할 수 있도록 해야한다는 뜻이다.

왜 접근성을 고려해야하죠?

여기서 의문점이 생긴다.
굳이 이걸 고려할 필요가 있을까?

그렇게 생각할 수 있다.
왜냐하면 보통 웹 사이트를 만들 때 그냥 일반적인 사용자들만 생각하지 그들이 애초에 웹 사이트를 이용하기에 불편한 사항들을 가지고 있을 거라고 생각하긴 쉽지 않을 것이기 때문이다.

너무 빙빙 돌려 말한 것 같아서 명확하게 이야기해주겠다.

1. 시각 장애가 있는 사람, 청각 장애가 있는 사람, 인지 장애가 있는 사람 등 이 세상에는 다양한 사람들이 공존해 살아간다.
   이들이 장애를 가지고있다는 이유로 웹 사이트, 모바일 어플리케이션 사용에 지장을 미쳐서는 안된다는 것이다.

2. 통상적으로 장애인만을 대상으로 한다고 생각하지만, 실제로는 모바일 장치나 느린 네트워크 연결을 사용하는 사람들 등 다른 사용자들에게도 도움을 준다.

접근성을 고려하면 장애를 가진 사람들도 차별없이 사용이 가능하고 더불어 일반적인 사용자들에게도 도움이 될 수 있다.

장애를 가진 사람들을 위한 기능들이 있나요?

장애를 가진 사람들을 위해 각 브라우저들은 다양한 기능들을 제공한다.

시각 장애가 있는 사람을 위한 기능 (저시력 장애인 및 색각 장애인 포함)

• 스크린 리더 : 디지털 텍스트를 소리내어 읽어주는 소프트웨어 (JAWS, NVDA, VoiceOver)

청각 장애가 있는 사람을 위한 기능

• 접근성을 위해서 대체 텍스트 제공 (자막, 대본, 태그 속성의 alt 등)

운동 장애가 있는 사람을 위한 기능

• 키보드 만을 사용해 컨트롤 할 수 있는 사이트 (Tab key 만을 사용하여 모든 Form을 이동할 수 있도록 제작된 사이트)
• 마우스 사용이 어렵거나 심각한 경우에 컴퓨터와의 상호작용을 도와주는 헤드 포인터

인지 장애가 있는 사람을 위한 기능 (지적 장애, 우울증, 난독증, ADHD)

• 표준 문법을 지켜 작성된 텍스트처럼 쉽게 이해할 수 있는 콘텐츠를 제공하는 사이트
• 중요한 콘텐츠에는 주의가 집중될 수 있도록 정돈되어있는 사이트
• 불필요한 내용이나 광고처럼 산만한 요소들을 최소화한 사이트
• 일관된 웹 페이지 레이아웃과 네비게이션을 적용시킨 사이트
• 보안과 타협하지 않는 선에서 웹 사이트 인증을 가능한 쉽게 제작해둔 사이트

제가 직접 접근성 향상을 위해 프로젝트에 적용할 수 있는 사항들이 있나요?

우리가 웹 개발을 할 때 접근성 구현에 신경을 써야하는 중요한 이유가 있다.
자신이 제작한 사이트에 접근성을 고려하지 않고 마음대로 제작해버리면 위 기능들 외에 아무리 좋은 기능이 있다고 하더라도 제대로 사용하기 힘들기 때문이다.

예를 들어 Tab key를 눌러 Form 이동을 하려고 할 때 개발자가 모든 요소들을 div 태그로 만들었다면 아무리 Tab key를 눌러도 브라우저에서 기본적으로 제공하는 기능들만 움직일 뿐 해당 사이트에서의 이동은 불가능해지기 때문이다.
(<button> <input> <a> 등 특정 태그들만 Tab key로 포커스가 가능하다.)

게다가 이미 만들어진 프로젝트에 접근성을 구현하려고 하면 많은 비용과 시간이 들기 때문에 프로젝트를 시작할 때부터 접근성을 고려한다면 대부분의 콘텐츠를 접근성있게 만드는 데에 드는 비용이 적게 들 것이다.

고려해야 할 사항들의 예시

• 동적으로 업데이트되는 콘텐츠를 시각 장애인도 인지할 수 있는가?
• UI 버튼들이 키보드와 터치 인터페이스 유저들 모두에게 접근성을 제공하는가?
• Tab key를 사용해 Form 이동이 가능한가?
• 색상 구분이 불가능한 사람도 요소들의 경계를 구분할 수 있는가?

이 외에도 정말 많은 예시들이 존재한다.

좀 더 확실한 방법을 알려주세요!

시멘틱 태그를 사용하라.

✋ 시멘틱 태그가 뭐죠?

시멘틱 태그
웹 문서의 구조와 의미를 명확하게 표현하기 위해 사용되는 의미를 갖고 있는 태그

시멘틱 태그를 사용하면 좋은 점
1. 웹 페이지의 내용을 이해하는데 도움을 줌
2. 검색 엔진 최적화(SEO)와 향상 (검색 엔진은 의미가 없는 <div> 등의 태그보다 헤딩, 링크 등의 의미가 있는 태그에 더 많은 가중치를 부여하기 때문이다.)
3. 웹 접근성 향상

시멘틱 태그의 종류
<header> <nav> <main> <section> <article> <aside> <footer> <figure>

시멘틱 태그를 어떻게 활용해야 하죠?

시멘틱 태그를 사용하는 것이 굉장히 중요하다.

예를 들어 음악 재생 버튼을 만들었는데 이 버튼이 <div> 태그로 되어있다면 이것은 올바른 마크업 방법이 아니다.
게다가 Tab key를 눌러 다른 버튼으로 전환하거나 스페이스바를 눌러 재생과 일시정지를 수행할 수 없다.

그렇다면 어떻게 해야할까?

HTML에서 제공해주는 <button> 태그를 사용해야한다.

<button> 태그는 기본적으로 버튼 스타일링이 되어있을 뿐 아니라 사용자가 Tab key를 사용했을 때 버튼으로 이동할 수 있고 Space, Return, Enter key를 사용해 버튼을 활성화 할 수 있기 때문이다.

혹시라도 버튼 이외의 요소로 버튼을 구현하려고 한다면 button 요소 규칙 을 참고하고 탭을 통해 이동하거나 마우스 이벤트로 작동시키는 등 버튼의 모든 내장 기능을 구현해야한다.
이런 작업은 굉장히 번거럽고 많은 문제를 발생시킬 수 있기때문에 처음부터 알맞는 요소를 사용하도록 하자.
(그냥 제공되는 요소들 사용하자..)

시멘틱태그 사용 외에 다른 방법도 있나요?

명확한 언어 사용
전문 용어나 비속어를 사용하지 않아야 한다.
이는 인지 장애나 다른 장애가 있는 사람들 뿐만 아니라 나이가 어린 방문자나 타 국가에서 검색을 통해 방문한 사람들에게도 도움이 되기 때문이다.
그러니까 결론적으로는 모든 사람들에게 도움이 된다는 것이다.

또한, 스크린 리더가 똑바로 읽을 수 없는 언어나 문자의 사용을 지양해야한다.

• 대시(-) 사용하지 않기. (1-10 대신 1에서 10)
• 약어는 완전한 형태로 변경하기. (중꺾마→ 중요한 것은 꺾이지 않는 마음)

테이블 레이아웃 사용 지양
과거에 HTML 테이블을 사용해 페이지 레이아웃을 만들던 시절에 사용하던 방식이다.
페이지 구조를 시멘틱 태그가 아닌 테이블 안에 직접 작성한 것을 말한다.
스크린 리더 사용자들에게 큰 혼란을 불러오기때문에 사용하지 않는 것이 좋다.
또한 유연성과 유지보수성 역시 떨어지기 때문에 사용하지 않는 것이 좋다.

의미있는 텍스트 라벨
버튼과 링크의 텍스트 라벨이 구별 가능하도록 해야한다.
또한 버튼이나 링크만 보여질때에도(앞뒤 맥락을 제외하더라도) 이것이 무엇을 의미하는지 드러내는 것이 좋다.
이와 관련해서는 『도널드 노먼의 UX 디자인 특강』이라는 책에도 자세한 설명이 나와있다.
이를 통해 사용자가 버튼을 누를 때 실수하지 않도록 도와줄 수 있을 뿐만 아니라 버튼의 기능에 대해 명확하게 이해시킬 수 있다.

코드를 보며 더 확실하게 이해시켜주겠다.

안 좋은 예시 :

<h2>포스트 작성하러 가기</h2>
<button>클릭!</button>

좋은 예시 :

<h2>포스트를 작성하고 싶으신가요?</h2>
<button>포스트 작성하러 가기</button>

input의 경우에는 라벨을 잘 활용해서 스크린 리더로 읽었을 경우에 input에 어떤 것을 입력해야 하는지 확실하게 제공해야 한다.

<label for="post">포스트 제목을 입력해주세요</label>
<input type="text" id="post" />

대체 텍스트
시각장애인은 이미지나 영상을 볼 수 없고, 청각장애인은 음성을 들을 수 없다.
따라서 이를 위해 이미지나 영상을 대체하기 위해서는 alt 에 이미지에 대한 내용을 적어서 추가시켜주는 것이 좋다.
스크린 리더가 alt 속성의 내용을 읽어주기 때문이다.

이미지 요소처럼 대체 텍스트 제공이 불가능한 경우에는 alt 속성에 대체 텍스트를 제공하는 것이 중요하다.

여기서 주의해야 할 점이 있다.

• 이미지에 대한 배경 지식이 없는 사람에게 배경 지식을 요구하는 설명은 포함되지 않아야 한다
• 개인적인 내용은 포함하지 않아야 한다

<img src="sheep.png" alt="어린 양 : 하얀 털에 검은 얼굴을 갖고있는 귀여운 양이 화면을 향해 달려오고 있다."/>

alt 속성을 전혀 사용하지 않는 방법도 있다.

aria-labelledby 속성을 사용해 특정 요소의 id를 가리키도록 하면 된다.

<img src="sheep.png" aria-labelledby="sheep-label" />

<p id="sheep-label">하얀 털에 검은 얼굴을 갖고있는 귀여운 양이 화면을 향해 달려오고 있다.</p>

링크
<a> 태그를 사용할 때 페이지 새로고침을 막기 위해 href 속성을 # 으로 지정하거나 “javascript:void(0)” 을 사용하는 경우가 있는데 이런 값들은 링크 복사, 드래그, 새 탭에서 창 열기, 북마크, 로드 되는 과정 에서 예상치 못한 동작을 발생시키기 때문에 사용하지 않는 것이 좋다.
→ <a> 태그는 올바른 URL을 사용한 탐색을 위해서만 사용해야 한다.

target=”_blank” 선언을 통해 새 탭에서 창이 열리도록 할 수 있는데 이는 예상치 못하게 새 탭이 열린다고 생각할 수 있기 때문에 대체 텍스트를 사용하거나 새 탭 아이콘을 사용해 새 탭이 열린다는 사실을 알려주어야 한다.

그럼 이걸 모두 적용하면 접근성이 완벽해지는 건가요?

100% 접근성은 실현 불가능하다.
언제나 예외가 존재하기 때문이다.
하지만 할 수 있는 만큼 노력해야 한다.

접근성에 대해 고민하고 생각하고 있다는 것을 드러내기 위해서는 사이트에 접근성 설명을 발행하는 것이 좋다.
접근성에 대해 당신이 어떤 정책을 참고했으며 어떤 노력을 기울였는지 게시해두는 것도 좋은 방법이다.

😥 너무 복잡하고 어려워요

나도 안다.
이 내용은 큰 영향을 미치지 않을 것 같아서 왜 배워야 하는지 의문을 가질 수 있다.
마치 학교 도덕시간과 비슷하다고 생각하면 좋을 것 같다.
이미 알고 있는 내용이기도 하고 굳이 이걸 배워야하나 싶은 생각도 드는게 도덕수업이기 때문이다.

그래도 우리는 접근성을 향상시키기 위해 항상 노력해야 한다.
좋은 접근성은 장애인 사용자 뿐만 아니라 모든 사용자들에게 도움이 된다는 것을 명심하자.

---

마치며

한창 프레임워크, 라이브러리 공부를 하며 프로젝트를 진행하다가 요즘은 다시 처음으로 돌아와 빈틈을 채우며 더 깊게 공부하는 과정을 거치는 중이다.

덕분에 기본기가 더 탄탄해졌고 공부하는 내용들 중에서도 빈틈을 발견해 계속해서 단단해져가는 느낌이 든다.

전역이 2개월 남은 시점에서 군 생활을 돌아보면 열악한 환경에서 정말 열심히 FE 공부와 독서와 자기계발을 했고 나의 실력이 많이 발전했다는 게 직관적으로 보여서 단 1%의 후회도 남지 않는다.

미래의 내가 지금의 나를 돌아봤을 때 정말 잘 살았구나, 올바른 길을 걸어왔구나 생각할 수 있게 목표로 향하는 길을 확실하게 파악하고 계획해 신중히 결정하고 낭비하지 않으며 한 발 한 발 내딛자.

해당 기술을 사용하는 데 어려움이 없다면 평소 자신의 지식이 겉핥기 수준이라는 사실을 잘 인식하지 못한다. 하지만 그 기술의 작동 방식이나, 그 기술을 써야 할 이유를 누군가에게 설명해야 하는 순간이 오면 부족한 점이 드러난다. - 『 소프트 스킬 』

참고 자료 모아보기

MDN - 접근성
MDN - What is accessibility?
MDN - HTML: 접근성의 좋은 기반
MDN - CSS and Javascript accessibility best practices
MDN - ARIA: button role
yes24 - 도널드 노먼의 UX 디자인 특강