ARIA HTML 향상의 파괴적인 측면

ARIA == 액세스 가능한 리치 인터넷 애플리케이션

이 코드 시스템은 보조 기술 사용자의 사용자 경험을 향상시키고 HTML이 부족한 곳에 의미를 추가하기 위해 만들어졌습니다. 그러나 제대로 구현되지 않으면 사용자 경험을 완전히 완전히 파괴할 수도 있습니다. 두 가지 예를 들어 보겠습니다.

아리아 라벨

aria-label 속성은 (아마도) 가장 많이 사용되는 아리아 기법입니다. 이해하기 쉽고 추가 마크업 변경이 필요하지 않습니다. 그러나 aria-label 속성의 값은 액세스 가능한 이름을 제공하는 요소 내의 기본 텍스트를 완전히 파괴합니다.

<a href="http://twitter.com/offsetchris" 
   target="_blank" 
   aria-label="Opens in a new window">
  Follow me on Twitter
</a>

이 예에서 링크의 이름은 무엇입니까? 청중에 따라 다릅니다.

시각적 인터페이스를 참조하는 사용자:

"Follow me on Twitter"

보조 기술로 액세스하는 사용자:

"Opens in a new window"

사용자 기대치가 다른 두 가지 완전히 다른 경험. 개발자는 활성화될 때 새 탭이나 창을 여는 링크의 동작을 설명하기 위해 "새 창에서 열기"를 추가하여 보조 기술 사용자에게 더 나은 사용자 경험을 제공하려는 최선의 의도를 가지고 있었습니다. 지금은 링크의 기본 이름이 aria-label로 덮어써졌고 일부 사용자는 링크가 어디로 연결되는지에 대한 참조가 없습니다.

이 동일한 파괴적 특성이 동일한 결과로 aria-labelledby에도 적용됩니다.

저작 관행 복사 붙여넣기

ARIA는 우리에게 공짜로 아무것도 주지 않습니다. 권장 위젯 또는 패턴을 완전히 구현하는 것은 개발자의 책임입니다. 개발자가 참조되는 일부 HTML에 붙여넣지만 키보드 액세스 스크립팅을 추가하지 못하거나 복잡한 위젯에서 필수 하위 역할을 무시하는 경우 패턴이 실패하고 사용자가 위젯에 완전히 액세스하지 못하는 경우가 많습니다.

Tab Panel example 문서에서 ARIA Authoring Practices Guide을 가져옵니다. 개발자가 아래로 스크롤하여 예제에 대한 HTML을 찾아 시스템에 붙여넣고 요구 사항을 더 이상 읽지 않으면 어떻게 됩니까? 다음은 클릭 가능한 탭 요소 코드를 보여주는 이 패턴의 샘플입니다.

<div role="tablist"
       aria-labelledby="tablist-1"
       class="manual">
    <button id="tab-1"
            type="button"
            role="tab"
            aria-selected="true"
            aria-controls="tabpanel-1">
      <span class="focus">
        Maria Ahlefeldt
      </span>
    </button>
    <button id="tab-2"
            type="button"
            role="tab"
            aria-selected="false"
            aria-controls="tabpanel-2"
            tabindex="-1">
      <span class="focus">
        Carl Andersen
      </span>
    </button>
    <button id="tab-3"
            type="button"
            role="tab"
            aria-selected="false"
            aria-controls="tabpanel-3"
            tabindex="-1">
      <span class="focus">
        Ida da Fonseca
      </span>
    </button>
    <button id="tab-4"
            type="button"
            role="tab"
            aria-selected="false"
            aria-controls="tabpanel-4"
            tabindex="-1">
      <span class="focus">
        Peter Lange-Müller
      </span>
    </button>
  </div>

탭은 탭의 보다 의미론적인 역할을 가진 버튼으로 코딩됩니다. 하지만 마지막 3개의 탭에 있는 tabindex="-1"에 주목하십시오. Authoring Practices 문서에 설명된 대로 이러한 탭에 대한 권장 키보드 액세스가 구현되지 않은 경우 사용자는 키보드의 TAB 키를 사용하여 첫 번째 탭에 액세스할 수 있지만 키보드만 사용하여 두 번째 및 세 번째 탭에 액세스할 수는 없습니다. . ARIA 패턴을 완료하지 않으면 특정 사용자 그룹의 콘텐츠가 보류되어 사이트에 완전히 액세스하려는 모든 사용자의 사용자 경험(및 신뢰도)이 파괴됩니다.

주의해서 사용하십시오

아리아는 훌륭합니다! 그러나 부적절하게 수행하면 사이트를 상당히 악화시키거나 심지어 사용할 수 없게 만들 수 있으므로 올바르게 수행하고 주의해서 구현해야 합니다.


머리글 이미지 설명: 기본 HTML 이름을 잘못된 방식으로 재정의하는 aria-레이블을 보여주는 개발자 패널 위로 엄지손가락을 아래로 내리는 이모티콘이 있는 ARIA HTML 개선의 파괴적인 측면.