이 프론트엔드 업계에 발을 들이기 위해 부트캠프에서도 공부하고, 독학도 해서 드디어 취업!!!
그런데 이 업계에서의 첫 취업한 직장은 스타트업이었기 때문에 당장 웹접근성을 신경쓸 겨를이 없었다.
하지만 굉장히 개발문화가 좋았던 곳이었어서 주마다 발표데이가 있었는데 그때마다 웹접근성에 대해서 딥하게 조사하고 공부해서 발표해보길 원했지만,
지금 당장은 웹접근성에 공부할 필요가 없다는 CTO 의 말이 있어서 매번 웹접근성에 딥하게 조사해보는걸 놓쳤었다.

요상하게 실무관련 공부를 하면서 웹접근성에 대해 관심이 많이 가고 신경이 많이 쓰였다.
그런데 (핑계겠지만) 매번 기회가 없었다.
드디어 "웹접근성" 이란 단어를 나만의 개발로그에 언급할수 있게 되서 너무 좋다.

웹접근성이란?

본 아티클 타이틀 부터 "웹접근성이 대체 뭐시간데..." 이니, 웹접근성이 무엇인지 부터 알아보자.

정보통신접근성 (Web 접근성)은 「지능정보화기본법」에 따라 장애인이나 고령자분들이 웹 사이트에서 제공하는 정보를 비장애인과 동등하게 접근하고 이용 할 수 있도록 보장하는 것으로 웹 접근성 준수는 법적의무사항 입니다. (출처: 한국웹접근성인증평가원)

즉, web 을 사용함에 있어서 어떤 누구도 평등하게 사용할수 있게끔 화면구현을 해야 규칙이라는 것이다. (편하게 풀어쓰자면, "웹접근성을 지키자", "웹접근성을 높이자" 라고 대부분들이 말하는것이 이 점을 말한다.)

웹접근성을 지킨다는게 무엇일까?

웹접근성을 지킨다는게 무엇일까?
위에서 말한 내용으로는 어떤 누구도 평등하게 사용할수 있게끔 화면구현을 해야 한다는것인데, 그렇다면 무엇을 기준으로 화면 구현을 하면 될까?

웹접근성을 높이고 있는지 진단도구

하단에 여러 기준을 설명하겠지만, 일단 해당 사이트를 알아두면 좋겠다.
전체적으로 내가 구현한 화면에서 웹 접근성을 개선이 필요한 부분을 자동으로 검출해주는 프로그램이다.
하단에 설명해놓은 여러 기준에 맞추어 웹접근성을 높였다고 판단한다면, 아래 사이트를 통해서 전체적으로 진단하는것이 좋겠다.
PC(WAVE)
모바일(Android)
W3C Validation

시각

여러 시각적인 경우가 있을텐데 어떤 경우를 기준으로 하면 될까?(경우에 맞춰서 화면구현을 해야 하겠지?)

1. 시각에 장애가 있는 경우
   • 전맹(시력이 전혀 없는 사람)
   • 저시력(확대 기능 등을 사용하여 시력 보강 가능한 정도)
   • 고령자(노화로 인한 시력 감퇴)
   • 색맹(적녹생맹과 같이 색에 의한 내용 구분 불가능)
2. 시각에 장애가 없는 경우
   • 장치환경으로 인해 시각이 불편한 경우
     - 어두운 조명 환경
     - 화면을 프린터 한다면, 그것도 컬러 프린터가 아닌 흑백 프린터의 환경
     - 색 재현력 및 해상도
     - 화면 사이즈
   • 사용환경으로 인해 시각이 불편한 경우
     - 사용환경으로 인해 시각 기능 일시적 사용 불능 및 저하(예시: 운전중, 조명 등)
     

---

시각적인 웹접근성을 높일수 있는 방법

1. 시각적으로 불편한 사용자의 경우
   • 콘텐츠를 음성으로도 변환할수 있도록 제공
   • 충분한 텍스트의 크기 제공 및 텍스트의 크기를 조절할수 있도록 기능 지원
2. 장지환경으로 인해 시각적으로 불편한 경우
   • 명암, 패턴으로 구별할수 있도록 제공
   • 콘텐츠, 배경간의 적절한 명도 대비
   • 낮은 해상도에서도 정보의 손실 없는 콘텐츠 제공

위에 기재한 바와 같이, 해당 경우에 맞춰 기능들을 제공하거나 지원해야 하는데, 화면 구현을 하다보면 내가 구현한 화면이 저 상황들에 맞추어 제공 혹은 지원을 하고 있을까? 혼돈이 올 것이다.
이때 내가 구현한 화면이 시각적으로 웹접근성을 높이고 있는지 진단할수 있는 방법 혹은 프로그램들이 존재한다.
이는 따로 아티클을 작성해놨으니, 하단의 링크를 참고바란다.

