기사이러한 8가지 접근 가능한 설계 실수를 피하여 연민을 행동으로 옮기십시오

접근 가능한 디자인은 연령과 능력에 관계없이 모든 개인의 고유성을 존중합니다. 그것은 모든 사람이 당신과 같지 않다는 것을 인식하는 것에서 시작됩니다.

다양한 사용자에게 최상의 서비스를 제공하려면 모든 종류의 사람들을 이해하고 공감하는 것이 중요합니다. WCAG 2.0 AA 지침을 따르면 시각 장애 및 시각 장애, 청각 장애 및 청력 상실, 학습 장애, 인지 제한, 운동 제한, 언어 장애 또는 광과민성을 포함하여 보다 광범위한 장애가 있는 사람들이 콘텐츠에 액세스할 수 있습니다. 웹사이트를 방문하는 각 사용자에게 서비스를 제공하려면 다음 8가지 접근 가능한 디자인 실수를 피하세요.

1. 키보드 트랩

보조 기술을 사용하는 일부 사람들은 화면에 표시되는 동작에 의존합니다. 따라서 좋은 디자인은 탐색과 관련된 모든 콘텐츠가 표시되도록 합니다. 사용자가 콘텐츠를 이해하고 탐색에 대해 정보에 입각한 선택을 할 수 있도록 항목을 논리적으로(왼쪽 위에서 오른쪽 아래로) 주문해야 합니다.

팁:

• 주요 콘텐츠: 사용자가 주요 콘텐츠에 액세스하기 위해 최상위 탐색을 쉽게 건너뛸 수 있는 방법을 제공하는 것을 고려하십시오.
• UI 패턴: Toggle, Tabs, Tables, Modal Windows, ARIA 속성과 같은 일반적인 패턴의 의미를 따릅니다.
• 호버 사용: 호버 상태 뒤에 텍스트 또는 동작을 숨기지 마십시오. 키보드 전용 사용자가 콘텐츠/버튼이 존재하는지 볼 수 없는 경우 페이지를 탐색할 수 없습니다.

좋은 건너뛰기 링크 예제 #1

좋은 건너뛰기 링크 예제 #2

2. 불충분한 색상 대비

불충분한 색상 대비는 정보를 시각적으로 받아들이는 능력에 영향을 미칩니다. 텍스트를 읽을 수 있도록 텍스트와 배경 사이에 충분한 대비가 있는지 확인합니다. 텍스트와 텍스트의 배경 사이의 명암비는 최소 4.5:1이어야 합니다. 그러나 텍스트가 최소 24픽셀 또는 19픽셀 볼드체인 경우 최소는 3:1로 떨어집니다.

팁:

• 색상 팔레트: 기본 색상을 염두에 두십시오. 또한 색상을 선택할 때 색상 대비 요구 사항을 염두에 두십시오.
• 색상에만 의존하지 마십시오 . 의미를 전달하고 일관성을 유지하기 위해 모양, 색상 및 텍스트(혼합이 아닌)의 조합을 사용합니다. 색상을 쉽게 구별할 수 없는 사람들이 여전히 귀하의 콘텐츠를 이해할 수 있도록 최소한 두 개의 지표를 제공하십시오.
• 예외: 내용의 의미를 이해하는 데 필요하지 않거나 순수한 "장식"인 텍스트, 텍스트 이미지, 그림 및 로고.

불충분한 대비의 예

3. 이미지의 텍스트

읽기 위한 텍스트 이미지를 사용하지 마십시오. 이미지 기반 텍스트 프레젠테이션이 아닌 CSS로 스타일이 지정된 실제 텍스트를 사용합니다. 텍스트 이미지를 사용해야 하는 상황에서 대체 텍스트에는 이미지에 표시된 것과 동일한 텍스트가 포함되어야 합니다.

팁:

• 다이어그램, 차트, 테이블: 데이터 시각화에 실제 텍스트를 사용합니다. 실제 텍스트가 불가능한 경우 이미지가 전달하는 필수 정보의 텍스트 표현이 필수적입니다. 예: 긴 설명 또는 목록 보기.
• 예외: 좋은 설명 텍스트 대안이 있는 로고, 브랜딩 요소 및 그래픽.

이미지의 좋은 텍스트의 예

4. 숨겨진 포커스 상태

