접근성과 포용성을 위한 디자인

“접근성은 설계 단계에서 해결됩니다.” 이것은 다니엘 나(Daniel Na)와 그의 팀이 컨퍼런스에 참석하면서 몇 번이고 반복해서 들었던 구절입니다. 접근성을 고려하여 디자인한다는 것은 사용자의 요구 사항을 포함하는 것을 의미합니다. 여기에는 대상 사용자, 대상 인구 통계 외부의 사용자, 장애가 있는 사용자, 심지어 다른 문화와 국가의 사용자가 포함됩니다. 이러한 요구 사항을 이해하는 것이 더 좋고 접근 가능한 경험을 만드는 열쇠입니다.

접근성을 위해 디자인할 때 가장 일반적인 문제 중 하나는 디자인해야 하는 요구 사항을 아는 것입니다. 의도적으로 사용자를 제외하도록 설계한 것이 아니라 "우리가 모르는 것을 모른다"는 것입니다. 따라서 접근성에 관해서는 알아야 할 것이 많습니다.

수많은 사용자와 그들의 요구를 이해하는 방법은 무엇입니까? 그들의 요구가 우리의 디자인에서 충족되도록 어떻게 보장할 수 있습니까? 이러한 질문에 답하기 위해 다양한 렌즈를 통해 디자인을 보는 비판적 분석 기법을 적용하는 것이 도움이 된다는 것을 알게 되었습니다.

"좋은 [접근 가능한] 디자인은 다양한 관점 또는 렌즈에서 [디자인]을 볼 때 발생합니다."

— 게임 디자인의 예술: 렌즈의 책

렌즈는 "주제를 고려하거나 조사할 수 있는 좁은 필터"입니다. 종종 예술 작품, 문학 작품 또는 영화를 조사하는 데 사용되는 렌즈는 우리에게 세계관을 버리고 다른 맥락을 통해 세상을 보도록 요청합니다.

예를 들어, 역사의 렌즈를 통해 예술을 보는 것은 "당시의 사회적, 정치적, 경제적, 문화적 및/또는 지적 풍토"를 이해하도록 요청합니다. 이를 통해 우리는 세상의 영향이 예술가에게 어떤 영향을 미쳤는지, 그리고 그것이 작품과 그 메시지를 어떻게 형성했는지 더 잘 이해할 수 있습니다.

접근성 렌즈는 디자인의 다양한 측면이 사용자의 요구에 어떻게 영향을 미치는지 이해하는 데 사용할 수 있는 필터입니다. 각 렌즈는 디자인 프로세스 전반에 걸쳐 스스로에게 물어볼 일련의 질문을 제시합니다. 이러한 렌즈를 사용하면 사용자의 요구 사항을 더욱 포괄적으로 수용할 수 있으므로 모든 사람이 보다 쉽게 ​​접근할 수 있는 사용자 경험을 디자인할 수 있습니다.

접근성의 렌즈 는 다음과 같습니다.

• 애니메이션과 효과의 렌즈
• 오디오 및 비디오 렌즈
• 컬러렌즈
• 통제의 렌즈
• 글꼴의 렌즈
• 이미지와 아이콘의 렌즈
• 키보드 렌즈
• 레이아웃의 렌즈
• 물질적 정직의 렌즈
• 가독성의 렌즈
• 구조의 렌즈
• 시간의 렌즈

모든 렌즈가 모든 디자인에 적용되는 것은 아님을 알아야 합니다. 일부는 모든 디자인에 적용할 수 있지만 일부는 상황에 따라 다릅니다. 한 디자인에서 가장 잘 작동하는 것이 다른 디자인에서는 작동하지 않을 수 있습니다.

각 렌즈에서 제공하는 질문은 발생할 수 있는 문제를 이해하는 데 도움이 되는 도구일 뿐입니다. 항상 그렇듯이 사용자와 함께 디자인을 테스트하여 사용 가능하고 액세스할 수 있는지 확인해야 합니다.

애니메이션 및 효과의 렌즈

효과적인 애니메이션은 페이지와 브랜드에 생기를 불어넣고 사용자가 집중하도록 안내하며 사용자의 방향을 정하는 데 도움이 될 수 있습니다. 하지만 애니메이션은 양날의 검입니다. 애니메이션을 오용하면 혼란을 일으키거나 주의가 산만해질 뿐만 아니라 일부 사용자에게는 잠재적으로 치명적일 수도 있습니다.

빠른 깜박임 효과(1초에 세 번 이상 깜박임으로 정의됨) 또는 고강도 효과 및 패턴은 '광과민성 간질'로 알려진 발작을 유발할 수 있습니다. 광과민증은 또한 두통, 메스꺼움 및 현기증을 유발할 수 있습니다. 광과민성 간질이 있는 사용자는 웹을 사용할 때 무언가가 발작을 일으킬 수 있다는 것을 알 수 없으므로 매우 주의해야 합니다.

시차 또는 모션 효과와 같은 다른 효과로 인해 일부 사용자는 전정 감도로 인해 어지러움을 느끼거나 현기증을 경험할 수 있습니다. 전정계는 사람의 균형과 운동 감각을 제어합니다. 이 시스템이 제대로 작동하지 않으면 현기증과 메스꺼움을 유발합니다.

