프론트엔드 로드맵 11 - HTML 웹접근성 필요한 이유

웹사이트는 모든 사용자들이 차별없이 접근할 수 있어야 한다. 브라우저 호환성 테스트를 거쳐 접근성을 고려해야한다.

접근성 고려에는 장애인뿐만 아니라 모바일 기기나 네트워크 연결이 느린 사람도 대상으로 포함하고 있다.

 

접근성을 위해서는 의미론적인 HTML 구조 (시멘틱 구조)로 마크업하는 것이 가장 중요하다.

 

<시멘틱 구조로 마크업되면 생기는 이점>

1. 개발에 용이하다 2. 모바일 사용이 더 편리해진다(시멘틱 구조의 HTML은 용량이 줄어들고, 반응형을 더 쉽게 만들 수 있다) 3. SEO(검색엔진최적화)에 적합하다

 

<콘텐츠 카테고리>

이전에 HTML 마크업은 인라인-블록 요소로 구분했지만 HTML5에 와서는 콘텐츠 모델에 의거해 요소를 구분하고 있다.

 - 메인 콘텐츠 카테고리

1. 메타데이터 Metadata Content : 보통 Head 영역에 들어가는 요소들이다. 문서의 표현이나 동작을 수정하거나 다른 문서를 불러올 때 사용한다.

<base>, <link>, <meta>, <script>, <style>, <title>

2. 플로우 콘텐츠 Flow Content : 텍스트나 내장 콘텐츠를 포함하는 요소들이다.

<a>,​​​​​​ <abbr>, <address>, <article>, <aside>, <audio>, <b>, <bdo>, <bdi>, <blockquote>, <br>, <button>, <canvas>, <cite>, <code>, <data>, <datalist>, <del>, <details>, <dfn>, <div>, <dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hgroup>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <label>, <main>, <map>, <mark>, <math>, <menu>, <meter>, <nav>, <noscript>, <object>, <ol>, <output>, <p>, <picture>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <table>, <template>, <textarea>, <time>, <ul>, <var>, <video>, <wbr>, 텍스트

 

혹은 (조건부)

<area> (<map>의 자손인 경우), <link> (itemprop 특성이 있는 경우), <meta>(itemprop 특성이 있는 경우), <style> (scoped 특성이 있는 경우)

 

3. 구획 콘텐츠 Sectioning Content : 현재 개요에서 <header>, <footer>, 제목 콘텐츠 등의 범위를 나누는 구역을 생성하는 요소들.

<article>, <aside>, <nav>, <section>

 

4. 제목 콘텐츠 Heading Content : 구획의 제목을 정의하는 요소. 구획은 구획 콘텐츠로 명시할 수 있으며 제목 자신이 암시적으로 생성할 수도 있다.

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hgroup>(HTML5에서 제거 됐으나 여전히 부분적으로 지원되고 있음)

**<header>는 제목에 포함하지만 제목 콘텐츠는 아님. 

 

5. 구문 콘텐츠 Phrasing Content : 텍스트와 텍스트가 포함한 마크업을 정의.

<abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <data>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <picture>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video>, <wbr>, 공백으로 이루어지지 않은 일반 텍스트

 

혹은 (조건부)

<a>(구문 콘텐츠만 포함하는 경우), <area> (<map>의 자손인 경우), <del>(구문 콘텐츠만 포함한 경우), <ins>(구문 콘텐츠만 포함한 경우), <link>(itemprop 특성이 있는 경우), <map>(구문 콘텐츠만 포함한 경우), <meta>(itemprop 특성이 있는 경우)

 

6. 내장 콘텐츠 Embedded Content : 다른 리소스 가져오거나 다른 마크업 언어나 네임스페이스로부터 문서에 삽입하는 요소들.

<audio>, <canvas>, <embed>, <iframe>, <img>, <math>, <object>, <picture>, <svg>, <video>

 

7. 대화형 콘텐츠 Interactive Content : 사용자와의 상호 작용을 위해 특별히 설계된 요소들

<a>, <button>, <details>, <embed>, <iframe>, <label>, <select>, <textarea>

혹은 (조건부)

<audio>(controls 속성을 가진 경우), <img>(usemap 속성을 가진 경우), <input>(type=hidden이 아닌 경우), <menu>(type=toolbar인 경우), <object>(usemap 속성을 가진 경우), <video>(controls 속성을 가진 경우)

 

 

<접근성 체크리스트>

- alt 속성

<img>, <input type="image">등의 이미지 요소에는 alt 속성을 분명히 제공해야 한다. 이미지에 있는 텍스트는 전부 읽을 수 있도록 alt에 집어넣어야함. 의미없는 이미지의 경우에는 빈칸 (alt="")으로 남겨둬야 한다.

<area> 요소에도 이미지에 대한 설명 필요함. <area alt="조직도">

title을 사용하더라도 alt는 반드시 들어가야 한다. <img src="example.gif" alt="예시사진" title="예시사진">

이미지와 함께 적절한 텍스트까지 제공된 경우에는 alt 값은 빈값으로 처리. 이때 링크가 걸려있다면 링크는 이미지와 텍스트를 한번에 감싸는 것이 좋다. (불필요한 title도 없어야)

 

<접근성 평가 도구>

N-WAX : 접근성 평가를 위해 체크리스트에 대용되도록 구성. 파폭과 크롬에서 제공

Web Developer, Firebug, User Agent Switcher  (파이어폭스 부가기능),

UIA Verify : 플래시, 실버라이트 등 애플리케이션의 접근성 정보를 탐색할 수 있는 도구.

PEAT(photosensitive Epilepsy Analysis Tool) : 웹 콘텐츠를 포함해 스크린에 나타나는 대상이 발작 위험을 일으키는지 식별해줌.

Contrast Ratio (포토샵 익스텐션) : 포토샵에서 전경색과 배경색의 명도 차이를 비교해주는 확장 프로그램이다.

Colour Contrast Analyser,

모바일 스크린 리더 : 시각 장애인이 컴퓨터를 사용할 때 화면에 표시되는 입출력 정보를 음석으로 알려주는 프로그램,

 

 

참고 사이트 : 

https://developer.mozilla.org/ko/docs/Web/Guide/HTML/Content_categories
https://developer.mozilla.org/ko/docs/Learn/%EC%A0%91%EA%B7%BC%EC%84%B1/HTML
https://nuli.navercorp.com/sharing/a11y/checklist/1.1.1#error2