콘텐츠 숨기기 및 업데이트

보조 기술에서 콘텐츠 숨기기

Alice Boxhall
Alice Boxhall
X
Dave Gash
Dave Gash
Meggin Kearney
Meggin Kearney

ARIA-Hidden

지원 환경을 미세 조정하는 데 있어 중요한 또 다른 기술은 페이지에서 관련된 부분만 두뇌를 사용할 수 있습니다. 한 섹션이 올바르게 표시되도록 접근성 API에 노출되지 않습니다.

먼저 DOM에서 명시적으로 숨겨진 항목도 포함되지 않습니다. 표시됩니다. 따라서 CSS 스타일이 visibility: hidden 또는 display: none이거나 HTML5 hidden 속성을 사용하는 모든 항목도 숨겨진 영역입니다.

그러나 시각적으로 렌더링되지 않지만 명시적으로 숨겨지지 않은 요소는 여전히 접근성 트리에 포함되어 있습니다. 일반적인 기법 중 하나는 '스크린 리더 전용 텍스트' 절대로 배치된 요소가 화면 밖에 있는 경우입니다.

.sr-only {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

또한 앞서 살펴본 대로 다음을 참조하는 aria-label, aria-labelledby 또는 aria-describedby 속성 요소가 숨겨져 있습니다.

숨기기 기법에 대한 WebAIM 도움말 참조 텍스트 '스크린 리더 전용' 만들기에 대한 자세한 내용을 확인하세요. 있습니다.

마지막으로 ARIA는 지원 시스템에서 콘텐츠를 제외하는 aria-hidden 속성을 사용하여 시각적으로 숨겨지지 않도록 합니다. 이 속성을 요소에 적용하면 해당 요소와 이 속성을 모두 하위 요소를 삭제할 수 있습니다. 유일한 예외는 aria-labelledby 또는 aria-describedby 속성에서 참조됩니다.

<div class="deck">
    <div class="slide" aria-hidden="true">
    Sales Targets
    </div>
    <div class="slide">
    Quarterly Sales
    </div>
    <div class="slide" aria-hidden="true">
    Action Items
    </div>
</div>

예를 들어 다음과 같은 모달 UI를 만드는 경우 aria-hidden를 사용할 수 있습니다. 기본 페이지에 대한 액세스를 차단합니다. 이 경우 시력이 정상인 사용자는 '페이지 대부분이 현재 이용할 수 없음을 나타내는 반투명 오버레이 스크린 리더 사용자는 화면의 다른 부분을 탐색할 수도 있습니다 입니다. 이 경우 키보드 트랩을 생성할 뿐 아니라 이 동영상에서 참조하세요. 현재 지원 범위를 벗어나는 페이지 부분이나 aria-hidden도 있습니다.

이제 ARIA의 기본사항과 기본 HTML에서 ARIA가 작동하는 방식을 이해했습니다. 의미론적 해석을 사용하여 치과 부위에 매우 중요한 수술을 수행하는 방법을 단일 요소의 의미 체계를 변경하는 것에 대해 자세히 알아보겠습니다. 이를 사용하여 시간에 민감한 정보를 전달하는 방법을 알아봅니다.

ARIA

aria-live를 사용하면 개발자가 페이지 일부를 '라이브'로 표시할 수 있습니다. Kubernetes에서 페이지에 관계없이 업데이트가 사용자에게 즉시 전달되어야 함 우연히 페이지의 해당 부분을 둘러보는 것이 아니라, 날짜 요소에는 aria-live 속성이 있으며, 이 속성이 포함된 페이지 부분과 하위 요소를 라이브 영역이라고 합니다.

ARIA 라이브가 라이브 지역을 설정합니다.

예를 들어 라이브 영역은 사용자 액션입니다. 메시지가 시력이 정상인 사용자의 사용자의 보조 테크 사용자의 지시를 aria-live 속성을 설정하여 이 요소에 주의를 기울여야 합니다. 이 일반 div 비교

<div class="status">Your message has been sent.</div>

'실시간'으로 상응 대상입니다.

<div class="status" aria-live="polite">Your message has been sent.</div>

aria-live에는 polite, assertive, off의 세 가지 허용 값이 있습니다.

  • aria-live="polite"는 보조 기술에 사용자에게 다음 내용을 알리도록 합니다. 현재 수행 중인 작업이 완료되면 변경할 수 없습니다. 사용하기에 좋은 중요하고 긴급하지는 않은 것이고 aria-live 사용.
  • aria-live="assertive"는 보조 공학에 어떤 작업이든 중단하도록 지시합니다 이 변경사항을 즉시 사용자에게 알립니다. 이는 '2018년 1월 24일'과 같은 상태 메시지처럼 변경사항이 저장되지 않습니다. 페이지를 새로고침하세요.' 또는 입력 필드 업데이트와 같은 사용자 작업의 직접적인 결과로 스테퍼 위젯에서 사용할 수 있습니다.
  • aria-live="off"에서 보조 기술에 일시적으로 정지하도록 지시합니다 aria-live개 중단.

라이브 영역이 올바르게 작동하도록 하는 몇 가지 요령이 있습니다.

먼저 초기 페이지 로드 시 aria-live 리전을 설정해야 합니다. 반드시 지켜야 하는 규칙은 아니지만, aria-live 리전의 경우 이것이 문제일 수 있습니다.

둘째, 스크린 리더에 따라 다양한 유형의 있습니다. 예를 들어 일부 스크린 리더에서 알림을 트리거할 수 있습니다. 하위 요소의 hidden 스타일을 true에서 false로 전환하여

aria-live와 함께 작동하는 다른 속성은 사용자에게 전달됩니다.

aria-atomic는 전체 지역을 업데이트를 전달할 때 전체가 될 수 있습니다. 예를 들어, 일, 월, 연도에 aria-live=true, aria-atomic=true이 있고 사용자는 는 스테퍼 컨트롤을 사용하여 월의 값만 변경하고 전체 내용을 변경합니다. 다시 읽힐 수 있습니다 aria-atomic의 값은 true일 수 있습니다. 또는 false (기본값)

aria-relevant는 사용자에게 표시되어야 하는 변경사항 유형을 나타냅니다. 별도로 사용하거나 토큰 목록으로 사용할 수 있는 몇 가지 옵션이 있습니다.

  • additions로 설정하여 서비스 중인 영역에 추가되는 모든 요소를 크게 다르지 않습니다 예를 들어 기존 상태 로그에 스팬을 추가합니다. 메시지는 스팬이 사용자에게 공지됨을 의미합니다 (예: aria-atomic가 false였음).
  • text: 하위 노드에 추가되는 텍스트 콘텐츠가 관련이 있습니다. 예를 들어 맞춤 텍스트 필드의 textContent 속성을 수정합니다. 수정된 텍스트를 사용자에게 읽습니다.
  • 삭제: 텍스트 또는 하위 노드를 삭제하려면 사용자에게 전달되지 않습니다
  • all: 모든 변경사항이 관련성이 있음을 의미합니다. 하지만 aria-relevant는 additions text입니다. 즉, 지정하지 않으면 aria-relevant 요소가 추가되면 사용자가 업데이트됩니다. 이는 광고주가 원할 가능성이 가장 높습니다.

마지막으로 aria-busy을(를) 통해 보조 공학에 알림을 보낼 수 있음 로드 중일 때와 같이 요소에 대한 변경사항을 일시적으로 무시합니다. 한 번 준비가 완료되면 aria-busy를 false로 설정하여 실행할 수도 있습니다