액세스 가능한 콘텐츠를 만들고 디자인하는 것은 읽기 쉬운 글꼴을 선택하는 것 이상의 의미를 지닙니다. 액세스 가능한 글꼴 모음을 사용하더라도 저시력, 인지, 언어, 학습 장애가 있는 사용자는 글꼴 변형, 크기, 간격, 커닝과 같은 다른 요소로 인해 텍스트를 처리하는 데 어려움을 겪을 수 있습니다.
이 모듈에서는 콘텐츠를 더 포용적이고 더 많은 사용자에게 도달할 수 있도록 하는 기본적인 디자인 고려사항을 살펴봅니다.
글꼴
카피 접근성에 큰 영향을 미칠 수 있는 주요 요인은 글꼴입니다. 글꼴과 스타일을 선택하면 페이지 디자인이 성공할 수도 있고 실패할 수도 있습니다.
난독증 및 주의력 결핍 과잉 행동 장애 (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 사이의 커닝에 주의하세요. 그렇지 않으면 'yarn'과 같은 단어가 'yam'으로, 'stern'이 'stem'으로 변경되어 카피의 의미가 완전히 바뀔 수 있습니다.
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자)보다 작은 카피 열을 빌드합니다.
- 카피 내에 '공간의 강'을 만드는 양쪽 맞춤 단락 정렬은 피하세요.
액세스 가능한 타이포그래피 주요사항
액세스 가능한 타이포그래피는 사용자의 요구사항에 관한 지식을 바탕으로 한 상식적인 디자인 선택으로 요약할 수 있습니다. 콘텐츠를 디자인하고 빌드할 때 이 모듈을 염두에 두면 최대한 많은 사용자와 명확하게 소통하는 데 큰 도움이 될 것입니다.