인터페이스 가용성 테스

1) 왜 그리고 우리가 생각하는 것은 "준비된"

• WCAG 2 기준이 충족되었습니다. 1/2. 목표 플랫폼을위한 2 개의 AA 레벨;
• 인터페이스는 키보드에서 완전히 전달됩니다.
• 스크린 리더와의 올바른 작업;
• 대조는 규범을 준수합니다.
• 모든 상태/오류/상태는 눈에 띄지 않고 마우스없이 사용할 수 있습니다.
• 현지화, RTL, 모션 감소 및 모바일 기능이 고려됩니다.

2) 테스트 전략 (피라미드 A11y)

1. 자동 테스트/린터 (문제 클래스의 최대 40-60% 의 빠른 범위).
2. 수동 패턴 확인 (키보드, 초점, 내용, 논리).
3. 보조 기술 (AT) 세션: 스크린 리더, 스케일링, 컬러 필터.
4. 사용자와의 현장 테스트 (가능한 경우).

목표: 구성 요소/패턴 레벨에서 체계적인 결함을 포착하여 기능이 증가하지 않도록합니다.

3) 기본 점검 목록 (빠른 실행)

• 키보드: 탭/화살표로 모든 것에 도달 할 수 있습니다. 초점 순서는 논리적입니다. 모달에는 트릭 트랩이 있습니다. ESC/입력/공간이 작동합니다.
• 초점 표시기는 모든 주제/배경에서 볼 수 있습니다.
• 대조: 텍스트 5:1 (일반), 3:1 (큰), 아이콘/컨트롤을 읽을 수 있습니다.
• 시맨틱: 올바른 태그 ('버튼', 'a', '라벨', 'ul/li', 'th/td'), 역할 및 '아리아'.
• 스크린 리더: 계층 구조 별 제목, 의미있는 버튼/링크 이름, 아이콘/이미지 대체.
• 양식: 명시 적 '레이블', 힌트/오류가 관련되어 있고 ('aria-describby') 오류 텍스트가 구체적입니다.
• 역학: 토스트/배너/오류는 'aria-live' ('polite '/' assurtive') 를 통해 발표됩니다.
• 애니메이션은 '선호 감소 운동' 을 존중합니다. 인터페이스를 "흔들지 않고"
• 현지화/RTL: 키 화면이 정렬되고 숫자/날짜/통화는 유틸리티별로 형식화됩니다.
• 이동성: 터치 타겟은 44 × 44 px, 줌은 금지되지 않으며 화면 회전은 내용을 깨뜨리지 않습니다.

4) 역할, 책임 및 인공물

설계 시스템: 각 구성 요소의 설명에서 A11y 요구 사항.
개발자: A11y 주장으로 자동 점검, 단위/상호 작용 테스트.
QA: 수동 스크립트 + AT 세션; 심각도/빈도로보고하십시오.
UX/컨텐츠: 오류/상태의 마이크로 카피, 가독성 큰 소리.
아티팩트: 체크리스트, 스크립트, AT 스크린 캐스트, WCAG 참조 결함 목록, 권장 사항.

5) 자동 점검

라인터/분석기: 도끼, 에스 린트 플러그인-jsx-a11y, pa11y, 등대.
파이프 라인에서: 중대한 위반 (역할/라벨/대비/탭 트랩) 에 대한 PR을 차단합니다.
대비 스냅 샷: 테마/상태의 시각적 테스트.

6) 수동 테스트: 시나리오

6. 키보드 1 개

키보드 (탭/시프트 + 탭/입력/공간/화살표) 를 사용하여 페이지를 살펴보십시오.
점검: 초점 가시성, 우선 순위, 모든 동작의 가용성, "트랩" 없음 및 "죽은" 요소.
모달에서: 내부에 초점을 맞추면 닫히면 개시자로 돌아갑니다.

6. 스크린 리더 2 개 (최소 세트)

