모든 프런트 엔드 개발자가 알아야 할 접근성 패턴

https://www.umaryland.edu/web-accessibility/에서 뻔뻔하게 도난당한 이미지

접근성은 누구를위한 것입니까?

접근성은 여러 가지를 의미 할 수 있습니다. 일반적으로 웹 접근성에 대해 이야기 할 때 신체적, 시각적 또는 청각 적 장애가있는 사용자를 지칭하지만 접근성은 더 많은 영역에 걸쳐있을 수 있습니다. 각 유형의 장애는 사용자에게 미치는 영향에 대해 큰 스펙트럼을 가지고 있습니다. 예를 들어, 시력 장애가있는 사람은 글꼴 크기를 쉽게 늘릴 수있을 것으로 기대할 수 있으며, 아침에 안경을 잘못 놓은 사람도 마찬가지입니다.

접근성이 중요한 이유는 무엇입니까?

모든 사용자가 웹에서 멋진 경험을 기대하기 때문에 웹 접근성은 중요합니다. 모든 사람이 당사 웹 사이트를 사용할 수 있도록 포괄적 인 경험을 만드는 것이 중요합니다. 접근성 모범 사례를 따르면 모든 사용자의 사용자 경험에 상당한 영향을 미칠 수 있습니다. 예를 들면 :

  • 마우스를 사용할 수없는 신체 장애가있는 사용자를 수용하면 마우스 배터리가 방금 소모 된 사용자에게도 도움이됩니다.
  • 적절한 명암비를 사용하면 모든 사람이 사이트를 더 쉽게 읽을 수 있습니다.
  • 화면 판독기를 사용하는 사용자에게는 액세스 가능한 양식을 작성하는 것이 중요하며 브라우저 자동 완성 기능을 더 잘 사용할 수 있습니다.
  • 스마트 TV 또는 게임 콘솔에서 웹 사이트를 마지막으로 사용해 본 적이 언제입니까? 이는 극단적 인 예이지만 사용자는 소형 전화, 태블릿에서 대규모 초광각 디스플레이에 이르기까지 다양한 장치를 사용할 것입니다.

마지막으로 SEO 크롤러에게 접근성이 점점 더 중요 해지고 있습니다.

그렇다면 사이트에 액세스 할 수 있도록하기 위해 프런트 엔드 개발자로서 무엇을 할 수 있습니까?

최소한 :

  • 시맨틱 HTML을 사용하고 적절하게 사용하십시오.
  • Chrome에 내장 된 접근성 도구 사용
  • ax 크롬 확장 프로그램 설치
  • 코드 변경에 대한 접근성을 위해 Lighthouse 감사를 실행합니다.

여기에 모든 프런트 엔드 개발자가 알아야 할 매우 구체적인 접근성 기능 목록이 있습니다. 이 지침을 따르면 웹 사이트에 WCAG에 완전히 액세스 할 수는 없지만 큰 차이가 있습니다. 이것들은 접근성 문제를 통해 일하면서 내가 배운 모든 기술입니다.

시맨틱 HTML

모든 레이아웃을 빌드하는 데 div를 사용하지 말고 대신 시맨틱 HTML 사용을 고려하십시오. 큰 것 중 일부는 nav탐색 footer을 작성하고 바닥 글을 작성하는 section데 사용 하고 콘텐츠에 블록 article을 래핑 하는 데 사용 하고 기사를 래핑 하는 데 사용 하는 것입니다.

글꼴

  • 작은 글꼴을 사용하지 마십시오! 일반적으로 사용해야하는 최소 글꼴 크기는 12px이지만 대부분의 콘텐츠를 16px로 유지하기 위해 노력합니다.
  • px를 사용하여 글꼴 크기를 정의하지 마십시오! 대신 rem단위를 사용하여 글꼴 크기를 정의하십시오 . 일반적으로 1rem = 16px.
  • Rem 단위를 사용하면 장치 및 / 또는 브라우저를 사용하여 글꼴 크기를 조정할 수 있습니다. 픽셀 값을 사용하여 정의 된 글꼴은 사용자가 페이지를 명시 적으로 확대 또는 축소하는 경우에만 크기가 조정됩니다.

초점 상태를 명확하게 볼 수 있어야합니다. 일반적으로 포커스 상태는 의도적으로 중단하지 않는 한 작동합니다. 자신의 초점 표시기를 만들지 않고 윤곽선을 제거하지 마십시오 (만약 내가라면 PR을 차단할 것입니다 outline: 0).

일반적으로 기본 포커스 상태를 유지하는 것이 좋습니다. 그래야 의존하는 사용자가 여러 사이트에서 일관된 경험을 할 수 있습니다. 링크, 버튼, 입력 및 기타 모든 대화 형 요소에는 명확한 포커스 상태가 있어야합니다.

색상 대비

모든 콘텐츠가 WCAG 2 색상 대비를 충족하는지 확인합니다. 이것은 WebAIM에서 색상을 확인하는 간단한 도구입니다 . 접근 가능한 색상을 갖는 것은 일반적으로 접근 가능한 브랜딩 지침을 갖는 것으로 시작되므로 디자인 및 브랜딩 팀이 참여하고 있는지 확인하십시오.

