원장님, 홈페이지에 진료실·대기실·장비 사진을 정성껏 찍어 올려 두셨을 겁니다.
그런데 사진마다 "이 사진이 무엇인지" 글로 적어 두는 칸이 따로 있다는 것은 모르고 지나가시는 경우가 많습니다.
이 칸을 이미지 설명, 흔히 alt라고 부릅니다.
천안·아산·평택·당진 병원 홈페이지 23곳을 점검해 보니, 23곳 중 20곳에서 이미지 설명에 고칠 부분이 있었습니다.
1곳은 추가 확인이 필요했고, 양호한 곳은 1곳이었습니다.
나머지 1곳은 밖에서 확인이 되지 않았습니다.
이미지 설명(alt), 무엇이고 왜 중요한가요?
이미지 설명(alt, 사진에 무엇이 담겨 있는지 짧은 글로 적어 두는 칸)은 평소 화면에는 보이지 않습니다.
페이지 코드 안에서 사진마다 하나씩 붙어 있는 이름표 같은 것입니다.
병원 복도에 걸린 액자 아래의 작은 설명 카드를 떠올려 보시면 쉽습니다.
사진을 보실 수 있는 분은 카드 없이도 무슨 사진인지 아시지만, 사진을 보실 수 없는 분께는 그 카드가 사진을 대신합니다.
홈페이지에서 사진을 "볼 수 없는" 쪽은 생각보다 여럿입니다.
- 검색엔진 : 사진 속 장면을 사람처럼 알아보기는 어려워, 이미지 설명과 주변 글을 함께 참고하는 경우가 많습니다.
이미지 검색에서 우리 병원 사진이 어떤 말로 찾아질지에도 영향을 줄 수 있습니다. - 화면 읽기 프로그램 : 눈이 불편하신 분이 쓰시는 화면 읽기 프로그램(화면의 글자를 소리로 읽어 주는 프로그램)은 사진 자리에서 이 설명을 읽어 드립니다.
설명이 비어 있으면 그냥 건너뛰거나, 파일 이름을 그대로 읽기도 합니다. - 사진이 열리지 않을 때 : 인터넷이 느린 곳이거나 사진 주소에 문제가 생겼을 때, 사진 자리에 대신 보이는 글이 바로 이 설명입니다.
우리나라 웹 접근성 지침에서도 이미지에 알맞은 대체 텍스트(이미지 설명)를 제공하는 것을 기본 항목으로 다루고 있습니다.
보기 좋은 사진만큼, 그 사진을 글로 전하는 한 줄도 홈페이지의 일부라고 보시면 됩니다.
점검에서 자주 보인 모습
- 설명 칸이 비어 있음 : 사진마다 설명 칸 자체가 비어 있는 곳이 여러 곳이었습니다.
화면으로는 아무 차이가 없어서, 원장님도 담당 업체도 모르고 지나가기 쉬운 부분입니다. - 파일 이름이 그대로 : "main_img.jpg"처럼 사진 파일 이름이 설명 자리에 그대로 들어간 경우가 적지 않았습니다.
화면 읽기 프로그램은 이 글자를 그대로 읽어 드리게 됩니다. - 모든 사진에 같은 말 : 진료실 사진, 장비 사진, 의료진 사진에 모두 같은 설명이 붙어 있는 곳도 있었습니다.
사진마다 무엇이 다른지 전해지지 않습니다. - 내용과 다른 설명 : 사진과 맞지 않는 설명이 붙어 있는 곳도 보였습니다.
사진만 새로 바꾸고 설명은 예전 그대로 둔 경우에 이런 일이 생기기 쉽습니다.
이미지 설명은 화면에 보이지 않다 보니, 홈페이지를 만들 때도 고칠 때도 놓치기 쉽습니다.
이번 결과는 밖에서 누구나 볼 수 있는 화면과 페이지 코드만 확인한 것이라, 실제 설정과는 조금 다를 수 있습니다.
원장님이 직접 확인하기는 어려운 편입니다
이미지 설명은 사진이 잘 열려 있을 때는 화면에 나타나지 않습니다.
사진이 열리지 않을 때 그 자리에 대신 보이는 글, 또는 화면 읽기 프로그램이 읽어 주는 글이라서 휴대폰 화면만 보고는 채워져 있는지 알기 어렵습니다.
그래서 직접 확인하는 방법 대신, 여쭤보시거나 살펴보실 것을 정리했습니다.
- 담당 업체에 물어보기 : "사진마다 이미지 설명(alt)이 들어가 있나요?" 하고 한 줄로 물어보시면 됩니다.
나중에 새로 올리는 사진에도 들어가는지 함께 여쭤보시면 좋습니다. - 관리 화면에 설명 칸이 있는지 보기 : 직원분이 공지나 사진을 올리는 관리 화면에 '이미지 설명'이나 '대체 텍스트' 같은 칸이 있는지 살펴보세요.
칸이 없다면 앞으로 올리는 사진도 설명 없이 쌓일 가능성이 있습니다. - 이미지 검색에서 병원 이름 찾아보기 : 네이버나 구글의 이미지 검색에서 병원 이름을 찾아보세요.
우리 병원 사진이 어떤 사진들로 나오는지, 오래된 사진이 섞여 있지는 않은지 볼 수 있습니다.
다만 이것만으로 설명이 채워져 있는지까지 알 수는 없습니다.
정확한 상태는 페이지 코드를 사진마다 살펴봐야 알 수 있습니다.
고칠 때는 이렇게
- 사진 내용을 짧게 : "물리치료실 내부 모습", "접수 데스크와 대기 공간"처럼 사진에 무엇이 보이는지 한 줄로 적습니다.
"사진", "이미지" 같은 말은 붙이지 않아도 됩니다. - 키워드를 늘어놓지 않기 : 지역·진료과 이름을 쉼표로 길게 이어 붙이면, 화면 읽기 프로그램을 쓰시는 분께는 알아듣기 어려운 문장이 됩니다.
사진에 실제로 보이는 것을 자연스럽게 적는 편이 좋습니다. - 꾸밈용 이미지는 비워 두기 : 선, 배경 무늬, 장식 아이콘처럼 전할 내용이 없는 이미지는 설명을 비워 두어도 됩니다.
그러면 화면 읽기 프로그램이 건너뛰어 오히려 듣기 편해집니다.
다만 진료실·장비·의료진처럼 내용이 있는 사진은 채워 두시는 것이 좋습니다. - 글자가 들어간 이미지는 그 글자를 : 안내 문구가 들어간 배너라면 이미지 속 핵심 문구를 설명에 적습니다.
내용이 길다면 이미지 설명보다 본문에 글자로 쓰는 편이 낫습니다(통이미지 이야기). - 올릴 때마다 채우기 : 홈페이지를 고칠 때 한 번 채워 두어도, 이후 공지나 사진을 올리면서 다시 비는 경우가 많습니다.
사진을 올릴 때 설명을 한 줄씩 적는 것을 직원분과 약속해 두시면 좋습니다.
이미지 설명은 사진 한 장에 한 줄이라 하나하나는 작은 일이지만, 사진이 많은 병원 홈페이지에서는 쌓이면 차이가 커질 수 있습니다.
시설 안내·의료진 소개처럼 사진이 많은 페이지부터 차례로 채워 나가셔도 괜찮습니다.
다른 항목의 결과는 23곳 점검 결과에서 보실 수 있습니다.
우리 병원 사진에 설명이 잘 들어가 있는지 궁금하시면 아래에서 무료 점검을 신청해 주세요.