훌륭한 디자인이 웹사이트 접근성에 미치는 영향

광범위한 접근성 분야의 출발점을 찾고 계십니까? 더 많은 사용자가 디지털 제품을 사용할 수 있도록 하여 디지털 제품을 개선하기 위해 디자인 프로세스에 구현할 수 있는 실제 사례와 도구를 탐구합니다.

접근성이란 무엇입니까?

액세스 가능한 웹사이트를 통해 다양한 사용자가 원활한 방식으로 웹사이트의 콘텐츠에 참여할 수 있습니다. UI 또는 UX 관점에서 주제에 접근하든 다양한 청중에게 적합한 고품질 제품을 만드는 데 중점을 둡니다.

이 다양한 청중은 “영구적, 일시적 또는 상황적 장애를 겪고 있는 모든 사람으로 확장됩니다. 예를 들어 한쪽 팔만 있는 것은 영구적인 상태이고, 팔을 다친 것은 일시적이며, 한 팔에 아기를 안는 것은 상황에 따라 다릅니다. 각 경우에 사용자는 한 손으로만 작업을 완료할 수 있습니다." (Avinash Kaur, 2018).

접근성이 왜 중요한가요?

디자이너로서 상황, 능력 또는 맥락에 관계없이 모든 사용자가 액세스할 수 있는 방식으로 디자인하는 것은 우리의 책임입니다. 그 결과 웹은 인지 장애, 시각 장애, 신체 장애를 가진 모든 사람을 포용하는 공간이 될 수 있습니다.

액세스 가능한 웹 사이트를 만드는 데 많은 예산이나 변경이 필요하지 않습니다. 추가적인 기능이나 콘텐츠가 필요하지 않기 때문에 디자인 프로젝트 초기에 교육과 인식을 통해 접근성을 확보할 수 있습니다.

비즈니스에도 틀림없이 중요합니다. 연구에 따르면 액세스 가능한 웹 사이트는 더 나은 검색 결과를 제공하고, 더 많은 청중에게 도달하고, SEO 친화적이며, 더 빠른 다운로드 시간을 갖고, 우수한 코딩 관행을 장려하고, 항상 더 나은 사용성을 제공합니다.

접근성을 어떻게 달성합니까?

특정 조정을 수행하고 프레임워크를 따라 다양한 능력, 연령 및 장치 경험 수준에 맞게 디자인해야 합니다.

접근성은 디지털 제품에 맞게 지속적으로 발전하는 독립된 분야입니다. 그러나 같은 방식으로 소프트웨어 솔루션도 성장하고 있습니다. 즉, 이 주제의 모든 내용을 다룰 수는 없지만 이 기사가 유용하다고 생각되면 2부를 할 수 있습니다!

우리는 5가지 큰 영역에 대해 자세히 알아볼 것입니다.

1. 색상 대비
2. 대체 텍스트
3. 초점 상태
4. 양식
5. 타이포그래피

색상 대비

텍스트와 배경 사이에 충분한 색상 대비가 있는지 확인하면 시력에 어려움을 겪는 사용자에게 도움이 됩니다. 이는 예상보다 많은 수의 사용자에게 영향을 미치며 종종 문제로 무시됩니다. 그러나 남성 12명 중 1명은 색맹이고 다른 많은 사람들은 시력이 좋지 않거나 맹인입니다.

우선 접근성 지침에 따르면 색상이 정보를 전달하는 유일한 방법이 되어서는 안 됩니다. 즉, 색상을 다르게 인식하고 색상 기반 지침을 놓칠 수 있는 사용자를 위한 추가 신호가 있어야 합니다.

텍스트와 배경 사이의 적절한 대비를 유지하기 위해 따라야 할 적절한 비율은 최소 4.5:1입니다. 이를 통해 시력이 좋지 않거나 색맹인 사용자가 이 둘을 구분할 수 있습니다.

4.5:1의 명암비는 적합성 수준 AA(A, AA 및 AAA의 세 가지 수준 중)를 따르지만 글꼴 크기와 달성하려는 적합성 수준에 따라 변경됩니다. 더 큰 글꼴은 유형이 18pt(또는 굵게는 14pt)인 경우 3:1의 더 작은 명암비를 필요로 합니다.

이러한 최소 비율은 로고나 브랜드 이름 안에 있는 텍스트에는 적용되지 않지만 이 편리한 도구를 사용하여 직접 대비 비율을 확인하는 데 유용합니다.

대체 텍스트

화면 판독기를 사용하여 웹에 액세스하는 사용자의 경우 표시되는 콘텐츠가 항상 올바르게 전달되는 것은 아닙니다. 대체(대체) 텍스트는 화면 판독기가 페이지에 있는 이미지를 사용자에게 알리기 위해 사용하는 것입니다.

