센스리더 설치와 활용

센스리더 설치와 활용

화면 낭독기 센스리더가 주요 마크업 요소를 음성으로 출력하는 방식이 왜 중요한가 : 센스리더로 웹을 어떻게 탐색하는지 사용자평가에서 어떤 결과로 나올 수 있을지 대략적으로 예상할 수 있기 때문에 기본적인 음성출력 방식을 이해하는 것이 중요하다.

이미지의 대체 텍스트

이미지에 대체텍스트를 제공했을 때 센스리더기가 음성을 출력하는 법

• alt 값이 정리되어 있지 않은 경우 ==>
  X로만 표시, 파일명을 그대로 읽어줌

 

• alt 값이 '홍길동'으로 제공된 경우 ==>
  X 홍길동 표시, '홍길동'이라고 읽어줌

 

• alt 값이 '홍길동', 그리고 타이틀에 '남자'라는 정보가 제공되어 있는 경우 ==>
  X 홍길동 표시, 타이틀 정보 음성 출력하지 않고 alt값만 음성출력

 

• alt 값에 공백처리를 한 경우 ==>
  화면에 X라고만 표시되어 있고 alt값이 없는 경우와 차이는 없지만 alt값의 속성을 보면 공백으로 처리, alt값을 공백처리 했을 때는 홍길동에서 바로 사업취지 설명에 쓴 이미지로 넘어감.
  alt속성을 이용해서 공백처리 하게 되면 이미지를 숨기는 효과가 있음.

 

• alt 값에 사업취지라고 넣어놓고 롱데스크(long desc)를 연결한 경우 ==> alt enter를 눌렀을 때 연결된 긴 설명파일을 읽어줌
  
  • 롱데스크 사용법 : 센스리더로 롱데스크 속성에 연결된 설명파일을 보기 위해서는 alt enter키를 누르면 된다.

링크와 title, target

링크에서 타이틀과 타켓 속성을 사용해서 새창 알림을 제공했을 때 센스리더가 음성 출력하는 법

• 새창 알림에 타켓속성을 사용했을 때(타켓 블랭크 속성 지정) ==>
  이벤트 페이지로 새창 링크라고 음성출력

• 타이틀로 새창열림(새창열림 타이틀 속성이 있는 경우) ==>
  이벤트 페이지로 새창 열림 링크라고 음성출력

• 타켓 블랭크와 새창 열림 두가지 속성을 모두 사용한 경우 ==>
  이벤트 페이지로 새창 열림, 새창 링크라고 음성 출력, 새창에 대한 정보를 두번 알려주고 있기 때문에 가능하다면 두가지 모두 사용하는 것보다는 하나만 사용하는 것이 좋음

• 타켓 블랭크가 있고 링크안에 이미지로 링크텍스트를 이벤트 페이지로 나오게 제공한 경우 ==>v이벤트 페이지로 새창 그래픽 링크라고 음성출력, 이미지가 함꼐 사용된 경우에는 그래픽이라고 출력하기 때문에 사용자가 요소에 대한 의미를 명확히 이해할 수 있음

입력 서식의 레이블 제공

체크상자를 통해서 입력서식에 레이블이 제공됐을 때 센스리더가 음성 출력하는 법

• 옵션상품 1 : 옵션상품 체크 상자에서는 별로도 라벨을 연결하지 않고 텍스트하고 체크박스가 제공된 경우 ==>
  해제 체크상자 옵션상품 1이라고 음성 출력 - 체크상자와 텍스트에 음성이 따로따로 구분되어 출력, 체크상자에 포커스가 이동

 

• 옵션상품 2 : 체크박스에서는 옵션상품 2라는 타이틀 정보를 제공한 경우 (화면상에서는 체크상자 하나만 보인다) ==>
  인풋에 타이틀이나 라벨을 사용했을 때 적절하게 음성출력되는 사례1 - 화면에서는 타이틀 정보가 표시되지 않았지만 음성으로는 해제 옵션상품 2 체크상자라고 음성출력

 

