앞서 대체 텍스트 편에서 이미지의 접근성을 다뤘다. 이번 편은 그 이미지를 다시 짚으면서, 한 걸음 더 나아가 동영상과 소리 같은 미디어의 접근성까지 살펴본다. 웹은 점점 더 많은 영상과 음성으로 채워지고 있다. 그런데 미디어는 이미지보다 접근성을 챙기기 어렵다. 이번 편은 보고 듣는 콘텐츠를 누구나 누리게 하는 법을 다룬다.
나는 동영상을 올리면서 자막을 오랫동안 빠뜨렸다. 영상만 있으면 충분하다고 여겼다. 그러다 소리를 못 듣는 사용자에게 자막 없는 영상은 그림만 흐르는 무의미한 화면이라는 걸 깨달았다. 반대로 화면을 못 보는 사용자에게는 소리만 들리는 반쪽 영상이었다. 이 편은 미디어가 모두에게 온전히 전해지게 하려는 노력의 기록이다.
1. 이미지 접근성을 다시 짚다
미디어로 넘어가기 전에 이미지의 원칙을 다시 정리해 둔다. 정보를 전하는 이미지에는 대체 텍스트 속성 alt에 그 정보를 담고, 장식 이미지는 값을 비워 낭독기가 건너뛰게 한다. 기능 이미지는 모양이 아니라 동작을 서술한다. 나는 이 세 가지 구분을 이미지를 넣을 때마다 떠올리며, 각 이미지의 성격에 맞는 처리를 고른다.
이미지에서 특히 놓치기 쉬운 것이 배경 이미지다. 스타일로 넣은 배경 이미지는 낭독기에 아예 노출되지 않는다. 그래서 사용자가 꼭 알아야 할 정보라면 배경이 아니라 이미지 요소로 넣고 대체 텍스트를 달아야 한다. 나는 중요한 이미지를 배경으로 처리했다가 낭독기 사용자에게 정보가 통째로 사라진 실수를 하고, 이 구분을 확실히 새겼다.
글자를 담은 이미지도 조심해야 한다. 이미지 안에 글자를 넣으면 낭독기가 그 글자를 읽지 못하고, 확대하면 흐려진다. 되도록 글자는 이미지가 아니라 실제 텍스트로 넣는 것이 낫다. 나는 로고처럼 어쩔 수 없는 경우가 아니면 이미지 속 글자를 피하고, 이미지에 담긴 글자가 있으면 대체 텍스트에 그 내용을 옮겨 담는다.
움직이는 이미지도 접근성의 대상이다. 반복해서 깜빡이거나 빠르게 움직이는 이미지는 어떤 사용자에게 어지럼이나 불편을 준다. 나는 자동으로 움직이는 이미지에는 멈출 수단을 두거나, 움직임을 줄이는 사용자 설정을 존중한다. 이 부분은 뒤의 모션 편에서 더 다루지만, 이미지도 움직이면 배려가 필요하다는 점을 여기서 짚어 둔다.
여러 이미지가 하나의 뜻을 이룰 때는 전체를 함께 고려한다. 낱낱의 이미지에 대체 텍스트를 다는 대신, 묶음이 전하는 하나의 의미를 담는 것이 나을 때가 있다. 나는 이미지 묶음을 다룰 때 각각을 기계적으로 설명하기보다, 이 묶음이 통틀어 무엇을 전하는지를 먼저 생각한다. 부분이 아니라 전체의 의미를 옮기는 것이 핵심이다.
정리하면 이미지는 정보와 장식과 기능을 구분해 처리하고, 배경 이미지와 글자 이미지를 조심하며, 움직임과 묶음까지 고려한다. 나는 이미지 원칙을 미디어의 출발점으로 삼는다. 이제 본격적으로 미디어로 넘어가자. 동영상의 접근성에서 가장 먼저 챙길 것은 자막이다.
2. 동영상에는 자막을 단다
동영상 접근성의 핵심은 자막이다. 소리를 못 듣는 사용자에게 자막 없는 영상은 무성 화면일 뿐이다. 그래서 대사와 중요한 소리를 글로 옮긴 자막이 반드시 있어야 한다. 나는 동영상을 올릴 때 자막을 필수로 여기며, 자막 없는 영상은 미완성으로 본다. 자막은 곁들이는 것이 아니라 영상의 한 부분이다.
자막은 동영상 요소 video 안에 자막 트랙 요소 track으로 넣는다. 이 요소에 자막 파일을 연결하면, 브라우저가 영상에 맞춰 자막을 띄운다. 자막 파일은 시간과 대사를 짝지은 정해진 형식으로 만든다. 나는 자막을 영상에 태워 두는 이 선언적인 방식을 즐겨 쓴다. 별도 프로그램 없이도 브라우저가 자막을 알아서 다뤄 주기 때문이다.
자막에는 대사뿐 아니라 중요한 소리도 담는다. 문이 쾅 닫히는 소리, 배경에 흐르는 음악, 인물의 웃음 같은 것도 이야기를 이해하는 데 필요하다. 소리를 못 듣는 사용자에게는 이런 음향 정보도 자막으로 전해야 온전하다. 나는 자막을 만들 때 대사만이 아니라 장면을 이해하는 데 필요한 소리까지 함께 적어, 화면 밖 소리도 글로 전한다.
자막의 종류를 구분하는 것도 중요하다. 소리를 못 듣는 사용자를 위한 자막은 음향 정보까지 포함하고, 다른 언어로 옮긴 번역 자막은 대사만 담는다. 트랙 요소의 종류를 나타내는 값으로 이를 구분한다. 캡션을 뜻하는 kind="captions"는 음향 정보를 포함하는 자막이다. 나는 자막의 목적에 맞게 이 종류를 정확히 지정한다.
자막은 가독성도 챙겨야 한다. 자막 글자가 영상 배경에 묻히면 읽기 어렵다. 그래서 자막에 어두운 배경막을 깔거나 또렷한 색을 주어, 어떤 장면 위에서도 잘 읽히게 한다. 나는 자막의 대비를 텍스트 대비만큼 신경 써서, 밝은 장면에서도 자막이 사라지지 않게 한다. 자막은 있는 것만으로 부족하고 읽혀야 제구실을 한다.
정리하면 동영상에는 대사와 음향 정보를 담은 자막을 자막 트랙으로 넣고, 목적에 맞게 종류를 지정하며, 가독성까지 챙긴다. 나는 자막을 영상의 필수 부분으로 여긴다. 그런데 소리를 못 듣는 사용자만이 아니라, 화면을 못 보는 사용자에게도 영상은 반쪽이다. 다음은 그들을 위한 배려다.
3. 화면 해설과 대본
화면을 못 보는 사용자에게 영상은 소리만 들리는 반쪽이다. 대사는 들어도, 말없이 화면으로만 전해지는 정보는 놓친다. 인물이 조용히 무언가를 건네는 장면 같은 것이다. 이런 시각 정보를 소리로 설명해 주는 것이 화면 해설이다. 나는 시각 정보가 중요한 영상에는 이 화면 해설을 더해, 화면을 못 봐도 이야기를 따라오게 한다.
화면 해설은 대사 사이 빈 곳에 장면을 설명하는 음성을 넣는 방식이다. 트랙 요소의 종류를 화면 해설을 뜻하는 kind="descriptions"로 지정해 넣을 수 있다. 대사가 없는 순간에 지금 화면에서 무슨 일이 일어나는지를 말로 채우는 것이다. 나는 시각 정보가 이야기에 꼭 필요한 영상에 이 해설을 더해, 소리만으로도 장면이 그려지게 한다.
소리만 있는 콘텐츠에는 대본을 제공한다. 소리를 못 듣는 사용자에게 음성만 있는 콘텐츠는 아무것도 전하지 못한다. 그래서 그 내용을 글로 옮긴 대본을 함께 두어, 읽어서 내용을 알 수 있게 한다. 나는 음성 콘텐츠를 올릴 때 대본을 함께 제공하는 것을 원칙으로 삼는다. 대본은 소리를 못 듣는 사용자에게 유일한 통로다.
대본은 소리를 못 듣는 사용자만이 아니라 여러 사람에게 이롭다. 영상을 볼 시간이 없어 빠르게 훑고 싶은 사람, 특정 부분을 검색하고 싶은 사람에게도 글로 된 대본이 편하다. 검색 엔진도 대본을 읽어 콘텐츠를 이해한다. 나는 대본이 접근성을 넘어 여러 이득을 준다는 걸 겪으며, 대본 만드는 수고를 아깝지 않게 여기게 됐다.
자막과 화면 해설과 대본은 각각 다른 사용자를 위한 것이다. 자막은 못 듣는 사용자를, 화면 해설은 못 보는 사용자를, 대본은 여러 상황의 사용자를 돕는다. 나는 콘텐츠의 성격에 따라 무엇이 필요한지를 정한다. 대사 위주 영상은 자막이, 시각 정보가 많은 영상은 화면 해설이, 음성 콘텐츠는 대본이 우선이다.
정리하면 화면을 못 보는 사용자에게는 시각 정보를 말로 채우는 화면 해설을, 소리만 있는 콘텐츠에는 글로 옮긴 대본을 제공하며, 이것들은 여러 사용자에게 두루 이롭다. 나는 콘텐츠에 맞는 통로를 갖춘다. 그런데 미디어에는 접근성을 해치는 흔한 함정이 하나 있다. 바로 자동재생이다.
4. 자동재생과 소리를 다스린다
페이지를 열자마자 영상이나 소리가 저절로 재생되는 것은 접근성에 해롭다. 특히 낭독기 사용자에게는 치명적이다. 갑자기 터진 소리가 낭독기의 목소리를 덮어버려, 사용자가 페이지를 읽을 수조차 없게 된다. 나는 자동재생을 접근성의 대표적인 함정으로 여기며, 소리가 자동으로 나는 것을 피한다. 소리는 사용자가 원할 때 나야 한다.
어쩔 수 없이 자동재생을 해야 한다면 소리는 반드시 꺼둔다. 배경 영상처럼 분위기용으로 자동재생하는 경우, 소리 없이 화면만 흐르게 하는 것이다. 소리가 없으면 낭독기를 방해하지 않는다. 나는 자동재생이 필요한 자리에서는 소리를 끈 채로만 쓰고, 소리가 있는 콘텐츠는 절대 저절로 재생되지 않게 한다. 소리와 자동재생은 함께 두지 않는다.
일정 시간 넘게 소리가 나는 콘텐츠에는 멈추거나 소리를 줄일 수단을 반드시 둔다. 사용자가 소리를 통제할 수 없으면, 그 소리는 방해이자 폭력이 된다. 나는 소리가 나는 모든 콘텐츠에 재생과 정지, 음량 조절 수단을 마련해, 사용자가 언제든 소리를 다스릴 수 있게 한다. 통제권은 콘텐츠가 아니라 사용자에게 있어야 한다.
움직이는 콘텐츠도 멈출 수 있어야 한다. 소리가 없더라도 끊임없이 움직이는 영상이나 자동으로 넘어가는 슬라이드는 어떤 사용자에게 집중을 방해하고 어지럼을 준다. 나는 자동으로 움직이는 콘텐츠에 멈춤 수단을 두어, 원하는 사용자는 움직임을 멈출 수 있게 한다. 움직임을 멈출 자유도 소리를 끌 자유만큼 중요하다.
자동재생이 정말 필요한지도 다시 묻는다. 대개 자동재생은 만든 사람의 욕심일 뿐, 사용자가 원한 것이 아니다. 나는 자동재생을 넣기 전에 이것이 사용자에게 정말 이로운지를 먼저 생각한다. 사용자가 스스로 재생 버튼을 누르게 하는 것이 대부분의 경우 더 낫다. 통제권을 사용자에게 넘기는 것이 미디어 접근성의 바탕이다.
정리하면 소리가 나는 자동재생은 낭독기를 덮으니 피하고, 부득이하면 소리를 끄며, 일정 시간 넘는 소리와 움직임에는 멈춤 수단을 두고, 자동재생의 필요 자체를 다시 묻는다. 나는 통제권을 사용자에게 둔다. 마지막으로, 기본 재생기 대신 직접 만든 재생기의 접근성을 살펴보자.
5. 커스텀 재생기의 접근성
브라우저 기본 재생기에는 재생, 정지, 음량, 자막 조작이 이미 접근성 있게 갖춰져 있다. 그런데 디자인을 위해 재생기를 직접 만들면, 이 접근성을 처음부터 다시 챙겨야 한다. 나는 커스텀 재생기를 만들 때 겉모양보다 먼저 기본 재생기가 공짜로 주던 조작들을 되살리는 것을 챙긴다. 모양은 나중이고 조작이 먼저다.
커스텀 재생기의 모든 조작은 키보드로 가능해야 한다. 재생과 정지, 음량 조절, 자막 켜기를 마우스뿐 아니라 키보드로도 할 수 있어야 한다. 재생 버튼을 상자로 만들어 마우스로만 눌리게 하면 키보드 사용자는 영상을 재생조차 못 한다. 나는 재생기의 모든 버튼을 진짜 버튼 요소로 만들어, 키보드로 포커스가 가고 눌리게 한다.
각 조작 버튼에는 이름이 있어야 한다. 아이콘만 있는 재생 버튼, 음소거 버튼은 낭독기에 이름이 없으면 정체불명의 버튼이 된다. 나는 재생기의 아이콘 버튼마다 재생, 정지, 음소거 같은 이름을 붙여, 낭독기 사용자가 무슨 버튼인지 알게 한다. 그리고 상태가 바뀌는 버튼은 지금 재생 중인지 멈춤인지 상태도 함께 알린다.
자막을 켜고 끄는 조작도 접근성 있게 제공한다. 커스텀 재생기라도 자막 토글을 키보드로 조작할 수 있어야 하고, 그 버튼에 이름과 상태가 있어야 한다. 나는 커스텀 재생기에서 자막 기능을 빠뜨리지 않도록 특히 신경 쓴다. 자막은 미디어 접근성의 핵심인데, 재생기를 새로 만들면서 자막 조작을 잃는 일이 흔하기 때문이다.
진행 막대 같은 조작도 키보드로 다룰 수 있게 한다. 영상의 특정 지점으로 이동하는 진행 막대를 마우스로 끌어야만 움직인다면, 키보드 사용자는 원하는 곳으로 갈 수 없다. 나는 진행 막대를 화살표로도 조작할 수 있게 만들어, 키보드만으로 영상을 앞뒤로 옮기게 한다. 커스텀 재생기는 기본 재생기가 주던 모든 것을 되살려야 완성이다.
정리하면 커스텀 재생기는 기본 재생기의 접근성을 처음부터 되살려야 하며, 모든 조작을 키보드로 가능하게 하고, 버튼마다 이름과 상태를 주며, 자막 토글과 진행 막대까지 챙긴다. 나는 재생기를 만들 때 모양보다 조작을 먼저 본다. 다음 편에서는 화면이 새로고침 없이 바뀔 때 그 변화를 알리는 동적 콘텐츠 알림을 다룬다.