“내부 자이로스코프가 제대로 작동하지 않는 세상을 상상해 보십시오. 술에 취한 것과 매우 흡사하게 사물이 저절로 움직이는 것 같고, 발 아래에서 결코 안정적이지 않은 것 같으며, 감각이 몸보다 빠르거나 느리게 움직입니다.”

— 전정 장애에 대한 입문서

지속적인 애니메이션이나 모션은 사용자, 특히 집중하기 어려운 사용자에게 주의를 산만하게 할 수도 있습니다. GIF는 우리의 시선이 움직임에 집중되기 때문에 특히 문제가 많습니다. 따라서 끊임없이 업데이트되거나 움직이는 모든 것에 쉽게 주의가 산만해집니다.

이것은 애니메이션이 나쁘고 사용하지 말아야 한다는 말은 아닙니다. 대신 애니메이션을 사용하는 이유와 보다 안전한 애니메이션을 디자인하는 방법을 이해해야 합니다. 일반적으로 말해서, 짧은 거리를 커버하고, 다른 움직이는 물체(스크롤 포함)의 방향과 속도와 일치하고, 화면 크기에 비해 상대적으로 작은 애니메이션을 디자인해야 합니다.

또한 사용자의 경험을 충족할 수 있는 컨트롤이나 옵션을 제공해야 합니다. 예를 들어 Slack을 사용하면 애니메이션 이미지나 이모티콘을 전역 설정과 이미지별로 숨길 수 있습니다.

애니메이션 및 효과의 렌즈 를 사용하려면 다음 질문에 답하십시오.

• 발작을 일으킬 수 있는 영향이 있습니까?
• 모션 사용으로 인해 현기증이나 현기증을 유발할 수 있는 애니메이션이나 효과가 있습니까?
• 지속적으로 움직이거나 깜박이거나 자동 업데이트되어 주의를 산만하게 할 수 있는 애니메이션이 있습니까?
• 애니메이션이나 효과의 중지, 일시 중지, 숨기기 또는 빈도 변경을 위한 컨트롤이나 옵션을 제공할 수 있습니까?

오디오 및 비디오 렌즈

비디오 및 오디오 자동 재생은 꽤 성가실 수 있습니다. 사용자 집중을 깨뜨릴 뿐만 아니라 사용자가 문제가 되는 미디어를 추적하고 음소거 또는 중지하도록 강제합니다. 일반적으로 미디어를 자동 재생하지 마십시오.

“자동 재생을 드물게 사용하십시오. 자동 재생은 강력한 참여 도구가 될 수 있지만 원하지 않는 사운드가 재생되거나 원하지 않는 비디오 재생의 결과로 불필요한 리소스 사용(예: 데이터, 배터리)을 감지하는 경우 사용자를 짜증나게 할 수도 있습니다."

— 구글 자동재생 가이드라인

이제 "하지만 백그라운드에서 비디오를 자동 재생하지만 음소거 상태로 유지하면 어떻게 될까요?"라고 묻고 있을 것입니다. 비디오를 배경으로 사용하는 것이 오늘날의 웹 디자인에서 점점 증가하는 추세일 수 있지만 배경 비디오는 GIF 및 끊임없이 움직이는 애니메이션과 같은 문제로 인해 주의를 산만하게 할 수 있습니다. 따라서 비디오를 일시 중지하거나 비활성화하는 컨트롤이나 옵션을 제공해야 합니다.

컨트롤과 함께 동영상에는 스크립트 및/또는 자막이 있어야 사용자가 자신에게 가장 적합한 방식으로 콘텐츠를 사용할 수 있습니다. 시각 장애가 있거나 비디오를 보는 대신 읽기를 원하는 사용자는 스크립트가 필요하고 비디오를 들을 수 없거나 듣기를 원하지 않는 사용자는 자막이 필요합니다.

오디오 및 비디오 렌즈 를 사용하려면 다음 질문에 답하십시오.

• 자동 재생으로 인해 짜증날 수 있는 오디오나 비디오가 있습니까?
• 자동 재생되는 오디오 또는 비디오를 중지, 일시 중지 또는 숨기는 컨트롤을 제공할 수 있습니까?
• 비디오에 스크립트 및/또는 자막이 있습니까?

컬러렌즈

색상은 디자인에서 중요한 역할을 합니다. 색상은 감정, 느낌 및 아이디어를 불러일으킵니다. 색상은 또한 브랜드의 메시지와 인식을 강화하는 데 도움이 될 수 있습니다. 그러나 사용자가 색상을 볼 수 없거나 다르게 인식하면 색상의 힘이 사라집니다.

색맹은 대략 남성 12명 중 1명, 여성 200명 중 1명에게 영향을 미칩니다. Deuteranopia(적록 색맹)는 남성의 약 6%에 영향을 미치는 가장 흔한 색맹입니다. 적록 색맹 사용자는 일반적으로 빨강, 녹색 및 주황색을 황색으로 인식합니다.

색상 의미는 해외 사용자에게도 문제가 됩니다. 색상은 다른 국가와 문화에서 다른 것을 의미합니다. 서양 문화에서 빨강은 일반적으로 부정적인 경향과 녹색의 긍정적 경향을 나타내는 데 사용되지만 동양과 아시아 문화에서는 그 반대입니다.

색상과 그 의미는 문화적 차이나 색맹으로 인해 손실될 수 있으므로 항상 비색상 식별자를 추가해야 합니다. 아이콘이나 텍스트 설명과 같은 식별자는 문화적 차이를 연결하는 데 도움이 될 수 있으며 패턴은 색상을 구분하는 데 효과적입니다.