버튼

  • div를 버튼으로 사용하지 마십시오. Div는 초점을 맞출 수 없으며 키를 눌러도 활성화되지 않습니다. 반드시 div 또는 기타 비대화 형 요소를 사용해야하는 role="button"경우 tabindex="0", 및 키 누르기 핸들러를 추가 하여 enter키를 누를 때 동일한 클릭 기능을 트리거해야합니다 .
  • 앵커를 버튼으로 사용하지 마십시오 . 링크는 버튼이 아니라 링크입니다.
  • 사용자가 실수로 인접 요소를 잘못 클릭하지 않도록 40x40 픽셀 탭 타겟을 목표로합니다.
  • 텍스트없이 버튼에 아리아 레이블을 추가합니다. 버튼에 텍스트가없는 경우 aria-label을 사용하여 해당 동작을 간략하게 설명합니다. 예를 들어 장바구니 페이지에서 휴지통처럼 보이는 버튼은 다음과 같습니다.<button aria-label="Remove item from cart" class="trash-icon" />
액세스 가능한 휴지통 버튼의 예 (탭 대상 크기가 조금 더 크면 좋겠지 만).
  • 링크를 단추로 사용하거나 단추를 링크로 사용하지 마십시오.
  • 모든 링크에 유효한 href. 링크에 'href'가 없으면 링크를 사용하는 이유를 스스로에게 물어보십시오. 를 포함하지 않으면 hrefSEO 순위에 영향을 미칠 수 있습니다.
  • 이미지가 의미를 전달하는 경우 대체 텍스트를 사용하십시오. 대부분의 이미지에는 이미지에 표시되는 내용을 설명하는 대체 텍스트가 있어야합니다. 인포 그래픽 및 차트의 경우 대체 텍스트는 인포 그래픽 또는 차트를 설명해야합니다.
  • 이미지가 테두리, 구분선 및 추상 모양과 같이 순전히 장식적인 경우 이미지가 alt=""의미를 전달하지 않는다는 것을 전달하는 데 사용합니다.
  • 텍스트와 함께 이미지를 사용하지 마십시오. 대신 이미지 위에 텍스트를 배치하십시오. 어려울 수 있으며 항상 가능한 것은 아니므로 텍스트가있는 이미지에 대한 대체 텍스트를 포함해야합니다.
  • 비디오에는 설명 캡션이 있어야하지만 개인적으로 구현할 필요가 없었습니다. 접근 가능한 비디오를 만들기 위해 노력하는 Godspeed.
  • HTML로 목록을 만들 때 olul태그가 li직계 하위 항목으로 만 있는지 확인하십시오 .
  • li요소 에 상호 작용을 추가하지 마십시오 . 대신 button또는 a요소를 li.

모달

모달은 방해가되며 일반적으로 접근이 불가능하며 제대로하기가 까다로울 수 있습니다. 최소한 모달은 다음을 수행해야합니다.

  • 를 누르면 닫습니다 escape.
  • 초점은 모달 내에 갇혀 있어야합니다. 모달에 4 개의 대화 형 요소가있는 경우 탭 선택은 4 개 요소 모두 사이에서만 순환해야합니다.
  • * 보너스 * 더 액세스 할 수 있도록, 사용을 고려 role="alertdialog"하고 aria-modal="true".
  • w3에서이 훌륭한 예제를 확인하십시오.
  • React를 사용하는 경우, react-modal접근성을 즉시 처리 하는 또는 다른 라이브러리를 사용 하는 것이 좋습니다.

먼저, 구축중인 기능과 흐름을 마우스없이 완전히 수행 할 수 있는지 확인하십시오. 사용자는 명확한 포커스 상태로 탭 탐색을 사용하여 동일한 작업을 수행 할 수 있어야합니다.

둘째, Chrome에 내장 된 시각 장애 시뮬레이터를 사용하여 주기적으로 애플리케이션을 테스트합니다. Chrome에서 시뮬레이션 된 시력 문제가있는 페이지를 보려면 :

Chrome 개발자 도구-> 케밥 메뉴-> 추가 도구-> 렌더링-> 시력 결함 에뮬레이션

Chrome 개발 도구에서 다소 숨겨진 시력 결함 메뉴에 액세스하는 방법.

셋째, 화면 판독기 또는 기타 음성 더빙 소프트웨어를 사용하여 애플리케이션을 주기적으로 테스트합니다. Mac을 사용하는 경우 내장 된 음성 해설 유틸리티를 사용할 수 있습니다. 음성 해설 지원을 추가하기위한 Chrome Vox 와 같은 Chrome 확장 프로그램도 있습니다 .

접근성을 어떻게 재미있게 만드나요?

과거에는 개발자가 아닌 사람에게 마우스없이 또는 모니터를 끈 상태에서 특정 작업을 수행 할 수있는 곳에서 일했습니다. 다음 레트로 또는 데모에서 제품 관리자에게 음성 해설을 사용하여 전체 기능을 수행하도록 요청할 수 있습니다. 이는 모든 사람의 마음에 접근성을 제공하고 접근성을 핵심 사용자 경험의 일부로 우선시하는 것에 대한 공감을 유도하는 재미있는 방법이 될 수 있습니다.