• 옵션상품 3 : 라벨로 옵션상품을 명시해주는 경우 (라벨을 명시적인 방법 레이블 포 아이디로 연결해준 방법) ==>
  인풋에 타이틀이나 라벨을 사용했을 때 적절하게 음성출력되는 사례1 - 해제 옵션상품 3 체크상자라고 음성출력 - 선택, 해제, 체크상자, 그리고 옵션상품2 같은 멘트가 한꺼번에 연달아서 들리고 있으서 현재 접근한 입력서식이 체크상자가 어떤 역할을 하는 것인지 명확히 알 수 있음

 

• 옵션상품 4 : 라벨을 포와 아이디로 묶지 않고 라벨과 라벨로 감싸서 안에다 인풋을 넣은 경우(암묵적인 방법) ==>
  해제 체크상자 옵션상품 4 라고 음성출력 - 체크상자와 텍스트에 음성이 따로따로 구분되어 출력, 체크상자와 1:1로 매칭을 시키지 못하므로 사용하지 않는 것이 좋음

 

• 옵션상품 5 : 라벨정보하고 타이틀정보를 동시에 제공한 경우(라벨은 옵션상품 5로 연결되어 있고 타이틀정보에는 베스트라고 작성이 되어 있음) ==>
  해제 옵션상품5 체크상자라고 음성출력 - 타이틀 정보는 생략되고 라벨정보만 음성출력

 

• 옵션상품 6 : 라벨로 사용되는 것이 아니라 이미지인 경우(이미지를 라벨을 사용해서 포와 아이디로 묶어줬을때) ==>
  해제 체크상자 옵션상품6 이미지라고 음성출력 - 체크상자와 텍스트에 음성이 따로따로 구분되어 출력, 체크상자와 1:1로 매칭을 시키지 못하므로 사용하지 않는 것이 좋음

 

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

제목 셀을 축약형으로 제공하는 방법 (abbr이라는 속성을 활용)

사진과 같이 th의 텍스트 내용이 많을 경우 아래의 제목셀을 참조하게 되면 엄청나게 긴 내용을 음성으로 듣게 된다. 따라서 오히려 많은 정보가 불편을 줄 수 있기 때문에 긴 내용의 제목셀을 abbr 속성을 이용해서 길이를 줄여주고 간단하게 음성출력되는 효과를 볼 수 있다. 아래 사례에서는 추가메뉴에 대한 부분을 abbr 속성으로 제공하여 제목셀을 참조해서 읽을 때 위에있는 긴 내용을 읽지 않고 단순히 추가 메뉴라고만 음성출력

목록 태그

ul, ol, dl과 같은 목록형태를 센스리더가 음성출력하는 법

목록을 시작하기 전에 목록 시작하고 목록 갯수등을 음성출력, 목록이 끝나면 목록 끝이라고 음성출력

• ul 목록을 사용한 경우 ==> 앞의 기호가 상황에 따라 음성출력, ul앞의 블릿은 센스리더의 설정상황에 따라 음성출력되는 경우가 있고 되지 않는 경우가 있을 수 있다.
• ol 목록을 사용한 경우 ==> 목록앞의 1,2 숫자를 센스리더가 그대로 음성출력, 리스트 스타일을 none으로 처리하게 되면 숫자가 표시되지 않기 때문에 센스리더도 이 숫하는 음성출력 하게 되지 않는다.
• dl 목록을 사용한 경우 ==> dt와 dd로 나누어져 있을때 센스리더에서는 dt와 dd로 구분해서 음성출력하지 않고 그냥 하나의 일반적인 텍스트처럼 음성출력한다.

조직도 같은 경우의 목록을 센스리더가 음성출력하는 법

2-B와 같이 하나의 li안에서 항목이름과 항목명이 같이 표시되는 등 하나의 컨텐츠를 구성하는게 사용자에게 가장 좋은 구성.

