Chrome DevTools의 접근성

저는 DevTools에서 많은 시간을 보내고 있으며, 그 과정에서 DevTools의 '숨겨진' 기능 중 일부에 대해 알게 되었고 이 기사에서 특히 접근성과 관련된 일부 기능을 공유하고 싶습니다.

이 기사는 내가 사용하고 편안하게 느끼는 브라우저이기 때문에 Google 크롬을 사용합니다. 그렇긴 하지만 Firefox, Safari 및 Edge는 모두 개발자 도구에서 큰 발전을 이뤘고, 확실히 자체적으로 뛰어난 접근성 관련 기능이 있습니다.

DevTools에 이미 익숙할 수도 있지만 다음은 웹 페이지에서 요소를 검사하는 방법에 대한 간략한 알림입니다.

1. Google 크롬에서 검사하려는 웹페이지를 엽니다.
2. 단축키 Cmd + Shift + C (Windows의 경우 Ctrl + Shift + C ) 사용
3. 포인터가 요소 검사 모드에 있습니다. 웹 페이지에서 요소를 클릭하세요.

마찬가지로 DevTools를 열고 요소 검사를 시작했습니다. 다른 패널은 JavaScript 디버깅, 성능 등과 같은 다른 기능에 해당합니다.

접근성 관련 기능이 여기저기 흩어져 있으므로 그들이 하는 일, 거주지, 사용 방법을 살펴보겠습니다.

명암비

검사한 텍스트가 배경색과 대비되는 색 대비가 만족스러운지 확인하는 기능입니다.

일반적으로 텍스트 색상과 기본 배경 색상 사이의 높은 수준의 대비는 다양한 능력을 가진 사용자가 더 읽기 쉬운 텍스트를 의미합니다. 또한 사용자가 다양한 환경 조건에서 텍스트를 읽을 수 있도록 지원합니다. 사용자가 텍스트 가독성을 인식하는 방식에 영향을 줄 수 있는 다음 예를 고려하십시오.

• 햇빛이 많이 드는 야외에서 화면을 보면
• 배터리 수명을 유지하기 위해 모바일 장치가 화면 밝기를 완전히 낮췄습니다.

"그 의도는 텍스트와 배경 사이에 충분한 대비를 제공하여 중간 정도의 시력을 가진 사람들이 읽을 수 있도록 하는 것입니다."

— 적합 기준 이해 1.4.3: 대비(최소)

명암비 도구를 사용하면 이 텍스트가 최소 명암 표준을 충족합니까?라는 질문에 대한 즉각적인 예/아니오 대답을 얻을 수 있습니다. 이 도구를 사용하면 웹사이트의 디자인과 색 구성표에 영향을 주어 시력이 약한 사용자가 더 읽기 쉬운 콘텐츠를 만들 수 있습니다.

색상 선택 도구에서 사용할 수 있는 명암비 기능은 최소 명암 요구 사항이 충족되었는지 여부를 알려줄 수 있습니다. 이 기능에 액세스하려면:

1. DevTools로 텍스트 요소 검사
2. 스타일 창에서 색상 속성을 찾고 작은 색상 사각형을 클릭하여 색상 선택 도구를 불러옵니다.
3. 이 주제에 대한 추가 정보를 제공하는 '명암비'라는 텍스트를 클릭하십시오.

세 가지 비율은 다음을 나타냅니다.

• 현재 명암비
• 최소 명암비(AA)
• 향상된 명암비(AAA)

직접 연습: 색상 스펙트럼 전체에 걸쳐 원형 색상 선택 도구를 끌어 최소 대비 및 향상된 대비 비율이 충족되는 지점을 관찰합니다.

이 기능은 이 문서의 등대 섹션에서 다루는 등대 보고서를 통해 보고할 수도 있습니다.

접근성 검사기

이것은 DOM 노드에 대한 다양한 접근성 속성과 ARIA 정보를 볼 수 있는 DevTools 창을 나타냅니다.

