이모티콘의 접근성
안녕하세요, 엔비전스입니다.
우리는 모바일과 웹을 통해 타인과 의사소통을 하는 과정에서 언어로 명확히 자신의 감정을 표현하기 어려울 때 자신의 상태를 적절히 표현해주는 이모티콘을 사용해 의사를 표현합니다. 스크린리더 사용자 역시 이모티콘을 다양하게 사용하고 있는데요, 이모티콘의 특성상 자연스럽게 접근성 이슈가 발생하기 마련입니다. 그리하여 이번 아티클에서는 스크린리더 사용자가 이모티콘을 읽거나 쓸 때 고려되어야 할 접근성 이슈에 대해서 함께 살펴보도록 하겠습니다.
웹페이지
웹페이지에서 이모티콘을 사용할때는 jpg, png와 같은 이미지를 사용할 때도 있지만 ☃ 과 같은 유니코드 문자를 사용하여 이모티콘을 표현할 수도 있습니다. 이모티콘이나 스티커가 png와 같은 이미지라면 바로 대체텍스트를 추가하여 접근성을 보장할 수 있지만 위와 같은 유니코드 문자로 표현될 때에는 다음과 같은 문제가 있습니다.
- Span 자체만으로는 브라우저 api에서 이미지로 정보를 처리하지 않아 스크린리더에서 이미지로 인식하지 못합니다.
- Span 안에 들어가 있는 글자 또한 스크린리더에 따라 특수문자로 인식하여 이모티콘을 출력하는 경우도 있지만 브라우저와 스크린리더에 따라 특이한 문자로 인식될뿐 스크린리더로 접근했을 때는 이모티콘에 대한 정보는 전혀 파악할수 없는 경우도 있습니다.
해결방법은 간단합니다.
- 브라우저에게 span이 이미지라는 것을 알려주어야 하므로 role=”img” 속성을 추가합니다.
- Aria-label로 그 이모티콘에 해당하는 대체 정보를 넣습니다.
이렇게 하면 스크린리더에서 이모티콘을 이미지로 인식하고 이모티콘 정보 또한 출력합니다.
모바일애플리케이션
모바일에서는 각각의 이모티콘 혹은 스티커에 정확한 대체텍스트만 잘 부여해 주어도 스크린리더 사용자가 이모티콘 정보를 탐색하는데 어려움이 없습니다. 여기서 우리가 함께 고민해 보고자 하는 것은 스티커 대체텍스트 문구와 이모티콘 키보드에 관한 것입니다.
iOs에서의 키보드 trait(UIAccessibilityTraitKeyboardKey) 사용관련
일반적으로 Emoji 키보드에서 스티커나 이모티콘들은 각각이 버튼으로 되어 있고, 임의의 이모티콘 버튼을 이중탭하면 선택한 이모티콘이 입력됩니다. ‘iOs VoiceOver trait 기능 사용하기 2부’ 아티클에서 살폈듯이 이러한 버튼도 trait를 적용하면 입력방식 설정에 따라 각각의 이모티콘에서 손가락을 떼면 바로 입력되도록 할수 있습니다. 그러나 카테고리 선택 및 기타 버튼(스티커 정보, 다운로드 등)에는 key trait가 적용되지 않도록 해야 합니다. iOs 자체 이모티콘키보드에서는 이러한 속성이 잘 적용되어 있으므로 보이스오버로 직접 테스트해볼 수 있습니다.
iOs VoiceOver에서 추가로 테스트할수 있는 이모티콘 접근성
iOs VoiceOver에서는 위에서 설명한 이모티콘 키보드 입력 관련 접근성 외에도 몇 가지 추가적인 이모티콘 관련 접근성 기능을 제공하고 있습니다. 아래의 접근성 기능들을 필요시 테스트해보면 이모티콘 접근성 적용시 도움이 될수 있습니다.
- iOs VoiceOver 설정 > 말수에서 ‘이모티콘 뒤 기호’를 켜게 되면 이모티콘 키보드로 입력한 이모티콘은 보이스오버에서 ‘이모티콘’이라고 알려줍니다. 여러 이모티콘과 텍스트가 섞여 있을 때 어떤 글자가 이모티콘으로 입력되었는지 확인하고자 할때 사용합니다.
iOs 자체 메시지 앱에서 여러 문장을 입력한 상태에서 키보드를 이모티콘 키보드로 변경하면 입력한 글자 중 이모티콘으로 대치 가능한 정보를 음성으로 출력합니다. 사용자는 로터를 돌려 이모티콘으로 대치 가능합니다.
a. 메시지앱을 실행합니다.
b. ‘혹시 오늘 햄버거 먹을거니?’라고 입력합니다.
c. 키보드를 이모티콘 키보드로 변경합니다.
d. 편집창을 손가락으로 터치하면 ‘이모티콘 대치 기능을 사용할수 있다’는 음성안내가 출력됩니다.
e. 두 손가락을 시계 반대방향으로 돌려 이모티콘에 맞춥니다.
f. 위 또는 아래 쓸기를 하면 사용가능한 이모티콘에 포커스 됩니다.
g. 이모티콘에서 이중탭하면 해당 단어가 이모티콘으로 대치됩니다. 만약 해당하는 이모티콘이 여러 개 있을 경우에는 여러 이모티콘을 선택할 수 있는 레이어가 표시되며 포커스도 이모티콘 리스트쪽으로 이동됩니다.
pc에서 이모티콘 입력
pc에서 메일을 쓰거나 SNS를 할 때 이모티콘을 입력하고싶을 때가 있습니다. 현재는 JAWS 스크린리더와 해당 스크린리더의 기능을 확장시켜주는 Leasey라는 확장 프로그램을 함께 사용시 이모티콘을 쉽게 입력할수 있습니다. Leasey와 스크린리더의 기능을 확장시켜주는 프로그램의 개념에 대해서는 다음 기회에 자세히 다루도록 하겠습니다. 만약 현재 컴퓨터에 JAWS를 실행한 상태이고 Leasey 확장 프로그램이 실행되고 있다면 다음과 같이 이모티콘을 쉽게 입력 가능합니다.
- Leasey 메뉴를 호출하는 키(기본은 print screen)을 누릅니다.
- Ctrl + shift + e를 눌러 이모티콘 리스트를 불러옵니다.
- 10개의 카테고리로 나누어진 여러 이모티콘들이 리스트로 표시되며 방향키로 선택하거나 ‘s’와 같이 첫 글자를 입력하여 원하는 이모티콘 선택 후 엔터를 누릅니다. 그러면 편집창에 해당 이모티콘이 입력됩니다.
스티커 대체텍스트 관련
스티커는 이모티콘에 비해 표현도 다양하고 어떤 식으로 대체텍스트를 부여해야 할지 고민될수 있습니다. 이런 경우 스티커 대체텍스트가 잘 되어 있는 앱을 실행하여 테스트해보는 것이 도움이 될수 있습니다. iOs는 hangout, 안드로이드는 Allo 앱을 추천하며 대화상대 메뉴에서 스티커 이미지들을 VoiceOver 혹은 TalkBack을 사용하여 들어보면 됩니다.
지금까지 이모티콘 접근성 이슈에 대해 함께 살펴보았습니다. 저희는 다음에 더 풍부한 내용으로 찾아뵙겠습니다. 읽어주셔서 감사합니다.