포커스 상태는 사용자가 현재 위치를 탐색하고 이해하는 데 도움이 됩니다. 절대 숨기지 마세요. 포커스 상태는 키보드 사용자에게 중요합니다. 페이지에서 자신이 어디에 있는지 이해하는 데 도움이 됩니다. 사이트를 테스트하려면 페이지를 탭핑하여 초점을 찾으십시오.

팁:

• 포커스 상태: 기본 포커스 상태를 제거하는 경우 브라우저에서 제공하는 것보다 더 잘 작동하는 것으로 교체해야 합니다.
• 입력 상태: 입력 내부에 초점을 맞출 때 레이블에 어떤 일이 발생하는지 고려하십시오.
• 페이지 작업: 작업 의 포커스 부작용을 명확하게 정의합니다.

숨겨진 포커스 상태

좋은 초점 상태

5. 혼란스러운 계층 구조

인지할 수 있는 콘텐츠와 프로그래밍 방식으로 결정할 수 있는 콘텐츠 간에 명확한 관계를 만듭니다. 의미적으로 의미가 있는 페이지를 디자인하여 개발자가 디자인에서 코드로 페이지를 번역할 수 있고 스크린리더가 올바른 읽기 순서를 결정할 수 있습니다.

팁:

• 의미: 양식에 필수 필드 및 레이블을 포함합니다. 열 머리글이 있는 디자인 테이블.
• 논리적 그룹화: 충분한 공간 또는 배경색을 사용하여 관련 요소를 그룹화합니다. 프로세스 다이어그램 또는 단계별 지침과 같은 정보를 순차적으로 제시합니다.
• 점진적 공개: 직접 조작을 위한 디자인. 적시에 적절한 것을 제시하십시오. 점진적인 공개를 실행하십시오.
• 길 찾기: 탐색을 위한 일관된 신호를 만듭니다. 제목을 사용하여 페이지 내에서 명확한 랜드마크를 만듭니다.
• 일관성: 같은 방식으로 동일한 것을 제시합니다.
• 차별화: 다양한 콘텐츠 유형을 차별화합니다.

잘못된 계층

좋은 계층

6. 과도한 인지 부하

이해하기 쉬운 정보를 명확하게 전달합니다. 주의력 결핍 과잉 행동 장애(ADHD), 자폐증 또는 자폐 스펙트럼 장애가 있는 사람들이 쉽게 소비할 수 있는 방식으로 정보를 디자인합니다.

팁:

• 간결함: 짧은 문장과 시각적 단서를 사용하여 정보를 분리하십시오. 예: 숫자나 글머리 기호를 사용하여 그룹을 나열합니다.
• 인지 부하 최소화: 적시에 적절한 위치에 정보를 제공하는 내러티브를 만듭니다. 쪼개질 수 있는 정보의 조밀한 단락을 제시하지 마십시오. 긴 줄 측정을 피하십시오.

7. 미분화 하이퍼링크

링크는 웹에서 가장 일반적인 요소 중 하나이며 종종 웹 사이트를 탐색하는 데 필수적입니다. 링크는 링크처럼 보여야 하며 다른 것은 없어야 합니다. 사용자는 링크처럼 보이지만 그렇지 않은 텍스트 문구나 그래픽을 클릭하려고 하면 좌절할 수 있습니다. 링크는 문맥에 맞지 않아야 합니다.

팁:

• 구체적으로 설명하기: 모호한 용어 대신 버튼에 대한 설명을 사용하여 결과를 예측할 수 있도록 합니다.
• 밑줄이 없는 링크: 링크 텍스트는 주변의 링크가 아닌 텍스트와 대비 비율이 3:1이어야 합니다.
• 색상에만 의존하지 마십시오: 링크는 마우스 호버와 키보드 포커스 모두에 "비색상 지정자"를 제시해야 합니다. 예: 그림자, 비율, 전환/변환, 색상 변경 또는 밑줄.

잘못된 하이퍼링크

좋은 하이퍼링크

8. 읽을 수 없는 타이포그래피

