접근성

페이지가 다양한 화면 크기에 반응하도록 허용하는 것은 가능한 한 많은 사용자가 웹사이트에 액세스할 수 있도록 하는 한 가지 방법일 뿐입니다. 이와 같은 다른 요소들도 고려해야 합니다.

색약

사람마다 색상을 인식하는 방식이 다릅니다. 제1색맹 환자는 빨간색을 고유한 색으로 인식하지 않습니다. 제2색맹이 있는 경우 녹색이 없습니다. 제3색맹 환자에게는 파란색입니다.

일부 도구를 사용하면 내 색 구성표가 다양한 색맹인 사용자에게 어떻게 표시되는지 대략적으로 알 수 있습니다.

Firefox의 접근성 탭에는 옵션 목록이 있는 시뮬레이션 드롭다운이 있습니다.

Chrome DevTools의 렌더링 탭을 사용하면 시각 장애를 에뮬레이션할 수 있습니다.

이는 브라우저별 도구입니다. 운영체제 수준에서 다양한 비전 유형을 에뮬레이션할 수도 있습니다.

Mac의 경우 다음으로 이동합니다.

1. 시스템 환경설정
2. 접근성
3. 디스플레이
4. 색상 필터
5. 색상 필터 사용 설정

옵션 중 하나를 선택합니다.

일반적으로 색상에만 의존하여 서로 다른 요소를 구분하는 것은 좋지 않습니다. 예를 들어 링크 주변 텍스트와 다른 색상을 만들 수 있으며 그렇게 해야 합니다. 그러나 링크에 밑줄을 표시하거나 링크를 굵게 표시하는 등 다른 스타일 지정 표시기도 적용해야 합니다.

a {
  color: red;
}

a {
  color: red;
  font-weight: bold;
}

색상 대비

일부 색상 조합은 문제를 일으킬 수 있습니다. 전경 색상과 배경 색상 간의 대비가 충분하지 않으면 텍스트를 읽기 어려워집니다. 낮은 색상 대비는 웹에서 가장 일반적인 접근성 문제 중 하나이지만, 다행히 디자인 프로세스 초기에 바로잡을 수 있습니다.

다음은 텍스트와 배경 색상의 대비율을 테스트하는 데 사용할 수 있는 몇 가지 도구입니다.

• tota11y는 브라우저의 툴바에 추가할 수 있는 북마크입니다.
• VisBug는 모든 주요 데스크톱 브라우저에서 사용할 수 있는 브라우저 확장 프로그램입니다.
• Firefox의 접근성 검사기에서 시각적 대비 문제가 있는지 확인할 수 있습니다.
• Chrome DevTools로 저대비 텍스트를 찾아 수정할 수도 있습니다.
• Microsoft Edge 브라우저에서는 색상 선택 도구를 사용하여 텍스트 색상 대비를 테스트할 수 있습니다.

CSS에서 항상 color와 background-color를 함께 선언하는 것이 좋습니다. 배경 색상이 브라우저 기본값이 될 것이라고 가정하지 마세요. 사용자는 브라우저에서 사용하는 색상을 변경할 수 있습니다.

body {
  color: black;
}

body {
  color: black;
  background-color: white;
}

고대비

운영체제에서 고대비 모드를 사용하도록 설정하는 사용자도 있습니다. 사용 중인 운영체제에서 시도해 볼 수 있습니다.

Mac의 경우 다음으로 이동합니다.

1. 시스템 환경설정
2. 접근성
3. 디스플레이

대비 높이기 옵션을 선택합니다.

누군가 고대비 모드를 사용 설정했는지 감지하는 미디어 기능이 있습니다. prefers-contrast 미디어 기능에는 no-preference, less, more의 세 가지 값으로 쿼리할 수 있습니다. 이 정보를 사용하여 사이트의 색상 팔레트를 조정할 수 있습니다.

운영체제에서 반전 색상을 사용하도록 환경설정을 지정할 수도 있습니다.

Mac의 경우 다음으로 이동합니다.

1. 시스템 환경설정
2. 접근성
3. 디스플레이

색상을 반전하는 옵션을 선택합니다.

반전 색상을 사용하여 웹사이트를 탐색하는 사용자가 이해하기 쉬운지 확인합니다. 색상이 반전될 때 조정이 필요할 수 있으므로 상자 그림자에 주의하세요.

글꼴 크기

