✍️ 접근성의 필수 요소 '대체 텍스트'
#UXWriting #대체텍스트 #접근성
� 한 줄 요약
- 모두를 위한 텍스트, 대체 텍스트 작성법
✔️ UX Writing 작업을 하다보면 고려하게 되는 부분이 있어요. 바로 접근성이죠. 접근성은 여러 요소를 필요로 해요. 크게 다음 4가지로 볼 수 있어요.
1. 언어
2. 페이지 구조
3. 시각적 힌트
4. 이미지
✔️ 언어는 예측 가능하듯이, '누구나 쉽게 이해할 수 있는 언어'를 사용하라는 의미예요. UX Writing이나 접근성 가이드를 보면 흔히 표현돼 있는 내용인데요. '중1도 이해할 수 있게 써라!'가 그 내용이죠.
✔️ 페이지 구조는 스캔 가능하도록 UX Writing을 구성하라는 거예요. 이를 위해 F자 패턴에 기반하여 문단을 구성하여, 훑어보기 쉽게 만드는 거죠. 또한, 문장의 길이를 적절하게 끊어내어, 훑어보기를 돕는데요. 이때, 헤더 태그 등을 통해 시작과 끝을 표현해주는 것도 좋아요.
✔️ 시각적 힌트는 문장에 방향을 나타내는 단어를 쓰지 않는 거예요. 시각 장애를 고려하는 거죠. 다음으로 동사 사용 시, 특정 상황을 고려한 용어 대신 일반적인 용어를 사용해 모두를 배려하는 거죠. 이때, 과정보단 결과에 초점을 맞췄을 때, 동사를 유용하게 사용할 수 있어요. 링크도 동사와 마찬가지예요. 사용자 맥락을 고려해 링크 문구를 작성하는 거죠.
✔️ 마지막으로 이미지예요. 이미지는 화면 리더나 검색 엔진이 시각적으로 판단할 수 없는 대상이기 때문에, 이미지가 무엇인지 이해할 수 있는 대체 텍스트를 기입해야 해요. 특히, 시각 장애인에게는 이 대체 텍스트기 필수죠. 이미지를 이해하기 위해서요.
✔️ 하지만 한 번 써보시면 알겠지만 대체 텍스트 입력하는 일이 쉽지 않아요. 듣자마자 이해해야 하며, '이미지가 어떤 기능을 하는지 적절하게 표현'해야 하기 때문이죠. 그럼 도대체 대체 텍스트를 어떻게 쓰라는 거야?
✔️ 아주 잘 설명된 글이 있어요. 그래서 제가 가지고 왔죠. 이대로 따라하기만 한다면 여러분은 기본 이상은 할 수 있어요.
✅ 이미지 대체 텍스트 작성 쉽게 따라하기
1. 스스로에게 물어보세요. 이미지가 전달하는 바가 무엇인가요? 404 오류가 발생했을 때, 이미지 자체를 설명하는 글을 작성하고 있지 않았나요? 이미지를 설명하기 보다는 '페이지를 찾을 수 없음'이라고 적어주세요.
2. 대체 텍스트는 사용자와 관련된 키워드로 명확하게 설명하세요. 키워드가 많으면 오히려 사용자에게 혼란을 줄 수 있어요.
3. 반드시 이해해야 할 콘텐츠와 관련된 것이 아니라면 성별, 나이, 인종을 설명하지 마세요. 50대 중반의 여성 의사는 '의사'라고만 설명하세요.
4. 대체 텍스트를 '이미지' 또는 유사한 단어로 쓰지마세요. 대체 텍스트가 있다는 것은 이 내용이 이미지라는 것을 의미합니다.
5. 아이콘에도 대체 텍스트를 넣으세요. 예를 들어 사이트 홈페이지로 안내하는 집 아이콘에는 '홈'이라는 레이블을 붙여주세요. 설정 페이지로 이동하는 톱니바퀴 아이콘에는 '설정'이라고 붙여주세요.
6. 이미지가 장식용일 때는 대체 텍스트를 비워두세요. 화면 리더도 건너뛸 거예요.
7. 텍스트 이미지를 버튼으로 사용하지 마세요. 라이브 텍스트를 사용하세요.
8. 업로드한 모든 동영상에 캡션과 자막을 포함하세요.
https://medium.com/docusign-design/a-ux-copywriters-guide-to-accessibility-79dbea85798d