과포화 색상, 고대비 색상 및 노란색만 일부 사용자, 특히 자폐 스펙트럼에 있는 사용자에게는 불편하고 불안할 수 있습니다. 사용자가 편안함을 유지할 수 있도록 이러한 유형의 색상이 많이 집중되지 않도록 하는 것이 가장 좋습니다.

전경색과 배경색의 대비가 좋지 않으면 시력이 좋지 않은 사용자, 저가형 모니터를 사용하는 사용자 또는 직사광선 아래에 있는 사용자가 보기 어렵습니다. 키보드를 사용하는 사용자에게 사용되는 모든 텍스트, 아이콘 및 모든 초점 표시기는 배경색에 대한 최소 명암비 4.5:1을 충족해야 합니다.

또한 Windows 고대비 모드의 다양한 설정에서 디자인과 색상이 잘 작동하는지 확인해야 합니다. 일반적인 함정은 특정 고대비 모드 배경에서 텍스트가 보이지 않게 된다는 것입니다.

색상 렌즈 를 사용하려면 다음 질문에 답하십시오.

• 디자인에서 색을 빼면 어떤 의미를 잃게 될까요?
• 색상을 사용하지 않고 어떻게 의미를 전달할 수 있습니까?
• 사용자가 과도하게 자극을 받거나 불편하게 만들 수 있는 과포화 또는 고대비 색상이 있습니까?
• 모든 텍스트, 아이콘 및 초점 표시기의 전경색과 배경색이 4.5:1의 명암비 지침을 충족합니까?

통제의 렌즈

'대화형 콘텐츠'라고도 하는 컨트롤은 버튼, 링크, 입력 또는 이벤트 리스너가 있는 HTML 요소와 같이 사용자가 상호 작용할 수 있는 모든 UI 요소입니다. 너무 작거나 너무 가까운 컨트롤은 사용자에게 많은 문제를 일으킬 수 있습니다.

떨림이 있는 사용자나 나이로 인해 손재주가 떨어지는 사용자와 같이 포인터로 정확하지 않은 사용자는 작은 컨트롤을 클릭하기 어렵습니다. 예를 들어, 체크박스와 라디오 버튼의 기본 크기는 나이든 사용자에게 문제를 일으킬 수 있습니다. 대신 클릭할 수 있는 레이블이 제공되더라도 모든 사용자가 그렇게 할 수 있다는 것을 아는 것은 아닙니다.

너무 가까이 있는 컨트롤은 터치 스크린 사용자에게 문제를 일으킬 수 있습니다. 손가락은 크고 정확하게 하기 어렵습니다. 실수로 잘못된 컨트롤을 건드리면 좌절감을 유발할 수 있습니다. 특히 해당 컨트롤이 당신을 멀어지게 하거나 맥락을 잃게 만드는 경우에는 더욱 그렇습니다.

다른 컨트롤 내부에 중첩된 컨트롤도 터치 오류의 원인이 될 수 있습니다. HTML 사양에서 허용되지 않을 뿐만 아니라 원하는 컨트롤 대신 실수로 부모 컨트롤을 선택하기 쉽습니다.

사용자에게 컨트롤을 정확하게 선택할 수 있는 충분한 공간을 제공하기 위해 권장되는 컨트롤의 최소 크기는 34 x 34 기기 독립 픽셀이지만 Google은 최소 48 x 48 픽셀을 권장하는 반면 WCAG 사양은 최소 44 x 44 픽셀을 권장합니다. 이 크기에는 컨트롤에 있는 패딩도 포함됩니다. 따라서 컨트롤은 시각적으로 24 x 24픽셀일 수 있지만 모든 면에 10픽셀의 패딩을 추가하면 최대 44 x 44픽셀이 됩니다.

또한 터치 오류를 줄이기 위해 컨트롤을 충분히 멀리 배치하는 것이 좋습니다. Microsoft는 최소 8픽셀의 간격을 권장하는 반면 Google은 컨트롤의 간격을 최소 32픽셀 이상으로 권장합니다.

컨트롤에는 텍스트 레이블도 표시되어야 합니다. 스크린 리더는 컨트롤이 무엇을 하는지 알기 위해 텍스트 레이블을 요구할 뿐만 아니라 모든 사용자가 컨트롤의 목적을 더 잘 이해하는 데 텍스트 레이블이 도움이 되는 것으로 나타났습니다. 이는 양식 입력 및 아이콘에 특히 중요합니다.

통제의 렌즈 를 사용하려면 다음 질문에 답하십시오.

• 누군가가 만질 수 있을 만큼 크지 않은 컨트롤이 있습니까?
• 잘못된 컨트롤을 만지기 쉬운 컨트롤이 너무 가까이 있습니까?
• 다른 컨트롤 또는 클릭 가능한 영역 내부에 컨트롤이 있습니까?
• 모든 컨트롤에 텍스트 레이블이 표시됩니까?

글꼴의 렌즈

웹 초기에 우리는 9에서 14픽셀 사이의 글꼴 크기로 웹 페이지를 디자인했습니다. 모니터가 상대적으로 알려진 화면 크기를 가졌기 때문에 이것은 잘 작동했습니다. 우리는 브라우저 창이 일정하고 변경할 수 없는 것으로 생각하여 설계했습니다.

