액세스 가능성 및 포괄적인 디자인 - 패턴 | 패턴 |

액세스 가능성 및 포괄적인 디자인 - 패턴

잘 설계된 공정성에 대해 자세히 알아보기 → Lightning 및 Experience Cloud의 가용성

패턴

찾을 위치	유사성
플랫폼 \| 설계 표준	✅ WCAG 2.2 레벨 AA는 구축 팀에서 확인한 사용자 정의 빌드 작업(Experience Cloud, LWC, 사용자 정의 테마)의 최소 액세스 가능성 막대입니다.
플랫폼 \| 설계 표준	✅ 인식 원칙: 이미지 및 아이콘에 대한 텍스트 대안이 있으며, 캡션은 비디오를 첨부합니다.
플랫폼 \| 설계 표준	✅ 운영 원칙: 모든 기능은 마우스 또는 터치 없이 키보드를 통해서만 작동할 수 있습니다. 음성 제어 및 스위치 액세스 보조 기술은 동일한 키보드/포커스 모델에 의존합니다.
플랫폼 \| LWC	✅ 표준 Lightning 웹 구성 요소는 설계된 대로 사용되므로 기본 접근성을 자동으로 제공합니다.
플랫폼 \| LWC	✅ 사용자 정의 구성 요소는 화면 판독기를 사용하여 테스트를 통해 확인된 명시적 접근성을 구현합니다.
플랫폼 \| 테스트 계획	✅ 접근성 테스트는 모든 테스트 단계에 포함됩니다(특정 또는 옵션이 아님).

안티 패턴

찾을 위치	불만 사항
플랫폼 \| 설계 표준	⚡️ WCAG 2.2 레벨 AA는 최소 요구 사항이 아닌 옵션 또는 “포함”으로 취급됩니다.
플랫폼 \| 설계 표준	⚡️ 이미지 및 아이콘에는 텍스트 대안이 없으며 비디오에는 제목이 없습니다.
플랫폼 \| 설계 표준	⚡️ 기능에는 키보드 대안 없이 마우스 또는 터치 상호 작용이 필요합니다.
플랫폼 \| LWC	⚡️ 액세스 가능성 구현 또는 확인 없이 사용자 정의 구성 요소가 구축됩니다.
플랫폼 \| LWC	⚡️ 사용자 정의 입력 구성 요소는 시맨틱 의미 또는 키보드 액세스 가능성이 없는 div 요소 및 CSS 스타일을 사용합니다.
플랫폼 \| 테스트 계획	⚡️ 접근성 테스트는 임시, 옵션 또는 출시 전(개발 전 과정이 아님)만 수행됩니다.

패턴

찾을 위치	유사성
플랫폼 \| LWC	✅ 시맨틱 HTML 요소(머리글, 탐색, 주, 옆, 바닥글, 기사, 섹션)는 사용자 지정 Lightning 웹 구성 요소에서 사용됩니다.
플랫폼 \| LWC	✅ 시맨틱 HTML만으로 인터페이스 동작을 전달할 수 없는 ARIA 랜드마크, 역할 및 속성이 적용됩니다.
플랫폼 \| LWC	✅ 동적 콘텐츠 업데이트는 화면 판독기 사용자에게 변경 사항을 알리는 aria-live 영역을 사용합니다.
플랫폼 \| LWC	✅ 사용자 정의 대화형 구성 요소에는 동작과 일치하는 명시적 역할 정의가 있습니다.
플랫폼 \| LWC	✅ 양식 레이블은 적절한 레이블 요소 또는 aria-labelledby 특성을 사용하여 모든 양식 입력과 명시적으로 연결됩니다.
플랫폼 \| LWC	✅ Lightning 입력 구성 요소는 내장된 레이블 연결을 제공하는 필수 레이블 속성으로 구성됩니다.
플랫폼 \| 테스트 계획	✅ 테스트는 실제 화면 판독기로 수행됩니다. Windows의 JAWS 및 NVDA, macOS 및 iOS의 VoiceOver, Android의 TalkBack
플랫폼 \| 테스트 계획	✅ 실제 보조 기술로 수동 테스트는 화면 판독기 사용자의 탐색 방식을 이해하는 사람이 수행합니다.
플랫폼 \| 설계 표준	✅ 자리 표시자 텍스트는 포커스 시 자리 표시자가 사라지고 화면 판독기에 충분한 컨텍스트를 제공하지 않으므로 전용 레이블로 사용되지 않습니다.

안티 패턴

