웹 접근성 101: 모두를 위한 디자인

웹 디자인은 접근성에 관한 것입니다. 대부분의 웹 디자이너는 청중 내에서 가장 많은 사람들을 위한 제품을 만드는 것을 목표로 하고, 최대의 사용자 유입을 생성하기 위해 디자인을 마치 그물처럼 던집니다.

그리고 그 디자인 원칙에 논리가 있기는 하지만, 그것은 다소 단순하고 보다 포괄적인 원칙을 가리고 있습니다. 대부분이 아닌 모든 사람을 위한 디자인입니다.

가능한 모든 사용자가 웹사이트를 즐기고 상호 작용하고 사용 가능한 정보와 데이터에 액세스할 수 있도록 콘텐츠를 최적화합니다. 이 관행에 참여하면 더 넓은 시장을 개발하고 고객 기반을 다양화하는 데 도움이 됩니다. 세계 인구의 15%가 어느 정도의 장애를 가지고 있습니다.

이들은 다른 사람들과 마찬가지로 인터넷을 자주 사용하고 디지털 통신 및 도구에 크게 의존하는 사람들입니다. 사용자가 훌륭한 경험을 즐길 수 있도록 웹사이트를 최적화하면 상호작용의 웹을 확장할 수 있습니다. 디자인에 포함하는 연습을 통해 종종 간과되는 수백만 명의 사람들에게 다가갈 수 있습니다.

접근성을 위한 디자인은 어렵지 않습니다. 모든 잠재적인 사용자를 단순하고 사려깊기만 하면 됩니다. 최대 접근성을 위해 웹사이트를 최적화하는 방법은 다음과 같습니다.

사용자 이해

청중을 아는 것은 모든 프로젝트에서 매우 중요하므로 시작하는 것이 가장 좋습니다. 사용자가 다양한 기능을 가진 개인을 포함할 수 있음을 이해하십시오. 일부 사용자는 청각 또는 시각 장애가 있을 수 있고, 다른 사용자는 발작 장애가 있을 수 있으며, 다른 사용자는 여전히 이동성 문제가 있을 수 있습니다.

가능한 모든 시나리오에 대해 디자인할 수는 없지만 시간을 내어 가능한 한 많이 생각한다면 디자인 지평을 넓힐 수 있습니다. 확장된 청중을 고려한 후 조사를 하십시오. 사례 연구를 읽고, 경험이 있는 친구와 이야기하고, 접근성 가이드를 참조하세요.

아마도 교육 분야에서 한 페이지를 가져와서 유니버설 디자인의 원칙이 좋은 참고 자료가 될 것입니다.

생각하는 UX

이제 미래의 사용자와 이해를 발전시켰으므로 그 이해를 사용자 경험(UX) 프레임워크에 적용하십시오. 이 단계는 사용자와 공감하고 이전에는 생각하지 못했던 것을 고려하는 데 도움이 됩니다. 또한 다양한 보조 기술 정의의 방향을 알려줍니다.

디자이너가 모든 주요 브라우저에서 웹사이트의 동작을 고려해야 하는 것처럼 보조 기술은 기능 체크리스트의 일부가 되어야 합니다. 때로는 웹 디자인의 가장 작은 변경조차도 장애인 사용자에게 새로운 문을 열 수 있습니다.

간단한 변화

예를 들어, 구현하기 가장 쉬운 변경은 강조 태그를 사용하는 방법입니다.

시각적으로 <b> 와 <strong> 사이에는 차이가 없으며 <i> 는 <em> 과 다르게 나타나지 않습니다. 그러나 장애인의 경우 이러한 태그는 사용자 경험을 크게 바꿀 수 있습니다.

그들은 동일하고 효과적으로 굵게 및 기울임꼴로 렌더링하지만 이러한 태그의 차이점은 기능입니다. 더 단순한 볼드체 및 이탤릭체 태그는 프리젠테이션(텍스트 렌더링 방식 변경)인 반면, 강력함 및 강조는 보조 기술에 대한 다른 음성 패턴을 나타냅니다.

그러나 모든 <b> 를 <strong> 으로 맹목적으로 바꾸는 것처럼 간단하지 않습니다. 예를 들어 많은 헤더가 대비를 위해 굵은 텍스트를 사용하지만 장애가 있는 사용자가 여기에서 <strong> 태그를 경험하는 것이 가장 좋지 않을 수 있습니다. "사용자가 전체 의미를 경험하기 위해 이 텍스트 를 다르게 말해야 합니까?"라고 생각하십시오. 그렇지 않은 경우 정말 필요한 경우가 아니면 <strong> 또는 <em> 을 삭제하는 것이 좋습니다.

이와 같은 미묘한 변경과 고려는 장애가 있는 사용자에게 큰 차이를 만들 수 있습니다. UX를 ​​다운그레이드하지 않고 업그레이드하는 것이 중요합니다.

시각 장애인을 위한 디자인

위의 조언은 이미 시각 장애인에게 도움이 되지만 시각 문제가 있는 모든 사람이 동일한 장애 수준이나 유형을 갖는 것은 아닙니다. 시력을 유지하는 사람들을 수용할 수 있는 옵션을 제공하는 것만큼이나 중요합니다.

