내 웹 사이트에 액세스 할 수 있도록하기 위해 수행해야하는 최소 단계는 무엇입니까?


35

최근까지 무시한 사실을 인정해야하는 매우 중요한 표준을 따르려고합니다. 장애가있는 많은 사람들이 내 페이지에 액세스 할 수 있도록하고 싶습니다. 나는 주로 텍스트와 이미지를 많이 사용하지만 비디오 / 플래시 나 어떤 종류의 애니메이션도없는 튜토리얼에 중점을 둡니다.

웹 사이트를 사용할 때 많은 장애인이 좋은 경험을 할 수 있도록하기 위해 수행 할 수있는 점검 목록은 무엇이며, 어떤 장애를 가장 염두에 두어야합니까?

나는 모든 사람을 기쁘게 할 수 없다는 것을 알고 있습니다. 내가 겪었 W3C 지침 그러나 나는 완전히 확인 기준이 나에게 적용되는 것 아니에요. 나는 웹 응용 프로그램을 구축하지 않고 정보 교환, 블로그 및 포럼과 같은 위키를 주로 구축합니다.


uxexchange.com?
바비 잭

답변:


18
  • 모든 이미지에 대체 텍스트가 있는지 확인하십시오.
  • 색 구성표가 색맹 인 사람들에게 적합한 지 확인하십시오.
  • 시각 장애인을 위해 고 대비 레이아웃 또는 큰 텍스트 레이아웃을 제공하십시오.
  • 문맥을 읽을 때 링크가 의미가 있는지 확인하십시오 (예 : "여기를 클릭하십시오"라고 쓰지 마십시오).
  • 사용자가 JavaScript를 지원하지 않는 경우 사이트가 여전히 완전한 기본 기능을 제공하는지 확인하십시오.

W3는 웹 사이트를 통해 접근성에 대한 몇 가지 기본 팁을 제공합니다 . Joe Clark은 무료로 볼 수있는 "빌딩 액세스 가능한 웹 사이트" 책 의 온라인 버전을 보유하고 있으며 여기에는 유용한 정보가 많이 포함되어 있습니다.


1
'alt text'규칙에는 몇 가지주의 사항이 있습니다. 불행히도, 나는 그것을 단단하고 빠른 규칙으로 취급하는 사람들과 협력했습니다. 즉, 모든 이미지에는 반드시 alt 속성이 있어야합니다. 그런 다음 로고 이미지에 "Our company 's logo"와 트위터 계정에 연결된 이미지에 "big blue 't'"를 추가합니다.
바비 잭

alt 태그를 사용하면 모든 이미지에 하나가 있어야한다고 생각합니다. 스크린 리더로 작업 할 때 수행 할 작업을 알려야합니다. 이미지가 시각적으로 호소력 있고 단순히 다른 가치가 없다면 alt = ""를 사용하여 스크린 리더가 이미지를 무시하도록합니다. 이미지가 그래프 또는 헤더 인 경우 이미지를 비활성화하는 사람들뿐만 아니라 스크린 리더도 놓치지 않도록 alt 태그에 정보를 포함해야합니다.
ph33nyx

8

마크 업 시맨틱을 만드는 것은 접근성을 향한 방대한 단계입니다. CSS를 적용하지 않고 사이트를 탐색 할 수 있고 내용이 의미가 있다면 그 밖의 모든 것이 시각적으로 중요합니다!


1
벌거 벗은 CSS의 날에 훨씬 더 재미 :)
팀 포스트

2
하하, 당연하지! 진지하게, 많은 사람들이 접근성이 디자인과 관련이 있다고 가정하지만, 디자인없이 작동하도록 컨텐츠를 만들 수 있다면 기계 (따라서 인간)가 항상 액세스 할 수 있습니다. 그것.
Toby

7

먼저“장애인”은 아무것도 의미하지 않습니다!

따라서 확인해야 할 사람들 그룹을 살펴보면 웹 사이트가 될 수 있습니다.

화면이 작은 노트북 만있는 가난한 사람

브라우저 창이 너무 작 으면 고통없이 웹 사이트를 사용할 수 있는지 확인하면됩니다.

색맹 인

흑백 모니터에서 액세스 한 이미지 등의 아이콘 색상을 보지 않고도 웹 사이트를 사용할 수 있습니까?

사이트가 열악한 사람.

브라우저에서 유형 크기를 변경하면 사이트에서 모든 텍스트가 커지고 레이아웃은 여전히 ​​정상입니다. 또한 작은 모니터에서도 사이트를 사용할 수 있습니까?

사용자가 고 대비 레이아웃으로 전환하기 쉽지 않은 경우 사이트에서 고 대비 레이아웃을 사용합니까?

마우스를 사용할 수없는 사람

전에 웹 사이트를 사용해 본 적이없는 사람은 키보드를 사용하여 모든 기능 / 정보에 액세스 할 수 있습니다. (탭 키가 유용한 방식으로 작동합니까?)

독해 능력이 부족한 사람

당신은 가능한 한 간단한 영어를 사용하고 있습니까?

새로운 것을 배우는 데 능숙하지 않은 사람.

사용자가 이미 사용 방법을 알고있는 다른 사이트를 기반으로 사이트 디자인이 이루어 집니까?