오늘날의 기술은 20년 전과 매우 다릅니다. 오늘날 브라우저는 작은 시계에서 거대한 4K 화면에 이르기까지 모든 크기의 장치에서 사용할 수 있습니다. 더 이상 고정 글꼴 크기를 사용하여 사이트를 디자인할 수 없습니다. 글꼴 크기는 디자인 자체만큼 반응적이어야 합니다.

글꼴 크기는 반응형이어야 할 뿐만 아니라 사용자가 글꼴 크기, 줄 높이 또는 문자 간격을 편안한 읽기 수준으로 사용자 지정할 수 있도록 디자인이 유연해야 합니다. 많은 사용자가 더 나은 읽기 경험을 제공하는 데 도움이 되는 맞춤 CSS를 사용합니다.

글꼴 자체는 읽기 쉬워야 합니다. 한 글꼴이 다른 글꼴보다 더 읽기 쉬운지 궁금할 수 있습니다. 문제의 진실은 글꼴이 실제로 가독성에 영향을 미치지 않는다는 것입니다. 대신 글꼴 가독성에 중요한 역할을 하는 것은 글꼴 스타일입니다.

장식 또는 필기체 글꼴 스타일은 많은 사용자에게 읽기 어렵지만 난독증이 있는 사용자에게는 특히 문제가 됩니다. 작은 글꼴 크기, 기울임꼴 텍스트 및 모든 대문자 텍스트도 사용자에게 어렵습니다. 전반적으로 더 큰 텍스트, 더 짧은 줄 길이, 더 긴 줄 높이 및 증가된 문자 간격은 모든 사용자가 더 나은 읽기 경험을 제공하는 데 도움이 될 수 있습니다.

글꼴의 렌즈 를 사용하려면 다음 질문에 답하십시오.

• 사용자가 읽기 편한 수준으로 글꼴을 수정할 수 있을 만큼 디자인이 유연합니까?
• 글꼴 스타일이 읽기 쉬운가요?

이미지 및 아이콘의 렌즈

“한 장의 사진이 천 마디 말보다 낫다”는 말이 있습니다. 그래도 안보이는 그림은 말이 안되지 않나요?

특정 의미나 느낌을 전달하기 위해 이미지를 디자인에 사용할 수 있습니다. 복잡한 아이디어를 단순화하는 데 사용할 수도 있습니다. 이미지의 경우에 관계없이 스크린 리더를 사용하는 사용자는 이미지의 의미를 알려야 합니다.

디자이너는 이미지가 전달하는 의미나 정보를 가장 잘 이해합니다. 따라서 이 정보로 디자인에 주석을 달아 나중에 누락되거나 잘못 해석되지 않도록 해야 합니다. 이것은 이미지의 대체 텍스트를 만드는 데 사용됩니다.

이미지를 설명하는 방법은 전적으로 컨텍스트 또는 정보를 설명하는 텍스트 정보가 이미 얼마나 많이 사용 가능한지에 달려 있습니다. 또한 이미지가 장식용인지, 의미를 전달하는지, 텍스트가 포함되어 있는지에 따라 다릅니다.

"당신은 그림이 어떻게 생겼는지 거의 설명하지 않고 대신 그림에 포함된 정보를 설명합니다."

— 호환되는 대체 텍스트를 위한 5가지 황금 규칙

이미지를 설명하는 방법을 아는 것은 어려울 수 있으므로 결정할 때 도움이 되는 편리한 결정 트리가 있습니다. 일반적으로 이미지가 장식적이거나 이미 이미지 정보를 설명하는 주변 텍스트가 있는 경우 추가 정보가 필요하지 않습니다. 그렇지 않으면 이미지의 정보를 설명해야 합니다. 이미지에 텍스트가 포함된 경우 설명에서도 텍스트를 반복합니다.

설명은 간결해야 합니다. 두 개 이하의 문장을 사용하는 것이 좋지만 가능하면 하나의 간결한 문장을 사용하는 것이 좋습니다. 이를 통해 사용자는 긴 설명을 듣지 않고도 이미지를 빠르게 이해할 수 있습니다.

예를 들어 스크린 리더용으로 이 이미지를 설명한다면 뭐라고 말하시겠습니까?

우리는 이미지 자체가 아니라 이미지의 정보를 기술하므로 그것을 설명하는 다른 주변 컨텍스트가 없기 때문에 설명은 Vincent van Gogh의 Starry Night 일 수 있습니다. 그림의 스타일이나 그림이 어떻게 보이는지에 대한 설명을 넣으면 안 됩니다.

복잡한 차트와 같이 이미지 정보에 긴 설명이 필요한 경우 해당 설명을 대체 텍스트에 넣으면 안 됩니다. 대신 대체 텍스트에 대해 짧은 설명을 사용한 다음 다른 페이지에 대한 캡션이나 링크로 긴 설명을 제공해야 합니다.

이렇게 하면 사용자는 여전히 가장 중요한 정보를 빠르게 얻을 수 있지만 원하는 경우 더 자세히 알아볼 수 있습니다. 이미지가 차트인 경우 이미지의 텍스트와 마찬가지로 차트의 데이터를 반복해야 합니다.

디자인 중인 플랫폼에서 사용자가 이미지를 업로드할 수 있는 경우 사용자가 이미지와 함께 대체 텍스트를 입력할 수 있는 방법을 제공해야 합니다. 예를 들어, Twitter는 사용자가 트윗에 이미지를 업로드할 때 대체 텍스트를 작성할 수 있도록 합니다.

