모두를위한 UX 가용성 및 인터페이스

1) 왜 중요한가

법적으로나 윤리적으로: 인터페이스는 시각, 청각, 운동, 인지 장애가있는 사람들을 배제해서는 안됩니다.
비즈니스 효과: 더 많은 사용자, 더 높은 변환 및 유지, 더 나은 SEO 및 코드 품질.
운영: 접근성은 "무작위 수정" 이 아닌 프로세스입니다.

2) 기본 및 원칙 (POUR)

인식 가능: 대비, 대체 텍스트, 자막.

작동 가능: 키보드, 가시적 인 초점, 일시 정지/정지 애니메이션에서 모든 것에 액세스 할

이해: 예측 가능한 탐색, 명확한 오류, 간단한 공식.
견고성: 올바른 IM/ARIA 의미론, 보조 기술과의 호환성.

3) 시맨틱, 타이틀 및 ARIA

ARIA 이전의 시맨틱 마크 업: '<단추>', '<nav>', '<form>', '<table>' -의도적으로.
헤더 계층 구조: 페이지 당 하나의 '<h1>', 논리 구조 '<h2>' - '<h3>'.
랜드 마크: '<header>', '<main>', '<bothing>', '<footer>', '<nav>' -스크린 리더를 도와줍니다.
필요할 때만 ARIA: '역할', '아리아 라벨', '아리아 묘사', '아리아 확장', '아리아 라이브'.
'aria-ununity', 'aria-errormessation' 을 통한 상태/오류.

4) 키보드 및 초점 관리

전체 키보드 제어: '탭/시프트 + 탭' - 순서, '입력/공간' - 활성화, 'Esc' -종료.
항상 보이는 초점; 개요를 비활성화하지 않습니다.
포커스 트랩: 모달-주기적 포커스, 닫은 후 소스로 포커스 반환.
숨겨진 요소가 탭 순서에 속하지 않아야합니다 ('표시: 없음', 'aria-hidden =' 참 '').
링크 건너 뛰기: "메인 컨텐츠로 이동" -페이지 시작 부분.

5) 색, 대비 및 타이포그래피

텍스트 대비: 최소 4. 일반 텍스트의 경우 5:1, 큰 텍스트의 경우 3:1

아이콘/패턴/시그니처가있는 색상에만 의존하지 마십시오.
클릭 가능한 대상의 크기: 최소 40-48 px, 충분한 필드.
글꼴: 읽을 수있는 서체, 줄 간 1. 4–1. 6, 줄 길이 45-90 자.

6) 모션, 애니메이션 및 간질 플래시

시스템 선호 감소 모션 플래그를 존중하십시오-단순화 된 애니메이션/비활성화 시차 추가.
깜박임을 피하십시오> 3 초/초.
모든 자동 동작에는 Pause/Stop/Hide가 있어야합니다.

7) 양식, 오류 및 검증

레이블과 필드: '<레이블 for = "id">'.
장소 보유자는 라벨이 아닙니다.
필드 옆과 상단의 오류 요약에서 메시지 오류; 'aria-describedby' 를 통해 결합하십시오.
입력 형식, 예를 들어 마스크를 설명하십시오. 단위와 통화를 지정하십시오.
오류가 발생했을 때 완료된 필드를 재설정하지 마십시오. 문제 분야에 계속 집중하십시오.

html
<label for="email">Эл. почта</label>
<input id="email" name="email" type="email" aria-describedby="email-hint email-err">
<div id="email-hint" class="hint">Мы не рассылаем спам</div>
<div id="email-err" class="error" role="alert">Укажите адрес в формате name@example.com</div>

8) 구성 요소 및 대화 형: 패턴

단추 대 링크: 동작 = '<단추>, 점프 =' <a> '.
탭/아코디언: 탐색 화살표, '아리아 컨트롤', '아리아 선택'.
모달/대화 상자: 'role = "dialogie"', aria-modal = "참" ', 포커스 트랩' Esc '닫힙니다.
툴팁/포퍼: 키보드 접근성, 타임 아웃은 읽기를 방해하지 않습니다.
드래그 및 드롭: 대안-위로/아래로 이동 버튼, 키보드 화살표; 마우스뿐만 아니라 이벤트.

9) 미디어: 비디오/오디오/그래픽

비디오: 자막, 대화 내용, 대체 오디오 설명 (AD) 트랙.
오디오: 텍스트 대화.
그래프/다이어그램: 텍스트 요약 ("중요한 것"), 데이터 테이블, 설명 레이블.
생활 공간: 'aria-live = "polite "/" assurtive"' -너무 자주 "비명을 지르지 않도록주의하십시오.

10) 테이블 및 목록

11) i18n, 로케일 및 RTL

html 루트의 'lang' 속성; 현지 번호/날짜/통화 형식.
RTL 지원 (아랍어/히브리어): 미러링 아이콘, 탐색 순서, 커서.
아이콘에 꿰매는 단어를 피하십시오 (텍스트는 번역 가능해야 함).
간단한 제형, 전문 용어를 피하십시오. 용어집.

12) 시간, 세션, 캡카 및 대안

