웹 접근성 점검표

접근성은 장애가있는 사람들이 웹 사이트를 동등하게 사용할 수 있도록하여 해당 사이트가 제공하는 상품 및 서비스에 대한 동등한 액세스를 보장하는 관행입니다. 전문적인 웹 디자인 및 개발에 없어서는 안될 부분입니다..


Contents

왜 관심을 가져야 하는가 접근성?

개발자, 디자이너 및 고용주 / 고객이 접근성이 웹 개발 프로세스의 초기 및 필수 부분임을 확인해야하는 많은 이유가 있습니다..

  • 미국, EU, 영국, 이스라엘 및 일본과 같은 많은 지역에서는 장애로 인해 사람들을 차별하지 않는 것이 법적 요구 사항입니다. 작년에 미국에서, 2,235 개의 새로운 ADA 웹 사이트 소송이 제기되었습니다 연방 법원에서. 시간당 하나입니다.
  • 액세스 가능한 사이트는 더 나은 코딩,보다 견고하고 검색 엔진에서 순위가 ​​높은 경향이 있습니다..
  • 접근 가능한 사이트는 비장애 인 방문객에게 더 유용, 더 큰 만족과 전환으로 연결.
  • 액세스 할 수없는 사이트는 비즈니스에 좋지 않습니다. 2019 년에는 영국 조사 발견 한 접근성 장벽으로 인해 4 백만 명이 넘는 사람들이 소매 웹 사이트를 포기했습니다. 잃어버린 사업 인 ‘Click-Away Pound’는 117 억 파운드였습니다. 그건 십억. 영국에서만.
  • 잠재적 인 고객을 자발적으로 거절하는 것은 나쁜 사업입니다.

공통 표준과 문제점

운 좋게도 W3C (웹이 사용하는 많은 표준을 생성하는 기관)에는 웹 사이트에 액세스하는 방법에 대한 표준이 있습니다. 그것은 ~라고 불린다 웹 컨텐츠 접근성 지침 (WCAG). 세 가지 적합성 수준 (A, AA, AAA)이 있으며 ‘A’가 가장 낮은 수준의 접근성입니다. AA 레벨을 목표로하는 것이 좋습니다.

불행히도 WCAG는 길고 건조하며 매우 기술적 인 내용이므로 비교적 쉽게 할 수있는 일을 살펴보고 가장 큰 돈을 벌 수 있습니다. 이것은 당신이 알아야 할 모든 점검표가 아닙니다. 가장 일반적인 오류에 대한 점검표이며 장애가있는 사람들이 말하는 오류는 주요 차단제이며 문제를 해결하기위한 실질적인 제안이 있습니다. 모든 외부 링크가 새 탭에서 열립니다.

Click-Away Pound 설문 조사에서 장애를 가진 응답자에게 구매를 완료하는 주요 블록이 무엇인지 물었습니다. 최고 장벽은 다음과 같습니다 (여러 답변이 허용됨).

  1. 콘텐츠가 많은 혼잡 한 페이지 – 66 %
  2. reCAPTCHA 테스트 – 59 %
  3. 가독성 (대비, 텍스트 레이아웃) 56 %
  4. 움직이는 이미지와 그래픽의 혼란 – 53 %
  5. 잘못된 링크 정보 – 59 % (스크린 리더 사용자의 경우 77 %)
  6. 양식 작성 56 %

웹 사이트 접근성을 향상시키는 방법

첫째, 상위 5 개 중 어느 것도 기술적 문제가 아니며 디자인 또는 카피 라이팅 오류입니다..

1) 너무 많은 내용

간단히 말해서 : 제목과 글 머리 기호 목록이있는 섹션으로 텍스트를 나눕니다. 간단한 언어 사용.

선택의 수가 증가함에 따라 정보 수집에 필요한 노력 좋은 결정을 내립니다. 내용이 너무 많으면 곧 압도적입니다. 내용을 필수 요소로 나누는 것은 시간이 많이 걸리는 기술입니다. Mark Twain은 다음과 같이 썼습니다.“저는 짧은 편지를 쓸 시간이 없었기 때문에 대신 긴 편지를 썼습니다.”