사용자는 브라우저에서 색상만 조정할 수 있는 것이 아니라 기본 글꼴 크기도 조정할 수 있습니다. 시력이 나빠지면 브라우저나 운영체제의 기본 글꼴 크기를 조정하면서 세월이 지나면서 글꼴 크기를 키울 수 있습니다.

상대적 글꼴 크기를 사용하여 이러한 설정에 대응할 수 있습니다. px 등의 단위를 사용하지 마세요. 대신 rem 또는 ch와 같은 상대 단위를 사용하세요.

브라우저에서 기본 텍스트 크기 설정을 변경해 보세요. 이 작업은 브라우저 환경설정에서 할 수 있습니다. 웹페이지를 확대하여 볼 수도 있습니다. 기본 글꼴 크기를 200%늘리면 웹사이트가 계속 작동하나요? 400%는요?

데스크톱 컴퓨터에서 내 웹사이트를 방문하는 사용자가 글꼴 크기가 400% 까지 올라가 있는 경우, 작은 화면 기기에서 내 사이트를 방문하는 사용자와 동일한 레이아웃이 사용됩니다.

키보드 탐색

모든 사용자가 마우스나 트랙패드를 사용하여 웹페이지를 탐색하는 것은 아닙니다. 키보드는 페이지를 탐색하는 또 다른 방법으로, tab 키가 특히 유용합니다. 사용자는 하나의 링크 또는 양식 입력란에서 다른 링크 또는 양식 입력란으로 빠르게 이동할 수 있습니다.

:hover 및 :focus 의사 클래스로 스타일이 지정된 링크는 사용자가 마우스나 트랙패드, 키보드를 사용하는지에 관계없이 이러한 스타일을 표시합니다. :focus-visible 의사 클래스를 사용하여 키보드 탐색에만 적용할 링크 스타일을 지정합니다. 이러한 스타일을 더 눈에 띄게 만들 수 있습니다.

a:focus,
a:hover {
  outline: 1px dotted;
}
a:focus-visible {
  outline: 3px solid;
}

사용자가 링크에서 링크로 또는 양식 필드에서 양식 필드로 탭할 때 이러한 요소는 문서 구조에 표시되는 순서대로 포커스가 맞춰집니다. 이는 시각적 순서와도 일치해야 합니다.

CSS order 속성과 관련하여 주의하세요. 이를 Flexbox 및 그리드와 함께 사용하여 요소를 HTML의 시각적 순서와 다른 시각적 순서로 배치할 수 있습니다. 이는 강력한 기능이지만 사용자가 키보드를 사용하는 데 혼란을 야기할 수 있습니다.

키보드의 tab 키를 사용하여 웹페이지를 테스트하여 탭 순서가 적절한지 확인합니다.

Firefox 브라우저 개발자 도구의 접근성 패널에는 탭 순서 표시 옵션이 있습니다. 이를 사용 설정하면 포커스 가능한 각 요소에 숫자가 오버레이됩니다.

움직임 감소

애니메이션과 모션은 웹 디자인에 생명을 불어넣는 훌륭한 방법입니다. 그러나 어떤 사람들에게는 이러한 움직임이 혼란을 야기하고 심지어 메스꺼움을 유발할 수도 있습니다.

사용자가 더 적은 모션을 선호하는지 전달하는 기능 쿼리가 있습니다. 이를 prefers-reduced-motion라고 합니다. CSS 전환 또는 애니메이션을 사용할 때마다 태그를 포함합니다.

a:hover {
  transform: scale(150%);
}
@media (prefers-reduced-motion: no-preference) {
  a {
    transition-duration: 0.4s;
    transition-property: transform;
  }
}

prefers-reduced-motion 미디어 쿼리는 특히 화면상의 움직임에 사용됩니다. prefers-reduced-motion의 영향을 받지 않아야 하는 요소 색상에서 전환을 사용하는 경우 불투명도와 크로스 페이드를 전환해도 됩니다. 모션을 줄였다고 해서 애니메이션이 없다는 의미는 아닙니다.

음성

사람들은 웹을 다른 방식으로 경험합니다. 모든 사용자가 화면에 웹사이트를 보는 것은 아닙니다. 스크린 리더와 같은 보조 기술은 정보 출력을 음성 단어로 변환합니다.

스크린 리더는 웹브라우저를 비롯한 모든 종류의 애플리케이션에서 작동합니다. 웹브라우저가 스크린 리더와 유용하게 통신하려면 현재 액세스 중인 웹페이지에 유용한 시맨틱 정보가 있어야 합니다.

