서체

접근성 있는 콘텐츠를 만들고 디자인하는 것은 읽기 쉬운 글꼴을 선택하는 것 이상을 의미합니다. 접근 가능한 글꼴 패밀리를 사용하더라도 저시력, 인지, 언어, 학습 장애가 있는 사용자는 글꼴 변형, 크기, 간격, 커닝 등의 다른 요소로 인해 텍스트를 처리하는 데 어려움을 겪을 수 있습니다.

이 모듈에서는 콘텐츠의 포괄성을 높이고 더 많은 사용자에게 도달하기 위한 기본 디자인 고려사항을 살펴봅니다.

글꼴

문구 접근성에 큰 영향을 미칠 수 있는 주요 요소는 서체입니다. 서체와 스타일을 선택하는 방법에 따라 페이지 디자인의 성패가 좌우될 수 있습니다.

난독증, 주의력 결핍 과잉 행동 장애 (ADHD)와 같은 읽기, 학습, 주의 장애가 있는 사용자와 저시력 사용자는 모두 접근성 있는 서체를 사용하면 도움이 됩니다.

일반 서체 선택 접근 가능한 디자인을 가장 빠르게 만드는 방법은 일반 서체(Arial, Times New Roman, Calibri, Verdana 등)를 선택하는 것입니다.

장애가 있는 사용자를 대상으로 한 여러 서체 연구에 따르면 일반적인 서체는 흔하지 않은 서체에 비해 읽기 속도가 더 빠르고 이해 수준이 더 높습니다. 일반적인 서체가 다른 서체보다 본질적으로 접근성이 더 높은 것은 아니지만, 이러한 서체를 사용하거나 다루는 데 많은 경험이 있는 일부 장애인에게는 더 쉽게 읽을 수 있습니다.

일반적인 서체를 선택하는 것 외에도 화려하거나 손으로 쓴 서체, 사용할 수 있는 문자 대소문자가 하나뿐인 서체(예: 대문자만 사용)는 피해야 합니다. 필기체 디자인이나 기발한 모양, 얇은 선과 같은 예술적 특징이 있는 이러한 특수 서체는 보기에도 좋겠지만 일부 장애인은 일반적인 서체보다 읽기가 훨씬 더 어렵습니다.

문자 특성 및 케어닝

Serif와 Sans Serif 글꼴 중 어느 것이 더 읽기 쉬운가에 관한 연구는 확실하지 않지만 특정 숫자, 문자 또는 조합은 언어 기반 학습 및 인지 장애가 있는 사용자에게 혼동을 줄 수 있습니다. 이러한 유형의 장애가 있는 사용자의 경우 모든 문자와 숫자가 명확하게 정의되고 고유한 특성을 가져야 문자가 숫자와 혼동되지 않습니다.

읽기 쉬운 텍스트를 방해하는 일반적인 요소는 대문자 'I' (인도), 소문자 'l'(양상추), 숫자 '1'입니다. 마찬가지로 b/d, p/q, f/t, i/j, m/w, n/u와 같은 문자 쌍은 일부 리더에서 좌우 또는 위아래로 뒤집힐 수 있습니다.

글자 간격이나 케링이 너무 좁으면 가독성도 떨어집니다. 특히 문제가 되는 문자 쌍인 r/n 사이의 커닝에 특히 주의하세요. 그렇지 않으면 '실'이 '얌'으로 바뀌거나 '선미'가 '줄기'로 바뀌면서 문구의 의미가 완전히 달라질 수 있습니다.

Google Fonts와 같은 오픈소스 서체 모음은 다음 디자인에 가장 포용적인 서체를 선택하는 데 도움이 될 수 있습니다. Adobe 제품을 사용하는 경우 일부 Google Fonts를 포함하여 제조업체 파트너의 접근 가능한 글꼴 모음을 디자인에 직접 삽입할 수 있습니다.

다음 서체를 찾을 때는 다음 사항에 특히 주의하세요.

• 가능한 경우 일반적인 글꼴을 사용합니다.
• 정교하거나 필기한 글꼴과 대소문자가 하나만 있는 글꼴은 사용하지 마세요.
• 고유한 특성이 있는 서체를 선택하되 대문자 I, 소문자 l, 1에 특히 주의하세요.
• 특정 문자 조합이 서로 정확히 똑같은지 검토합니다.
• 특히 r과 n 글자 쌍 사이의 케어닝을 확인합니다.

글꼴 크기 및 서체 스타일

접근 가능한 글꼴 모음을 선택하는 것만으로 포용적인 콘텐츠를 만들 수 있다고 생각하는 경우가 많지만 글꼴 크기와 페이지에서 텍스트의 스타일을 지정하는 방법도 고려해야 합니다.