다음 요소를 고려하십시오.

• 사용자가 글꼴을 확대할 수 있습니다. 대부분의 브라우저는 동의 여부에 관계없이 이 작업을 수행하지만 CSS가 준비되어 있으면 더 멋지게 보일 것입니다.
• 빨간색과 녹색 또는 파란색과 노란색과 같은 특정 색상 조합을 피하십시오. 대신 색상을 사용하여 접근성을 높이면서 전환율을 높이는 것이 어떻습니까?
• "대체 텍스트"의 코드. 대체 텍스트는 보조 기술로 읽을 수 있으며 페이지의 모든 그래픽을 설명할 수 있습니다.
• 잘 알려진 경우에도 약어로 마침표를 사용합니다. 스크린 리더가 정보를 처리하는 방식은 종종 음성적입니다. "Fibby" 대 FBI를 듣는다고 상상해 보세요.

시각 장애가 있는 사용자를 위한 요소를 통합하는 방법에 대한 자세한 내용은 미국 시각 장애인 재단을 확인하십시오.

청각 장애인을 위한 디자인

청각 장애인은 편의 시설이 더 적게 필요하지만 웹 사이트에서 비디오를 사용하는 최근 경향으로 인해 현명한 디자인 선택에 대한 필요성이 높아졌습니다. 따라서 웹사이트에 청각적 구성 요소가 포함되어 있는 경우 폐쇄 자막이나 수화 통역을 사용하십시오.

자동 자막을 사용하려는 유혹을 피하십시오. 자동 전사를 사용하여 처리된 임의의 비디오에 들러 의미가 없고 생산적일 수 있는 단어 번역을 확인하십시오.

특정 캡션 지침에 대해서는 전국 청각 장애인 협회(National Association of the Deaf)의 권장 사항을 여기에서 찾을 수 있습니다.

감광성 간질을 위한 디자인

비디오, 특히 자동 재생 기능을 사용하는 비디오의 일반적인 사용과 관련된 디자인 문제 중 하나는 감광성 간질이 있는 사용자를 둘러싸고 있습니다. 이러한 사용자는 스트로보 라이트 유형의 효과 또는 동영상에 의해 유발되는 발작을 경험할 수 있습니다. 웹 디자이너는 감광성 간질 분석 도구를 사용하여 콘텐츠가 발작을 유발할 가능성을 확인할 수 있습니다.

콘텐츠가 위험에 처한 것으로 식별되었지만 위험을 줄이기 위해 변경할 수 없는 경우 항상 가능성에 대해 경고하고 비디오를 자동으로 재생하지 마십시오. 경고가 표시되고 재생 버튼 근처에 있는지 확인합니다.

이동 장애를 위한 설계

일부 이동 장애는 미세 운동 제어의 완전한 상실에서 가벼운 떨림에 이르기까지 다양합니다. 어느 수준의 손상도 고려하지 않은 웹사이트에서 동일한 사용자 경험을 초래합니다.

• 사용자는 링크에 도달하기 위해 더 많은 노력을 기울여야 하며 빨리 지칠 수 있습니다.
• 사용자는 키보드 사용을 허용하지 않기 때문에 웹사이트를 탐색할 수 없습니다.
• 긴 페이지를 스크롤해야 하는 것은 "맨 위로 돌아가기" 또는 사용 가능한 건너뛰기 옵션이 없기 때문에 피로감을 줍니다.

터치 스크린이나 미세한 마우스 입력에 최적화된 사이트는 거동이 불편한 사람에게 더 심각한 결과를 초래할 수 있으며 사이트를 사용할 수 없게 만들 수 있습니다.

키보드를 사용하여 조작할 수 있는 탐색 및 페이지의 다른 섹션으로 사용자를 끌어들일 수 있는 빈번한 앵커 링크와 같은 디자인 요소를 통합하면 이러한 사용자에게 큰 도움이 될 수 있습니다.

"기본" 웹사이트 옵션 만들기

귀하의 디자인은 흠잡을 데 없고 상호작용적이며 눈에 띄며 공개 시장에서 사용할 수 있는 최신 트렌드를 사용하며 위에서 설명한 사용자는 거의 액세스할 수 없습니다.

그것이 웹 디자인처럼 들리면 사용자가 켜고 끌 수 있는 "단순한" 레이아웃을 만드는 것이 더 쉬운 대안이 될 수 있습니다. 이는 장애인 사용자 이상에게 호소력이 있습니다. 예를 들어 고대비 유발 편두통으로 고통받는 사용자의 경우 액세스하기 쉬운 토글이 있는 것이 고객이 되는 것과 3시간 동안의 편두통과 씨름하기 위해 떠나는 것의 차이가 될 수 있습니다.

여기서도 멈추지 마십시오. 구독 목록에 동일한 옵션을 적용하면 사용자가 이메일 마케팅을 받기 전에 기본 설정을 쉽게 편집할 수 있습니다.

다양한 사용자를 계속 이해하세요. 계속 생각하세요. 사용자를 더 많이 이해하고 공감할수록 접근하기 쉬운 UX 디자인이 될 것입니다. 누가 알아? 당신은 누군가의 세상을 바꿀 수도 있습니다.