시간 초과-경고 및 확장 기능.
CAPTCHA: 대안을 선호합니다 (질문, 보이지 않는 봇 분석기, 우편/전화 확인). 사용하는 경우-시각적 일뿐만 아니라 텍스트 대안.
인증: 비밀번호 관리자 지원, "비밀번호 표시", WebAuthn.

13) 감각 및 운동 장애에 대한 접근성

제스처에는 클릭/키보드 등가물이 있어야합니다.
대안없이 긴 홀드/더블 탭이 필요하지 않습니다.
"포인터 취소": 취소 할 수있는 기회를 제공하기 위해 "프레스" 가 아닌 릴리스시 작업을 수행해야합니다.

14) 주, 통지 및 경고

동적 메시지에서는 'role = "상태 "/" 경고" 를 사용하십시오.
끈적 끈적한 배너로 초점을 가리지 마십시오.
토스트 알림-초점/호버에서 일시 중지하고 키보드에서 액세스 할 수 있습니다.

15) 테스트 계획 (수동 및 자동)

• 키보드만으로 모든 키 스크립트를 전달하십시오.
• 각 항목의 초점 가시성을 확인하십시오.
• 최대 200% 확대-인터페이스는 수평 스크롤없이 작동합니다.
• 시스템 모드 "모션 감소" 를 켜십시오-애니메이션이 방해받지 않습니다.
• 스크린 리더 (NVDA/VoiceOver) 로 스크립트를 전달하면 역할/태그/순서가 올바른지 확인하십시오.

• 구성 요소 수준 접근성 린트.
• 대비, 대체 텍스트, 헤더 순서, ARIA 유효성을 확인하십시오.
• 중요한 화면을위한 의미론 (역할 트리) 의 스냅 샷.

16) 가용성 품질 지표

A11y 적용 범위: 체크리스트가 완성 된 구성 요소의 비율.
키보드 전용 패스 속도: 키보드로 가로 지르는 스크립트의 백분율.
위반/1k 요소를 대조하십시오.
SR 흐름 시간: 스크린 리더로 스크립트 실행 시간.
사용자 피드백: 가용성, 응답 시간 및 수정에 대한 불만.

17) 구성 요소 체크리스트

• 중복 ARIA없이 올바른 의미론/역할
• 서명 된 레이블, 'aria-' 올바른
• 전체 키보드 컨트롤, 가시적 인 초점
• 텍스트/아이콘/테두리 대비는 정상입니다
• 스크린 리더가 오류 및 조건을 표시합니다
• 선호 감소 모션 존중
• 클릭 가능 영역 크기
• 현지화와 RTL은 레이아웃을 깨뜨리지 않습니다

18) 반 패턴

역할/키보드가없는 "디브 버튼".
대안이없는 '개요: 없음' 에 중점을 둡니다.
라벨 대신 장소 보유자.
색상 오류 만 있습니다.
포커스 트랩이없고 'Esc' 가없는 모달.
키보드없이 드래그 전용.
비활성화 옵션없이 긴 자동 스크롤/시차.

19) 역할 및 프로세스

명령의 A11y 소유자 (제품/디자인/데브).
데이터 정의 (DoD) 에는 가용성이 포함됩니다.
설계 검토: 대비, 초점, 라벨 확인.
코드 검토: 시맨틱/ARIA, 키보드 테스트.
정기적 인 감사 및 개선 계획.

20) 반복에 의한 구현

• 시맨틱/타이틀, 대비, 초점 및 키보드, 기본 양식 및 오류.

• 모달, 탭/아코디언, 텍스트 요약 테이블/그래프, 비디오 자막, 줄어든 애니메이션.

• CI, RTL/i18n, 지표, 정기 감사, 팀 교육의 자동 테스트.

21) 템플릿 및 스 니펫

html
<div role="dialog" aria-modal="true" aria-labelledby="dlg-title" aria-describedby="dlg-desc">
<h2 id="dlg-title">Подтвердите действие</h2>
<p id="dlg-desc">Эта операция необратима.</p>
<button>Отмена</button>
<button>Подтвердить</button>
</div>

html
<a class="skip-link" href="#main">Перейти к основному содержимому</a>
<main id="main">...</main>

css
@media (prefers-reduced-motion: reduce) {
{ animation-duration: 0.01ms!important; animation-iteration-count: 1!important; transition: none!important; }
}

22) 미니 -FAQ

별도의 "시각 장애인 버전" 이 필요합니까?
아니요, 그렇지 않습니다. 설정이있는 모든 사람을위한 적응 형 액세스 가능한 버전.

대비 만 확인하면 충분합니까?
아니요, 그렇지 않습니다. 대조는 부분에 불과합니다. 키보드, 초점, 의미론, 양식 오류, 미디어 등이 필요합니다.

아리아는 모든 것을 해결할 것인가?
ARIA는 잘못된 의미를 수정하지 않습니다. 첫 번째 올바른 태그, ARIA 개선.

결과

가용성은 시스템 분야입니다: 시맨틱 → 키보드/초점 → 대비/색상 → 형태/실수 → 미디어/일정 → i18n/RTL → 테스트 계획 및 메트릭. DoD 및 팀 문화의 일부로 접근성을 확보하면 제품이 진정으로 다양하고 신뢰할 수 있으며 모든 사람에게 편리합니다.