WCAG 2.1 액세스 가능 규칙에서 6개의 깜짝 이벤트를 발견했습니다.

나는 이미 나의 무장애 전공에 한동안 적응했다.그러나 나는 웹 콘텐츠 접근성 가이드(WCAG)를 자세히 읽는 데 많은 시간을 들이지 않았다는 것을 부끄럽게 생각한다.나는 감지성과 조작성, 그리고 사이트에서 가장 흔히 볼 수 있는 기준, 예를 들어 색깔 대비 등 더 큰 목표를 읽었다.하지만 나는 전문가처럼 모든 규칙을 상세하게 소개하지 않았다.가장 간단한 규칙이라도 자세히 살펴보면 많은 사람들이 소홀히 하는 미세한 차이, 함정, 외래 정보를 발견할 수 있다.
따라서 저는 최근의 접근성 감사를 이용하여 WCAG 2.1의 수요를 더욱 자세하게 연구합니다.설령 내가 이미 모든 내용을 읽었다 하더라도, 나는 내가 알고 있는 규칙에서 예상치 못한 부분, 심지어 내가 완전히 소홀히 한 규칙들을 발견했다.이것은 내가 발견한 여섯 가지 더 큰 기쁨이며, 그것들이 어떻게 나의 기준에 대한 이해를 바꾸었는지이다.

링크를 건너뛸 필요가 없습니다.

나는 많은 글을 읽었는데, 사용자가 링크를 건너뛰어야만 메뉴 등 중복 내용을 건너뛸 수 있다고 말했다.그것은 키보드와 화면 판독기 사용자를 위해 시간과 번거로움을 절약했다.The 2.4.1 success criterion refers to these mechanisms as a "bypass block." 링크를 건너뛰는 것을 옆길 블록의 예로 언급했지만 또 다른 방법이 있다!
또 다른 방법은 이정표, 즉 보조 기술을 사용하여 특정한 역할을 가진 요소를 어떻게 찾아내는가이다.적당한 지표는 내비게이션, 주요 내용, 사이드바와 다른 내용이 어디에 있는지 쉽게 알 수 있다.그리고 사용자는 그들 사이를 뛰어넘어 그들의 내용을 더욱 쉽게 읽을 수 있다.
예를 들어, 화면 판독기 도구인 VoiceOver를 Mac에서 사용하고 있다고 가정합니다.너는 웹 페이지에 들어간다you can open up VoiceOver's "rotor" menu.이것은 많은 유용한 방식으로 페이지 내용을 분해할 것이다.다음 요소를 볼 수 있습니다.

모든 현장 지표

모든 링크 또는 제목 목록

양식 입력 및 현재 정보 또는 상태

그 중 어느 것이든지 그들이 페이지에 있는 위치로 이동할 수 있다.이것은 화면 판독기 사용자가 웹 페이지를 훑어보고 필요한 내용으로 이동하는 버전입니다.
나는 이전에 외음으로 웹 페이지를 테스트한 적이 있지만, 이것은 내가 처음으로 회전자 메뉴를 시도한 것이다.그것은 나에게 "좋은 의미 표시"와 "읽을 수 있는 링크 텍스트"의 직접적인 장점을 보여 주었다그 전에 나는 줄곧 그들을 추진했지만, 그들의 도움에 대한 것은 단지 더욱 추상적인 개념 하나뿐이었다.
아마도 가장 중요한 것은 내가 사이트의 접근성을 높이기 위한 새로운 방법을 찾았다는 것이다.다른 내용과 양식이 박리됨에 따라 나는 중복되거나 이름이 모호한 링크, 너무 많은 문장 라벨, 이상한 제목 텍스트를 쉽게 볼 수 있다.이것은 당신이 기술 표시를 정확하게 얻을 수 있지만, 여전히 혼란스러운 체험을 가져와 접근성을 해칠 수 있음을 일깨워 준다.그것은 수동 테스트와 직접 체험의 중요성을 더욱 명확하게 설명했다.The infamous article where Manuel Matuzovic builds an inaccessible webpage with a perfect Lighthouse score drives this point home even better .
마지막으로 가장 큰 기쁨은 내가 링크를 뛰어넘을 필요가 없을 수도 있다는 것이 아니다.그것은 내가 그것을 필요로 하지 않는 이유를 보았고, 그것은 나로 하여금 새로운 것을 접하게 했다.나는 미래를 위해 필기를 했다. 스크린 리더를 사용하는 것에 관해서 나는 아직 배워야 할 것이 많다.

보통 일반적인 힌트는 필요 없어요.

나는 많은 글을 읽고 접근 가능한 복구를 추천했는데, 나는 그것들이 대다수 기업이 만족해야 하는 AA 표준에 필요한 것이라고 생각한다.몇 가지 팁은 다음과 같습니다.

