웹 접근성

웹 접근성이란?

• 모든 사용자가 웹사이트의 정보와 기능을 동등하게 이용할 수 있도록 보장하는 것
• ex. 장애를 가진 사용자, 노령 사용자, 기술적 제약을 가진 사용자 모두가 웹 사이트의 정보를 이용하는데 문제가 되지 않도록 제공
• 법적 요구사항이자 윤리적 책임

웹 접근성을 향상시킬 수 있는 방법

• HTML Semantic 마크업
• ARIA
• 색상 대비와 텍스트 크기 조정
• 키보드 접근성과 포커스 관리

HTML Semantic 마크업

Semantic Tag

• 의미가 있는 태그라는 뜻
• 개발자가 의미론적으로 의도한대로 브라우저가 식별할 수 있는 요소에 대해 표준화된 이름을 사용해 웹 사이트의 일관성 향상에 도움

1. 검색 최적화에 유리
   1. 검색 엔진에 풍부하고 구조화된 데이터를 제공함으로서 매력적이고 유익한 검색 결과 노출이 가능
2. 웹 접근성에 유리
   • 키보드만으로 웹 사이트를 이용하는 경우
   • 리더기로 웹사이트를 음성으로 읽어야 하는 경우
3. 가독성 향상
   • 유지보수에 유리

구조 정리에 필요한 Semantic Tag List

• <header>
• <nav>
• <main>
• <aside>
  • 페이지 콘텐츠를 제외한 콘텐츠
  • 사이드바
  • 광고
• <article>
  • 포스트 하나, 기사 하나
  • 이 자체만으로 독립적으로 다른 페이지에 보여줬을 때 아무 문제가 없는 태그
• <section>
  • 아티클 안 혹은 메인 안 어디서나 연관있는 내용을 하나로 묶어 섹션별로 나누고 싶을 때
• <figure>
  • 일러스트레이션, 다이어그램, 사진, 코드 목록 등과 같은 자체 포함된 콘텐츠
  • <figcaption> 으로 해당 요소에 대한 캡션 및 설명 정의 가능

  <figure>
    <img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
    <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
  </figure>
  

• <footer>
  • 문서 또는 섹션의 바닥글
  • 일반적으로 연락처 정보, 사이트 맵, 소셜 미디어 링크

추가 의미를 가진 Semantic Tag List

• <i> vs <em>
  • 모두 이탤릭체로 표기가 되지만
  • <i> 는 시각적으로만 이탤릭체
  • <em> 은 강조하는 이탤릭체
  • 스크린 리더기로 읽었을 때, <em> 으로 쓴 글이 조금 더 강조되어 읽힘
• <b> vs <strong>
  • <b> 시각적으로만 볼드체
  • <strong> 정말 중요한 강조 내용
• <ol> vs <ul> vs <dl>
  • <dl> <dt> <dd>
• <img> vs css background-image
  • <img> 이미지가 문서의 내용에서 중요한 역할을 하는 경우
  • css background-image 오직 스타일링을 위해서만 쓰이는 경우
• <button> vs <a>
  • <button> 사용자의 액션이 필요한 경우
  • <a> 사용자의 액션으로 인해 다른 페이지나 경로로 이동하는 경우
• <details>
  • 사용자가 보거나 숨길 수 있는 추가 세부 정보를 정의하는 태그

프로젝트에 적용

태그 위계 구조

• <header>
• <nav>
• <aside>
• <footer>
• <main>
  • <section>
  • <article>
    • <figure>
    • <p>
  • <section> 과 <article> 은 같은 위계여도 괜찮고, 서로를 포함하는 관계여도 괜찮음

구조적 활용

• <main>
  • next.js app router로 간다면? root layout.tsx 파일에 하나만 작성
• <header>
  • GNB 컴포넌트에 작성
• <nav>
  • Navigation 컴포넌트에 작성
  • header와 nav 가 겹치는 경우 header 안에 nav 를 작성
• <footer>
  • Footer 컴포넌트에 작성

컨텐츠적 활용

• 배경 이미지
  • 태그는 <div> 태그를 사용하고 css background-image 속성으로 적용
• 콘텐츠 이미지
  • <figure>과 <img> 활용

  <figure>
    <img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
    <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
  </figure>
  

• 스타일링을 위해서 태그 묶음이 필요한 경우
  • <div> 활용
• 본문 텍스트 단락 구성
  • <p>
• 텍스트의 특정 부분만 스타일링 혹은 그룹화 할 때
  • <span>
• 텍스트 인풋, 비밀번호, 이메일, 체크박스, 라디오버튼
  • <input>
  • <input type=”text”> 를 사용하는 경우 <label> 태그를 붙여 입력 필드가 어떤 역할을 하는지 명시
• <h1~4>
  • <h1> 페이지 당 하나의 큰 제목에만 사용
  • <h2> 주요 섹션
  • <h3> 섹션 내 하위 섹션
• 대부분의 주요 컨텐츠
  • <section> 과 <article> 활용

WAI-ARIA (Web Accessibility Initiative’s Accessible Rich Internet Applications)

