홍보, 접근성을 잊지 마세요.
시각장애인을 위한 사진 캡션
7년 전 쯤, 웹페이지 개발 프로젝트에 처음 투입됐을 때 신기한 기계를 봤다. 컴퓨터에 연결하면 웹사이트에 접속했을 때 웹사이트에 기재된 텍스트를 읽어주는 기계였다. 시각장애인들이 웹페이지를 편리하게 이용할 수 있도록 개발된 기계였다.
나: 신기하긴한데, 이걸 왜 갖고 오신 거예요?
A 과장: 응, 이제 이 기계가 읽도록 개발해야 돼.
저 기계가 읽을 수 있도록 웹페이지를 개발해야 한다고? 웹페이지 텍스트를 그냥 자동으로 읽어주는게 아니었어? 그 기계가 읽을 수 있도록 개발하는 것이 바로 '웹접근성'이라는 걸 처음 알았다. 그 당시 웹 디자인에서는 주요 메뉴가 이미지로 처리되어 있는 경우가 많았다. 꼭 배경이미지 같은 게 아니더라도, 꼭 필요한 배너들도 이미지로 되어 있는 경우가 많으니까, 그런 이미지들이 텍스트로 읽힐 수 있게 모두 캡션을 달아주어야 한다는 걸 그때 처음 알았다.
<img src="이미지주소" alt="이미지 설명"
이건 웹접근성의 기본 중의 기본이고, 웹접근성을 위해 맞추어야 하는 원칙들이 훨씬 더 많다. 웹사이트를 개발하는 프론트엔드 개발자라면, 이 원칙들을 이해하고 실무에 적용할 줄 알아야 한다.
홍보에서도 웹 접근성이 있다
최근 홍보를 위해 기관 카드뉴스를 계속 제작하면서 늘 드는 의문이 있었다. 페이스북에 카드뉴스를 올리면서, 이 이미지를 시각장애인들이 읽게 하려면 어떻게 해야 하는가. 그게 '사진 설명'인가 해서, 처음에는 카드뉴스 안에 들어가는 텍스트들을 사진 설명에 모두 넣었다.
페이스북 사진 옆에 사진설명 기능을 이용해 카드뉴스의 글을 옮겨 썼다.그런데 이 설명문이 정말 시각장애인을 위해 사진을 읽어주는지는 확실하게 몰랐는데, 얼마전에 이런 기능을 발견했다. 시각장애인을 위한 대체텍스트 입력이었다.
페이스북 사진 상세 메뉴를 누르면 최하단에 '대체 텍스트 수정'이 있다.이상하게 웹에서는 보이지 않고, 페이스북 모바일 앱에서 사진과 관련한 상세 메뉴를 눌렀을 때에만 '대체 텍스트 수정'이 보인다. 검색해보니 2016년부터 있었던 기능이라고 하는데 지금까지 왜 제대로 보이지 않았을까? 내가 내 페친 가운데 시각장애인이 없을 거라고 너무 단정지어 버린 탓이었을까 반성했다.
페이스북 대체텍스트 입력 창의 화면대체텍스트 변경을 누르면 위와 같이 대체텍스트를 입력할 수 있는 칸이 나온다. 여기에 카드뉴스 안에 들어 간 문장을 그대로 적어넣는다. 앞으로는 이 캡션을 반드시 넣기로 했다. 카드뉴스뿐만 아니라 일반 사진에도 대체텍스트를 넣을 수 있다. 사진에도 대체텍스트 기능을 이용해 어떤 사진인지 설명하기로 했다.
카드뉴스가 아니라 일반 사진에도 대체 텍스트를 입력하는 사진꼭 페이스북을 사용하지 않더라도, 브런치에 사진을 올릴 때도 캡션을 꼭 상세하게 써주는 게 좋을 것 같다. 좀 더 많은 사람들이 우리의 콘텐츠를 보았으면 하는 마음이야말로 바로 홍보의 기본일테니까.
사례로 깜짝 등장한 민주화운동기념사업회 카드뉴스 《79년 10월 4일 내가 '죽은' 날》
+TMI. 웹 페이지에는 img 태그의 alt 속성으로 웹접근성을 처리해두었습니다 :)
