널리

안녕하세요, 엔비전스입니다.

웹페이지를 디자인할 때 필요에 따라 여러 가지 웹폰트를 사용하게 됩니다. 이번 시간에는 웹페이지에 폰트를 적용할 때 유념해야 하는 접근성 이슈들에 대해 함께 살펴보도록 하겠습니다.

기본 원칙

1. 이미지로 만들어진 텍스트를 사용하기보다 실제 텍스트를 사용합니다.

2. 읽기 쉬운 폰트를 사용합니다.

3. 텍스트와 배경색 간의 명도 대비가 적당한지를 확인합니다.

4. 너무 작은 글자 사이즈는 피하도록 합니다.

5. 텍스트가 지나치게 깜빡거리거나 움직이지 않도록 합니다.

위의 원칙들은 접근성 지침 등에서 이미 언급된 내용이므로 자세한 설명은 생략하고 폰트에 대한 시맨틱 태그 사용과 아이콘 폰트에 대해 살펴보도록 하겠습니다.

의미 있는 마크업(시맨틱)

웹페이지에서 시맨틱, 즉 의미 있는 html 태그를 사용하는 것은 웹 표준의 준수는 물론이거니와 접근성에 있어 아주 기본적인 사항입니다. 왜냐하면 스크린리더가 웹 페이지의 정보를 읽어드려 출력할 때 HTML 마크업을 우선적으로 처리하며, 사용자 역시 스크린리더가 마크업 정보를 토대로 출력하는 정보에 의존하여 현재 포커스의 요소의 의미를 이해하거나, 웹 페 이지의 대략적 구성을 구조적으로 파악하기 때문입니다. 이를테면 ‘Button’은 스크린리더가 음성으로 ‘버튼’이라 출력하며 사용자는 포커스 된 버튼을 누르면 어떤 기능이 수행된다고 예측합니다. 이것은 제목이나 링크, 버튼 등의 요소뿐만 아니라 글자의 스타일을 정의할 때도 적용이 됩니다. 즉 볼드체로 특정 영역을 표현할 때에는 b 태그 보다는 strong 태그를 사용하는 것이, 강조 표시인 이택릭체를 표현할 때에는 i 태그보다는 em 태그를 사용하는 것이 스크린리더 유저에게도 해당 의미를 전달해줄 수 있습니다. 참고로 볼드체나 이택릭체 등의 요소들은 스크린리더에 따라 지원하는 방식이 다릅니다.

아이콘

예전에는 연필 모양, 금지를 나타내는 표시 등의 아이콘을 표시하기 위해 백그라운드 이미지를 많이 사용했습니다. 그러나 이러한 백그라운드 이미지는 고대비 테마에서는 기본적으로 출력이 되지 않으므로 고대비 테마를 사용하는 저시력 사용자들에게는 많은 불편함이 있었습니다. 그러나 웹폰트 중에는 아이콘을 폰트화하여 제공해주는 것들이 있습니다. 대표적인 것이 Font Awesome인데 백그라운드 이미지를 굳이 쓰지 않더라도 앞에서 언급한 전화번호 모양 등의 여러 아이콘을 클래스를 입력하는 것만으로 폰트로 표현이 가능하게 된 것입니다.

Css 콘텐츠 출력과 스크린리더 이슈

스크린리더가 발전하고 브라우저에서도 접근성 관련 api 기능이 발전하면서 스크린리더에 따라 css로 만들어진 텍스트 콘텐츠들도 읽을 수 있게 되었습니다.

그런데 아이콘 폰트 클래스를 적용할 경우 특정 클래스의 경우 의미 없는 문자 코드가 css 콘텐츠에 포함되어 있어 스크린리더가 이러한 무의미한 텍스트를 읽게될수 있습니다. 아이콘에 대한 설명이 포함되어 있지 않은 이상 스크린리더 사용자에게 이러한 정보는 아무런 의미를 가지지 못하므로 aria-hidden=”true” 를 사용하여 이러한 의미 없는 요소들이 음성출력되지 않도록 해 주어야 합니다. 이것은 의미 없는 이미지에 alt=”” 속성을 적용하여 아예 이미지 자체가 음성출력되지 않도록 하는 것과 같은 원리입니다.

스크린리더 유저를 위한 아이콘 대체설명

아이콘의 의미가 단순한 스타일을 꾸며주기 위한 것이라면 별문제가 없지만 의미를 가진 아이콘이라면 이미지에 대체 텍스트를 달아주는 것처럼 아이콘에 대한 의미를 스크린리더 사용자에게도 전달해 주어야 합니다.

1. 의미 있는 아이콘이라 하더라도 일반 텍스트에 아이콘에 대한 내용을 포함하는 경우에는 아이콘에 대한 설명을 생략할 수 있습니다.

예: 전화번호 입력 레이블과 전화번호 아이콘이 함께 포함된 경우.

1. 상황에 따라 aria-label 혹은 css를 활용한 스크린리더 텍스트를 추가함으로써 스크린리더 사용자를 위한 추가 설명 제공하기 아티클을 참고하여 추가 정보 제공이 가능합니다.

2. 아이콘에 대한 설명을 툴팁 형태로 title 속성을 추가할수 있으나 해당 요소는 대부분의 스크린리더에서 지원되지 않습니다.

자동접근성 지원

웹폰트에 따라 자동 접근성 기능을 지원하는 경우들이 있습니다. 예를 들어 Font Awesome의 경우 앞에서 설명한 바와 같이 수동으로 접근성 관련 아이콘 정보 등을 추가할 수도 있으나 font awesome cdn을 사용하고 자동 접근성을 설정하면 의미 있는 아이콘에 title 속성을 추가하면 자동으로 span 태그를 생성하고 화면에서는 숨기고 스크린리더만 인식 가능한 스크린리더 텍스트를 추가해주게 됩니다.

따라서 사용하는 폰트에 접근성 기능이 포함되어 있는지를 살펴보는 것이 도움이 될수 있습니다.

Font Awesome 자동접근성 설정하기

1. Font Awesome 웹페이지에 접속하여 이메일 계정을 등록합니다.

2. 로그인하여 환경설정 페이지로 이동합니다.

3. Font Awesome cdn 방식을 스크립트 혹은 css로 설정할 수 있는데 스크립트 방식으로 설정해야 자동 접근성 기능을 사용할 수 있습니다.

4. 스크립트 방식으로 설정 후 자동 접근성 항목에 체크합니다. 그러면 앞에서 설명한 바와 같이 타이틀 속성만 추가해도 스크린리더 테스트를 자동으로 추가해주게 됩니다.

지금까지 웹폰트 사용 시 참고할 수 있는 접근성 이슈에 대해 살펴보았습니다. 감사합니다.