휴대전화의 모든 상호작용 요소의 폭과 높이가 적어도 44픽셀이 되도록 확보한다.예를 들어 텍스트의 내연 링크와 같은 예외가 있다.

긴 단어와 불필요한 행어를 없애 내용의 읽기 수준을 낮춘다.이로 인해 인지 스트레스 환자나 교육 수준이 낮은 사용자가 더욱 쉽게 사용할 수 있다.Tools like the Hemingway app can break down the reading level in real time .

사실이 증명하듯이, 그것들은 주요 요구가 아니다!실제 성공 기준, 터치 목표 크기는 2.5.5, 읽기 수준은 3.1.5로 모두 AAA급이다.이것은 최고 등급이다. 왜냐하면 이러한 수요는 더욱 높은 등급의 시간과 자원을 필요로 하기 때문이다.많은 유형의 내용에 대해서도 적용되지 않을 수 있다.
나는 왜 낮은 읽기 수준이 항상 가능한 것은 아닌지 이해할 수 있다.어떤 내용은 본질적으로 말하자면, 피할 수 없는 행어로 가득 차 있을 것이다.신경병학 사례 연구 사이트는 이 주제를 모르는 사람에게 간단하게 설명할 수 없다.
그런데 왜 터치 목표 사이즈가 AA, 심지어 A급이 아닌지 모르겠어요.웹 사이트가 모바일 기기에 응답해야 하는 기업에게는 의미가 없지만 더 큰 터치 요소를 통해 이러한 모바일 상호작용을 더욱 쉽게 할 수 없다.설령 이것이 대다수 회사의 법률적 요구가 아니더라도, 그것이 사용자에게 얼마나 큰 도움이 되는지 감안하면, 나는 여전히 그것을 이렇게 대할 것이다.

일치성이 정말 중요해요.

일치된 내용은 이해할 수 있는 내용이다.경고 없이 사이트의 현식이나 은식 규칙을 변경하는 것은 누구든지 불안하게 할 수 있다.그러나 몇몇 일치성 규칙은 나는 여전히 예상하지 못했다.
입력의 표준 3.2.2는 입력 데이터가 예측 가능하고 의외의 상하문 변화를 초래하지 않는다는 것을 나타낸다.이 해석은 언어 환경과 내용 변화를 구분했다.식당 사이트의 사용자는 온라인 주문 체크 상자를 선택하고 메뉴 항목의 목록이 아래에 나타나는 것을 볼 수 있습니다. 페이지의 의미나 목적은 바뀌지 않습니다.
그러나 온라인 주문 확인란을 선택하면 다음 작업이 수행됩니다.

새 탭 열기

새 요소 또는 입력 주목

입력을 개 입양표로 변경

이러한 변화는 인지 스트레스 사례를 처리하거나 보조 기술을 사용하거나 기분이 나쁘거나 방해받고 싶지 않은 사용자들로 하여금 방향을 잃게 한다.너는 세계에서 몸이 가장 건전한 사람이 될 수 있다. 너를 여기저기 끌고 다니는 사이트는 너로 하여금 물건을 파괴하고 싶어하게 할 것이다.
조금 더 내려가면 표준 3.2.4는 일치 기능을 가진 구성 요소는 일치된 표지가 필요하다는 것을 나타낸다.검색 구성 요소는 각 페이지에 메뉴의 검색 및 다른 위치의 찾기 대신 검색 탭이 필요합니다.
그러나 이것은 나로 하여금 생각하게 한다. 이것은 무엇을 의미하는가?한 곳에서는'검색 작성자'를, 다른 곳에서는'검색 댓글'을 사용할 수 있습니까?내용은 다르지만 기능은 같기 때문에 모두 "검색"을 사용해야 한다그러나 입력 라벨은'검색'과 보조 텍스트만 있어야 합니까?'가장 좋아하는 작가를 찾으세요?'라고 쓰여 있습니다.아니면 우리가 지금 가지고 있는 것이 충분히 일치합니까?
나는 전자를 더 안전한 선택으로 삼는 경향이 있지만, 나의 머리는 여전히 햄스터 바퀴처럼 회전한다.이런 생각들은 나로 하여금 밤에 잠을 이루지 못하게 한다.주차장과 상점에서 움직이는 누출 탐지 로봇이 나를 잡으러 온 이유다.

너는 너무 많은 해명을 할 수 있다

나는 많은 팁을 읽었는데, 귀결적으로 말하자면, "당신의 사용자가 그들이 갖추지 못할 수 있는 지식을 가지고 있다고 가정하지 마세요."이다.예를 들어 사용자가 아이콘의 의미를 이해할 것이라고 가정하지 마라.페이지는 아이콘 텍스트를 통해 그 의미를 명확하게 표현해야 한다. 예를 들어 한 무리의 아이콘에'우리에 대하여'를 추가해야 한다.그래서 나는 의문이 있을 때마다 더 많은 것을 써서 일을 더욱 분명하게 한다.
하지만 the documentation's explanation of the 3.3.2 criteria on labels or instructions의 한마디가 항상 좋은 것은 아니다.