ARIA는 일반적으로 HTML에서 사용되는 속성 모음을 말하며, 이를 통해 다양한 능력을 가진 개인이 웹사이트에 더 쉽게 액세스할 수 있습니다. 자신의 웹사이트에서 사용할 가치가 있지만 사용자에게 도움이 되는 방식으로 사용하려면 웹 접근성의 기본 사항을 이해해야 합니다.

예를 들어 다음 HTML 부분을 고려하십시오.

 <p class="alert" role="alert"> That transaction was successful </p>

스크린 리더와 같은 보조 장치는 role="alert" 속성을 사용하여 이러한 정보를 사용자에게 알릴 수 있습니다. DevTools 내의 접근성 창은 그러한 속성( role )을 선별하여 제공할 수 있으므로 요소에 어떤 접근성 관련 속성이 있는지 명확하게 알 수 있습니다.

이 창에 표시되는 정보의 유효성을 검사하면 "접근성을 잘못 코딩하고 있습니까?"라는 질문에 답하는 데 도움이 될 수 있습니다. 구문적으로든 구조적으로든, 올바른 구문으로 접근성 기술을 적용하는 것과 접근 가능한 웹 사이트를 갖는 것은 두 가지 다릅니다. 것들!

이것을 사용하려면 검사된 요소가 있는 접근성 창을 열 수 있습니다.

1. 페이지의 모든 요소(예: 하이퍼링크 또는 검색 상자) 검사
2. 요소 패널에 있는 접근성 창을 엽니다.
   보너스 팁 : 창을 찾을 필요 없이(기본적으로 열리지 않음) 명령 메뉴( Cmd + Shift + P )에서 '접근성 보기'를 검색합니다.

여기에서 다음과 같은 정보를 찾을 수 있습니다.

• 접근성 트리(DOM 트리의 하위 집합)
• ARIA 속성
• 계산된 접근성 속성(예: 초점을 맞출 수 있는 것, 편집 가능한 것, 양식 유효성 검사를 통과하는 것)

검사된 요소에 따라 이 정보 중 일부가 적용되지 않을 수 있습니다. 예를 들어 요소에 합법적으로 ARIA 속성이 필요하지 않을 수 있습니다.

DevTools의 대부분의 기능과 마찬가지로 이 창에 표시되는 것은 '라이브'입니다. Elements Panel DOM 트리에서 변경한 사항은 즉시 이 창에 다시 반영되어 철자가 틀린 ARIA 속성을 수정하는 데 도움이 됩니다.

도끼와 같은 대체 자동화 테스트 도구를 사용하고 있기 때문에 내게 필요한 옵션 사용에 자신이 있다면 이 창을 자주 사용하지 않아도 됩니다.

실제 웹 사이트를 보면서 더 많은 것을 배우고 싶다면 Chrome DevTools를 사용한 접근성 디버깅에 대한 14분 분량의 비디오를 만들었습니다.

등대

Lighthouse는 모범 사례, 접근성, 보안 등을 스캔할 수 있는 자동화된 웹 사이트 검사기입니다.

접근성 이론에 대해 어느 정도 읽었고 이를 자신의 웹 사이트에 효과적으로 적용하는 방법을 배우고 싶다면 이것은 말 그대로 포인트 앤 클릭 인터페이스이기 때문에 사용하기에 좋은 도구입니다. 설치가 필요하지 않습니다. 또한 모든 감사는 매우 교육적이며 실패한 항목과 실패한 이유를 알려줍니다.

이 도구의 제안을 따르면 사이트의 접근성을 개선하는 데 거의 확실히 도움이 됩니다.

보안, 일반적인 웹 모범 사례를 확인하는 동안 성능이 도움이 됩니다. Lighthouse에서 접근성 감사를 실행하는 방법에 중점을 두겠습니다.

