시각 장애인을위한 웹 사용자 환경 개선

Question

recent episode of Hanselminutes Scott Hanselman이 웹 응용 프로그램에서 접근성에 대해 논의하고 있으며 내 응용 프로그램에서 접근성에 대해 생각하고있는 것을 듣고있었습니다.

우리는 접근성과 관련하여 웹 애플리케이션에서 의미 론적 마크 업의 중요성을 모두 알고 있지만 장애가있는 사용자의 사용자 경험을 개선하기 위해 만들 수있는 다른 간단한 개선 사항은 무엇을 알고 있습니까?

에피소드에서 나는 이마를 때리고 "물론 내가 그걸하지 않은 이유는 무엇입니까?"라고 여러 번 언급했습니다. 특히 Scott은 "주 콘텐츠로 건너 뛰기"라고 말한 웹 페이지 상단에 숨겨진 링크를 배치 한 웹 사이트에 관해 이야기했습니다. 이 링크는 스크린 리더를 사용하는 사람들 만 볼 수 있으며 스크린 리더가 메뉴 및 기타 보조 컨텐츠를 뛰어 넘을 수 있습니다. 그것은 그렇게 명백한 개선이지만 아직 생각하지 않기 쉽습니다.

유효한 XHTML을 만들고 하루 만 부르는 것보다 접근성과 전반적인 사용자 경험이 더 중요합니다.

시각 장애인을위한 사용자 환경을 개선하기위한 간단한 방법은 무엇입니까?

Answer 1

체크 아웃 Fangs

Fangs 웹 페이지를 방문 할 때 화면 판독기가 "인식"무엇을 에뮬레이트 파이어 폭스 용의 브라우저 도구입니다. 이 기능은 간단합니다. 웹 페이지를 방문 할 때 화면 판독기가 사용자에게 읽는 내용의 사본을 출력하는 것입니다. JAWS 또는 Windows Eyes와 같은 화면 판독기 응용 프로그램을 사용 (및 구매)하지 않고도 시각 장애인이 이해하고 사용할 수 있도록 콘텐츠를 효과적으로 구성했는지 신속하게 분석 할 수있는 유용한 도구입니다.

Answer 2

화면 판독기에서 가장 큰 문제는 대개 페이지에 항목을 배치하는 표입니다. Screenreaders 정말 그들을 처리 할 수 ​​없습니다. 귀하의 HTML에있는 div에 물건을 넣어 현명한 순서로 넣어. 그런 다음 CSS에 페이지의 div를 배치하십시오. 표를 사용하여 표에 있어야하는 내용을 표시하십시오.

Answer 3

"시력이 손상되었습니다"는 색맹을 포함합니다. 전 레드와 그린을 잘 구분할 수없는 사람과 일하는 데 익숙했기 때문에 신호등 스타일의 인터페이스를 사용하는 모든 응용 프로그램은 사용하기가 매우 어려웠습니다. 우리가 작업하고있는 업계에서 행의 경고는 색으로 구분되어 있었기 때문에 경고 유형 ("긴급", "경고"등)의 텍스트가있는 행의 추가 열과 같이 다른 형태의 디스플레이가 유용했습니다.).

Answer 4

많은 웹 페이지에 대한 코드는 다음과 같이 구성되어있다 :

1. 헤더
2. 최고 탐색
3. 왼쪽 탐색
4. 내용
5. 바닥 글이 방법을 구조화

, "Skip to Main Content"에 대한 숨겨진 링크는 ficial.

1. 내용
2. 헤더
3. 최고 탐색
4. 왼쪽 탐색
5. 바닥 글

당신을 : 당신이 가질 수 있도록하지만, CSS 레이아웃,이 순서를 변경할 수 있습니다 그런 다음 CSS 위치 지정 및 부동을 사용하여 화면에서 이러한 다양한 요소를 이동하여 페이지를 원하는 모양으로 보이게하십시오.

이러한 방식으로 웹 페이지를 구성하는 주요 이점은 브라우저가 CSS를 지원하지 않으면 내용이 페이지에 처음 나타나는 것입니다.화면 판독기 외에도 모바일 장치 및 검색 엔진 스파이더에 유용합니다.

Answer 5

부분적으로 부분적으로 보았을 때 텍스트가 너무 작지 않고 배경색을 크게 대비해야합니다. em과 같은 상대 크기 지정 단위를 사용하여 px의 절대 단위가 아닌 텍스트의 크기를 조정할 수 있는지도 확인해야합니다. (내 의견으로는 브라우저의 확대/축소가 점점 더 선호되고 있지만 오버 텍스트 크기 조정).

화면 판독기 사용자의 경우 화면 판독기를 실제로 사용하는 방법을 이해하는 것이 좋습니다. 다음 기사는 스크린 리더를 사용하여 맹인이 웹을 탐색하는 것을 관찰 한 내용을 바탕으로 가이드 라인을 제공합니다. 지금은 조금 오래된, 그러나 당신에게 스크린 리더 사용자를 도움이 될 것입니다 무엇에 대한 좋은 느낌을 제공하고, 무엇을하지 않습니다 :