이미지 및 아이콘 렌즈 를 사용하려면 다음 질문에 답하십시오.

• 이미지에 볼 수 없는 경우 손실될 정보가 포함되어 있습니까?
• 어떻게 비시각적인 방식으로 정보를 제공할 수 있습니까?
• 이미지가 사용자에 의해 제어되는 경우 대체 텍스트 설명을 입력할 수 있는 방법을 제공할 수 있습니까?

키보드의 렌즈

키보드 접근성은 접근성 디자인의 가장 중요한 측면 중 하나이지만 가장 간과되는 부분이기도 합니다.

사용자가 마우스 대신 키보드를 사용하는 데에는 여러 가지 이유가 있습니다. 스크린 리더를 사용하는 사용자는 키보드를 사용하여 페이지를 읽습니다. 떨림이 있는 사용자는 마우스보다 정확도가 더 높기 때문에 키보드를 사용할 수 있습니다. 고급 사용자라도 키보드가 더 빠르고 효율적이기 때문에 키보드를 사용합니다.

키보드를 사용하는 사용자는 일반적으로 탭 키를 사용하여 순서대로 각 컨트롤을 탐색합니다. 탭 순서에 대한 논리적인 순서는 사용자가 다음에 키를 누를 때 어디로 이동하는지 아는 데 크게 도움이 됩니다. 서양 문화에서 이것은 일반적으로 왼쪽에서 오른쪽, 위에서 아래로 의미합니다. 예상치 못한 탭 순서로 인해 사용자는 길을 잃고 초점이 어디로 갔는지 미친 듯이 검색해야 합니다.

순차 탭 순서는 원하는 컨트롤 앞에 있는 모든 컨트롤을 통해 탭해야 함을 의미합니다. 해당 컨트롤이 수십 또는 수백 개의 키 입력 거리에 있는 경우 사용자에게 진정한 골칫거리가 될 수 있습니다.

가장 중요한 사용자 흐름을 탭 순서의 맨 위에 가깝게 만듦으로써 사용자가 보다 효율적이고 효과적일 수 있도록 도울 수 있습니다. 그러나 이것이 항상 가능하지도 않고 실용적이지도 않습니다. 이러한 경우 특정 흐름이나 콘텐츠로 빠르게 이동할 수 있는 방법을 제공하면 여전히 효율적일 수 있습니다. 이것이 "콘텐츠로 건너뛰기" 링크가 유용한 이유입니다.

이에 대한 좋은 예는 사용자가 사이트의 특정 섹션으로 이동할 수 있는 키보드 탐색 메뉴를 제공하는 Facebook입니다. 이렇게 하면 사용자가 원하는 페이지 및 콘텐츠와 상호 작용하는 속도가 크게 빨라집니다.

디자인을 탭핑할 때 포커스 스타일은 항상 표시되어야 하며 그렇지 않으면 사용자가 쉽게 길을 잃을 수 있습니다. 예기치 않은 탭 순서와 마찬가지로 포커스 표시기가 좋지 않으면 사용자가 현재 포커스가 있는 항목을 알지 못하고 페이지를 스캔해야 합니다.

기본 초점 표시기의 모양을 변경하면 사용자 경험이 개선될 수 있습니다. 좋은 초점 표시기는 초점을 표시하기 위해 색상에만 의존하지 않으며(Lens of Color) 사용자가 쉽게 찾을 수 있도록 충분히 구별되어야 합니다. 예를 들어 비슷한 색상의 파란색 버튼 주위에 있는 파란색 초점 링은 초점이 맞춰져 있는지 식별하기 위해 시각적으로 뚜렷하지 않을 수 있습니다.

이 렌즈는 키보드 접근성에 중점을 두고 있지만 사용자가 마우스 없이 웹사이트와 상호 작용할 수 있는 모든 방식에 적용된다는 점에 유의해야 합니다. 마우스 스틱, 스위치 액세스 버튼, 한 모금 및 퍼프 버튼, 시선 추적 소프트웨어와 같은 장치는 모두 페이지에서 키보드로 액세스할 수 있어야 합니다.

키보드 접근성을 개선하여 광범위한 사용자가 사이트에 더 잘 액세스할 수 있도록 합니다.

키보드 렌즈 를 사용하려면 다음 질문에 답하십시오.

• 디자인에 가장 적합한 키보드 탐색 순서는 무엇입니까?
• 키보드 사용자가 가능한 가장 빠른 방법으로 원하는 것을 얻을 수 있는 방법은 무엇입니까?
• 초점 표시기가 항상 가시적이고 시각적으로 뚜렷합니까?

레이아웃의 렌즈

레이아웃은 사이트의 유용성에 많은 기여를 합니다. 따라하기 쉬운 레이아웃을 사용하면 콘텐츠를 쉽게 찾을 수 있어 사용자에게 큰 차이를 만듭니다. 레이아웃에는 사용자에게 의미 있고 논리적인 순서가 있어야 합니다.

CSS Grid의 등장으로 사용 가능한 공간에 따라 레이아웃을 보다 의미 있게 변경할 수 있는 것이 그 어느 때보다 쉬워졌습니다. 그러나 시각적 레이아웃을 변경하면 페이지의 구조적 레이아웃에 의존하는 사용자에게 문제가 발생합니다.