결론적으로

이 가이드가 도움이 되었기를 바랍니다. 오류를 발견하거나 제안 사항이있는 경우 저에게 연락하거나 의견 섹션에 남겨 주시면 그에 따라이 가이드를 업데이트하도록 최선을 다하겠습니다.

보너스 섹션 : 웹 사이트를 더욱 발전시킬 수있는 몇 가지 고급 기능입니다.

다크 모드 및 테마

어둡거나 밝은 모드를 추가하는 것을 고려하십시오. 최신 브라우저 에는 기기 선호도를 감지하는 API있습니다 . 더 많은 제어를 위해 Accessibe 와 같은 도구 를 사용하여 사용자가 "테마"페이지를 사용하여 개별 요구 사항을 해결할 수 있습니다.

링크 건너 뛰기

스킵 링크는 드물지만 구축하기 어렵지 않은 멋지고 유용한 기능입니다.

사용자가 페이지를 빠르게 탐색 할 수 있도록 보이지 않는 건너 뛰기 링크 구성 요소를 만들어 큰 콘텐츠 블록을 건너 뜁니다. 포커스를 받으면 건너 뛰기 링크가 표시되고 사용자가 콘텐츠 블록을 건너 뛸 수 있습니다. 링크 건너 뛰기는 종종 긴 탐색 링크를 기본 콘텐츠 섹션으로 건너 뛰는 데 사용됩니다.

Starbucks는 보이지 않는 건너 뛰기 링크를 사용하여 탐색을 건너 뛰고 기본 콘텐츠 섹션으로 바로 이동합니다. 탭 탐색을 사용하여 초점을 맞춘 경우에만 표시됩니다.
UX Collective는 플랫폼에 게시 된 각 기사에 대해 미화 1 달러를 기부합니다. 이 이야기는 샌프란시스코 베이 지역의 디지털 디자이너이자 연구원 인 흑인을위한 전문 개발 커뮤니티 인 Bay Area Black Designers에 기여했습니다. 커뮤니티에서 함께 참여함으로써 회원들은 영감, 연결, 동료 멘토링, 전문성 개발, 리소스, 피드백, 지원 및 탄력성을 공유합니다. 체계적인 인종 차별에 대한 침묵은 선택 사항이 아닙니다. 당신이 믿는 디자인 커뮤니티를 구축하십시오.

Suggested posts

제품 관리자가 시장 진출 팀에 영향을 미칠 수있는 4 가지 쉬운 방법

제품 관리자가 시장 진출 팀에 영향을 미칠 수있는 4 가지 쉬운 방법

당신의 팀은 수없이 많은 시간을 들여 제작했고 이제 배송 할 시간입니다. GSD ✅에서 GTM 🚀으로 전환 할 준비가되었습니다.하지만 시장 진출은 제품 개발의 한 단계 그 이상입니다.

깔끔한 코드를위한 10 가지 자바 스크립트 스 니펫

코드를 깔끔하고 간결하게 만드는 자바 스크립트 속기

깔끔한 코드를위한 10 가지 자바 스크립트 스 니펫

모든 JavaScript 프로그래머를 위해 가장 멋지고 유용한 속기 / 스 니펫 목록을 수집했습니다. 코드를보다 전문적으로 보이게하려면이를 사용하십시오.

Related posts

UX의 진화 이해 : 정보 아키텍처 기반 확장

UX의 진화 이해 : 정보 아키텍처 기반 확장

by Darren Hood Apple Fandom Wiki에 따르면 Don Norman은 1993 년에 Apple에 입사했습니다. 그는“User Experience Architect.

Behance가 당신을 더 나은 UX 디자이너로 만드는 5 가지 비밀

Behance를 사용하여 꿈의 직업을 얻는 방법.

Behance가 당신을 더 나은 UX 디자이너로 만드는 5 가지 비밀

UX 경력을 시작할 때 많은 질문이 있습니다. 당신은 너무 많은 것을 배우고, 찾을 수있는 모든 것을 시도하고 있습니다.

UX / UI 디자이너를위한 5 가지 기본 교훈

디자이너로서 돋보일 수 있도록 이러한 기초를 기억하십시오.

UX / UI 디자이너를위한 5 가지 기본 교훈

제품 디자이너로서 성공하려면 특정 이론에 대한 근본적인 이해가 필수적이라고 생각합니다. 이 기사에서는 예술과 디자인의 차이점을 배우고 디자인이 실제로 의미하는 바가 무엇이며 제품의 품질에 어떤 영향을 미치는지 이해합니다.

의료 기록이 체스 게임처럼 디자인된다면 어떨까요?

의료 기록이 체스 게임처럼 디자인된다면 어떨까요?

체스의 '길들임'게임을 통해 임상 적 유용성의 '사악한'문제를 설명합니다. EHR (Electronic Health Record)은 현대 의학에서 가장 중요한 도구이며 최고의 게임을하지 못하고 있습니다.