시각 장애인을 위한 웹 사용자 경험 향상

StackOverflow https://stackoverflow.com/questions/61399

  •  09-06-2019
  •  | 
  •  

문제

나는 듣고 있었다 Hansel Minutes의 최근 에피소드 Scott Hanselman이 웹 애플리케이션의 접근성에 대해 논의하던 중 저는 제 애플리케이션의 접근성에 대해 생각하게 되었습니다.

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

그 회에서 제가 이마를 찰싹 때리며 "물론이지!"라고 말한 적도 여러 번 있었습니다.나는 왜 그렇게 하지 않았나요?” 특히 스콧은 웹페이지 상단에 “메인 콘텐츠로 건너뛰기”라는 숨겨진 링크를 배치한 웹사이트에 대해 이야기했다.링크는 스크린 리더를 사용하는 사람들에게만 표시되며 이를 통해 스크린 리더가 메뉴 및 기타 보조 콘텐츠를 뛰어넘을 수 있습니다.너무나 명백한 개선이지만, 그것을 생각하지 않기가 쉽습니다.

단순히 유효한 XHTML을 생성하고 이를 완료하는 것보다 접근성과 전반적인 사용자 경험에 더 많은 것이 있습니다.

시각 장애인의 사용자 경험을 개선하기 위한 간단한 비결은 무엇입니까?

도움이 되었습니까?

해결책 2

확인해 보세요 송곳니

송곳니 웹 페이지를 방문할 때 화면 판독기가 "보는" 내용을 에뮬레이트하는 Firefox용 브라우저 내 도구입니다.그 기능은 간단합니다:웹 페이지를 방문할 때 화면 판독기가 사용자에게 읽어주는 내용의 기록을 출력합니다.JAWS 또는 Windows Eyes와 같은 화면 판독기 응용 프로그램 사용(및 구매) 방법을 배우도록 강요하지 않고도 시각 장애가 있는 개인이 이해하고 사용할 수 있도록 콘텐츠를 효과적으로 구조화했는지 신속하게 분석하는 데 유용한 도구입니다.

다른 팁

접근 가능한 페이지를 만드는 것은 한 번도 해본 적이 없다면 생각하기 어려운 일입니다.그러나 기본 개념을 배우면 95%의 경우 매우 쉽습니다.나는 대부분 다른 사람들이 말한 것을 반복할 것입니다. 그러나:

  1. 테이블 형식 데이터에만 테이블을 사용하세요.
  2. HTML을 통해 사용할 수 있는 의미 도구를 사용해야 합니다.이는 범위 속성과 함께 TH를 사용하는 것을 의미합니다.<i> 대신 <em>을, <b> 대신 <strong>을 사용하세요.사용 두문자어 그리고 약어 태그.정의 목록을 사용하십시오.누구든지 원한다면 이러한 내용을 확장할 수 있습니다.

  3. 가장 중요한 것 중 하나는 상표 입력 필드에 태그를 지정합니다.모든 입력 필드, 라디오 버튼, 체크박스 및 텍스트 입력에 대해 다음이 있어야 합니다.

    <label for="username">사용자 이름:</label><input name="username" />

  4. 큰 텍스트 덩어리가 어디에 있는지에 따라 "탐색 건너뛰기" 또는 "탐색으로 건너뛰기"를 추가합니다.정부 사이트에서 작업하는 경우 생성하는 모든 항목에서 반복적인 정보를 건너뛸 수 있다는 것이 제2의 천성입니다.

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

  6. 모든 텍스트의 크기를 조정할 수 있는지 확인하세요.이는 CSS에서 "px"를 사용하지 않는다는 의미입니다.

  7. 나는 이것을 다시 강조하겠습니다: 의미론적 페이지를 만듭니다. 사용 시간 제목에 태그를 추가하세요.사용 울/리 탐색용.

  8. 사용 대체 속성 모두 이미지.스페이서 gif가 있다면...잘..하지 않다.그렇지 않으면, 그 그림이 무엇인지 설명하고 그 그림이 관련된 내용에 어떤 의미를 갖는지 설명하십시오.Alt 태그로 "차트"를 사용하지 마십시오."YTD 재정 차트:$5,000 Q1, $4,000 Q2, $8,000 Q3" 또는 이와 유사한 것.

  9. 모든 오디오 및 비디오 구성 요소에 대해 자막 또는 스크립트 제공

여기서 핵심은 시각, 청각 및 모터 장애는 표준적인 신체적 능력을 가진 사람들과 동일한 경험을 합니다.필드를 탭할 수 없으면 화면 판독기도 탭할 수 없습니다.확인란 옆에 있는 텍스트를 클릭하여 선택할 수 없는 경우 화면 판독기는 텍스트가 확인란과 관련되어 있다는 것을 인식하지 못하는 것입니다.

스타일시트 없이 사이트를 자주 봐야 합니다(Firefox를 사용하는 경우 Ctrl-Shift-s 및 웹 개발자 도구 모음) 페이지가 의미가 있는지 확인합니다.정상인으로서 이해가 되지 않는다면 화면 판독기를 사용하는 사람에게도 이해가 되지 않을 것입니다.