예를 들어 저시력 또는 색맹인 사용자가 텍스트가 너무 작으면 브라우저 확대/축소와 같은 AT를 사용하여 텍스트를 읽을 수 없습니다. 난독증이나 읽기 장애가 있는 사용자와 같은 다른 사용자는 기울임꼴 텍스트를 읽는 데 어려움을 겪을 수 있습니다. 스크린 리더는 굵게 및 기울임꼴과 같은 스타일 지정 방법을 무시하는 경우가 많으므로 시각장애인이나 저시력 사용자에게 이러한 스타일의 의도가 전달되지 않습니다.

h2 {font-size: 16px;}

h2 {font-size: 1rem;}

모든 사용자의 요구사항을 예측할 수 없으므로 웹사이트 및 웹 애플리케이션에 글꼴을 추가할 때는 다음 가이드라인을 고려하세요.

• 크기 조절을 허용하려면 기본 글꼴 크기를 상대 값(%, rem, em)으로 정의해야 합니다.
• 색상, 굵은 글꼴, 대문자, 기울임꼴과 같은 서체 변형 수를 제한하여 가독성을 높입니다. 대신 별표, 대시 또는 개별 단어 강조 표시와 같이 광고 문구에서 단어를 강조하는 방법을 사용하세요.
• 가능하면 이미지에 텍스트 대신 마크업을 사용하세요. 스크린 리더는 추가 코드를 추가하지 않으면 이미지에 삽입된 텍스트를 읽을 수 없으며, 저시력 사용자가 확대하면 삽입된 텍스트가 모자이크 처리될 수도 있습니다.

구조 및 레이아웃

접근성이 높은 서체에서는 서체, 글꼴 크기, 활자 스타일도 중요하지만, 페이지 문구의 구조와 레이아웃도 사용자가 이해하는 데 똑같이 중요할 수 있습니다.

복잡한 레이아웃은 저시력, 읽기 장애가 있는 사용자, 미국의 ADHD 환자 610만 명에게 진정한 장벽이 될 수 있습니다. 이러한 유형의 장애는 명확한 선형 경로가 없고, 제목이 누락되었으며, 그룹화되지 않은 요소가 있어 사용자가 위치를 유지하고 광고 문구의 흐름을 따라가기가 더 어렵습니다.

접근성 있는 레이아웃 디자인의 중요한 측면은 핵심 요소를 서로 구분하고 유사한 요소를 그룹화하는 것입니다. 특히 스타일이 비슷한 요소의 경우 요소가 너무 가까우면 한 요소의 시작과 끝을 구분하기 어려울 수 있습니다.

광고 문구를 개요의 개별 글머리기호 모음으로 생각해 보세요. 이렇게 하면 전체 페이지 구조를 계획하고 적절한 경우 제목, 부제목, 목록을 사용할 수 있습니다.

간격

단락, 문장, 단어 간격은 독자가 광고 문구에 집중하는 데 도움이 되며 페이지의 전반적인 시각적 이해를 높여 줍니다. 긴 줄의 광고 문구는 장애가 있는 독자에게는 장애가 될 수 있습니다. 장애가 있는 독자는 위치를 유지하고 광고 문구의 흐름을 따라가는 데 어려움을 겪기 때문입니다.

좁은 광고 문구는 독자가 다음 줄로 쉽게 넘어갈 수 있도록 합니다.

콘텐츠 정렬

많은 장애인에게 불편을 주는 또 다른 요소는 줄바꿈된 텍스트를 읽는 것입니다. 양쪽 맞춤으로 작성된 문구에서 단어 간의 간격이 고르지 않으면 페이지 아래쪽에 '공백의 강'이 형성되어 내용을 읽기 어려워질 수 있습니다.

텍스트 정렬로 인해 단어가 모여 있거나 부자연스럽게 늘어나서 독자가 단어 경계를 찾기 어려울 수 있습니다.

다행히 간격에 관한 명확한 가이드라인과 Good Line-Height, Golden Ratio Calculator와 같은 도구가 있어 텍스트를 더 쉽게 읽을 수 있습니다. 이러한 가이드라인을 통합하면 주의력 결핍 장애, 읽기, 시각 장애가 있는 사용자가 레이아웃보다는 광고 문구에 더 집중할 수 있습니다.

구조 및 레이아웃 권장사항

구조와 레이아웃을 고려할 때는 다음 사항을 확인하세요.

• 머리글, 부제목, 목록, 숫자, 인용구 블록, 기타 시각적 그룹과 같은 요소를 사용하여 페이지를 섹션으로 나눕니다.
• 명확하게 정의된 단락, 문장, 단어 간격을 사용합니다.
• 너비가 80자 (로고의 경우 40자) 미만인 문구 열을 작성합니다.
• 텍스트 내에 '공백의 강'이 생기는 줄바꿈 정렬을 피하세요.

액세스 가능한 서체 요약

접근성 있는 서체는 사용자의 니즈에 대한 지식을 바탕으로 한 상식적인 디자인 선택으로 요약할 수 있습니다. 콘텐츠를 디자인하고 제작할 때 이 모듈을 염두에 두면 많은 수의 사용자와 명확하게 소통하는 데 큰 도움이 됩니다.

이해도 확인

접근성 측정에 관한 지식 테스트