웹 접근성(Web Accessibility) 란

장애인, 고령자 등이 웹사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고
이해할 수 있도록 보장하는 것 이다.

접근성이 왜 중요할까?

웹 접근성은 능력이나 장애에 관계없이 모든 사람이 웹에 접근해서 사용할 수 있도록 보장하기 때문에 중요하다.
또한 정보와 기술에 대한 장벽을 제거하여 포용성, 다양성, 평등을 증진하는 데에도 도움이 됩니다

라고 설명을 하긴 하지만.. 크게 와닿지 않는다. 해외같은 경우 웹 접근성을 지키지 않는다면 어마무시한 벌금을 낸다고 한다. 만약 해당 프로젝트가 해외 수출을 하게될때 접근성을 지키지 않는다면 무슨일이 벌어지게될까.. 우리나라도 잘 지켜지진 않지만 웹 접근성을 지키지 않으면 해당 기관 또는 사업주에게 권고 후 벌금을 낼수도있고 손해배상 청구를 했던 사례도 존재한다.

그래서 어떻게 하는건데

1. 시멘틱 태그(Semantic Tag) 사용

HTML 태그는 사용하는 용도 및 의미에 따라서 각각의 태그가 존재한다.
페이지의 콘텐츠와 구조에 맞는 태그를 이용해서 즉 시맨틱 하게 HTML 태그를 사용하자.
시맨틱 태그이용은 접근성 뿐만아니라 seo 최적화에도 중요한 역할을 하게 된다.

HTML5 이전에는 div, span과 같이 콘텐츠 보유 역할은 하지만,
포함된 콘텐츠의 유형이나 해당 콘텐츠가 페이지에서 수행하는 역할에 대해서는 별도로 표시하지 않는 태그를 사용했다.
구조를 구분하기 위해 div 태그에 id또는 클래스 등으로 구분하며 구조를 설계했으나,
HTML5에서는 시맨틱 태그의 등장으로 좀 더 명시적이면서 직관적인 구조의 설계가 가능해진 것 이다.
대표적으로 header, footer, section, nav, article 등이 있다.

시맨틱-태그

<header> 태그는 문서나 섹션의 머릿글을 지정하며, 로고, 탐색, 제목 및 기타 소개 정보가 포함된 페이지 상단 부분을 정의합니다.
여기에는 메타 태그 정보, 키워드, 심지어 가져온 CSS 파일이나 스타일 시트도 포함되는 경우가 많습니다.

<footer> 태그는 문서 또는 섹션의 바닥글을 지정하며, 문서의 아래쪽에 위치합니다.
<footer>의 요소에는 일반적으로 연락처 정보, 사이트 맵, 웹사이트를 하나로 묶고 SEO를 강화하는 데
도움이 되는 소셜 미디어 사이트에 대한 링크와 같은 추가 링크가 포함됩니다.

<section> 태그는 문서의 부분을 의미하는 태그로, 기본 콘텐츠 내의 특정 주제 또는 부제목과 관련된 주제별 콘텐츠 그룹을 정의합니다.
<section> 안에 <section>을 넣을 수도 있고, <article>을 이용해 내용을 넣을 수도 있습니다.

<nav> 태그는 웹사이트의 메뉴, 탭, 탐색경로 등 탐색 링크가 포함된 페이지 부분을 정의합니다.

<article> 태그는 독립적인 글을 다루는 데 사용하는 태그
블로그 게시물, 뉴스 기사, 제품 리뷰 등 독립적으로 배포하거나 재사용할 수 있는 독립형 콘텐츠를 정의합니다.

<main> 태그는 메인 내용을 담는 태그로, 웹사이트의 텍스트 본문이나 콘텐츠를 나타냅니다.
<main> 태그는 문서에서 유일해야 하고, <article>, <aside>, <footer>, <header>, <nav> 등 모든 페이지의 태그 앞에 옵니다.

<aside> 태그는 옆에 위치하는 콘텐츠를 담는 태그로, 페이지 콘텐츠를 제외한 콘텐츠를 정의합니다.
주로 문서에서 사이드바를 놓기 위해 사용합니다.

<details> 태그는 사용자가 보거나 숨길 수 있는 추가 세부 정보를 정의하는 태그입니다.
사용자와 상호작용이 가능하다는 점이 특징이며, 사용자는 버튼을 통해 열고 닫을 수 있습니다.
기본적으로 닫은 상태에 있고, 클릭하면 내용이 보이면서 확장되는 성질을 가집니다.

추가로, <details> 태그와 함께 쓰이는 <summary> 태그는 <details> 에서 보이는 부분을 담당합니다.
<summary> 태그는 <details> 태그의 첫 번째 하위 항목이어야 합니다.