찾을 위치	불만 사항
플랫폼 \| LWC	⚡️ 화면 판독기 사용자가 선형으로 탐색하도록 강제하는 콘텐츠 계층에서 의미하는 중형 마크업 스트라이프
플랫폼 \| LWC	⚡️ ARIA는 시맨틱 HTML만으로 인터페이스 동작을 전달할 수 없는 경우 사용되지 않습니다.
플랫폼 \| LWC	⚡️ 동적 콘텐츠 업데이트는 aria-live 지역을 사용하지 않으며, 화면 판독기 사용자는 중요한 변경 사항을 놓치지 않습니다.
플랫폼 \| LWC	⚡️ 사용자 정의 대화형 구성 요소에는 명시적 역할 정의가 없으며 화면 판독기가 잘못 알립니다.
플랫폼 \| LWC	⚡️ 양식 입력에 명시적 레이블 연결이 없으며 자리 표시자 텍스트가 단일 레이블로 사용됩니다.
플랫폼 \| 테스트 계획	⚡️ 자동화된 접근성 도구는 독점적으로 사용되며 수동 화면 판독기 테스트는 수행되지 않습니다.
플랫폼 \| 테스트 계획	⚡️ 테스트는 화면 판독기 사용자가 실제로 탐색하는 방식에 익숙하지 않은 시각 사용자가 수행합니다.

패턴

찾을 위치	유사성
플랫폼 \| 설계 표준	✅ 사용자 여정의 어느 시점에서도 마우스 또는 터치 상호 작용 없이 키보드를 통해 전체 기능에 액세스 가능
플랫폼 \| LWC	✅ 논리적 포커스 순서에 따라 시각적 레이아웃 및 상호 작용 플로
플랫폼 \| LWC	✅ 동적 콘텐츠가 로드되거나 모달이 열리면 키보드 사용자에게 새 콘텐츠를 안내하기 위해 프로그래밍 방식으로 포커스 관리
플랫폼 \| LWC	✅ 모달 및 팝오버 구성 요소는 모달 제목 또는 열린 경우 첫 번째 대화형 요소로 포커스를 이동하고 닫을 때 트리거로 포커스 되돌리기 버튼
플랫폼 \| 설계 표준	✅ 표시되는 포커스 표시기가 항상 키보드 포커스가 있는 요소를 명확하게 표시합니다.
플랫폼 \| 설계 표준	✅ 초점 지표는 주변 콘텐츠에 대한 3:1 대비 요구 사항을 충족합니다.
플랫폼 \| LWC	✅ 사용자는 갇혀 있지 않고 키보드를 사용하여 모든 구성 요소로 이동하거나 벗어날 수 있습니다.
플랫폼 \| LWC	✅ 모달 대화 상자는 모달 내에서 포커스를 가져오지만(숨겨진 콘텐츠에 대한 액세스 방지) 닫는 경우 릴리스 포커스를 가져옵니다.
플랫폼 \| 설계 표준	✅ 자주 사용하는 작업에 대한 키보드 바로 가기는 화면 판독기 바로 가기 및 브라우저 바로 가기에 충돌을 방지합니다.
플랫폼 \| 설계 표준	✅ 단일 문자 바로 가기는 화면 판독기 탐색 명령과 충돌하지 않도록 특정 구성 요소에 포커스가 있는 경우에만 활성화됩니다.
플랫폼 \| 문서	✅ 모든 사용자 정의 키보드 바로 가기는 액세스 가능한 도움말 콘텐츠에 문서화되어 있습니다.
플랫폼 \| 테스트 계획	✅ 테스트 단계에는 마우스 또는 터치 없이 모든 사용자 여정을 통한 키보드 전용 탐색이 포함됩니다.

안티 패턴