앞서 아이콘 전용 버튼에 시력이 없는 사용자를 대상으로 버튼의 목적을 지정하는 속성을 포함해야 하는 방법을 알아봤습니다. 이는 강력한 기본 HTML의 중요성을 보여주는 한 가지 예에 불과합니다.

제목

<h1>, <h2>, <h3> 등의 제목을 현명하게 사용하세요. 스크린 리더는 이 제목을 사용하여 문서의 개요를 생성하고 단축키로 탐색할 수 있습니다.

<div class="heading-main">Welcome to my page</div>

<div class="heading-secondary">About me</div>

<div class="heading-tertiary">My childhood</div>

<div class="heading-secondary">About this website</div>

<div class="heading-tertiary">How this site was built</div>

<h1>Welcome to my page</h1>
  <h2>About me</h2>
    <h3>My childhood</h3>
  <h2>About this website</h2>
    <h3>How this site was built</h3>

구조

<main>, <nav>, <aside>, <header>, <footer> 등의 랜드마크 요소를 사용하여 페이지의 콘텐츠를 구조화하세요. 스크린 리더 사용자는 원하는 랜드마크로 바로 이동할 수 있습니다.

<div class="header">...</div>

<div class="navigation">...</div>

<div class="maincontent">...</div>

<div class="sidebar">...</div>

<div class="footer">...</div>

<header>...</header>
<nav>...</nav>
<main>...</main>
<aside>...</aside>
<footer>...</footer>

양식

모든 양식 입력란에 연결된 <label> 요소가 있는지 확인합니다. <label> 요소에 for 속성을 사용하고 양식 입력란에 상응하는 id 속성을 사용하여 라벨을 양식 입력란에 연결할 수 있습니다.

<span class="formlabel">Your name</span>
<input type="text">

<label for="name">Your name</label>
<input id="name" type="text">

이미지

항상 alt 속성을 사용하여 이미지의 텍스트 설명을 제공합니다.

<img src="dog.jpg">

<img src="dog.jpg" alt="A golden retriever sitting on the grass looking happy.">

이미지가 단순히 표현만을 위한 것이라면 alt 속성을 계속 포함해야 하지만 빈 값을 제공해도 됩니다.

<img src="texture.png">

<img src="texture.png" alt="">

제이크 아치볼드가 우수한 alt 텍스트 작성에 관한 기사를 게시했습니다.

링크

링크 내에 설명 텍스트를 제공하세요. '여기를 클릭하세요' 또는 '더보기'와 같은 문구를 사용하지 마세요.

<p>To find out more about our latest offers, <a href="/offers.html">click here</a>.</p>

<p>Find out more about <a href="/offers.html"> our latest offers</a>.</p>

ARIA

합리적인 시맨틱 HTML을 사용하면 스크린 리더와 같은 보조 기술 및 음성 어시스턴트와 같은 기타 오디오 출력에 더 쉽게 액세스할 수 있습니다.

해당하는 HTML 요소가 없는 일부 인터페이스 위젯(캐러셀, 탭, 아코디언 등) 이러한 작업은 HTML, CSS, JavaScript 및 ARIA를 조합하여 처음부터 빌드해야 합니다.

ARIA는 액세스 가능한 리치 인터넷 애플리케이션의 약자입니다. 사용 가능한 적절한 HTML 요소가 없을 때 어휘를 통해 의미론적 정보를 제공할 수 있습니다.

아직 HTML 요소로 사용할 수 없는 인터페이스 요소를 만들어야 하는 경우 ARIA를 숙지하세요.

JavaScript로 맞춤 기능을 많이 추가할수록 ARIA에 대해 더 많은 것을 이해할 수 있습니다. 기본 HTML 요소를 사용하는 경우 ARIA가 필요하지 않을 수 있습니다.

가능하면 실제 스크린 리더 사용자를 대상으로 테스트하세요. 이렇게 하면 사용자가 웹을 탐색하는 방식을 더 잘 이해할 수 있을 뿐만 아니라 접근성을 염두에 두고 디자인하는 데 도움이 될 것입니다.

실제 사람들로 테스트하는 것은 내가 세운 모든 가정을 노출할 수 있는 좋은 방법입니다. 다음 모듈에서는 사용자가 웹사이트와 상호작용하는 다양한 방식, 즉 가정하기가 매우 쉬운 영역에 대해 알아보겠습니다.

학습 내용 확인하기

접근성에 관한 지식 테스트