Too much information or instruction can be just as harmful as too little. The goal is to make certain that enough information is provided for the user to accomplish the task without undue confusion or navigation.

간단하게 말하자면, 너무 많은 텍스트가 한데 뒤섞여 있는 것은 너무 적은 텍스트와 마찬가지로 도움이 되지 않는다.이 점은 지금 뚜렷해 보이지만, 공식 규칙에서 그것을 보면 내가 어떻게 그것을 잊을 수 있는지 알게 된다.심지어 나는 만화를 읽을 때 간접적으로 그것을 생각했다.

이 모든 것이 왜 이 단락을 추가했는지 궁금하다.내 추측에 따르면 이 규칙은 인지적 편견을 고려했다. 즉, 우리가 어떤 일을 이해한다면 다른 사람들도 이해할 것이라고 가정하는 것이다.그러나 우리가 생각하는 것보다 훨씬 적은 사람들이 있다면 우리 사이트에 대해 우리와 같은 선견지명이나 직감을 가지고 있다.
이것은 WCAG 가이드를 만족시키는 또 다른 중요한 원인이다.그것들은 우리가 인지적 편견을 피하고 사용자가 의식하지 못한 상황에서 더욱 어려워지는 것을 돕는다.

페이지에서 언어 변경 사항을 인식해야 합니다.

액세스할 수 있는 HTML의 첫 번째 팁 중 하나는 lang="<en/es/it/whatever>" 태그에 포함됨 html 입니다.이것은 브라우저 페이지에서 사용하는 언어를 알려 줍니다.나는 이것이 통상적으로 첫 번째 기교라고 추측한다. 왜냐하면 그것은 매우 중요하지만 쉽게 할 수 있기 때문에, 이것은 사람들로 하여금 더욱 어렵고도 막중한 임무를 완성하게 한다.
표준 3.1.2에서 나는 이것이 특정 텍스트의 단락, 심지어 단어에 적용되는 것을 모른다.Blockquote를 사용하여 다음과 같은 이탈리아 속담을 공유할 수 있습니다.

Far d’una mosca un elefante.

블록quote의 lang 속성이 필요합니다.

<blockquote lang="it">
  Far d’una mosca un elefante.
</blockquote>

만약 네가 이렇게 하지 않는다면, 보조 기술은 영어처럼 진정한 이탈리아어를 사용할 수 있다.여기서 나는 lang 속성은 html 원소에 있을 때만 존재한다고 생각한다. 결과적으로 그것도 일상적인 작업이 있다.

민감한 내용은 별도의 규칙이 있다

법률이나 금융 거래 정보를 제출하는 모든 사이트는 사용자에게 추가 책임을 진다. 나는 그들이 이 점을 알기를 바란다.표준 3.3.4에 따르면 이러한 제출은 반드시 가역적이거나 검사할 수 있거나 확인할 수 있어야 한다.이 모든 것은 정책 결정의 오류를 피하는 데 도움이 된다. 만약 조심하지 않으면 이러한 오류는 광범위한 영향을 미칠 수 있다.
이것은 인지나 기억 스트레스 사례를 처리하는 사용자에게 뚜렷한 장점이 있다.하지만 이 사이트의 누구에게나 유용하다.누구나 재무나 법률 결정을 하기 위해'취소'단추를 원할 것이다.너는 네가 파면된 나이지리아 왕자에게 송금한 금액을 자세히 검사할 수 있어야 한다.이것은 WCAG 표준이 장애자뿐만 아니라 모든 사용자를 어떻게 도와주는지의 또 다른 뚜렷한 예이다.
실제 생활에서 이런'취소'단추를 사용하는 것이 더욱 좋다.그러나 그것은 아직 갈 길이 멀기 때문에 우리는 지금 웹 폼에서만 그것을 해결할 수 있다.

어쨌든

이 모든 세부 사항을 배운 후에 저는 WCAG 표준에 대해 더 많은 교육을 받았다고 생각했지만 아직 갈 길이 있습니다.이렇게 많은 기준이 있는데, 나는 아직 모든 세부 사항을 통독하지 못했다.이 글에서 나는 심지어 약간의 놀라움을 느꼈다. 예를 들어 일부 사이트가 어떻게 우리로 하여금 밤에 눈가의 그늘을 보게 하는지.이것은 모두 좋은 정보이지만, 정보량이 매우 많아서 상당히 밀집될 수 있다.
이런 학습은 하룻밤 사이에 발생하지 않을 것이다.하지만 나는 여전히 이 모든 것을 기대한다.