웹 접근성 및 준수사항

팀장님이 오후에 웹접근성 검사를 시키실 거라해서

그 전까지 웹 접근성에 대해 공부하라고 하셨다.

컴퓨터공학부 다니면서 웹접근성에 대해

얼핏 들어봤지만 자세하게 알아본적이 없던 것 같았다 ㅜㅜ

 

하지만 이제라도 알아가면 되니까!

일단 웹 접근성이란?

웹 접근성

장애인이나 고령자가 웹 사이트에서 제공하는 정보를 비장애인과 동등하게 접근하고

이용할 수 있도록 보장하는 것으로 웹 접근성 준수는 법적 의무사항이다.

준수해야 하는 고려사항으로는 

1. 시각  2. 이동성  3. 청각  4. 인지

시각장애인이 사진을 볼 수 없는 상황에도 화면을 읽을 수 있어야 한다던가 

지체 장애인의 경우 근육의 속도가 느려 천천히 행동해도 시간 제약이 없다던가

별도의 마우스 이동 필요없이 키보드로 모든 화면에 접근 할 수 있어야 한다.

이러한 사항들을 보조하는 과학 기술로는

1. 스크린 리더 소프트웨어 2. 화면 확대 도구 3. 음성인식 4. 키보드 오버레이

등이 있다.

개발자가 해야하는 것은 자바스크립트가 동작하지 않는 환경에서도

기본적인 submit이 동작하도록 구현해야 한다.

구체적인 사례를 들어보면

 

 

1. 이미지를 넣고 alt로 상세 설명이 추가되어야 한다.

<img ="url" alt="설명">

<img>태그로 이미지를 삽입할 때 시각장애인은 이미지를 볼 수가 없기 때문에

alt에 적어놓은 설명이 필수 적이다.

2. 키보드로도 제어할 수 있는 버튼

키보드 사용만으로도 홈페이지 조작이 가능해야한다.

지체장애인같이 거동이 불편한 사람들은 마우스와 키보드 왔다갔다 사용하기엔 움직임에 제약이 있다.

그래서 키보드의 탭 버튼을 이용하여 모든 동작을 할 수 있어야 하고

이 때 마우스로 동작하던 로직 또한 키보드에 적용이 되어야 한다.

네이버 로그인 창

이처럼 탭버튼을 눌렀을 때  순서가 1. 아이디 > 2. PW > 3. 로그인 버튼이 되어야 한다.

3. 크로스 브라우징

크로스 브라우징이란 브라우저의 종류에 상관없이 웹 사이트의 img/data등이 동일하게 보여지게 하는 

상호 호환성에 대한 기술을 의미한다.

나 또한 크로스 브라우징의 중요성을 깨달은 적이 있었는데, 

사이트에 팝업창을 띄우는 작업을 하고 테스트도 완벽하게 마쳤다 생각했는데

버전 문제로 Internet Explore에 팝업창이 뜨지 않았던 것이다.

Chrome에서만 테스트를 진행하고 끝냈는데 알고보니 익스, 크롬, 웨일 이 세가지 버전으로 테스트를 충분이 해야했던 것이다.

이 일을 계기로 하나의 작업이 끝나면 이 세개의 브라우저로 테스트를 진행하게 되었다.

어떤 사이트는 이미지가 뜨고 어떤 사이트는 뜨지 않는 불공평한 접근성을 방지하기 위해 크로스 브라우징은 필수적이다.

4. 단일태그의 마무리는 < />

예를 들어 <input>태그를 사용할 때 그냥 끝내도 에러가 뜨지는 않는다.

그러나 웹 접근성을 고려해 가독성을 높이기 위해 <input id="" name="" />로 작성 해주어야한다.

5. <meta charset="utf-8">

charset이란 파일의 인코딩을 알려주는 태그이다. 

인코딩이란 정보의 형태나 형식을 변화하는 처리 또는 처리 방식을 의미한다.

시각 장애를 가진 사람이 웹페이지에 접근할 경우 보통 음성을 통해 웹 페이지 내용이 전달 되어지는 데,

이 때 인코딩 방식이 잘못된다면 내용전달에 문제가 생긴다.

보통은 웹브라우저 설정 환경에 따라 자동으로 인코딩을 추정해서 처리해주지만 정확하지 않을 때가 존재한다.