접근성

페이지가 다양한 화면 크기에 반응하도록 허용하는 것은 가능한 한 많은 사용자가 웹사이트에 액세스할 수 있도록 하는 한 가지 방법일 뿐입니다. 이러한 기타 요인도 염두에 둬야 합니다.

색각 이상

사람마다 색상을 다르게 인식합니다. 적색맹이 있는 사람은 빨간색을 고유한 색으로 인식하지 못합니다. 제2색맹에서는 녹색이 빠집니다. 청황색맹이 있다면 파란색입니다.

일부 도구는 서로 다른 색깔 비전을 가진 사람들에게 색 구성표가 어떻게 표시되는지에 대한 일반적인 아이디어를 제공합니다.

Firefox의 접근성 탭에는 시뮬레이션이라는 드롭다운이 있고 옵션 목록과 함께 표시됩니다.

</ph> <ph type="x-smartling-placeholder"></ph> <ph type="x-smartling-placeholder">

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% 부풀려 있는 웹사이트를 방문하는 사용자는 소형 화면 기기에서 사이트를 방문하는 사용자와 동일한 레이아웃을 사용하게 됩니다.

</ph> <ph type="x-smartling-placeholder">

키보드 탐색

일부 사용자는 웹페이지를 탐색할 때 마우스나 트랙패드를 사용하지 않습니다. 키보드는 페이지를 탐색하는 또 다른 방법으로, 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는 Accessible Rich Internet Applications의 약자입니다. 사용할 수 있는 적합한 HTML 요소가 없을 때 어휘를 통해 의미론적 정보를 제공할 수 있습니다.

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

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

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

실제 사용자를 대상으로 테스트하면 가정할 수 있는 상황을 잘 파악할 수 있습니다. 다음 모듈에서는 사람들이 웹사이트와 상호작용하는 다양한 방식에 대해 알아봅니다. 이러한 방식은 짐작하기가 매우 쉬운 영역이기도 합니다.

이해도 확인

접근성에 관한 지식 테스트