<figure> 태그는 일러스트레이션, 다이어그램, 사진, 코드 목록 등과 같은 자체 포함된 콘텐츠를 지정합니다.

<figcaption> 태그는 <figure> 요소에 대한 캡션을 정의하며, 문서에서 사진의 설명을 추가하기 위해 사용됩니다.
‘Caption’이라는 단어 자체가 이미지에 대한 간략한 설명을 의미하는 만큼, <figcaption>은 <figure>에 대한 간략한 설명입니다.

참고(https://seo.tbwakorea.com/blog/what-is-semantic-tag/)

2. 대체 텍스트를 제공

웹사이트에 이미지, 동영상 또는 시각적 콘텐츠를 추가할 때는 반드시 콘텐츠가 묘사하는 내용을 텍스트로 제공해야 한다.
HTML에서는 이를 대체 텍스트라고 한다. 이러한 설명은 스크린 리더 사용자가 웹사이트의 내용을 이해할 수 있도록 도와준다.
스크린 리더란 컴퓨터나 모바일 화면의 텍스트를 TTS를 통해 읽어주는 소프트웨어이다.

alt 속성 넣기

<img alt="강아지 사진" src="./image.png" />
<video src="my-video.mp4" alt="강아지들이 뛰어노는 동영상"></video>

alt속성에 하늘 사진이라는 텍스트를 넣음으로써 사용자는 해당 이미지가 불러오기도 전에 어떤 이미지인지를 알수가 있다.
또한 alt 속성은 SEO 최적화에도 도움이 된다.
next.js 의 Image 컴포넌트같은경우 alt 를 필수값으로 지정해줘야할 정도로 중요한 속성 이다.

3. WAI-ARIA 이용하기

마우스와 같은 포인팅 장비를 사용하기 힘든, 스크린 리더를 사용하는 사용자들에게
동적 컨텐츠, javascript, ajax, vue, react 등과 같이 페이지를 새로고침 하지 않고도
페이지의 내용과 데이터가 바뀌는 영역에 역할, 속성, 상태 정보를 추가하여
동적인 컨텐츠에 보다 원활하게 접근하고
페이지에 접근성을 높여 여러 사용자들에게 원활한 페이지 이용을 도와준다.
버튼을 클릭하여 페이지 새로고침이나 링크 이동으로 페이지가 전환되는 것이 아닌
컨텐츠 내용이나 구조가 바뀌는 상황에서 페이지 전환 상태나 정보를 WAI-ARIA로 알려준다.

또한
WAI-ARIA는 단순 HTML로 표현할 수 없는 의미들을 태그에 부여하여 시각적인 불편함이 있는
사용자들게 일반적인 구조의 HTML에서 필요한 요소에 적절한 정보를 전달받아
원활하게 페이지 탐색 및 이용을 하도록 도와준다.
WAI-ARIA 는 ARIA States and Properties 속성과 ARIA Roles 속성을 이용하는 두가지 방법이 있다.

ARIA States and Properties 이용하기

<li tabindex="0" class="checkbox" role="checkbox" checked aria-checked="true">
  Receive promotional offers
</li>

위와 같이 li 태그를 체크박스 형식으로 만들어야 할때 aria-checked 와 role 을 이용해서
해당 요소가 체크박스임을 나타내고 있다.

aria 의 상태 및 속성은 MDN 에서 확인해보자
MDN : https://www.w3.org/TR/aria-in-html/#bib-HTML51

role 속성 이용하기

role은 말 그대로 해당 태그가 어떤 역할을 수행하는지 알려주는 속성이다.
스크린리더를 이용하는 시각장애인들에게 해당요소가 어떤 요소인지 알려주는 속성이다.

<div class="snackbar" role="alert">
  <img src="apple.jpg" alt="사과 이미지" />
</div>
<div class="tab" role="tab">
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

role 로 부여할수 있는 속성은 굉장히 많이때문에 아래의 링크에서 확인해보도록 하자
MDN : https://www.w3.org/TR/aria-in-html/#bib-HTML51
참고 : https://codingeverybody.kr/html-role-%EC%86%8D%EC%84%B1%EC%9D%98-%ED%99%9C%EC%9A%A9-%EB%B0%A9%EB%B2%95/#role-attr-3

4. 접근성을 고려한 색상 및 대비 사용

색상을 컨트롤하는건 대부분 디자이너의 역할이지만 알아둬서 나쁠건 없다고 생각된다.
배경과 텍스트의 색상대비 즉 명암비를 확인해야한다.
아래의 링크에서 명암대비를 숫자로 확인할수 있는데
3점아래로 나와선 안된다.
https://webaim.org/resources/contrastchecker/

저작자표시 (새창열림)