슬라이드 쇼의 참을 수없는 접근성

접근 가능한 슬라이드 쇼 생성 : 포괄적 인 안내서 슬라이드 쇼는 조직 웹 사이트에서 널리 퍼져 있지만 종종 접근성 요구 사항이 간과되어 접근 할 수 없습니다. Bootstrap 및 Foundation과 같은 인기있는 웹 개발 프레임 워크는 본질적으로 액세스 가능한 슬라이드 쇼를 지원하지 않으므로 상당한 수정이 필요합니다. 이 기사는 포괄적 인 슬라이드 쇼를 만들기위한 주요 접근성 원칙을 간략하게 설명합니다. 후속 기사는 실용적인 코드 예제를 제공합니다.

일반 슬라이드 쇼 유형 (그림 1 및 2)에는 종종 일시 정지 기능 및 키보드 접근성이 부족합니다. 슬라이드를 탐색 할 때 많은 디자인이 키보드 초점을 유지하지 못합니다.

5 가지 핵심 원칙은 접근 가능한 슬라이드 쇼를 보장합니다 :

이동에 대한 사용자 제어 : wcag 2.2.2는 5 초에 걸쳐 지속되는 콘텐츠를 자동으로 이동, 정지 또는 숨기는 메커니즘을 의무화합니다. 간단한 일시 중지/정지 링크가 효과적입니다. 가능한 경우 애니메이션 전환을 방해하지 마십시오.

가시적이고 접근 가능한 컨트롤 :

컨트롤 (정지, 시작, 내비게이션)은 다음과 같아야합니다.

명확하게 눈에 띄는 :

충분히 크고 충분한 색상 대비가 있습니다 키보드, 마우스 및 터치를 통해 액세스 할 수있는 버튼이나 링크가 이상적입니다.

.
1. 에만 의존하지 마십시오 Clear Focus/호버 표시 :

   초점에 대한 뚜렷한 시각적 변경, 대비 요구 사항을 충족합니다. 모양 변화는 색상 변화만으로는 바람직합니다 잘 설계된 컨트롤의 예는 AccessibilityOz (그림 3 및 4) 및 Griffith University (그림 6)와 같은 사이트에서 찾을 수 있으며 데스크탑 및 모바일 모두에 대한 명확한 일시 정지 버튼 및 탐색 제어를 보여줍니다. Monash University는 자동 이동없이 모바일 친화적 인 슬라이드 쇼의 예를 제공합니다 (그림 5).

2. 3. 논리적 초점 순서 : 탭 순서는 시각적 레이아웃과 HTML 구조를 반영해야합니다. 제어 (특히 일시 중지)는 내용보다 우선해야합니다. 현재 포커스 요소 전에 내용 변경이 발생하지 않아야합니다

      유효한 코드 및 스타일 : 슬라이드 쇼는 스타일 시트와 함께 작동해야하지만 프레젠테이션이 다를 수 있습니다. 스타일 시트가 비활성화 될 때 예상치 못한 콘텐츠 교대 또는 겹침을 피하십시오. 텍스트는 브라우저 텍스트 크기 조정으로 확장해야합니다. 모바일 버전은 핀치-Zoom을 지원해야합니다

   4. 의미있는 대안 :

      슬라이드 쇼에 액세스 할 수없는 사용자에게 텍스트 기반 대안을 제공합니다. 여기에는 슬라이드 컨텐츠와 링크를 반복하는 "스크린 리더 전용"섹션이 포함될 수 있으며, 슬라이드 쇼가 나타나는 곳에 이상적으로 배치됩니다. 이 대안이 제공된 정보 측면에서 슬라이드 쇼와 동일하도록하십시오. 이미지에는 적절한 속성이 필요합니다

      결론 :
   진정으로 접근 가능한 슬라이드 쇼를 만드는 것은 이러한 원칙을 신중하게 고려해야합니다. 다음 기사는 이러한 목표를 달성하기위한 실제 코드 구현을 제공 할 것입니다.
   5. 액세스 가능한 슬라이드 쇼에 대한 자주 묻는 질문 (FAQ) (이 섹션은 귀중한 보충 정보를 제공하기 때문에 원래 입력에서 크게 변경되지 않았습니다.) 접근 가능한 슬라이드 쇼는 무엇입니까? 슬라이드 쇼에 액세스 할 수있는 방법은 무엇입니까? alt 텍스트는 무엇이며 왜 중요한가? alt 슬라이드 쇼에 캡션을 추가하려면? 키보드 내비게이션이 중요한 이유는 무엇입니까? 슬라이드 쇼의 언어를 명확하고 간단하게 만드는 방법은 무엇입니까? 성적표 란 무엇이며 왜 중요한가? 슬라이드 쇼에 대한 전 사양을 어떻게 만드는가? 자동화 된 도구를 사용하여 슬라이드 쇼에 액세스 할 수 있도록 할 수 있습니까?
   내 슬라이드 쇼를 액세스 할 수있게하는 이점은 무엇입니까?

위 내용은 슬라이드 쇼의 참을 수없는 접근성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!