> 웹 프론트엔드 > JS 튜토리얼 > 접근성 (a) 규칙 - 5

접근성 (a) 규칙 - 5

Patricia Arquette
풀어 주다: 2024-12-14 10:22:12
원래의
801명이 탐색했습니다.

Accessibility (a) Rules - 5

비디오 및 오디오

  • 네 가지 주요 대체 미디어 유형인 캡션, 대본, 오디오 설명, 수화 통역이 오디오 및 미디어 파일에 포함되어야 합니다. 이러한 대안은 다음을 기반으로 해야 합니다.

    • 지원하는 미디어 유형 - 오디오 전용, 비디오 전용, 오디오 포함 비디오(멀티미디어) 형식
    • 미디어가 라이브인지 사전 녹화인지
    • WCAG 준수 타겟팅 버전 및 수준
    • 추가 미디어 관련 사용자 요구 사항

양식

전지

  • ARIA로 맞춤 구성요소를 만드는 대신 가능하면 표준 HTML 요소와 패턴을 사용하세요.

권장되지 않음 — ARIA를 사용한 사용자 정의 HTML

<div role="form">



<h4>
  
  
  권장 — 표준 HTML
</h4>



<pre class="brush:php;toolbar:false"><형식>



로그인 후 복사
  • 필드에 HTML 자동 완성 속성을 추가해야 합니다.

  • 구성 요소를 사용하기 전에 사용자에게 동작에 대해 경고하지 않는 한 양식 필드는 포커스나 사용자 입력을 받을 때 상황에 맞는 변경을 생성해서는 안 됩니다(예: 필드가 포커스를 받거나 사용자가 필드에 콘텐츠를 추가합니다.)

라벨

  • 모든 양식 필드에 명확하고 정확하며 프로그래밍 방식으로 연결된 레이블이 있는지 확인하세요.

설명

  • 레이블이나 양식 지침이 충분히 설명적이면 접근성을 위해 필드 설명이 필요하지 않습니다.

  • 사용자 오류를 방지하기 위해 추가 정보가 필요한 경우 필드 설명을 추가하세요. 예를 들어 비밀번호 길이나 특정 날짜 형식(예: MM-DD-YYYY)과 같은 입력 요구 사항을 포함합니다.

  • 필드 설명을 양식 요소에 연결하려면 aria-describedby 속성을 사용하세요. 이렇게 하면 화면 판독기가 라벨과 설명을 모두 읽을 수 있으므로 사용자의 명확성이 향상됩니다.

오류

  • 양식 오류가 발생하면 즉시 오류를 알려주세요. 오류가 발생한 필드를 명확하게 식별하고 사용자에게 오류를 설명하는 간결하고 설명적인 텍스트를 제공하세요.

  • 오류 메시지를 표시하는 방법에는 다음과 같은 여러 가지가 있습니다.

    • 오류가 발생한 위치 근처의 인라인 모달
    • 페이지 상단에 하나의 큰 메시지로 그룹화된 오류 모음
  • 오류 알림 시 키보드 포커스와 ARIA 라이브 지역 옵션에 꼭 주의하세요.

  • 가능한 경우 사용자에게 오류 수정 방법에 대한 자세한 제안을 제공하세요. 사용자에게 오류를 알리는 데 사용할 수 있는 두 가지 속성이 있습니다.

    • HTML 필수 속성을 사용할 수 있습니다. 브라우저는 제출된 유효성 검사 매개변수를 기반으로 일반 오류 메시지를 제공합니다.
    • 또는 aria-required 속성을 사용하여 AT에게 사용자 정의된 오류 메시지를 공유할 수 있습니다. 모든 사용자가 메시지를 볼 수 있도록 추가 코드를 추가하지 않는 한 AT만 메시지를 받게 됩니다.

추가 성공 기준

대상 크기(최소)

지속적인 도움

접근가능한 인증

중복입력

위 내용은 접근성 (a) 규칙 - 5의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