웹사이트에 있는 대부분의 정보는 텍스트를 통해 전달되므로 유형은 읽기 쉽고 읽을 수 있어야 합니다. 이를 통해 시력이 약한 사람들이 쉽게 캐릭터를 식별할 수 있습니다. 학습 장애가 있는 사람의 읽기 부담을 줄일 수 있습니다. 적당한 간격을 두고 깨끗하고 단순한 타이포그래피를 사용하십시오. 텍스트를 쉽게 읽을 수 있도록 편안한 커닝과 행간을 적용합니다.

팁

• 사용자에게 제어권 부여: 본문 크기를 더 작은 글꼴 크기로 변경하여 사용자가 자신의 읽기 경험을 조정하는 것을 막지 마십시오. 글꼴 크기를 100%로 설정하고 상대적 크기를 사용하여 헤드라인 간의 계층 구조를 설정하면 됩니다. 텍스트는 200%에서도 읽을 수 있어야 합니다.
• 밑줄, 기울임꼴 및 대문자 줄이기: 이러한 문자 형식은 인식하고 읽기가 더 어렵습니다.
• 긴 형식의 텍스트를 왼쪽으로 정렬: 눈이 따라갈 수 있도록 선형 경로로 일관된 레이아웃을 만듭니다.

100% 확대

텍스트 크기를 조정합니다. 시각 장애인 및 저시력 사용자가 페이지에 액세스할 수 있고 사용할 수 있는지 확인합니다. 텍스트 크기를 조정하고 페이지의 모든 항목이 제대로 작동하는지 확인합니다. 200% 확대/축소가 될 때까지 반복합니다. 간단해 보이죠? 그것은이다.

타이포그래피를 확인하는 단계:

1. 브라우저를 열고 텍스트 크기를 200%로 조정합니다. 보기를 클릭하고 확대를 선택한 다음 확대(Ctrl/Cmd ++)를 클릭하여 텍스트 크기를 확대합니다.
2. 화면의 내용이 어떻게 반응했는지 살펴보십시오. 페이지의 모든 콘텐츠는 여전히 읽을 수 있어야 하며 기능이 손실되어서는 안 됩니다.
3. 상호 작용이 계속 작동하는지, 텍스트가 겹치는지, 중요한 텍스트가 잘렸는지, 또는 텍스트가 잘렸는지 확인하십시오.

200% 확대

팁:

1. 브라우저를 열고 텍스트 크기를 200%로 조정합니다. 보기를 클릭하고 확대를 선택한 다음 확대(Ctrl/Cmd ++)를 클릭하여 텍스트 크기를 확대합니다.
2. 화면의 내용이 어떻게 반응했는지 살펴보십시오. 페이지의 모든 콘텐츠는 여전히 읽을 수 있어야 하며 기능이 손실되어서는 안 됩니다.
3. 상호 작용이 계속 작동하는지, 텍스트가 겹치는지, 중요한 텍스트가 잘렸는지 또는 텍스트가 잘렸는지 확인하십시오.

자원

미국에서 대략 8명 중 1명은 장애가 있습니다. 정의가 중등도 장애가 있는 사람들을 포함하도록 확장되면 그 숫자는 거의 5분의 1로 증가합니다.

이렇게 많은 청중을 수용하지 못하면 웹사이트가 비즈니스에 미칠 수 있는 긍정적인 영향이 제한됩니다. 브랜드가 사람들에게 공감하고 믿음을 주는 능력은 말할 것도 없습니다. 최대한 많은 브라우저와 가능한 한 많은 사람들이 사용할 수 있는 액세스 가능한 웹사이트를 구축하면 비즈니스에 도움이 될 수 있지만 이는 단순히 옳은 일이기도 합니다. 그래서 우리는 주제에 대한 몇 가지 다른 리소스를 모았습니다.

• 기업이 웹 접근성을 고려하는 것이 중요한 이유를 알아보십시오(기업 소송을 피하십시오).
• 웹 접근성의 중요성에 대한 Solving for B° 팟캐스트를 시청하십시오.

색상 대비

• 웹 AIM ​​대비 검사기
• 색상 대비 검사기

구조

• 제목 지도 Chrome 확장 프로그램
• A11Y 프로젝트 패턴 라이브러리

크레딧

• A11Y 프로젝트
• w3.org- WCAG 2.0
• w3.org- 표준 및 개요
• 사용성.org
• IBM의 접근성 연구
• 카네기 피츠버그 박물관Disney.com 좋은 계층 구조