http://redish.net/content/papers/interactions.html

는 또한, 시각 장애인에 대한 미국의 재단은 section of their website dedicated to advice for web developers on how to cater for vision impaired users 있습니다.

시각 장애가있는 것 외에도 장애가있는 사람이 마우스를 사용하지 못하게하거나 신경 장애가있는 사람도 고려해야합니다. 누군가가 그 개인을 보호하는 방법에 대한 자문을 제공하는 자원을 제공 할 수 있다면 좋을 것입니다.

Answer 6

그것은 ... 나는 우리가 508을 준수했다 직장에서 봤는데 이후 잠시되어 있지만, 여기에 내가 그가 다른 포스터에 의해 감동되지 않은 기억이 뭐죠

1. 만 데이터 용 테이블을 사용하십시오. 레이아웃을 피할 수 있으면 테이블을 사용하지 마십시오.
2. 데이터 용 테이블을 사용할 때 열 헤더는 TH 태그에 중첩되어야하며 제목 및 범위 속성을 사용해야합니다. 테이블 태그는 summary 속성을 사용해야합니다.
3. 이미지에는 이미지의 내용을 설명하는 alt 속성 값이 있어야하며 이미지가 아무런 용도로 사용되지 않는 경우 (심 이미지 또는 유사한 이미지) alt 속성은 빈 문자열로 설정되어야합니다.
4. 음성 인식 리더를 사용하거나 키보드를 통해서만 탐색하거나 스타일 시트를 끄십시오. JAWS를 구입해야한다고 생각하지만 무료 스크린 리더가있을 것입니다. 화면 판독기가 해석하는 단서없이 대부분의 웹 페이지를 탐색하는 것이 얼마나 어려운지를 진정으로 이해하려면 화면 판독기를 통해 사이트를 경험해야합니다.

Answer 7

접근성있는 페이지를 만드는 것은 한번도 해본 적이 없다면 생각하기가 어렵습니다. 그러나 일단 기본 개념을 배우면 95 %의 경우에 매우 쉽게 수행 할 수 있습니다. 나는 대부분의 다른 사람들이 말한 반복,하지만됩니다

1. 만
2. 당신이 HTML을 통해 당신에게 의미 도구를 사용할 수를 사용하는지 확인 테이블 형식의 데이터에 대한 테이블을 사용합니다. 이것은 TH를 scope 속성과 함께 사용하는 것을 의미합니다. <i> 및 대신 <b대신 < em 을 사용하십시오. 약자 및 약도 태그를 사용하십시오. 정의 목록을 사용하십시오. 누구든지 원하는 경우 이러한 것들을 확장 할 수 있습니다.

3. 가장 중요한 사항 중 하나는 입력란에 레이블 레이블을 사용하는 것입니다. 모든 입력 필드, 라디오 버튼, 체크 박스의 TextInput를 들어, 당신은해야합니다> 사용자 이름 = "사용자 이름"에 대한

   < 라벨 : </라벨> < 입력 이름 = "사용자 이름"/>

4. 가 추가 " 큰 덩어리의 텍스트가 어디에 있는지에 따라 "탐색 건너 뛰기"또는 "탐색 건너 뛰기"를 선택하십시오. 정부 기관 사이트에서 작업하는 경우 이는 제작중인 모든 것이 반복적 인 정보를 무시할 수있는 제 2의 성격이되어야합니다.

5. 강조를 위해 색을 사용하지 마십시오.

6. 모든 텍스트의 크기를 조정할 수 있는지 확인하십시오. 이것은 거의 당신의 CSS에서 "px"를 사용하지 않는다는 것을 의미합니다.

7. 내가 다시 강조 할 것입니다 : 의미있는 페이지를 만듭니다. 제목에 H 태그를 사용하십시오. 네비게이션 용 ul/li을 사용하십시오.

8. 모두 이미지에 고도 속성을 사용하십시오. 스페이서 gif가 있다면 ... 음 ..하지 마세요. 그렇지 않은 경우 사진이 무엇인지, 그 사진과 관련된 내용이 무엇인지 설명하십시오. "차트"를 alt 태그로 사용하지 마십시오. "YTD 재정 차트 : $ 5,000 Q1, $ 4,000 Q2, $ 8,000 Q3"또는 비슷한 것을 사용하십시오.

9. 모든 오디오 및 비디오 구성 요소

여기서 핵심은 시각적 가진 사람, 듣고 모터 장애인 표준 물리적 기능과 동일한 경험을 제공하는 것입니다에 대한 자막 또는 성적 증명서를 제공합니다. 필드로 이동할 수 없으면 스크린 리더도 사용할 수 없습니다. 선택란 옆의 텍스트를 클릭 할 수 없으면 화면 판독기는 텍스트가 선택란과 관련이 있는지 알 수 없습니다.

스타일 시트가없는 사이트 (Firefox 및 Web Developer Toolbar의 경우 ctrl-shift-s)를 자주보고 페이지의 의미를 확인해야합니다. 눈에 보이는 개인으로서 당신에게 이해가되지 않는다면 스크린 리더를 사용하는 사람에게는 의미가 없습니다.