• HTML을 보충해 일반적으로 보조 기술이 알 수 없는 상호작용에 대한 정보를 제공
• 스크린리더 사용자가 조금 더 쉽게 브라우저를 읽게 돕기 위함
• 사용 방법
  • 태그에 role 속성을 활용해서 태그의 역할 지정Landmark Role HTML5 관련 요소

    role=”application”	동일한 역할의 요소 없음. 주로 <div> 요소와 같이 그룹 역할을 하는 요소로 대체할 수 있다.
    role=”banner”	동일한 역할의 요소 없음. 비슷한 의미로 <header> 사용 가능, <header role="banner">로 사용 시 1페이지에서 1개만 사용하기를 권장한다.
    role=”navigation”	<nav>와 동일하다. 다른 페이지 또는 페이지 내 특정 영역으로 이동하는 링크 콘텐츠 영역으로 주로 메인 메 뉴 및 서브 메뉴 등에 사용할 수 있다.
    role=”main”	<main>과 동일하다. 본문의 주요 콘텐츠 영역으로 한 페이지 내에 1개만 사용이 가능하며, <article>, <aside>, <footer> 요소의 하위 요소로 사용할 수 없다.
    role=”aside”	<aside>와 동일하다. 주요 컨텐츠와 연관이 적은 의미를 가진 영역이다.
    role=”form”	<form>과 동일하다. 폼과 관련된 요소의 모임을 표현하는 영역으로 서버에 전송될 수 있는 콘텐츠를 포함할 수 있다.
    role=”search”	동일한 역할의 요소 없음. 검색 역할을 담당하는 서식 영역을 의미하며 <div>또는 <form> 요소를 사용하는 것을 권장한다.
    role=”contentinfo”	동일한 역할의 요소 없음. <footer>와 비슷하나 <footer role="contentinfo">로 사용 시 한 페이지에 한 개의 <footer> 요소만 사용하는 것을 권장한다.
    role=”button”	p, span, div에서도 버튼 컨트롤로 사용된다는 것을 스크린리더에 인식시킬 수 있다. 가능하다면 button role보다 기본 html의 <button>, <input type="button">, <input type="submit">을 사용해야 한다. 기본 html 요소들은 추가 사용자 정의 없이도 키보드 포커스를 지원한다.
    role =”tablist”	탭 메뉴 등의 리스트임을 사용자에게 전달한다.
    role=”tab”	보조기기가 탭으로 인식 (버튼에 tab 역할을 주어, 메뉴를 컨트롤하는 의미를 추가하는 것이 가능하다.)
    role=”tabpanel”	보조기기가 탭 패널로 인식한다.
    role=”presentation”, role=”none”	semantic 의미를 요소와 그 자식요소로부터 제거하기 위해서 사용한다. 시각적으로 게시하는 용도의 요소에 적용한다. none은 최근에 나온 속성값으로 presentation과 같은 역할을 한다. 호환성 문제가 있을 수 있으니까 두개 다 기입해 주는것이 좋다.
    role=”group”	라디오 버튼과 같이 여러개의 옵션 중 한 가지를 선택 할 때, name 속성값에 같은 값을 넣어줘서 그룹화하더라도 스크린리더 사용자는 시각적으로 볼수있는 사용자와 달리 묶여있는 그룹이라는 것을 인식하기 어렵다. 이러한 경우 role=”group”를 부여하여 같은 그룹이라는 것을 인식시킨다.

  • 태그에 aria-label 속성을 활용해서 이름표
    • 브라우저가 스크린리더 사용자에게 전달해야 할 내용을 상황에 따라 개발자가 직접 적는다.
    • ex. aria-label="채팅창으로 이동"
• 주의 사항
  • 시맨틱 태그와 중복해서 사용하지 않는다. 시맨틱 태그 자체가 의미있는 태그이기 때문에 role은 붙일 필요가 없다.
  • role 속성이 없는 경우에 aria-label을 붙이지 않는다.
  • <div aria-label="펼치기"><i class="ico ico-arrow"></i></div> //x <div role="button" aria-label="펼치기"><i class="ico ico-arrow"></i></div> //o
  • aria가 사용된 모든 요소는 키보드로 제어할 수 있어야 한다.
    • role=”button” 이라면 tab으로 focus 한 후, enter 키나 return 키를 눌렀을 때, active 상태가 되어야 한다.

색상 대비와 텍스트 크기 조정

• 텍스트와 배경 사이 색상 대비가 최소 4.5:1 임을 권장
• 사용자가 텍스트 크기를 조정할 수 있도록 하는 방법
  • 사용자가 자신의 시각적 요구에 맞게 텍스트 크기를 조정할 수 있도록 CSS를 사용하여 상대적 단위(예: em, rem)로 텍스트 크기를 설정하는 것이 좋다.
• 웹 접근성을 위한 명도 대비를 자가진단점검할 수 있는 툴
• Colour Contrast Analyzer - TPGi

키보드 접근성과 포커스 관리

• 모든 인터랙티브 요소 (링크, 버튼, 폼, 필드 등) 가 키보드만으로 접근 가능하게 구성
• 사용자가 현재 포커스 맞춰진 곳이 어디인지 명확하게 알 수 있도록 스타일 지정
• 상호작용하는 태그인 <a> <input> <select> <button> 들은 기본적으로 키보드에 포커스가 잡힘.
  • 포커스를 주고 싶지 않다면? tabindex=-1 로 처리 가능
• 상호작용하지 않는 태그인 <div> <span> 등의 태그에도 포커스를 잡아주고 싶은 경우에는 tabindex 속성으로 포커스를 줄 수 있음
  • 포커스를 주고 싶다면? tabindex=0 로 처리 가능
  • tabindex의 값으로 준 양수값에 따라 순서를 지정할 수 있음 (tabindex="1", tabindex="2", tabindex="3", …, tabindex="0" 순으로 포커스가 이동)

참고 자료

https://deugdeugi.github.io/2023/08/08/aria.html

https://velog.io/@a_in/WAI-ARIA-role-aria-label