1. DevTools에서 Lighthouse 패널로 이동합니다.
2. 모든 카테고리의 선택을 취소하되 '접근성'은 선택된 상태로 유지
3. '보고서 생성'을 클릭합니다.
4. 결과 보고서에서 다양한 제안을 클릭하여 이에 대해 자세히 알아보세요.

접근성에 대해 더 자세히 알고 싶다면(확실히 알고 있습니다!) 클릭은 실패했지만 통과한 감사조차도 감사 자체에 대한 전용 웹 개발자 문서와 감사가 중요한 이유에 대한 링크가 연결되어 있기 때문에 감사를 통과하는 것도 좋은 학습 방법입니다.

대부분의 경우 감사 문서 페이지는 매우 간결하며 이를 적극 권장합니다. <title> 요소가 있는지 확인하기 위한 감사 문서를 살펴보겠습니다. 다음을 지정합니다.

• Lighthouse 소유권 감사가 실패하는 방법
• 제목을 추가하는 방법
• 멋진 타이틀을 만들기 위한 팁
• 사용할 가치가 있는 제목과 함께 사용 하지 않는 제목의 예

그리고 문서 제목 문서의 경우 위의 4가지 사항을 설명하는 데 300단어 밖에 걸리지 않았습니다.

한 가지 흥미로운 점은 접근성 창과 달리 Lighthouse Audits는 기본적으로 매우 교육적이므로 Lighthouse 패널을 처음 시작할 때 방문하기에 좋은 곳입니다.

액세스 가능한 페이지를 구축하는 데 더욱 능숙해지면 미리 정의된 감사에서 벗어나 액세스 가능성 창에서 더 많은 시간을 보낼 수 있습니다.

"

시력 결핍 에뮬레이션

이것은 현재 페이지에 흐린 시야와 같은 시각 결함을 적용하는 DevTools 기능입니다.

"전 세계적으로 남성 12명 중 1명(8%), 여성 200명 중 1명이 색각 이상이 있습니다."

— 저시력자를 위한 접근성 요구 사항

이 기능을 사용하여 웹사이트가 사용자의 요구 사항을 충족하는지 확인할 수 있습니다. 웹사이트에 중요한 이미지가 표시되는 경우 이 이미지가 삼각맹(파란색 및 노란색 시력 장애)이 있는 사람에게는 이해하기 어렵거나 시력이 흐릿한 사람에게는 이해하기조차 어렵다는 것을 알 수 있습니다.

“일부 저시력은 안경, 콘택트렌즈 또는 수술로 교정할 수 있지만 일부는 교정할 수 없습니다. 따라서 어떤 사람들은 무슨 일이 있어도 흐릿한 시력(낮은 시력)을 가질 것입니다.”

— 저시력자를 위한 접근성 요구 사항

예를 들어, 이미지의 경우 흐린 시야를 가진 사용자가 이미지를 사용하여 이미지가 무엇을 표시하는지 이해할 수 있는 것보다 DevTools를 통해 흐린 시야를 에뮬레이트하는 동안 다운로드할 수 있는 고해상도 이미지가 있음을 발견할 수 있습니다. 이를 위해서는 일부 디자인/UX 기반 문제 해결 기술(아마도 귀하/동료의 도움이 필요함)이 필요하지만 사용자의 요구 사항을 충족하는지 또는 사용자의 요구 사항을 충족하지 못하는지에 대한 차이가 될 수 있습니다.

️ 참고 : 다음 이미지는 DevTools의 'Blurred Vision' 에뮬레이션 기능을 보여주기 위해 부분적으로 흐리게 처리되었습니다.

다음 단계에 따라 이 기능을 사용해 볼 수 있습니다.

1. 명령 메뉴 열기(Windows의 경우 Cmd + Shift + P 또는 Ctrl + Shift + P )
2. '렌더링 표시'를 검색하여 선택합니다.
3. 렌더링 창의 시력 장애 에뮬레이션 섹션에서 '흐릿한 시야'와 같은 시력 장애를 선택합니다.