• 사례 1 : 조직도 계층구조 1 ==>
  목록시작, 목록시작하면서 항목을 읽어주고 있어서 사실 내용은 들을 수 있지만 구조를 파악하는 것은 불가능하므로 사용을 피하는게 시각장애인에게 더 도움을 줄 수 있는 방법이 된다

 

• 사례 2 : 사용성높이기 2-A (ul을 반복적으로 사용한 경우)==>
  2-A의 경우 상품명, 가격, 할인율마다 ul을 반복적으로 사용하여 목록 시작이라는 음성 그리고 목록 끝이라는 음성을 3줄을 읽는 동안 6번 출력하고 있다.

 

• 사례 3 : 사용성높이기 2-B (li를 활용하여 사용한 경우)==>
  2-B의 경우 ul을 처음에만 사용하고 li로만 상품명, 가격, 할인율을 적욕하여 목록시작, 목록 끝이라는 음성을 한번만 출력

 

• 사례 4 : 사용성 높이기 3 (dl, dt, dd를 활용해서 항목들을 목록으로 구성한 경우)==>
  인기 순위 띄고 1위, 상품명 띄고 초고위험, 연이율 띄고 10%, 이렇게 각각의 항목이름과 항목의 값들이 하나로 연결지어지지 않고 따로 떨어져서 음성출력. 따라서 어떤 의미의 마크업인지를 구분할 수 없는데다가 항목들이 다 따로 들려서 사용자가 하나의 컨텐츠로 이해하기에는 쉽지 않다.

 

테이블의 활용

테이블을 사용할 때 th와 스코프를 활용해서 제목셀과 내용셀을 구분했을 때 센스리더가 음성출력 하는 법

센스리더로 제목셀 내용을 참고해서 음성출력을 하려면 ctrl alt 방향키를 사용한다. 테이블 내부로 진입했을 때 ctrl alt를 누른 상태에서 방향키로 방향조절

• 사례 1 : TH SCOPE TABLE ==>
  출시일에서 ctrl alt 위, 아래 방향키를 눌러서 숫자 부분만 이동을 해도 단순히 출시일만 읽어주는게 아니라 좌측에 있는 메뉴들까지 연결해서 읽어준다.
  th 스코프 방식의 특징이 좌우로 이동할 때 상단의 제목을, 위아래로 이동할 때는 좌측에 있는 th 제목셀을 참조해서 음성출력 하는 것

테이블의 제목셀과 내용셀을 구분해주는 방법에 있어서 아이디와 헤더스를 사용했을 때 센스리더에서 음성출력 하는 법

th에서와는 달리 이동하는 방향 셀에 진입하는 방향에 관계없이 연결된 헤더셀들을 모두 한번에 참조해서 읽어주기 때문에 복잡한 테이블에서 아이디와 헤더스를 사용하게 되면 시각장애인 사용자가 테이블의 구조와 데이터를 이해하는데 크게 도움이 된다.

• 사례 1 : id headers TABLE(상단에 있는 구분 항목에 아이디가 지정이 되어 있고 좌측에 있는 등수 항목에도 아이디가 지정되어 있으며 6개 각 셀의 내용에는 상단과 좌측에 있는 아이디 값을 헤더로 연결해 놓은 경우) ==>
  각 셀의 내용만 음성 출력하는 것이 아니라 좌측에 있는 순위 정보와 상단에 있는 항목이름 정보를 한꺼번에 음성출력한다. 예를 들어 점심값 셀의 음성출력에는 4~6위, 끼니, 점심값 이렇게 음성출력하고 임금셀을 음성출력할때는 4~6위, 메뉴, 임금으로 음성출력

• 마크업 요소의 개선작업으로 화면낭독기 음성출력이 개선되지만 여기에서 그치면 안된다. 왜냐하면 요즘은 웹이 응용프로그램화 되가면서 하나의 요소에 여러가지 기능을 붙일 수 있기 때문에 기존의 마크업 요소 개선작업으로는 이 부분들을 모두 만족시킬 수 없다. 그래서 새로 나온 신기술 ARIA(Accessible Rich Internet Applications)에 기술적용하고 정상적인 활용 가능한지 확인