접근성이 우수한 콘텐츠를 만들고 디자인하는 것은 읽기 쉬운 글꼴을 선택하는 것 이상의 의미를 갖습니다. 글꼴 모음에 접근성이 있더라도 저시력, 인지, 언어, 학습 장애가 있는 사용자는 글꼴 변형, 크기, 간격, 커닝과 같은 기타 요소로 인해 텍스트를 처리하는 데 어려움을 겪을 수 있습니다. 이 모듈에서는 콘텐츠의 포용성을 높이고 더 많은 사용자에게 도달하기 위해 기본적인 디자인 고려사항을 살펴봅니다.
글꼴
문구 접근성에 큰 영향을 미칠 수 있는 주요 요소는 글꼴입니다. 선택한 글꼴과 스타일에 따라 페이지 디자인이 좌우될 수 있습니다.
난독증이나 주의력 결핍 과잉 행동 장애 (ADHD)와 같은 읽기, 학습, 주의력 장애가 있는 사용자뿐만 아니라 저시력의 사용자도 접근성이 높은 글꼴을 사용하면 도움이 될 수 있습니다.
일반적인 서체 선택 접근 가능한 디자인을 만드는 가장 빠른 방법은 일반적인 서체 (예: 제공, Times New Roman, Calibri, Verdana 등)를 선택하는 것입니다.
장애인을 대상으로 실시한 여러 서체 연구에서 일반적인 서체를 사용하면 일반적이지 않은 서체에 비해 읽기 속도와 이해 수준이 더 높은 것으로 나타났습니다. 이러한 일반적인 서체는 본질적으로 다른 서체보다 접근성이 떨어질 수 있지만, 장애가 있는 사람들은 이러한 서체를 다루거나 다뤄 본 경험이 많아서 더 쉽게 읽을 수 있습니다.
일반적인 서체를 선택하는 것 외에도 화려하거나 필기한 서체 또는 대소문자가 하나뿐인 서체 (예: 대문자만)는 피해야 합니다. 필기체 디자인, 기발한 모양 또는 얇은 선과 같은 예술적인 특징이 있는 특수한 서체는 멋져 보일 수 있지만 일부 장애인은 일반적인 서체보다 읽기가 훨씬 어렵습니다.
문자 특성 및 커닝
serif 또는 Sans Serif 글꼴이 읽기 쉬운지에 관한 연구는 확실하지 않지만 특정 숫자, 문자 또는 조합은 언어 기반 학습 및 인지 장애가 있는 사람을 혼란스럽게 할 수 있습니다. 이러한 유형의 장애를 가진 사람들의 경우 모든 문자와 숫자가 명확하게 정의되어 있고 고유한 특징을 지니고 있어야 하므로 문자를 숫자와 혼동해서는 안 됩니다.
일반적인 가독성 위반자는 대문자 'I' (인도), 소문자 'l'(lettuce), 숫자 '1'입니다. 마찬가지로 b/d, p/q, f/t, i/j, m/w, n/u와 같은 문자 쌍이 좌우로 뒤집히는 경우도 일부 독자에게 있습니다.
문자 간격이나 커닝이 너무 좁으면 문구의 가독성도 낮아집니다. 커닝, 특히 문제가 있는 문자 쌍 r/n 사이에 특히 주의하세요. 그렇지 않으면 '원사'와 같은 단어가 '고마' 또는 '선미'로 '줄기'로 변경되어 문구의 의미가 완전히 달라질 수 있습니다.
Google Fonts와 같은 오픈소스 서체 컬렉션은 다음 디자인에 가장 적합한 서체를 선택하는 데 도움이 됩니다. Adobe 제품을 사용하는 경우 Foundry 파트너의 액세스 가능한 글꼴 모음을 디자인에 직접 삽입할 수 있습니다. 여기에는 일부 Google Fonts도 포함됩니다.
다음에 사용할 서체를 찾을 때 다음 항목에 특히 유의하세요.
- 가능하면 일반 글꼴을 사용하세요.
- 정교하게 쓰여졌거나 손으로 쓴 글꼴이나 대소문자가 하나뿐인 글꼴은 사용하지 마세요.
- 대문자 I, 소문자 l, 1에 특히 주의하여 고유한 특징을 가진 서체를 선택하세요.
- 특정 문자 조합을 검토하여 서로 정확히 미러링된 이미지가 아닌지 확인하세요.
- 특히 r/n 문자 쌍 사이의 커닝을 확인합니다.
글꼴 크기 및 서체 스타일 지정
사람들은 보통 접근성이 높은 글꼴 모음을 선택하는 것이 포용적인 콘텐츠를 만드는 방법이라고 생각하지만, 글꼴 크기 및 페이지에서 텍스트의 스타일이 지정되는 방식도 고려해야 합니다.
예를 들어 시력이 나쁘거나 색맹인 사용자가 너무 작으면 브라우저 확대/축소와 같은 AT로 카피를 읽지 못할 수 있습니다. 하지만 난독증이나 독서 장애가 있는 사용자는 기울임꼴 텍스트를 잘 읽지 못할 수도 있습니다. 스크린 리더는 굵게 또는 기울임꼴과 같은 스타일 지정 방법을 무시하는 경우가 많으므로 이러한 스타일의 의도는 시각장애인 또는 저시력 사용자에게 전달되지 않습니다.
h2 {font-size: 16px;}
h2 {font-size: 1rem;}
모든 사용자의 요구사항을 예측할 수는 없으므로 디지털 제품에 글꼴을 추가할 때 다음 가이드라인을 고려해야 합니다.
- 기본 글꼴 크기는 쉽게 크기를 조절할 수 있도록 상대 값 (%, rem, em)으로 정의되어야 합니다.
- 가독성을 높이기 위해 색상, 굵게, 모두 대문자, 기울임꼴과 같은 서체 변형의 수를 제한합니다. 대신 별표, 대시, 개별 단어 강조표시 등 사본에서 단어를 강조하는 방법을 사용합니다.
- 가능하면 이미지에 텍스트 대신 마크업을 사용하세요. 스크린 리더는 추가 코드를 추가하지 않으면 이미지에 삽입된 텍스트를 읽을 수 없으며 저시력 사용자가 확대하면 삽입된 텍스트도 모자이크될 수 있습니다.
구조 및 레이아웃
글꼴, 글꼴 크기, 서체 스타일 지정은 접근성이 좋은 서체에는 중요하지만, 페이지 문구의 구조와 레이아웃도 사용자가 이해하는 데도 중요합니다.
복잡한 레이아웃은 시력이 나쁘거나 독서 장애가 있는 사람들과 ADHD를 겪고 있는 미국 인구 610만 명에게 큰 걸림돌이 될 수 있습니다. 이러한 유형의 장애는 명확한 선형 이동 통로가 없고, 제목이 누락되고, 요소가 그룹화되지 않기 때문에 사람들이 자신의 위치를 유지하고 문구의 흐름을 따르는 것을 더 어렵게 만듭니다.
액세스 가능한 레이아웃 디자인의 중요한 측면은 중요한 요소를 서로 구분하고 유사한 요소를 그룹화하는 것입니다. 요소가 너무 가까우면 한 요소의 시작과 끝을 구분하기 어려울 수 있습니다. 특히 스타일이 비슷한 경우 더욱 그렇습니다.
카피를 윤곽선에 개별 글머리기호를 모은 것이라고 생각하세요. 이렇게 하면 전체 페이지 구조를 계획하고 필요할 때마다 제목, 부제목, 목록을 사용할 수 있습니다.
간격
장문, 문장, 단어 띄어쓰기도 중요합니다. 독자가 문구에 집중할 수 있도록 도와주고 페이지의 전반적인 시각적 이해에 도움이 되기 때문입니다. 카피가 긴 행은 장애가 있는 독자가 자신의 자리를 지키고 카피의 흐름을 따르는 데 어려움을 겪기 때문에 걸림돌이 될 수 있습니다. 문구 블록이 좁으면 독자가 다음 줄로 쉽게 넘어갈 수 있습니다.
콘텐츠 정렬
많은 장애인이 당하는 또 다른 좌절은 정당한 카피를 읽는 것입니다. 양쪽 맞춤 문구에서 단어 사이의 띄어쓰기가 균일하지 않으면 페이지 하단에 '공백의 강'이 형성되어 사본을 읽기 어렵게 될 수 있습니다.
또한 텍스트 정렬로 인해 단어가 섞이거나 부자연스럽게 늘어나서 독자가 단어 경계를 찾기 어려울 수 있습니다.
다행히 적절한 줄 높이와 황금 비율 계산기와 같은 도구 및 간격에 관한 명확한 가이드라인을 제공하여 사본의 접근성을 높입니다. 이 가이드라인을 포함하면 주의력 결핍 장애, 읽기, 시각 기반 장애가 있는 사람들이 레이아웃보다 광고 문구에 더 집중할 수 있습니다.
구조 및 레이아웃 권장사항
구조와 레이아웃을 고려할 때는 다음 사항을 확인하세요.
- 제목, 부제목, 목록, 숫자, 인용문 블록, 기타 시각적 그룹과 같은 요소를 사용하여 페이지를 섹션으로 나눕니다.
- 명확하게 정의된 단락, 문장, 단어 간격을 사용합니다.
- 너비가 80자 (로고그램의 경우 40자)를 초과하지 않는 문구 열을 작성합니다.
- 사본 내에 '공백의 강'을 만드는 양쪽 맞춤 단락 정렬을 피합니다.
접근성이 우수한 서체 요약
접근성 높은 서체를 사용자의 필요에 따라 상식에 맞게 디자인할 수 있습니다. 콘텐츠를 설계하고 제작할 때 이 모듈을 염두에 두면 많은 사용자와 명확하게 소통할 수 있습니다.
학습 내용 확인하기
접근성 측정에 관한 지식 테스트
광고 문구를 쉽게 읽을 수 있도록 문구와 배경 사이에 항상 고대비를 사용해야 합니다.
접근성에 가장 적합한 글꼴은 무엇인가요?