다음은 DevTools를 통해 적용할 수 있는 시력 결핍의 몇 가지 예입니다.

• 흐린 시야
  시력이 덜 정확할 때
• 안구건조증
  적색광에 대한 무감각으로 인한 색맹
• 트리타노피아
  파란색 및 노란색 시력 장애

이와 같은 에뮬레이션 기능은 광범위한 시력 결핍은 고사하고 개인에게 그러한 결핍이 나타나는 방식의 미묘한 차이를 완전히 설명하지 못합니다. 즉, 이 기능은 웹 개발자가 페이지의 접근성을 이해하고 개선하는 데 여전히 도움이 될 수 있습니다.

요소 도구 설명 검사

이 기능은 이제 '요소 검사' 기능을 사용할 때 접근성 관련 정보를 표시하는 개선된 도구 설명을 나타냅니다. 미묘하지만 액세스 가능한 요소를 한 눈에 파악할 수 있기 때문에 여전히 매우 중요한 기능입니다.

이 기사에서 언급한 네 가지 다른 기능의 경우 의도적인 조치가 필요하기 때문에 중요하다고 말씀드리고 싶습니다(보고서 생성 버튼 클릭, 접근성 창으로 이동, 색상 선택 도구 열기 등). 그러나 이 기능의 경우 요소를 검사하는 동안 DevTools의 가장 일반적인 작업 중 하나에 나타납니다.

짧은 도전으로 다음 두 스크린샷을 살펴보세요. 이제 접근성 섹션이 있는 향상된 DevTools Inspect Element 도구 설명을 보여줍니다. 해당 섹션의 속성이 무엇을 나타내는지 식별할 수 있습니까?

이것은 명암비 섹션과 접근성 검사기의 일부로 앞에서 본 것과 똑같은 정보라는 것을 알 수 있습니다. 그것들은 같은 속성이지만 (바라건대) 더 간단한 방식으로 나타납니다.

참고: 해당 툴팁(맨 마지막 항목)에는 "Keyboard-focusable" 속성도 있습니다. 항목이 키보드로 액세스할 수 있는지 여부를 나타냅니다. true인 경우 일반적으로 문제의 요소에 탭하여 초점을 맞출 수 있음을 나타냅니다.

내가 보는 방식: Inspect Element는 브라우저 DevTools 내에서 매우 일반적인 사용 사례이므로 Inspect Element 도구 설명에 대해 유용한 접근성 관련 속성을 선택하는 것은 유용한 알림 역할을 할 수 있으며 웹 개발자가 더 자세히 조사하고 확인하도록 요청할 수 있습니다. 우리가 만들고 있는 것은 접근 가능합니다.

결론

접근성을 개선하기 위한 웹 개발자 도구는 수년에 걸쳐 빠르게 개선되었지만 때때로 이러한 도구가 숨겨져 있거나 단순히 문서화되지 않았습니다. 이 기사에서는 우리가 구축한 웹사이트에 접근성 모범 사례를 적용할 때 도움이 될 수 있는 몇 가지 기능을 살펴보았습니다.

다음은 우리가 다룬 내용을 상기시켜줍니다.

• 명암비
  검사한 텍스트 요소의 명암비가 만족스러운지 확인합니다.
• 접근성 검사기
  다양한 접근성 속성 및 ARIA 정보를 봅니다.
• 등대
  모범 사례, 접근성 등을 다루는 웹 사이트 검사기.
• 시력 결핍 모방
  페이지에 시력 결함(예: 흐린 시력)을 적용하는 도구입니다.
• 요소 도구 설명 검사
  접근성 관련 정보를 표시하는 향상된 도구 설명입니다.

200개 이상의 웹 개발 팁을 최신 상태로 유지하려면 Dev Tips 메일링 리스트를 만들었습니다! 또한 내 Twitter에 많은 보너스 웹 개발 리소스를 게시합니다.

지금은 그게 다야! 읽어 주셔서 감사합니다.