웹개발을 하다보면 자연스럽게 웹 접근성에 대해서 공부를 하게 되는데, 회사 프로젝트 중 장차법이 적용되어있지 않은 부분을 하나하나 찾아 적용했다. 처음에는 웹접근성, 웹표준을 생각하지 않고 개발했던 것 같은데, 이런 부분을 자세히 찾아보면서 적용하니 앞으로는 이런 부분도 놓치지 말아야겠다는 생각이 들었다. 웹 표준, 웹 접근성 등 이러한 용어에 대해서도 헷갈렸기에 다시한번 정리해보고자 한다.
1. 웹 표준 (Web Standards)
웹 표준이라는 것은 웹에서 사용되는 기술들을 표준화한 것을 의미한다. 즉, 웹사이트를 구성하는 HTML, CSS, Javascript 등의 언어들이 표준화된 방식으로 작성되어야한다는 것이다. W3C(World Wide Web Consortium)에서 권고하고 있으며, 사용자가 어떠한 운영체제나 브라우저를 이용해도 웹페이지가 동일하게 보이고 정상적으로 작동할 수 있도록 하는 웹페이지 제작 기법을 담고있다고 보면 된다.
쉽게 말해, 크롬, 엣지, 사파리 등의 다양한 웹 브라우저로 접속했을 때 동일하게 정상작동이 되어야한다는 것이다.
2. 웹 표준의 장점
웹 페이지를 만들 때 웹 표준을 준수하면 다음과 같은 장점을 가지게 된다.
1) 웹 페이지의 호환성
웹 표준을 준수하여 웹 사이트를 제작하면 웹 브라우저의 종류나 버전, 운영 체제, 사용기기 종류에 상관없이 항상 동일한 결과가 나온다.
2) 유지 보수 및 확장성
웹 표준을 준수하면, 웹 페이지를 만드는데 필요한 시간과 비용을 줄일 수 있어 유지보수 및 확장성이 좋아진다. 또한 HTML, CSS, Javascript의 각 영역이 분리되면서 코드가 경량화 되고 트레픽 비용이 감소한다는 장점도 있다.
3) 검색 엔진 최적화(SEO)
웹 표준을 준수하면, 검색 엔진에서 웹 페이지를 더욱 잘 인식할 수 있고, 이를 통해 더욱 높은 검색 결과를 얻을 수 있다.
4) 웹 접근성 향상
브라우저, 운영체제, 기기의 종류 등 웹에 접근할 수 있는 환경은 매우 다양하지만 웹 표준을 준수하면 어떤 브라우저를 사용하든 동일한 결과물을 얻을 수 있다.
3. 웹 접근성
웹 접근성이란 어떠한 사용자가 어떠한 기술환경에서도 전문적인 능력 없이 웹 사이트에서 제공하는 모든 정보에 접근할 수 있도록 보장하는 것을 말하며, 즉, '모든 사용자가 모든 기기에서 웹에 접근할 수 있도록 하는 것'을 의미한다. 장차법이 개정되면서 비장애인과 장애인이 동등하게 웹에 접근할 수 있도록 해야하며, 이를 위해 웹 접근성 지침을 준수해야한다.
웹 접근성 지침은 W3C에서 발표하였고 해외 웹 표준 기술 동향을 토대로 국내 설정에 맞게 반영된 한국형 웹 콘텐츠 접근성 지침을 KWCAG라고 부른다. 2015년까지 한국 내 모든 인터넷 사이트가 웹 접근성을 보장하도록 법으로 규정했으며, 앞으로 만드는 모든 웹 사이트와 콘텐츠 역시 웹 접근성 지침을 준수해야한다.
1) 한국형 웹 접근성 지침
처음엔 웹 접근성에 대해 어떻게 공부하는 것이 좋을까를 고민하다가 부스트코스의 웹 접근성의 이해 강의를 알게 되었고, 길지 않기 때문에 들으며 쉽게 이해할 수 있었다. 글로만 봤을 때는 막연히 어떻게 해야하는지 모르겠었던 부분들도 이 강의 예시를 보며 이해가 되었고, 이를 프로젝트에 적용했다. 한국형 웹 접근성 지침을 살펴보면 크게 4가지 부문으로 나눌 수 있는데 아래에서 살펴보자.
- 인식의 용이성 : 대체 텍스트, 멀티미디어 대체 수단 제공, 명료성
- 운용의 용이성 : 키보드 접근성, 충분한 시간 제공, 광과민성 발작 예방, 쉬운 네비게이션
- 이해의 용이성 : 가독성, 예측 가능성, 콘텐츠의 논리성, 입력 도움
- 견고성 : 문법 준수, 애플리케이션 접근성
이와 같이 다양한 부분에서 웹 접근성을 준수해야하는데, 이 중에서 대체 텍스트, 키보드 접근성, 쉬운 네비게이션, 입력 도움, 문법 준수 등을 적용했다.
2) 적용 사례 - 대체 텍스트
가장 먼저 대체 텍스트를 적용해보았다. 처음 대체 텍스트를 적용할 때 약간의 혼란이 있었는데 부스트코스 강의를 통해 이해할 수 있었다. 대체 택스트는 시각적으로 인식이 불가능한 사용자들에게 청각적으로 내용을 인식할 수 있도록 도움을 주고자 제공하는 것으로 보통 스크린 리더기로 듣게 되면 대체 텍스트 값을 읽어준다. 그래서 글씨가 아닌 요소에 대체 텍스트가 필요한 것이다.
[대체 텍스트 적용방법]
대체 텍스트는 alt 값으로 설정해줄 수 있는데 img 요소에 alt값을 직접 추가하거나 마크업으로 대체 텍스트를 제공하는 방법 등을 활용할 수 있다. 의미가 있는 이미지의 경우 대체 텍스트를 제공해야하며, 의미가 없는 이미지의 경우에는 alt 값을 필수로 제공하되 빈값으로 제공하면 된다.
- 의미가 있는 이미지 : 시각적으로 보는 것과 동일하게 대체 텍스트 제공
- 배경 이미지 : 의미가 있다면 의미에 맞게 대체 텍스트 제공
- 의미가 없는 이미지 : alt값을 빈값으로 제공
- 이모티콘 이미지 : 이모티콘의 의미에 맞게 대체 텍스트 제공
- QR 코드 이미지 : '해당 링크 주소'로 바로가기 QR코드 등의 링크 주소를 알 수 있도록 대체 텍스트 제공
- 썸네일 이미지 : 이미지의 대체 텍스트와 설명글이 일치할 경우 중복되지 않게 alt값은 빈값으로 처리
- 캡차 이미지 : 캡차이미지의 경우 텍스트를 제공하면 정답을 알려주는 것이기 때문에 alt값을 '캡차' 또는 '보안 문자'로 제공
3) 적용 사례 - 키보드 접근성
키보드 접근성의 경우, 마우스를 사용하지 못하는 사람들을 위해 키보드만으로도 웹 페이지에서 제공하는 모든 기능을 사용할 수 있도록 제공해야한다. 또한, 마우스로 조작 가능한 기능과 키보드로 조작 가능한 기능이 동일하도록 구현해야한다.
[키보드 접근성 적용방법]
키보드 접근성의 경우 탭키를 통해 논리적으로 초점이 이동될 수 있도록 해야하며, 초점이 어디에 위치하는지도 시각적, 청각적으로 표시할 수 있어야한다.
3) 적용 사례 - 입력 도움(레이블 제공, 오류 정정 등)
레이블 제공은 모든 사용자 입력의 용도 또는 역할에 대한 설명을 제공하는 것을 말하는데, 대표적인 사례로 input이 있는 로그인 창 또는 사용자 정보 입력 등의 화면이 있다. 청각적으로 웹을 인식하는 사용자는 입력 서식에 초점이 갔을 때 스크린 리더기가 편집창이라고만 읽어주기 때문에 라벨을 사용하여 어떤 편집창인지를 나타내주어야한다. 오류 정정의 경우에는 사용자의 실수로 오류가 발생했을 때, 오류를 정정할 수 있는 방법을 제공해야한다는 것을 의미한다.
[레이블 제공 적용방법]
- 레이블과 input 서식이 1:1 매칭인 경우 : 레이블을 제공하고 label for 값과 input id 값을 동일하게 제공
- 레이블과 input 서식이 1:다 매칭인 경우 : 각 입력 서식에 대해 title 값을 제공
레이블 제공의 경우 label과 title값을 적절하게 사용해주면 되는데 중복 제공을 피하기 위해 1:1 매칭인 경우에는 우선적으로 레이블을 제공하고 그 이외에는 title 값으로 설명을 제공해주면 된다.
[오류정정 적용방법]
입력 서식을 작성할 때, 사용자의 실수로 오류가 발생할 경우 이를 정정할 수 있는 방법을 제공해야한다.
- 입력 오류시 입력 내용이 모두 사라지면 안되며, 오류가 있는 부분만 수정할 수 있도록 제공해야한다.
- 오류가 발생하는 경우 사용자에게 오류가 발생한 원인을 알려주어야한다.
- 오류가 발생한 입력 서식으로 초점이 이동되어야한다.
로그인, 사용자 정보 입력시 유효성을 체크하는 부분을 예로 들 수 있을 것 같다.
3) 적용 사례 - 콘텐츠 구분(명도대비, 색에 무관한 인식, 조작 가능)
웹 페이지에는 다양한 콘텐츠가 존재하는데 콘텐츠 정보를 인식할 때, 이웃한 콘텐츠와 구별될 수 있어야한다는 특징을 말한다. 즉 웹페이지를 구성하는 모든 콘텐츠는 모두 시각적으로 구분되도록 제공이 되어야한다.
[명도대비 적용방법]
노안, 저시력, 색맹, 색약 등의 사용자들도 불편함이 없도록 콘텐츠를 제공해야하며 비장애인들도 명도 대비가 높다면 콘텐츠를 더 잘 인식할 수 있기에 콘텐츠와 배경색 간의 명도 대비는 최소 4.5:1 이상을 준수해야한다. 만약 확대 가능한 브라우저라면 최소 3:1 이상이면 준수이지만 명도 대비가 높을 수록 가독성이 높아지기 때문에 4.5:1 이상이 되도록 구현하는 것이 좋다.
[색에 무관한 콘텐츠 인식 적용방법]
콘텐츠틑 색에 관계없이 인식될 수 있어야하며 그래프와 같은 예시가 있을 때 모양을 다르게 하여 흑백일 때도 인식할 수 있도록 구현해야한다. -> 서로 다른 무늬, 패턴, 모양, 테두리 등을 사용
[조작 가능한 컨트롤 크기 적용방법]
웹페이지에서 컨트로를 마우스로 조작할 때, 컨트롤의 크기가 너무 작으면 클릭하기가 어렵다는 단점이 있다. 그렇기 때문에 대각선 6mm 크기 이상으로 구현되어야한다. 또한 컨트롤의 테두리 안으로 1픽셀 이상의 여백이 있어야한다.
이렇게 각각의 화면이 웹접근성을 준수하는지를 꼼꼼하게 살펴보며 프로젝트에 적용해나갔다. 적용을 하며 새로운 것도 많이 알게 되었고, 이를 테스트하기 위한 웹접근성 평가도구들도 사용해볼 수 있게 되었는데 내가 사용한 도구는 다음과 같다.
- 스크린리더 : NVDA
- 명도대비 확인 : Colour Contrast Analyser
- 컨트롤 크기 확인 : kwcag a11y inspector (크롬 확장 프로그램)
- 웹접근성 검사 : OpenWAX (크롬 확장 프로그램)
예전에는 이런 것들을 생각하지 않고 개발을 했다면 이제는 웹표준과 웹접근성을 준수하기 위해 노력해야할 것 같다. 사소한 부분 하나라도 신경써서 개발한다면 누구나 편하게 사용할 수 있는 웹을 만들 수 있기에 다른 부분도 하나씩 적용해보며 나아가는 프론트엔드 개발자가 되어야겠다.