구조적 레이아웃은 화면 판독기와 키보드를 사용하는 사용자가 사용하는 것입니다. 시각적 레이아웃이 변경되지만 기본 구조적 레이아웃이 아닌 경우 이러한 사용자는 탭 순서가 더 이상 논리적이지 않기 때문에 혼동될 수 있습니다. 시각적 레이아웃을 변경해야 하는 경우 키보드를 사용하는 사용자가 순차적이고 논리적인 탭 순서를 유지하도록 구조적 레이아웃을 변경해야 합니다.

레이아웃은 휴대전화에서 편안하게 볼 수 있도록 가로 스크롤 막대 없이 최소 320픽셀로 크기를 조정할 수 있고 유연해야 합니다. 레이아웃은 또한 더 나은 읽기 경험을 위해 글꼴 크기를 늘려야 하는 사용자를 위해 400%(가로 스크롤 막대 없이)까지 확대할 수 있을 만큼 충분히 유연해야 합니다.

화면 돋보기를 사용하는 사용자는 관련 콘텐츠가 서로 가까이 있을 때 이점이 있습니다. 화면 돋보기는 전체 레이아웃의 작은 보기만 사용자에게 제공하므로 관련이 있지만 멀리 떨어져 있거나 상호 작용이 발생한 곳에서 멀리 떨어진 변경 내용을 찾기 어렵고 눈에 띄지 않을 수 있습니다.

레이아웃의 렌즈 를 사용하려면 다음 질문에 답하세요.

• 레이아웃에 의미 있고 논리적인 순서가 있습니까?
• 작은 화면에서 보거나 400%로 확대한 레이아웃은 어떻게 됩니까?
• 서로 밀접하게 관련되어 있거나 사용자 상호 작용으로 인해 변경되는 콘텐츠입니까?

물질 정직의 렌즈

재료 정직성은 재료 자체에 정직해야 하며 다른 재료의 대체물로 사용되어서는 안 된다는 건축 설계 가치입니다. 즉, 콘크리트는 콘크리트처럼 보여야 하며 벽돌처럼 보이도록 칠하거나 조각해서는 안 됩니다.

재료의 정직성은 각 재료의 고유한 특성과 특성을 소중히 여기고 기념합니다. 재료의 정직함을 추구하는 건축가는 각 재료를 언제 사용해야 하는지, 변색되지 않고 어떻게 사용해야 하는지 알고 있습니다.

물질적 정직은 어렵고 빠른 규칙이 아닙니다. 연속체에 있습니다. 모든 가치와 마찬가지로, 당신이 그것들을 이해할 때 그것들을 깨는 것이 허용됩니다. 속담에 따르면, 그들은 "실제 규칙보다 "지침"이라고 부르는 것에 가깝습니다.

웹 디자인에 적용할 때 재료 정직성은 한 요소 또는 구성 요소가 마치 다른 요소 또는 구성 요소인 것처럼 보이거나 동작하거나 기능하지 않아야 함을 의미합니다. 그렇게 하면 사용자를 속이고 혼란을 일으킬 수 있습니다. 이에 대한 일반적인 예는 링크처럼 보이는 버튼이나 버튼처럼 보이는 링크입니다.

링크와 버튼은 동작과 어포던스가 다릅니다. 링크는 Enter 키로 활성화되며 일반적으로 다른 페이지로 이동하며 오른쪽 클릭 시 특수한 상황에 맞는 메뉴가 있습니다. 버튼은 스페이스 키로 활성화되며 주로 현재 페이지에서 상호 작용을 트리거하는 데 사용되며 컨텍스트 메뉴가 없습니다.

링크가 버튼처럼 보이도록 스타일이 지정되거나 그 반대의 경우 사용자는 해당 링크가 보이는 대로 동작하지 않고 작동하지 않기 때문에 혼동될 수 있습니다. "버튼"이 예기치 않게 사용자를 이동시키는 경우 프로세스에서 데이터가 손실되면 좌절할 수 있습니다.

“얼핏 보기에는 모든 것이 괜찮아 보이지만 자세히 들여다보면 그렇지 않습니다. 이러한 웹 사이트가 다양한 브라우저에서 실제 사용으로 스트레스 테스트를 받자마자 외관이 무너집니다.”

— 탄력적인 웹 디자인

이것이 가장 문제가 되는 곳은 링크와 버튼의 스타일이 동일하고 서로 옆에 배치될 때입니다. 둘 사이에 구별할 것이 없기 때문에 사용자는 탐색하지 않을 것이라고 생각했을 때 실수로 탐색할 수 있습니다.

구성 요소가 예상과 다르게 작동하면 키보드나 화면 판독기를 사용하는 사용자에게 쉽게 문제가 발생할 수 있습니다. 자동 완성 메뉴 이상의 자동 완성 메뉴가 그러한 예입니다.

자동 완성은 사용자가 입력하는 나머지 단어를 제안하거나 예측하는 데 사용됩니다. 자동 완성 메뉴를 사용하면 모든 옵션을 표시할 수 없는 경우 많은 옵션 목록에서 선택할 수 있습니다.

자동 완성 메뉴는 일반적으로 입력 필드에 연결되며 입력 필드 내부에 포커스를 유지하면서 위쪽 및 아래쪽 화살표 키로 탐색됩니다. 사용자가 목록에서 옵션을 선택하면 해당 옵션이 입력 필드의 텍스트를 무시합니다. 자동 완성 메뉴는 텍스트의 목록을 의미합니다.