찾을 위치	불만 사항
플랫폼 \| 설계 표준	⚡️ 기능에는 마우스 또는 터치 상호 작용이 필요하며 키보드 전용 사용자는 키 과업을 완료할 수 없습니다.
플랫폼 \| LWC	⚡️ 포커스 순서는 논리적 시각적 레이아웃을 따르지 않으며, 사용자는 예기치 않은 순서로 요소를 탭합니다.
플랫폼 \| LWC	⚡️ 포커스 관리 없이 모달이 열리며 키보드 사용자는 이제 숨겨진 트리거 버튼에 갇혀 있습니다.
플랫폼 \| LWC	⚡️ 모달 닫기는 트리거 버튼에 초점을 반환하지 않으며, 사용자는 페이지에서 자신의 위치를 찾아야 합니다.
플랫폼 \| 설계 표준	⚡️ 화학상의 이유로 초점 표시기가 제거되며, 사용자는 초점이 있는 요소를 볼 수 없습니다.
플랫폼 \| 설계 표준	⚡️ 초점 표시기 대비가 부족합니다(<3:1)
플랫폼 \| LWC	⚡️ 사용자가 이스케이프 메커니즘이 없는 인터페이스 영역에 갇혀 있습니다(키보드 트랩).
플랫폼 \| LWC	⚡️ 내장형 콘텐츠(ifram, 타사 위젯)는 키보드 포커스를 영구적으로 캡처합니다.
플랫폼 \| 설계 표준	⚡️ 단일 문자 바로 가기를 통해 화면 판독기 단일 문자 탐색 명령과 전역적으로 충돌
플랫폼 \| 문서	⚡️ 사용자 정의 키보드 바로 가기는 문서화되지 않으며 사용자가 검색할 수 없습니다.

패턴

찾을 위치	유사성
플랫폼 \| 설계 표준	✅ 18pt 또는 14pt 굵게 미만의 일반 텍스트에 대한 최소 4.5:1 명암비
플랫폼 \| 설계 표준	✅ 대형 텍스트와 유의미한 UI 구성 요소 및 그래픽(양식 테두리, 정보 아이콘)의 경우 최소 3:1 명암비, 순수한 장식 및 비활성화 요소는 면제됩니다.
플랫폼 \| Experience Cloud	✅ 사용자 정의 테마 및 브랜딩된 Experience Cloud 사이트에는 브라우저 개발 도구 또는 자동화된 검사기를 사용하여 명시적 대비 검증이 포함되어 있습니다.
플랫폼 \| 설계 표준	✅ 콘텐츠 또는 기능 손실 없이 200%로 텍스트 크기 조정 지원(WCAG 요구 사항)

안티 패턴

찾을 위치	불만 사항
플랫폼 \| 설계 표준	⚡️ 텍스트 대비 비율이 4.5:1(정상 텍스트) 또는 3:1(대형 텍스트 및 UI 구성 요소) 미만임
플랫폼 \| Experience Cloud	⚡️ 사용자 정의 테마는 대비 검증 없이 배포됩니다. 저시력 사용자가 콘텐츠를 읽을 수 없음
플랫폼 \| 설계 표준	⚡️ 200%를 초과하는 텍스트 크기 조정 - 콘텐츠 또는 기능이 손실된 레이아웃 중단

패턴

찾을 위치	유사성
플랫폼 \| CI/CD	✅ 축 코어 또는 Lighthouse 액세스 가능성 스캔이 모든 배포에서 구조적 문제를 파악하는 CI/CD 파이프라인에 통합됨
플랫폼 \| CI/CD	✅ 중요 액세스 가능성 문제가 감지되면 빌드가 실패합니다.
플랫폼 \| 테스트 계획	✅ 화면 판독기, 키보드 전용 탐색, 브라우저 확대/축소 200%를 사용한 수동 테스트는 개발 과정에서 정기적으로 수행됩니다.
플랫폼 \| 테스트 계획	✅ 테스트 시 혼동된 알림 주문, 포커스 관리 실패, 키보드 트랩 등 상호 작용 문제가 표시됩니다.
플랫폼 \| 비즈니스	✅ 장애가 있는 사용자는 설계 프로세스 전반에 걸친 유용성 테스트에 포함됩니다.
플랫폼 \| 비즈니스	✅ 유용성 테스트는 자동 및 수동 전문가 테스트에서 놓친 실용적인 장벽을 보여줍니다.
플랫폼 \| 테스트 계획	✅ 자동 테스트(용량별 문제의 최대 57%), 수동 테스트(상호 작용 문제), 사용자 테스트(실제 배리어) 모두 수행

안티 패턴

찾을 위치	불만 사항
플랫폼 \| CI/CD	⚡️ 접근성 스캔이 CI/CD 파이프라인에 통합되지 않음
플랫폼 \| CI/CD	⚡️ 중요한 접근성 문제에도 불구하고 구축 진행
플랫폼 \| 테스트 계획	⚡️ 보조 기술로 수동 테스트가 수행되지 않으며 자동 스캔만 사용됩니다.
플랫폼 \| 비즈니스	⚡️ 장애가 있는 사용자는 유용성 테스트에 포함되지 않음
플랫폼 \| 테스트 계획	⚡️ 자동화된 액세스 가능성 스캐너는 시작 전에 한 번 실행되고 액세스 가능성 테스트는 완료로 간주됩니다.