데스크톱: NVDA/JAWS (Windows), VoiceOver (macOS).
모바일: VoiceOver (iOS), TalkBack (Android).
올바른 제목 (H 계층 구조), 버튼/링크 이름, 읽기 테이블 ('th '/' scope'), 상태 선언, 이해할 수있는 양식 오류.

6. 3 내용 및 마이크로 카피

"오류 400" 없이 모호하지 않고 중요한 텍스트를 크게 읽습니다.
오류 = "무엇이 잘못되었는가++ 제약/형식을 수정하는 방법".

6. 4 역학 및 생활 지역

성공의 토스트는 'aria-live = "polite" 이고, 오류는' surgative '입니다.
텍스트로 설명 된 진행/다운로드; 골격은 스피너보다 선호됩니다.

7) 형태 및 오류 (심도)

각 필드에는 관련 레이블이 있습니다 (자리 표시 자 아님).
오류는 'aria-unless = "참"', 'aria-describby = "[오류 id]"' 와 관련이 있습니다.
형식 공식 (날짜, 전화 번호) 은 사전에 지정됩니다. 마스크는 입력/삽입을 중단하지 않습니다.
+ 자동 스크롤링을 제출할 때 오류 배너를 요약하고 첫 번째 오류에 집중하십시오.
오류 텍스트: 기술 전문 용어가없는 특정.

8) 테이블, 목록, 그래프

테이블: 제목 'th' with 'scope = "col/row"', 서명, 재개.
목록은 디바가 아니라 실제 'ul/ol/li' 입니다.
그래프-대체 테이블/설명; 전설을 이용할 수 있습니 색상은 단일 신호입니다.

9) 멀티미디어 및 애니메이션

비디오: 자막/대화 내용; 키보드 제어; 자동 레이없이 (또는 조용히).
GPS/마이크로 애니메이션: '감소 운동 선호' 시 꺼짐; 발발을 피하십시오.
진동/소리-선택 사항 및 복제 된 시각적/텍스트.

10) 모바일 접근성

충분한 간격으로 대화 형태로 44 × 44 px.
스케일링을 금지하지 마십시오 ('사용자 확장 가능 = 아니오' 가없는 메타 뷰 포트).
양식/키보드: 올바른 유형 ('tel', '이메일', '번호') 은 시스템 기능을 숨기지 않습니다.
어두운 테마와 시스템 글꼴 "more" 로 체크하십시오.

11) 현지화, 숫자 및 RTL

컨텍스트가있는 i18n 키를 통한 문자열; 긴 언어 (DE/TR) 는 레이아웃을 깨뜨리지 않습니다.
날짜/통화 형식-문자열이 아닌 유틸리티.
RTL 모드: 탐색 아이콘을 미러링하고 초점 및 캐리지 순서, 양방향 입력을 확인하십시오.

12) 임계 흐름의 특이성 (iGaming)

결제/결론

텍스트에서 명령어, 제한/마감일/수수료-

공급자 오류는 코드없이 명시 적으로 선언됩니다 행동에 대한 대안이 있습니다.
운영 확인: 논리적 CTA, 취소 가능성에 중점을 둡니다.

CCM/검증

사진/문서에 대한 단계별 팁; 진행 및 ETA.
흐릿한/눈부심/잘린 오류-수정 예제.
중립 톤, 유머 없음.

13) 결함 심각도 평가

차단: 키 작업 (키보드/스크린 리더) 을 완료 할 수 없습니다.

중요한 기능: 중요한 기능은 작동하지만 심각한 장벽이 있

전공: 방해가됩니다. 해결 방법이 있습니다.
미성년자: 화장품/작업에 영향을 미치지 않는 가이드 준수.

각 결함은 WCAG 기준 및 재생산중인 스크립트에 대한 참조입니다.

14) 완료의 정의 (A11y)

마우스없이 키보드 스크립트를 전달하는 것은 100% 입니다.
도끼/등대: 중요한/높은 위반이 없습니다.
모든 테마/상태에서 AA 대비.
주요 경로 (navbar, 금형, 모달, 토스트) 의 스크린 리더 실행.
새로운 구성 요소/기능에 대한 A11y 문서 (역할 모델, 아리아, 초점, 예).
CI에서 A11y의 회귀가 녹색으로 테스트됩니다.