시각적인 웹 접근성을 높이려면?

신체

여러 신체적인 장애상황이 있을텐데, 어떤 경우를 기준으로 웹접근성을 높여야 할까?

1. 신체적인 장애가 있는 경우
   • 지체장애(입력 제어 장치 사용에 대한 제한이 있는 사람)
   • 고령자(노화로 인한 신체 운동 기능 저하)
2. 신체에 장애가 없는 경우
   • 장치환경으로 인해 신체가 불편한 경우
     - 장치 이상 또는 장치 부재
   • 사용환경으로 인해 신체가 불편한 경우
     - 사용환경으로 인해 신체 기능 일시적 사용 불능 및 저하(예시:운전중)

---

신체적인 웹접근성을 높일 수 있는 방법

• 키보드를 쉽게 다룰수 있도록 제공: 키보드 포커스 시각적 구별 및 논리적으로 키보드로 순서를 이동할수있도록 제공
• 마우스를 쉽게 다룰수 있도록 제공: 사용자가 선택하고 싶은 영역을 충분히 제공
• 음성인식 기능 및 화상 키보드 등 제공

이때도 마찬가지로, 내가 구현한 화면이 신체적인 웹접근성을 높일 수 있는방법이 존재한다.
이도 따로 아티클을 작성해놨으니, 하단의 링크를 참고 바란다.

신체적인 웹접근성을 높이려면?

청각

여러 청각적인 장애상황이 있을텐데, 어떤 경우를 기준으로 웹접근성을 높여야 할까?

1. 청각에 장애가 있는 경우
   • 난청(보청기로 청력 보강 가능한 정도)
   • 고령자(노화로 인한 청력 감퇴)
   • 농(청력 능력이 거의 없음)
2. 청각에 장애가 없는 경우
   • 장치환경으로 인해 청각이 불편한 경우
     - 장치 이상 또는 장치 부재
   • 사용환경으로 인해 청각이 불편한 경우
     - 사용환경으로 인한 청각 기능 일시적 사용 불능 및 저하(예시: 소음)
     

---

청각적인 웹접근성을 높일 수 있는 방법

• 자막을 제공하거나 음량 조절 기능 지원
• 청각 정보를 대체할 수 잇는 시각 정보 제공(예시: 동영상 자막 등)

이때도 마찬가지로, 내가 구현한 화면을 청각적인 웹접근성을 높일 수 있는 방법이 존재한다. 이도 따로 아티클을 작성해놨으니, 하단의 링크를 참고 바란다.

청각적인 웹접근성을 높이려면?

인지

감각에 의한 장애가 아니더라도 인지에 장애가 있을 수도 있다.
예를 들어 문제 해결과 논리 능력, 집중력, 기억력에 문제가 있는 정신 지체 및 발달 장애, 학습 장애(난독증, 난산증 등)가 있을 경우도 있기 때문에 이에 대해서도 웹접근성을 높일 수 있다.
이때에는 어떤 경우를 기준으로 웹접근성을 높여야 할까?

1. 경험치가 부족한 경우(예시: 신규 사용자 및, 자주 사용하지 않는 사용자, 낮은 습득력으로 인한 사용능력이 저하된 사용자)
2. 정신지체(저능 저하로 인한 언어 및 사용 능력의 부족)
3. 언어능력이 부족한 경우(고급 어휘 또는 외국어 능력이 떨어지거나 글을 판독하는 능력 부족)

---

인지장애에 맞춘 웹접근성을 높일 수 있는 방법

• 콘텐츠 정보에 대한 안내를 충분히 제공하면 된다.
  - 그래프에 대한 해석 설명을 제공하도록
  • 콘텐츠를 다양한 언어로 제공하도록
  • 콘텐츠를 음성으로 안내 및 제공하도록

인지장애에 맞춘 웹접근성을 높일수 있는 방법 또한 따로 아티클을 작성해 놨으니, 하단의 링크를 참고 바란다.

인지장애에 맞춘 웹접근성을 높이려면?

이외에도 소프트웨어 환경이 다를 경우에 맞춘 웹접근성을 높이는 방법과
네트워크 환경이 다를 경우에 맞춘 웹접근성을 높이는 방법도 있는데,
이는 차차 추가하도록 하겠다.

출처 및 참고, 발췌:
널리
한국웹접근성인증평가원
네이버 접근성센터