센스리더 설치와 활용

센스리더 음성 출력 방식 이해의 중요성

이미지의 대체 텍스트

  

 

 

1. alt값 정의 안됨 → 파일명 그대로 출력
2. alt값 홍길동 → 홍길동 출력
3. alt값 홍길동, title 남자 → 홍길동 출력, title은 출력 안됨
4. alt값 공백 → 이미지를 숨기는 효과
5. alt값 사업취지, longdesc로 파일 연결 → 사업취지 설명있음 이미지, alt + enter로 연결된 긴 설명글을 볼 수 있음

  

  

링크와 title, target

링크에서 title과 target 속성을 이용해 새 창 열림 제공시, 센스리더 음성 출력

 

1. 새 창 알림에 target="_blank" 속성 사용한 경우 → 이벤트페이지로 새창 링크
2. title="새 창 열림" 속성 사용한 경우 → 이벤트페이지로 새 창 열림 링크
3. target="_blank"와 title="새 창 열림" 모두 사용한 경우 → 이벤트페이지로 새 창 열림 새 창 링크
4. target="_blank", link 텍스트로 "이벤트페이지로"를 제공한 경우 → 이벤트페이지로 새 창 그래픽 링크

  

입력 서식의 레이블 제공

체크 상자를 통해 입력서식에 레이블이 제공되었을 때, 센스리더 음성 출력

 

1. 별도 label 연결하지 않고 텍스트와 체크박스를 제공 → 해제 체크 상자, 옵션상품1
2. "옵션상품2"라는 타이틀 정보 제공 → 해제 옵션상품2 체크 상자
3. label for와 id로 연결(명시적 방법) → 해제 옵션상품3 체크 상자
4. label과 label로 감싸서 input을 넣은 경우(암묵적 방법) → 해제 체크 상자, 옵션상품4
5. label 정보와 타이틀 정보를 동시에 제공한 경우 → 해제 옵션상품5 체크 상자
6. label로 사용되는 것이 이미지인 경우 → 해제 체크 상자, 옵션상품6 이미지

1, 4, 6의 경우 체크상자와 텍스트의 음성이 따로 구분되어 들림

  

페이지, 프레임, 콘텐츠 블록의 제목 제공

 

 

th의 텍스트 내용이 많을 경우 오히려 불편함을 초래함. 따라서 abbr 속성을 이용하여 긴 내용의 제목셀의 길이를 줄여주고 간단히 음석 출력하는 효과

 

"추가메뉴는 원하시는대로 주문하실 수 있습니다." → "추가메뉴"로만 출력

  

  

  

 

 

목록 태그

목록 시작, 목록 갯수, 목록 끝으로 음성 출력

List - ul, ol, dl

 

 

 

1. ul → 앞의 기호에 따라 출력. 블릿기호는 센스리더 설정에 따라 출력 유무 달라짐
2. ol → 목록 앞 숫자를 그대로 출력. 리스트 스타일을 none으로 하면 숫자가 표시되지 않기 때문에 음성출력 역시 되지 않음
3. dl → dt와 dd를 구분해서 출력하지 않고 하나의 일반적인 텍스트처럼 출력됨

  

 

 

 

List - 계층 구조 사용성

 

 

1. 계층구조1 → 내용은 파악할 수 있으나 구조를 파악하기 어려움.
2. 사용성높이기2-A → ul을 반복적으로 사용한 경우, 목록시작과 목록끝이라는 음성이 6번 반복
3. 사용성높이기2-B → ul을 여러번 사용하는 것보다 li를 사용하는 것이 효율적
4. 사용성높이기3 → dt, dd를 사용했을 때 사용자가 하나의 콘텐츠로 이해하기 어려움

  

  

  

  

  

  

  

  

  

  

  

  

  

  

테이블의 활용

ctrl + alt + 방향키로 조절

th scope table

좌우로 이동할 때는 상단에 있는 제목을, 위아래로 이동할 때는 좌측의 제목셀을 참조하여 음성 출력

  

  

  

  

id headers table

좌측의 순위정보와 상단의 항목이름 정보를 한번에 음성 출력. th와 달리 이동방향, 셀의 진입하는 방향과 달리 연결된 header셀의 정보를 참조하여 출력

 

  

정리

• 센스리더에서 이미지 요소에 alt 속성으로 대체텍스트를 제공하지 않은 경우 이미지 경로를 단어 또는 자음, 모음 조합으로 음성을 출력
• 이미지가 구조적인 정보를 담고 있거나 많은 정보를 담고 있어 단순한 단어나 짧은 문장으로 설명할 수 없는 경우 longdesc 속성을 사용
• target="_blank"속성을 사용하여 링크를 새 창으로 열리게 할 경우 "새 창 링크"로 음성을 출력
• label 요소를 암묵적으로 제공한 경우 센스리더에서 정상적으로 음성으로 출력하지 못하는 문제가 있으니 명시적으로 사용하는 것을 권장
• 내용이 없는 프레임의 경우 간혹 title="빈프레임"으로 제목을 제공하는 경우에 "빈 프레임 프레임"과 같이 "프레임"을 두 번 음성을 출력하는 문제가 발생할 수 있으므로 "내용없음"정도의 수준이 적절함
• 목록 요소를 사용할 경우 ul 등의 목록 요소 시작을 불필요하게 사용하지 않아야 상용자가 쉽게 인지할 수 있음
• 데이터 테이블에 제목 셀과 내용 셀을 짝지어 주는 방식으로는 복잡한 표의 경우 headers, id 속성 제공, 간단한 표의 경우 th요소와 scope 속성을 활용하는 방법이 있음

 

※본 내용은 배움나라 온라인강의를 바탕으로 작성하였습니다.