15) 프로세스 및 자동화

개발 전: 작업의 A11y 기준, 초점/오류 상태의 레이아웃.
개발 중: 지역 집회 중 린터/아헤; 대비/초점의 비주얼 스냅 샷.
CI에서: 중요한 페이지별로 pa11y/ax-scan; Blocker/Critical 하에서 드롭 빌드.
출시 후: 분기 별 감사, A11y-tag의 사용자 불만 모니터링.

16) 반 패턴

라벨 대신 장소 보유자.
'버튼 대신 '/' a' 대신 'div'.
장애인 초점은 "아름다움을 위해" 울립니다.
유일한 상태 캐리어로 색상.
포커스 트랩/ESC가없는 모달.
모바일에서 스케일링이 없습니다.
사람의 설명없이 "오류 400/500".

17) 스크립트 템플릿 테스트

시나리오 1-키보드 탐색 (양식 페이지)

1. 첫 번째 필드를 탭하면 데이터를 입력하십시오.
2. 다시 이동 + 탭-올바른 순서를 확인하십시오.
3. 통화 유효성 검사 (제출) -초점이 첫 번째 오류로 이동합니다.
4. ESC 키로 변조기를 닫고 초점을 개시자로 되돌립니다.

시나리오 2-스크린 리더 (결제 페이지)

1. 페이지 헤더 (h1) 로 이동하여 섹션을 듣습니다.
2. 방법의 선택을 엽니 다-역할/상태 선언이 들립니다.
3. 의도적으로 합계 오류를 만듭니다. 메시지는 읽히고 필드와 관련이 있습니다.

4. 성공적인 지불 토스트는 '정중' 을 선언했습니

시나리오 3-역학

1. > 3 초의 대기 시간으로 작업을 시작하십시오-프로세스/ETA에 대한 텍스트가 있습니다.
2. 키보드에서 액세스 할 수있는 '독단적' 배너 인 네트워크 오류의 경우 "반복/도움말" 경로가 있습니다.

18) 유용한 마이크로 템플릿

토스트를위한 역할/아리아

html
<div role = "status" aria-live = "polite"> Payment accepted. Balance updated. </div>
<div role = "alert" aria-live = "assertive"> The payment was denied. Try another method. </div>

필드에 대한 링크 오류

html
<label for = "amount "> Amount </label>
<input id="amount" aria-invalid="true" aria-describedby="amount-error">
<div id = "amount-error "> Minimum 100 UAH. Please enter a larger amount. </div>

Modalka (시맨틱 속성)

html
<div role="dialog" aria-modal="true" aria-labelledby="m-title">
<h2 id =" m-title "> Confirm Payment </h2>
<! -- content -->
<button> Confirm </button>
<button> Cancel </button>
</div>

19) A11y 관행에 대한 빠른 구현 계획

1. 현재 구성 요소/패턴 감사 (대비/초점/역할 의미론).
2. 디자인 시스템 편집: 각 구성 요소에 A11y 파티션을 추가합니다.
3. 도구: 로컬 및 CI에/ax/pa11y/Lighthouse 라인터를 설정하십시오.
4. 교육: 디자이너/개발자/카피라이터를위한 짧은 가이드.
5. 파일럿: 가장 일반적인 결함 (모달, 양식, 토스트) 의 3-5를 수정하십시오.
6. 규정: A11y 기준을 가진 DoD; 분기 별 감사.

최종 치트 시트

키보드, 초점, 대비, 스크린 리더, 다이나믹을 확인하십시오.
aria-live를 통해 상태를 발표합니다. 필드와 관련된 오류.
모션을 줄이고 스케일링을 금지하지 마십시오.
"어떻게 생겼는지" 가 아니라 의미론 (태그/역할) 을 생각하십시오.
수표를 자동화하지만 항상 수동 수표로 보완하십시오.
WCAG, 심각도 및 재생 스크립트와 관련하여 결함을 수정합니다.