508조를 준수해야 하는 직장에 다닌 지 꽤 됐는데, 다른 포스터에서는 다루지 않았던 기억이 나네요...

  1. 데이터에는 테이블만 사용하세요.가능하다면 레이아웃에 테이블을 사용하지 마십시오.
  2. 데이터용 테이블을 사용할 때 열 헤더는 TH 태그에 중첩되어야 하며 제목 및 범위 속성을 사용해야 합니다.테이블 태그는 요약 속성을 사용해야 합니다.
  3. 이미지에는 모두 이미지에서 무슨 일이 일어나고 있는지 설명하는 alt 속성 값이 있어야 하며, 이미지가 아무런 목적도 없는 경우(shim 이미지 또는 이와 유사한 것) alt 속성을 빈 문자열로 설정해야 합니다.
  4. 텍스트 음성 변환 리더를 사용하거나 키보드를 통해서만 탐색하거나 스타일시트를 꺼보세요.JAWS를 구입해야 한다고 생각하지만, 무료 스크린 리더가 분명 있을 것입니다.대부분의 웹 페이지가 스크린 리더가 해석하는 신호 없이 탐색하는 것이 얼마나 어려운지 진정으로 이해하려면 스크린 리더를 통해 사이트를 경험해야 합니다.

"시각 장애"에는 색맹도 포함됩니다.나는 빨간색과 녹색을 너무 잘 구분하지 못하는 사람과 함께 일한 적이 있었기 때문에 신호등 스타일 인터페이스를 사용하는 응용 프로그램은 그 사람이 사용하기가 매우 어려웠습니다.우리가 일하고 있는 업계에서는 행의 경고가 색상으로 구분되어 있으므로 경고 유형("긴급", "경고" 등) 텍스트가 있는 행의 추가 열과 같은 다른 형태의 표시가 그에게 유용했습니다. ).

스크린 리더의 가장 큰 문제는 일반적으로 페이지에 항목을 배치하는 테이블입니다.스크린리더는 이를 실제로 처리할 수 없습니다.HTML의 div에 항목을 넣고 합리적인 순서로 배치하십시오.그런 다음 CSS를 사용하여 페이지에 div를 배치합니다.테이블을 사용하여 테이블에 있어야 하는 콘텐츠를 표시합니다.

많은 웹페이지의 코드는 다음과 같이 구성됩니다.

  1. 머리글
  2. 상위 탐색
  3. 왼쪽 탐색
  4. 콘텐츠
  5. 보행인

이런 방식으로 구성하면 "주 콘텐츠로 건너뛰기"에 대한 숨겨진 링크가 도움이 됩니다.그러나 CSS 레이아웃을 사용하면 다음과 같이 순서를 변경할 수 있습니다.

  1. 콘텐츠
  2. 머리글
  3. 상위 탐색
  4. 왼쪽 탐색
  5. 보행인

그런 다음 CSS 위치 지정 및 플로트를 사용하여 화면에서 이러한 다양한 요소를 이동하여 페이지가 원하는 대로 보이도록 만듭니다.

이런 방식으로 웹페이지를 구성할 때의 가장 큰 장점은 브라우저가 CSS를 지원하지 않는 경우 페이지의 콘텐츠가 먼저 표시된다는 점입니다.이는 화면 판독기 외에도 모바일 장치 및 검색 엔진 스파이더에 유용합니다.

부분적으로 시력이 있는 경우 텍스트가 지나치게 작지 않고 배경색과 상당히 대비되는지 확인해야 합니다.또한 다음과 같은 상대 크기 단위를 사용하여 텍스트 크기를 조정할 수 있는지 확인해야 합니다. 여자 이름와 같은 절대 단위보다는 px(비록 내 생각에는 브라우저가 텍스트 크기 조정보다 확대/축소를 선호함에 따라 이 문제는 점점 덜 문제가 되고 있습니다.)

화면 판독기 사용자의 경우 화면 판독기가 실제로 사용되는 방식을 파악하는 것이 도움이 됩니다.다음 기사에서는 화면 판독기를 사용하여 웹을 검색하는 시각 장애인의 관찰을 바탕으로 지침을 제시합니다.지금은 약간 구식이지만 스크린 리더 사용자에게 도움이 되는 것과 도움이 되지 않는 것에 대해 좋은 느낌을 줍니다.

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

또한 미국 시각 장애인 재단(American Foundation for the Blind)에는 시각 장애가 있는 사용자를 위한 방법에 대해 웹 개발자를 위한 조언을 제공하는 웹 사이트 섹션.

시각 장애가 있는 사람뿐만 아니라 마우스를 사용할 수 없는 장애가 있는 사람, 신경 장애가 있는 사람도 고려해야 합니다.누구든지 해당 개인에게 서비스를 제공하는 방법에 대한 조언을 제공하는 리소스를 제공할 수 있다면 좋을 것입니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top