이것은 대체 텍스트를 점자, 오디오 설명으로 변환하거나 텍스트를 시각적으로 읽음으로써 수행할 수 있습니다. 즉, 이미지를 볼 수 없는 사람들을 위해 이미지에서 무슨 일이 일어나고 있는지 정확하게 설명하는 것이 중요합니다.

때로는 대체 텍스트를 추가할 필요가 없을 수도 있습니다. 예를 들어, 이미지를 둘러싸고 있는 맥락적 지표가 충분하거나 이미지가 미적 기능 외에 다른 기능을 하지 않을 수 있습니다.

초점 상태

당신은 아마 깨닫지 못한 채 이미 초점 표시기에 익숙할 것입니다. 포커스 상태는 링크, 메뉴, 버튼 및 양식 필드와 같은 요소가 선택될 때 나타나는 (종종) 파란색 윤곽선입니다.

키보드를 사용할 때 사용자가 현재 집중하고 있는 요소를 알려줍니다. 종종 이러한 지표는 보기 흉하거나 목적에 도움이 되지 않는 것처럼 보이지만 실제로는 매우 중요합니다. 많은 사용자가 키보드만 사용하도록 제한되어 있으며 화면 판독기를 사용하는 시각 장애인도 페이지 탐색에 도움이 되는 초점 표시기가 필요합니다.

포커스 표시기는 아주 적은 노력으로 페이지 탐색을 명확하고 액세스할 수 있도록 하는 간단한 방법이지만 사용자에게 큰 차이를 줍니다. 적절한 색상을 사용하여 브랜드에 매끄럽게 연결할 수 있습니다. 요소가 눈에 띄도록 대조만 하면 됩니다.

양식

양식은 누구에게나 복잡할 수 있지만 추가 접근성 문제가 있는 사람들은 양식이 너무 단순하고 불분명할 때 종종 어려움을 겪을 수 있습니다. 다음은 접근성 문제를 해결하기 위해 해결해야 하는 몇 가지 일반적인 항목입니다.

• 레이블 – 필드 외부의 텍스트가 아닌 레이블로 자리 표시자 텍스트를 사용하면 사용자가 입력을 시작할 때 텍스트가 사라지므로 혼란을 야기합니다. 미니멀리즘이나 미학을 선호하는 사용자에게 중요한 지침을 생략하는 것은 피해야 할 주요 오류입니다.
• 테두리 – 인지 장애가 있는 사용자에게는 텍스트 입력 주변의 테두리처럼 단순한 것이 중요하므로 클릭해야 할 위치가 명확합니다.
• 추가 지침 – 양식은 디자인을 깔끔하게 정리하기 위해 미니멀리스트 접근 방식을 사용하는 경우가 많지만, 이는 사용성과 그에 따른 접근성을 저해합니다.
• 오류 메시지 – 이는 여러 요소로 표시되어야 하며 일반적으로 색상이 사용되지만 이 오류 외에 기호나 텍스트를 통해 표시해야 합니다.
• 검토 – 양식은 제출 전에 사용자가 정보를 수정할 수 있도록 검토 기간을 허용해야 합니다.

타이포그래피

정보가 복잡하지 않고 한 공간에 너무 많을 때 정보를 더 쉽게 소화할 수 있습니다. 이것은 접근 가능한 웹사이트에도 적용됩니다. 앞서 언급했듯이 글꼴 크기는 명암비에 대한 최소 요구 사항을 변경할 수 있지만 글꼴 크기는 10pt 이하로 내려가서는 안 됩니다.

보시다시피 9pt로 읽기가 어렵습니다.

텍스트 줄과 개별 단어 사이의 공백을 늘리면 시각 장애가 있거나 난독증이 있는 사용자에게 도움이 될 수 있습니다. 다음과 같은 최소 간격을 통해 해당 사용자의 요구 사항을 충족할 수 있습니다.

• 문자 간격: x0.12 글꼴 크기
• 단어 간격: x0.16 글꼴 크기
• 줄 간격: x1.5 글꼴 크기
• 단락 간격: x2 글꼴 크기

결론

놀랍게도 이러한 작은 변화가 접근성에 큰 차이를 만들 수 있습니다. 웹 사이트를 웹 콘텐츠 접근성 지침에 맞게 만드는 데 많은 예산과 많은 시간이 필요하지는 않지만 사용자의 경험을 극적으로 변화시켜 비즈니스를 향상시킬 수 있습니다.

이러한 제안을 디자인 프로세스에 추가하는 것은 제2의 천성이 될 수 있으며 더 접근 가능한 웹 사이트의 미래를 위한 길을 열 수 있습니다. 이는 디자이너인 우리에게 달려 있습니다.

크리에이티브에 도움이 필요하면 주저하지 말고 저희에게 연락하십시오.