자동 완성 메뉴가 더 많은 동작을 취하기 시작할 때 문제가 발생합니다. 목록에서 옵션을 선택할 수 있을 뿐만 아니라 편집, 삭제, 섹션 확장 또는 축소도 가능합니다. 자동 완성 메뉴는 더 이상 선택 가능한 텍스트의 단순한 목록이 아닙니다.

추가된 동작은 더 이상 위쪽 및 아래쪽 화살표를 사용하여 옵션을 선택할 수 있다는 의미가 아닙니다. 이제 각 옵션에는 둘 이상의 작업이 있으므로 사용자는 한 차원이 아닌 두 차원을 횡단할 수 있어야 합니다. 이것은 키보드를 사용하는 사용자가 구성 요소를 작동하는 방법에 대해 혼란스러워할 수 있음을 의미합니다.

스크린 리더는 이러한 행동 변화를 이해하는 데 도움이 되는 쉬운 방법이 없기 때문에 가장 큰 고통을 받습니다. 비표준 수단을 사용하여 스크린 리더에서 메뉴에 액세스할 수 있도록 하려면 많은 작업이 필요합니다. 따라서 하위 수준 또는 액세스할 수 없는 경험이 될 수 있습니다.

이러한 문제를 피하려면 사용자와 디자인에 정직한 것이 가장 좋습니다. 두 개의 고유한 동작(자동 완성 메뉴 및 편집 및 삭제 기능)을 결합하는 대신 두 개의 개별 동작으로 두십시오. 자동 완성 메뉴를 사용하여 사용자 이름을 자동 완성하고 다른 구성 요소나 페이지에서 사용자를 편집 및 삭제할 수 있습니다.

물질적 정직의 렌즈 를 사용하려면 다음 질문에 답하십시오.

• 디자인은 사용자에게 정직한가?
• 다른 요소처럼 행동하거나, 보이거나, 기능하는 요소가 있습니까?
• 고유한 동작을 단일 구성 요소로 결합하는 구성 요소가 있습니까? 그렇게 하면 구성 요소가 실질적으로 부정직합니까?

가독성의 렌즈

몇 단락이나 페이지만 집어들고 책을 집어 들었는데 텍스트가 너무 읽기 어려워 포기하고 싶었던 적이 있습니까? 읽기 어려운 내용은 정신적으로 힘들고 피곤합니다.

문장 길이, 단락 길이 및 언어의 복잡성은 모두 텍스트의 가독성에 기여합니다. 복잡한 언어는 사용자, 특히 인지 장애가 있거나 언어에 유창하지 않은 사용자에게 문제를 일으킬 수 있습니다.

단순하고 간단한 언어를 사용하는 것과 함께 각 단락이 단일 아이디어에 초점을 맞추도록 해야 합니다. 단일 아이디어로 된 단락은 기억하고 소화하기 쉽습니다. 단어 수가 적은 문장도 마찬가지입니다.

내용의 가독성에 기여하는 또 다른 요소는 줄의 길이입니다. 이상적인 줄 길이는 종종 45~75자로 인용됩니다. 줄이 너무 길면 초점을 잃고 다음 줄로 올바르게 이동하기가 어렵고 줄이 너무 짧으면 사용자가 너무 자주 점프하여 눈의 피로를 유발합니다.

“다음 줄로 넘어갈 때 잠재의식이 활성화됩니다. 모든 새 줄이 시작될 때 독자는 초점을 맞추지만 이 초점은 줄이 지속되는 동안 점차 사라집니다."

— 타이포그래피: 디자인 매뉴얼

또한 제목, 목록 또는 이미지로 콘텐츠를 분리하여 독자에게 정신적 휴식을 제공하고 다양한 학습 스타일을 지원해야 합니다. 제목을 사용하여 정보를 논리적으로 그룹화하고 요약합니다. 제목, 링크, 컨트롤 및 레이블은 사용자가 이해할 수 있도록 명확하고 설명적이어야 합니다.

가독성의 렌즈 를 사용하려면 다음 질문에 답하십시오.

• 언어가 단순하고 단순합니까?
• 각 단락이 하나의 아이디어에 초점을 맞추고 있습니까?
• 긴 단락이나 끊어지지 않은 긴 텍스트 블록이 있습니까?
• 모든 제목, 링크, 컨트롤 및 레이블이 명확하고 설명이 포함되어 있습니까?

구조의 렌즈

레이아웃의 렌즈에서 언급했듯이 구조적 레이아웃은 키보드를 사용하는 스크린 리더와 사용자가 사용하는 것입니다. 레이아웃의 렌즈가 시각적 레이아웃에 초점을 맞춘 반면, 구조의 렌즈는 구조적 레이아웃 또는 기본 HTML 및 디자인의 의미에 초점을 맞춥니다.

디자이너는 디자인의 구조적 레이아웃을 작성할 수 없습니다. 그렇다고 해서 디자인이 궁극적으로 어떻게 구성될지에 대해 생각하지 못하게 해서는 안 됩니다. 그렇지 않으면 디자인으로 인해 화면 판독기에서 액세스할 수 없는 환경이 될 수 있습니다.

싱글 엘리미네이션 토너먼트 브래킷을 위한 디자인을 예로 들어 보겠습니다.

