Web Guide스크린리더화면 낭독시맨틱 마크업
스크린리더 사용자를 위한 마크업
화면을 보지 않고 소리로 듣는다면 우리 사이트를 이해할 수 있을까요.
화면에서는 배치로 구분되는 것이, 소리로 들을 때는 구분되지 않습니다.
01소리로 들으면 무엇이 다른가
화면에서는 한눈에 전체 구조가 보입니다. 메뉴가 위에 있고 본문이 가운데 있다는 것을 바로 압니다.
소리로 들으면 위에서부터 순서대로 하나씩 읽힙니다. 지금 듣고 있는 것이 메뉴인지 본문인지 알려주지 않으면 헤맵니다.
화면으로 볼 때
전체 구조가 한눈에 · 위치로 역할을 파악 · 원하는 곳으로 바로 이동 · 훑어보기 가능
소리로 들을 때
순서대로 하나씩 · 위치를 알 수 없음 · 구조 정보가 없으면 헤맴 · 건너뛰기가 필요
02구조를 알려주는 마크업
화면의 각 영역이 무엇인지 코드로 표시하면, 낭독 프로그램이 '여기는 메뉴입니다', '여기는 본문입니다'라고 알려줍니다.
그러면 사용자가 원하는 영역으로 바로 건너뛸 수 있습니다.
영역 구분머리말, 메뉴, 본문, 꼬리말을 각각의 요소로 표시합니다.
제목 계층제목 태그를 순서대로 씁니다. 목차처럼 건너뛸 수 있게 됩니다.
목록목록은 목록 요소로. '항목 5개 중 1번째'처럼 읽힙니다.
표제목 셀을 지정하면 '가격, 10만원'처럼 읽힙니다.
버튼과 링크 구분이동은 링크, 동작은 버튼으로.
본문 바로가기메뉴를 건너뛰고 본문으로 가는 링크를 맨 앞에 둡니다.
03제목 계층이 목차가 된다
낭독 프로그램 사용자는 제목만 훑어 원하는 부분으로 이동합니다. 제목 태그가 제대로 쓰여 있으면 목차처럼 쓸 수 있습니다.
글자를 크게 만들려고 제목 태그를 쓰거나, 순서를 건너뛰면 이 기능이 망가집니다.
한 페이지에 대제목 하나
페이지의 주제를 나타냅니다.
순서 지키기
1단계 다음에 3단계가 오면 안 됩니다.
크기 때문에 쓰지 않기
글자를 크게 하려고 제목 태그를 쓰면 구조가 깨집니다.
실제 제목만
장식용 문구에 제목 태그를 붙이지 않습니다.
확인
제목만 뽑아 봤을 때 목차가 되는지 확인합니다.
04화면에 안 보이는 안내도 필요하다
화면에서는 아이콘이나 위치로 알 수 있는 것이 소리로는 전달되지 않습니다. 이런 경우 낭독 프로그램에만 읽히는 설명을 넣을 수 있습니다.
예를 들어 'X' 아이콘 버튼에 '닫기'라는 설명을 넣는 식입니다.
아이콘 버튼 아이콘만 있는 버튼에 기능 설명을 넣습니다.
새 창 열림 링크가 새 창으로 열리면 미리 알려줍니다.
상태 변화 내용이 바뀌었을 때 알려주는 처리가 필요합니다.
폼 오류 오류가 생겼을 때 즉시 읽히게 합니다.
과하지 않게 불필요한 설명이 많으면 오히려 방해가 됩니다.
CHECK POINT
□ 머리말·메뉴·본문·꼬리말이 각각의 요소로 구분되어 있는가
□ 제목 태그가 순서대로 쓰여 있는가
□ 제목만 뽑았을 때 목차가 되는가
□ 글자 크기 때문에 제목 태그를 쓰지 않았는가
□ 목록과 표가 제대로 마크업되어 있는가
□ 아이콘만 있는 버튼에 설명이 있는가
□ 본문으로 바로 가는 링크가 있는가
□ 낭독 프로그램으로 실제 확인해 봤는가
#스크린리더#화면 낭독#시맨틱 마크업#제목 구조#본문 바로가기#접근성#표준 마크업#홈페이지 디자인#웹비스타#홈페이지 제작