맹인.

이것은 어려운 것이고 당신이 읽는 것의 대부분은 매치 사용이 아닙니다!
시력이 약한 사람이 많거나 바인드 사람보다 마우스를 사용할 수없는 사람이 많으므로 다른 모든 액세스 문제를 먼저 줄이십시오.

다음으로 귀하의 목표를 이해하십시오 . 예를 들어, 귀하의 사이트가 호텔 예약 사이트 인 경우, 예약을 위해 유료 전화 번호를 제공 한 다음 호텔 정보에 액세스 할 수 있도록하는 것이 좋습니다.

대부분의 시각 장애인은 이전에 사용하지 않은 대화 형 웹 사이트를 사용하기가 매우 어렵다는 것을 알고 있지만 웹 사이트는 잘 설계되어 있습니다.

none 웹 옵션을 제공해야합니까? (전화? 양식 작성을 돕기 위해 방문하는 사람?)

먼저 이미지없이 사이트를 사용할 수 있습니까? (대체 텍스트는 이것을 수행하는 한 가지 방법입니다)

음성 소프트웨어가 사이트를 위에서 아래로 읽는다면 사이트를 그렇게 이해할 수 있습니까?

바인드 사용자가 복잡한 탐색을 사용하기 쉬운 사이트를 쉽게 만드는 것은 매우 어렵습니다. 또한 바인드 사용자는 페이지의 일부가 JavaScript에 의해 업데이트되었으며 다시 읽어야한다는 것을 알 수 없습니다.

상태 변경을 위해 항목 색상을 변경하는 것도 좋은 옵션이 아닙니다.

바인드 사용자를 위해 웹 사이트를 올바르게 작동시키는 방법을 배우는 유일한 방법은 바인드 사람이 일부 웹 사이트에서 스크린 리더를 사용하는 방법을 보는 것입니다. 표준 중 어느 것도 충분하지 않으며, 당신이하지 말아야 할 것을 말해 주지만,이를 유지하는 것만으로는 충분하지 않습니다.


1
이 답변의 첫 문장을 좋아합니다! (물론 다른 문장들도 마찬가지입니다)
Tim Post

5

이 사이트를 사용하여 규정 준수에 대한 간단한 개요를 얻을 수 있습니다. http://wave.webaim.org/

몇 년 전에 종료 된 기존 "Bobby"시스템과 유사한 작업을 수행합니다.


3

네덜란드 정부는이 사이트를 사용하여 접근성에 대한 사이트를 테스트합니다. 살펴보십시오 ... 접근성에 대한 현재 상태를 테스트하기 위해 사이트를 입력 할 수도 있습니다 ...

http://www.webrichtlijnen.nl/english/


2

Mark Pilgrim의 무료로 다운로드 할 수있는 Dive into Accesibility 책 이이 주제에 대한 유용한 참고 자료 라는 것을 알았 습니다. 2002 년이되었지만 여전히 매우 관련이 있습니다. "우아한 저하 사용"과 같은 조언은 오래되지 않습니다.




1

# 1 답변은 간단합니다. 유효한 의미 론적으로 올바른 HTML / CSS를 작성하십시오 !!! 위의 모든 제안이 좋습니다. 다음은 몇 년 전에 내가 작성한 모든 체크리스트입니다. https://forge.iowa.gov/wiki/index.php/Web_Checklist . FF에 웹 개발자 도구 모음이 있다고 가정하지만 무료이며 쉽게 얻을 수 있습니다.

내가 느끼는 몇 가지 간단한 것들이 진정한 차이를 만들 수 있습니다.

양식의 경우 LABEL 태그를 사용해야합니다. 라디오 버튼과 같은 것들을 위해 더 큰 클릭 가능 영역을 만들고 화면 판독기를 위해 것들을 묶습니다.

내가 일반적으로 오용하는 또 다른 것은 h1, h2, h3 ... 태그입니다. 올바르게 사용하면 누군가 페이지를 쉽게 탐색 할 수 있습니다. 우리가 단지 그것들을 스타일링하고 그것들을 사용한다면 그것들은 스크린 리더와 다른 마우스가없는 I / O 장치로 오도됩니다.

멋진 CSS와 이미지없이 페이지를 탐색하는 사람이 반복되는 코드를 내용으로 건너 뛸 수 있도록하는 것도 좋습니다. 이는 일반적으로 CSS에 숨겨진 SKIP 링크를 사용하여 수행됩니다. 예를 들어, <a href="#skipnav" class="noshow">Skip past navigation to content.</a>긴 탐색을 건너 뛰도록 허용합니다.

Tony가 말한 것처럼 가장 좋은 테스트 중 하나는 페이지의 모든 종소리와 휘파람을 제거하여 여전히 의미가 있는지 확인하는 것입니다.


ALT 태그의 주제에서 ... 모든 이미지 ALT 태그 여야 합니다. 이미지가 내용이면 ALT 태그에 설명이 포함되어야하고 장식 일 경우 빈 따옴표 alt=""를 사용 하여 JAWS와 같은 화면 판독기가이를 전달할 수 있음을 나타냅니다.
ph33nyx
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.