사용자가 스크린 리더를 사용하여 이 디자인에 액세스할 수 있는지 어떻게 알 수 있습니까? 구조와 의미를 이해하지 못하면 이해하지 못할 수도 있습니다. 이 디자인은 아마도 스크린 리더를 사용하는 사용자에게 액세스할 수 없는 경험을 초래할 것입니다.

그 이유를 이해하려면 먼저 스크린 리더가 페이지와 콘텐츠를 순차적으로 읽는다는 것을 이해해야 합니다. 즉, 토너먼트의 첫 번째 열에 있는 모든 이름을 읽고 두 번째 열에 있는 모든 이름을 읽은 다음 세 번째, 마지막 열에 있는 이름을 읽습니다.

"조지, 프레드, 라이너스, 루시, 잭, 질, 프레드, 생강, 조지, 루시, 잭, 생강, 조지, 생강, 생강."

무작위로 보이는 이름의 목록만 있다면 토너먼트 결과를 어떻게 해석하시겠습니까? 누가 토너먼트에서 우승했는지 말할 수 있습니까? 아니면 누가 게임 6을 이겼습니까?

더 이상 작업할 것이 없기 때문에 스크린 리더를 사용하는 사용자는 결과에 대해 약간 혼란스러워할 것입니다. 시각적 디자인을 이해하려면 사용자에게 구조적 디자인에 대한 더 많은 정보를 제공해야 합니다.

즉, 디자이너는 화면 판독기가 페이지의 HTML 요소와 상호 작용하는 방식을 알아야 경험을 향상시키는 방법을 알 수 있습니다.

• 랜드마크 요소 (머리글, 탐색, 기본 및 바닥글)
  Allow a screen reader to jump to important sections in the design.
• Headings ( h1 → h6 )
  Allow a screen reader to scan the page and get a high level overview. Screen readers can also jump to any heading.
• Lists ( ul and ol )
  Group related items together, and allow a screen reader to easily jump from one item to another.
• Buttons
  Trigger interactions on the current page.
• Links
  Navigate or retrieve information.
• Form labels
  Tell screen readers what each form input is.

Knowing this, how might we provide more meaning to a user using a screen reader?

To start, we could group each column of the tournament into rounds and use headings to label each round. This way, a screen reader would understand when a new round takes place.

Next, we could help the user understand which players are playing against each other each game. We can again use headings to label each game, allowing them to find any game they might be interested in.

By just adding headings, the content would read as follows:

“__Round 1, Game 1__, George, Fred, __Game 2__, Linus, Lucy, __Game 3__, Jack, Jill, __Game 4__, Fred, Ginger, __Round 2, Game 5__, George, Lucy, __Game 6__, Jack, Ginger, __Round 3__, __Game 7__, George, Ginger, __Winner__, Ginger.”

This is already a lot more understandable than before.

The information still doesn't answer who won a game though. To know that, you'd have to understand which game a winner plays next to see who won the previous game. For example, you'd have to know that the winner of game four plays in game six to know who advanced from game four.

We can further enhance the experience by informing the user who won each game so they don't have to go hunting for it. Putting the text “(winner)” after the person who won the round would suffice.

We should also further group the games and rounds together using lists. Lists provide the structural semantics of the design, essentially informing the user of the connected nodes from the visual design.

If we translate this back into a visual design, the result could look as follows:

Since the headings and winner text are redundant in the visual design, you could hide them just from visual users so the end visual result looks just like the first design.

“If the end result is visually the same as where we started, why did we go through all this?” 물어볼 수 있습니다.

The reason is that you should always annotate your design with all the necessary structural design requirements needed for a better screen reader experience. This way, the person who implements the design knows to add them. If you had just handed the first design to the implementer, it would more than likely end up inaccessible.

To use the Lens of Structure , ask yourself these questions:

• Can I outline a rough HTML structure of my design?
• How can I structure the design to better help a screen reader understand the content or find the content they want?
• How can I help the person who will implement the design understand the intended structure?

Lens Of Time

Periodically in a design you may need to limit the amount of time a user can spend on a task. Sometimes it may be for security reasons, such as a session timeout. Other times it could be due to a non-functional requirement, such as a time constrained test.

Whatever the reason, you should understand that some users may need more time in order finish the task. Some users might need more time to understand the content, others might not be able to perform the task quickly, and a lot of the time they could just have been interrupted.

“The designer should assume that people will be interrupted during their activities”

— The Design of Everyday Things

Users who need more time to perform an action should be able to adjust or remove a time limit when possible. For example, with a session timeout you could alert the user when their session is about to expire and allow them to extend it.

To use the Lens of Time , ask yourself this question:

• Is it possible to provide controls to adjust or remove time limits?

Bringing It All Together

So now that you've learned about the different lenses of accessibility through which you can view your design, what do you do with them?

The lenses can be used at any point in the design process, even after the design has been shipped to your users. Just start with a few of them at hand, and one at a time carefully analyze the design through a lens.

Ask yourself the questions and see if anything should be adjusted to better meet the needs of a user. As you slowly make changes, bring in other lenses and repeat the process.

By looking through your design one lens at a time, you'll be able to refine the experience to better meet users' needs. As you are more inclusive to the needs of your users, you will create a more accessible design for all your users.

Using lenses and insightful questions to examine principles of accessibility was heavily influenced by Jesse Schell and his book “The Art of Game Design: A Book of Lenses.”