최근 책 글쓰기 디자인 제안

사람들은 시각이나 오디오에 상관없이 긴 텍스트 블록을 훑어 볼 수 있기를 원하므로 헤더, 짧은 단락 및 기타 콘텐츠 디자인 모범 사례를 사용하여 긴 글을 구성하는 것이 매우 중요합니다.

그래서:

  • 하나만

    페이지에.

  • 소제목을 자유롭게 사용하십시오. 화면 판독기와 같은 보조 기술 사용자는 바로 가기 키를 사용하여 제목 사이를 이동하거나 제목 구조에서 콘텐츠의 정신지도를 얻을 수 있습니다..
  • 제목 수준을 건너 뛰지 마십시오. 예를 들어

    , 앞에 와야합니다.

    .

  • HTML에서 올바로 표시된 글 머리 기호 목록 (이와 같이!)을 사용하십시오.
      ,
    • . 스크린 리더는 “10 개 항목 목록”을 발표하고 사용자가 해당 항목을 뛰어 넘을 수 있도록합니다..

    일반 영어 사용

    몬조 은행 “우리의 음색”가이드 일반 언어의 중요성을 설명합니다.

    2010 년 미국 변호사 Sean Flammer는 실험을 진행했습니다. 그는 800 명의 순회 법원 판사들에게 전통적인 ‘법률’논거 또는 자신이 ‘평문 영어’.

    판사는 압도적으로 일반 영어 버전 (66 % ~ 34 %)을 선호했으며, 나이나 배경에 상관없이 선호도가 높았습니다..

    플래 머 노트 (PDF) 일반 영어 버전 :

    거의 한 페이지가 짧아 불필요한 문장과 단어를 제거합니다. 25.2 단어와 반대로 평균 17.8 단어.

    그는 결론 :

    우리는 이제 25 년의 경험적 연구를 통해 피할 수없는 결론을 이끌어냅니다. 독자를 기쁘게하고 설득하고 싶다면 일반 영어로 작성하십시오.

    2) 요점

    간단히 말해 : 개발자 시간을 절약하기 위해 사용자가 잠재적으로 불가능한 농구대를 뛰어 넘지 않도록하십시오..

    응답자들은 종종 리 캡차 버전:

    다시 입력해야하는 엉뚱한 텍스트가있는 reCAPTCHA 버전

    나는 이미지와 숫자 또는 문자를 입력해야합니다. 상점이나 어떤 이미지가있는 이미지를 클릭해야하는 상황에서 나는 항상 일부를 놓치거나 혼란스러워서 가지고 있지 않은 에너지를 사용합니다.

    엉뚱한 글자 스타일의 reCAPTCHA는 이제 더 이상 사용되지 않습니다. “No CAPTCHA reCAPTCHA”(“CAPTCAPA”라고도 함)라는 새로운 화신을 보는 것이 훨씬 일반적입니다.나는 로봇이 아니다”체크 박스)를 사용하려면 로봇이 아닌지 확인하고 비밀 부두를 사용하여 사용자의 점수를 매기는 확인란을 선택해야합니다. 그들이 통과하면 더 이상의 상호 작용이 필요하지 않습니다. 그러나 실패하면 다음과 같은 추가 과제가 표시됩니다.

    사용자에게 주황색을 표시하는 모든 사각형을 클릭하도록 요구하는 보안 문자의 부분 스크린 샷

    사용자가 거리 표시가있는 모든 정사각형을 클릭해야하는 보안 문자 유형은 반드시 국제적 일 필요는 없습니다. 테렌스 에덴이 쓴대로, 보안 문자는 당신이 인간이라는 것을 증명하지 않습니다 – 그들은 당신이 미국인이라는 것을 증명합니다.

    가장 접근하기 쉬운 형태의 reCAPTCHA는 리 캡차 v3 사용자 상호 작용이 필요하지 않지만 테스트에 실패한 방문을 처리하기 위해 더 많은 작업을 수행해야합니다.

    점수를 반환하는 순수한 JavaScript API로, 사이트의 맥락에서 조치를 취할 수있는 기능을 제공합니다. 예를 들어 추가 인증 요소가 필요하거나, 게시물을 중재에 보내거나, 컨텐츠를 긁을 수있는 봇을 제한하는 등.

    3) 가독성

    간단히 말해서 : 텍스트의 대비가 적절하고 읽기 쉽고 정당화되지 않아야합니다..

    • 적절한 대비를 보장. 웹에서 가장 일반적인 액세스 차단 기능 중 하나는 텍스트와 배경의 대비가 좋지 않다는 것입니다. W3C 지침에는 최소 3 : 1의 명암비를 가져야하는 대규모 텍스트 및 큰 크기의 텍스트 이미지를 제외하고 4.5 : 1 이상의 명암비가 필요합니다 (로고 및 ‘사고’텍스트는 제외됨). 대비 비율을 측정 할 수있는 많은 유틸리티가 있습니다. 내가 가장 좋아하는 것은 Ada Rose Cannon ‘s 우수한 대비 위젯, 페이지의 대비가 불충분 한 영역을 강조 표시하는 유용한 브라우저 북마크입니다.
    • 모든 대문자 제목이 없습니다. 대문자가 모두 같은 높이이기 때문에 읽기가 어렵다는 증거가 있으므로 일반적인 단어의 형태를 인식 할 수 없습니다. 또한 일부 스크린 리더는 약어 인 것처럼 (BBC, DOJ 등) 대문자 그룹을 표시합니다. 모든 대문자 헤드 라인이 있어야하는 경우 HTML에 일반적인 경우를 작성하고 CSS로 변환하십시오. 텍스트 변환 : 대문자.
    • 왼쪽 맞춤 텍스트. 아랍어 나 히브리어와 같이 오른쪽에서 왼쪽으로 쓰는 언어로 된 페이지의 경우 텍스트를 오른쪽으로 맞 춥니 다. 난독증이있는 사람이 읽기 어렵 기 때문에이를 정당화하지 마십시오. 그만큼 영국 실독증 협회의 스타일 가이드 또한 제안

      글자가 덜 혼잡 해 보일 수 있으므로 Arial 및 Comic Sans와 같은 sans serif 글꼴을 사용하십시오. 대안으로는 Verdana, Tahoma, Century Gothic, Trebuchet, Calibri, Open Sans가 있습니다..

    4) 산만 이미지와 그래픽

    간단히 말해서 : 사용자가 움직임을 멈출 수있게하십시오. 운영 체제 설정을 존중하십시오. 비디오를 자동 재생하지 않습니다.

    Click-Away Pound 설문 조사에 응한 한 명의 응답자가 썼습니다,

    작은 문제로 사용한 사이트는 이제 광고를 옮기고 쇼핑 할 때 계속해서 더 많은 광고를로드함에 따라 문제가되고 있습니다..

    WCAG의 가장 기본적인 수준은 다음과 같습니다. 움직임, 깜박임 또는 스크롤이 필수적인 활동의 일부가 아닌 한 사용자가 일시 중지, 중지 또는 숨기기.

    주의 산만은 특히 ADHD 또는 기타인지 장애가있는 사람들에게 불편합니다. 그러나 움직임과 번쩍임은 발작을 일으킬 수 있으므로 WCAG 지침에 따르면 1 초 동안 내용을 3 번 이상 깜박이지 않아야합니다..

    애니메이션에 대한 사용자의 선택 존중

    모든 주요 운영 체제를 통해 사용자는 화면에서 모션 감소에 대한 선호도를 표현할 수 있습니다. 아마도 모션 트리거 전정 스펙트럼 장애가 있기 때문일 것입니다. 귀하의 웹 사이트는 사용자가 CSS로이를 수행했는지 여부를 감지 할 수 있습니다 선호하는 동작 감소 미디어 쿼리.

    여기서는 사용자가 선호도를 표현하지 않은 경우에만 버튼을 애니메이션으로 만들 수 있습니다.

    @media (감소 모션 선호 : 무선 호) {
    버튼 {
    / *`진동`키 프레임은 다른 곳에 정의되어 있습니다 * /
    애니메이션 : 0.3s 선형 무한 모두 진동;
    }
    }

    많은 애니메이션 규칙이있는 사이트를 개조하려는 경우 다음이 발생할 수 있습니다. 이전에 선언 된 모든 CSS 애니메이션 중지:

    @media (감소 모션 선호 : 줄이기) {
    *,
    *::전에,
    * :: 후 {
    애니메이션 지속 시간 : 0.001 초! 중요;
    전이 지속 시간 : 0.001 초! 중요;
    }
    }

    사용자의 운영 체제 환경 설정과 관련하여 고려해야 할 사항 다크 모드를위한 웹 사이트 디자인.

    5) 잘못된 링크 정보

    간단히 말해 : 고유 한 링크 텍스트를 사용하여 링크를 식별 할 수있게하십시오. 링크가 새 탭이나 파일을 열면 사용자에게 경고.

    불량 링크의 주요 원인 중 하나는 종종 불량 카피 라이팅입니다. 대부분의 화면 판독기는 사용자가 페이지에서 링크 목록을 빠르게 볼 수 있도록합니다 (가장 많이 사용되는 상용 화면 판독기 인 JAWS에서 키보드 단축키는 Ins + F7입니다. 무료 NVDA 스크린 리더, 동일한 키보드 단축키는 페이지 링크, 제목 및 랜드 마크를 나열하는 요소 목록을 표시합니다).

    그러나 모든 링크에 “여기를 클릭하십시오”또는 “더 읽기”라는 텍스트가 있으며이를 구별 할 수있는 다른 내용이 없으면 쓸모가 없습니다. 이 문제를 해결하는 가장 쉬운 방법은 단순히 고유 링크 텍스트를 작성하는 것이지만 가능하지 않은 경우 각 링크에 고유 한 aria-label 속성을 사용하여 보조 기술에 대한 링크 텍스트를 재정의 할 수 있습니다..

    여기에 좋은 예가 있습니다. Joomla 웹 사이트:

    Joomla 웹 사이트, 각각 동일한

    보이는 링크 텍스트는 단순히 “더 읽기”이지만 Joomla는 아리아 라벨 보조 기술에 고유 한 특성을 만드는 속성 :

    더 읽어보기
    
    더 읽어보기

    때문에 아리아 라벨 보조 기술이 링크 텍스트 대신 텍스트를 사용하는 경우 W3C는 aria-label에 사용 된 텍스트를 링크 내에서 사용 된 텍스트로 시작하여 “사용자 간의 일관된 통신이 가능합니다”.

    노트 : 이전 사이트에서 여전히 볼 수있는 몇 가지 나쁜 조언은 다음을 사용하여 링크에 설명 텍스트를 추가하는 것입니다. 표제 속성:

    더 읽기>

    이러지마. 그만큼 제목이 대부분의 스크린 리더에 노출되지 않습니다 (개발자는 ‘SEO’를 목적으로 키워드를 입력 했으므로 화면 판독기 공급 업체에서 기본적으로 사용하지 않도록 설정) 브라우저는 제목 속성을 ‘툴팁’으로 표시합니다..

    링크는 링크처럼 보여야합니다

    기본적으로 브라우저는 링크에 밑줄을칩니다. 이것을 바꾸지 않는 것이 가장 좋지만, 이것에 대해 디자이너와 주차장에서 싸움을 잃는 경우, 링크 텍스트는 주변 비 링크 텍스트와 3 : 1의 명암비를 가져야하며 ‘비색 지정자’를 제공해야합니다 ”라고 말하면 커서가 가리 키거나 초점을 맞출 때 연결됩니다 (예 :

    a : 호버, a : 포커스 {텍스트 장식 : 밑줄;}

    포커스 스타일은 마우스가 아닌 사용자가 키보드, 스타일러스 또는 음성 입력에서 링크에 초점을 맞출 때 링크에 밑줄이 표시되도록합니다. 일반적으로 페이지의 어떤 항목에 호버 스타일이있을 때마다 포커스 스타일이 제공되어야합니다..

    ‘색이 아닌 지정자'(이 경우 밑줄)는 시력이 약하거나 색맹 인 방문자가 호버 또는 초점 변경을 볼 수 있도록합니다. (스크린 리더는 링크 텍스트 전에 자동으로 “링크”를 표시합니다.)

    링크에 새 탭 / 페이지가 열리면 사용자에게 알리기

    링크를 활성화하면 새 탭이나 새 창이 열리면 방문자에게 혼란을 줄 수 있습니다. 특히 페이지의 일부 링크 만이 작업을 수행하는 경우 (예 : 외부 링크 만 새 탭을 열 경우) 이 작업을 수행해야하는 경우 링크 텍스트 또는 위의 aria-label 방법을 사용하여 사용자에게 경고해야합니다..

    링크가 파일 인 경우 사람들에게 알리기

    링크가 파일 (예 : PDF 또는 비디오)에 대한 링크 인 경우 사용자에게 링크 텍스트를 알려주십시오. 숨기지 마 아리아 라벨, 이 기능은 많은 사용자에게 유용 할 수 있습니다 (예 : 일부 휴대 전화는 .docx 파일을 열 수 없음). 파일이 큰 경우 대략적인 크기를 사용자에게 알리십시오. 그들은 3G를 통해 큰 비디오 파일을 다운로드하지 않을 수 있습니다.

    당신은 또한 사용할 수 있습니다 다운로드 속성을 사용하면 브라우저에서 운영 체제의 기본 파일 다운로드 대화 상자를 열 수 있습니다. 이것을 모두 합하면 코드는 다음과 같습니다.

    연례 보고서 (PDF, 240MB)

    6) 다른 디자인 오류 : 포커스 링 제거

    간단히 말해서 : 키보드 사용자는 항상 현재 포커스가있는 위치를 볼 수 있어야합니다.

    우리는 언급했다 :초점 전에 스타일. RSI 나 Parkinson 또는 다발성 경화증 등 어떤 이유로 든 마우스를 사용할 수없는 사람들에게 매우 유용한 시각적 지표입니다. 기본적으로 브라우저는 현재 초점이 맞춰진 요소에 초점 링을 표시합니다. Chromium 브라우저에 중점을 둔 개인 사이트의 홈 링크는 다음과 같습니다.

    링크 주변의 Chromium 기본 포커스 링 스크린 샷 (이미지이기도 함)

    그러나 일부 사람들은 마우스를 사용할 때 미학적으로 기분이 좋지 않다고 생각하고 CSS를 사용하여 끄면 키보드 사용자가 사이트에 액세스 할 수 없게됩니다.

    Firefox에서 개척 한 새로운 표준을 입력하십시오. 초점이 보이는. 이것은 키보드 나 마우스 이외의 포인팅 장치에 의해 도달했을 때 요소에 포커스 링을 적용하지만 마우스 사용자에게는 아무 것도 표시하지 않습니다. Firefox에서만 지원되므로 (작성시), 패트릭 로크 제안 다음 CSS는 모든 브라우저에서 잘 작동합니다.

    button : focus {/ * 흥미로운 버튼 포커스 스타일 * /}
    버튼 : 초점 : not (: 초점 표시) {
    / * 위의 모든 포커스가있는 버튼 스타일 실행 취소
    버튼에 포커스가 있지만 브라우저가 정상적으로 작동하지 않는 경우
    기본 초점 스타일 표시 * /
    }
    button : focus-visible {/ * * 더 * 흥미로운 버튼 포커스 스타일 * /}

    7) 양식 작성

    간단히 말해서, 양식 필드처럼 보이는 양식 필드를 디자인하십시오. 자동 완성을 사용 중지하지 마십시오.

    전자 상거래 사이트에 양식이 매우 중요하므로 액세스 할 수없는 양식이 몇 개인 지 놀랍습니다. 오래된 브라우저는 양식 요소를 스타일링하는 방식을 많이 허용하지 않았기 때문에 개발자가 다른 HTML 요소로 위조 한 경우가 종종 있습니다. 최신 브라우저는 매력적인 체크 박스, 라디오 버튼, 커스텀 셀렉트 컴포넌트 및 콤보 박스, 접근 가능한 자동 완성 컨트롤 그리고 더.

    자동 완성은 친구입니다

    브라우저가 양식을 자동으로 채우도록 허용하면 방문자가 덜해야하므로 양식을 작성하고 제품을 등록 / 구매할 가능성이 높습니다. 브라우저 자동 완성 : 심층 분석 eBay의 훌륭한 기사입니다..

    또한 자동 완성은 현재 AA 준수를 달성하기에 충분한 유일한 기술입니다. 성공 기준 1.3.5 : 입력 목적 식별.

    양식 필드를 양식 필드처럼 보이게 만들기

    기본적으로 브라우저는 양식 입력 필드를 상자로 표시합니다. 반드시 여백, 패딩 및 테두리로 스타일을 지정하되 상자로 유지하십시오. 많은 디자이너들이 사용자가 텍스트를 입력 할 수 있도록 한 줄을 사용하는 2017 년 이전의 머티리얼 디자인 패턴을 따랐습니다.

    직사각형 상자가 아닌 수평선이있는 오래된 재료 설계 입력

    그러나 Google은 이전 텍스트 필드 아래의 줄이 일부 사용자에게는 명확하지 않으며 종종 구분선과 혼동되어 디자인을 변경했음을 발견했습니다. 안에 유용성 테스트 600 명의 참가자와 함께

    줄이있는 것보다 더 나은 직사각형 (상자) 모양의 닫힌 텍스트 필드… 오늘날,이 새로운 텍스트 필드는 계정 로그인 페이지에서 Google 양식에 이르기까지 Google 제품에서 나타납니다..

    Google의 전체 머티리얼 디자인 UI 라이브러리 채택을 고려중인 경우 머티리얼 디자인 텍스트 필드 사용 중지! 그것이 당신의 요구를 충족하는지 확인하기 위해 Matsuko Friedland.

    모든 양식 필드 레이블

    모든 양식 필드 (텍스트 입력, 확인란, 라디오 버튼, 슬라이더 등)에 레이블을 지정해야합니다. 가장 좋은 방법은 HTML을 사용하는 것입니다 ; WCAG가 말한 것처럼 “표준 HTML 컨트롤은 이미 사양에 따라 사용될 때이 성공 기준을 충족합니다”.

    여기 제가 만든 데모가 있습니다 레이블이없는 양식 필드 대 레이블이있는 양식 필드. 그것들은 똑같아 보이지만, 최상위 레이블에는 적절한 레이블이 없지만 두 번째 레이블에는 레이블이 없습니다. 하단의 텍스트 레이블을 클릭하면 연결된 입력에 초점을 맞춘 것을 볼 수 있습니다.

    가짜 대 실제 라벨 비교

    이를 통해 모터 제어에 어려움이있는 사람이 입력을보다 쉽게 ​​집중할 수 있습니다. 또는 울퉁불퉁 한 열차의 작은 화면에서 작은 확인란을 선택하려고 할 수도 있습니다. 또한 양식의 필드를 탭하는 화면 판독기 사용자에게도 중요합니다 (기본적으로 링크와 양식 필드 만 탭하여 초점을 맞출 수 있음). 입력 필드를 탭하면 스크린 리더가 관련 레이블의 내용을 알려줍니다..

    이를위한 코드는 간단하다. 입력 필드에는 고유 한 ID가 부여되며 레이블은 ...에 대한 속성:

    
    

    라벨 숨기기

    때때로, 눈에 보이는 라벨을 원하지 않을 수도 있습니다. 또는 디자이너는 그렇지 않으며 주차장에서 다른 싸움을 원하지 않습니다. 어쨌든 다음은 입력 앞에 “검색”이라는 레이블이 과도하게 느껴지는 예입니다..

    이후에 'search'라고 표시된 버튼이있는 입력 필드

    입력 필드를 “검색”텍스트와 연결할 수 있습니다.이 텍스트는 다음을 사용하여 제출 단추의 내용입니다. aria-labelledby:

    
    

    우리는 사용할 수 있었다 아리아 라벨 (링크에 대해 이야기 할 때 앞서 만났음) :


    그러나 페이지에 표시되는 텍스트를 선호하는 것이 좋습니다. 페이지가 번역 도구를 통해 실행되면 번역되지만 HTML 속성에서 “숨겨진”텍스트는 번역되지 않기 때문입니다. (그의 멋진 기사 에서이 팁을 위해 Adrian Roselli에게 핫 팁 컨트롤에 레이블을 지정하는 방법의 우선 순위.)

    톱 백만 홈페이지에서 가장 일반적인 오류

    사용자가 일부 형태의 장애를보고 한 것으로 전자 상거래 사이트에 대한 주요 장벽을 살펴 보았습니다. 이제 1,000,000 개의 상위 웹 사이트의 홈페이지 인 훨씬 광범위한 사이트를 살펴 보겠습니다., WebAIM에 의해 자동 분석 2019 년 8 월에 분석 된 페이지의 98 %에 오류가 하나 이상있었습니다. 가장 일반적인 오류는

    1. 저 대비 텍스트 (86.1 %)
    2. 이미지 대체 텍스트 누락 (67.9 %)
    3. 빈 링크 (58.9 %)
    4. 양식 입력 레이블 누락 (53.2 %)
    5. 문서 언어 누락 (30.5 %)

    위의 낮은 대비, 링크 및 양식 입력을 처리했습니다. 이제 다른 일반적인 오류를 피할 수있는 방법을 살펴 보겠습니다.

    8) 모든 이미지, 비디오 및 오디오에 대한 대체 텍스트 제공

    간단히 말해서 : 이미지 나 비디오를 통해 전달되는 모든 정보는 텍스트와 동등한 내용이어야합니다..

    마다 시각 장애가 있거나 방문자가 브라우저에서 이미지를 끈 저 대역폭 / 고가의 데이터 요금제를 가진 방문자에게 전달할 수있는 대체 텍스트 ( “alt text”)가 있어야합니다. 여기에는 텍스트 이미지가 포함됩니다.

    기본 규칙은 다음과 같습니다.

    • 이미지가 순전히 장식적인 경우 빈 대체 텍스트가 있어야합니다. alt = "". (그러나 순수한 장식 이미지는 어쨌든 CSS에 있어야합니다.)
    • 본문 텍스트에 이미지가 설명되어 있으면 빈 대체 텍스트가 있어야합니다 (alt = ""), 반복을 피하기 위해. 그러나 그것이 안에
      – 보다 어떻게 알아?? 이상.
    • 이미지가 링크의 유일한 내용 인 경우 (예 : 조직의 로고를 클릭하여 홈페이지로 이동) 대체 텍스트는 링크의 대상을 설명해야합니다. 예를 들어, alt = "홈페이지".
    • 아이콘 글꼴을 사용하지 마십시오; 그들은 난독증 사람들에게 정말 나쁠 수 있습니다. 당신이 그들을 사용하는 경우, SVG로 변환.

    비디오 및 오디오 대체 텍스트

    청각 장애가있는 사람들을 위해 오디오 콘텐츠에 대체 텍스트가 필요하다는 것을 잊지 마십시오. 그것은 팟 캐스트의 대본과 비디오의 자막을 의미합니다. 그리고 다시 : 미디어 자동 재생 안 함.

    9) 적절한 문서 언어 추가

    요약 : 보조 기술에 텍스트의 언어를 알려주십시오..

    홈페이지의 30 %가 작성된 언어를 선언하지 않아서 스크린 리더 사용자에게 혼란을 줄 수 있습니다. 예를 들어 문장이 영어 또는 프랑스어 인 경우 “6”이라는 단어가 매우 다르게 발음되기 때문에 중요합니다..

    HTML 요소에 lang 속성을 추가하면이 문제를 쉽게 해결할 수 있습니다.

    “en”은 스크린 리더 (또는 번역 소프트웨어)에게이 페이지가 영어로되어 있음을 알려줍니다. “es”는 스페인어,“fr”은 프랑스어 등입니다. 대부분의 언어에서 언어 태그를 결정하는 것은 매우 쉽습니다. W3C는 언어 태그 선택.

    페이지에 기본 선언 된 언어 이외의 언어로 된 컨텐츠가 포함 된 경우 해당 컨텐츠를 둘러싼 요소에 언어 속성을 추가하십시오. 예를 들어 영어로 선언 된 페이지에서 :

    채팅을하려면 투우사, 시원하게 오두막집
    그리고 만나 세 노리 타스 점수로, 에스파냐 포 부탁

    10) 방문자가 귀하의 콘텐츠를 둘러 볼 수 있도록 도와주십시오

    요약 : 보조 기술 사용자가 콘텐츠를 이해하고 탐색 할 수 있도록 HTML 랜드 마크 요소를 사용하십시오..

    방문자가 사이트를 방문하면 쉽게 시각적으로 스캔하여 탐색 위치와 기본 컨텐츠가 시작되는 위치를 이해할 수 있습니다. 스크린 리더 사용자는이 작업을 수행 할 수 없습니다. 그러나 HTML5는 이러한 영역을 표시하는 몇 가지 새로운 태그를 제공하며 보조 기술에는 다음과 같은 랜드 마크로 건너 뛰거나 건너 뛸 수있는 바로 가기가 있습니다. 헤더, 보행인, 항해 등.

    다음은 웹 개발자이자 스크린 리더 사용자 인 Léonie Watson이 스크린 리더를 사용하여 이러한 의미를 검사하여 개인 사이트를 탐색하는 방법에 대한 6 분짜리 비디오입니다.

    • 기본 콘텐츠, 즉 머리글, 기본 탐색 또는 바닥 글이 아닌 콘텐츠를
      요소. 거의 모든 경우에 하나만 있어야합니다
      페이지 당. 모든 브라우저 (IE9 +)를 사용하면 스타일을 지정할 수 있으며 보조 기술은이를 사용하여 수행 할 작업을 알고 있습니다.
    • 헤더 (브랜드 로고, 줄 바꿈, 페이지 제목)를
      요소.
    • 바닥 글 (법적 내용, 연락처 세부 정보, 저작권 고지 등)을
    • 를 사용하여 기본 탐색 표시
        에 싸여 요소. 이것은 내부에 중첩 될 수 있습니다
        그것이 페이지의 시각적 디자인에 맞다면.
      • 광고 및 중요하지 않은 콘텐츠는
      • 한 페이지에 둘 이상의 제품 / 비디오 / 뉴스 항목 / 블로그 게시물이있는 경우 각 제품 / 비디오
        요소.

      그것에서 스크린 리더 사용자 설문 조사, WebAIM은 화면 판독기 사용자의 26 %가 페이지를 탐색 할 때 이러한 랜드 마크를 자주 또는 항상 사용함을 발견했습니다..

      또한 별도의 컨텐츠를 랩핑

      Apple의 WatchOS가 콘텐츠를 최적으로 표시하는 데 도움이됩니다. 내 기사보기 시맨틱 HTML의 실질적인 가치 이것에 대한 자세한 내용.

      11) HTML을 올바르게 사용하십시오

      간단히 말해서 : HTML 요소의 의미 및 기본 동작을 이해하십시오. 콘텐츠에 적합한 요소를 사용하십시오.

      이 기사의 일반적인 주제는 올바른 HTML 요소를 사용하는 것입니다. 사용하여 상표 관련 입력 필드에 중점을 둔 내장 브라우저 동작이 있습니다. 사용

      ~보다 바람직하다

      스크린 리더 사용자는 스크린 리더를 사용하지 않는 사람들에게는 전혀 방해받지 않고 중요한 콘텐츠로 바로 이동할 수 있기 때문에.

      또 다른 예는

      Like this post? Please share to your friends:
Adblock
detector
map