[html] i 태그의 Alt 또는 제목 속성

WAI-ARIA 의 발전으로 글꼴 아이콘을 사용할 때 접근성을 향상시키기 위해 다음 조합을 사용해야 할 것입니다.

• 요소의 암시 적 기본 역할 의미를 제거하기 위한 역할 표시 입니다. 이것은 아이콘을 제공하기 위해 네이티브 시맨틱이있는 요소를 (ab) 사용하는 경우 특히 중요합니다. i 요소 를 사용하는 예제의 경우 (사양에 따라 “대체 음성의 텍스트 범위를 나타냄”) 또는 기분 […] “ ).
• 마우스를 가져 갔을 때 도구 설명을 표시하는 브라우저에 문제가없는 경우 요소 또는 기본 HTML 제목 속성에 레이블 을 지정하는 문자열 값을 제공 하는 aria-label .
• 아리아 – 숨겨진 숨기려면 속성 생성 콘텐츠 보조 기술에서 (당신이 아이콘 폰트 패밀리를 사용으로는, 생성 된 캐릭터가 :의 전 : 후). 사양에 따르면 :

작성자 는이 콘텐츠를 숨기는 행위가 중복되거나 관련없는 콘텐츠를 제거하여 보조 기술 사용자의 경험을 개선하기위한 목적인 경우에만 aria-hidden 을 사용 하여 보조 기술에서 시각적으로 렌더링 된 콘텐츠를 숨길 수 있습니다. aria-hidden을 사용하여 화면 판독기에서 보이는 콘텐츠를 숨기는 작성자는 동일하거나 동등한 의미와 기능이 보조 기술에 노출되도록해야합니다.

정확한 사용 사례를 모르기 때문에 전화 번호를 제공하는 간단한 사례를 자유롭게 사용할 수 있습니다. 우선 순위를 감소에서 내가 사용합니다 :

<span aria-label="Our phone number">
  <span class="icon-phone" aria-hidden="true"></span>
  +33 7 1234576
</span>

(or any variation implying:
  - an `i` element with a `role` presentation attribute
    instead of the inner `span` element
  - a `title` attribute instead of an `aria-label` attribute)

<span class="icon-phone"
  aria-label="Our phone number">+33 7 1234576</span>

(or any variation using `title` instead of `aria-label`)

<i class="icon-phone" role="presentation"
  aria-label="Our phone number">+33 7 1234576</i>

(or any variation using `title` instead of `aria-label`)

주의하시기 바랍니다 아리아 – 라벨 및 제목 속성은 설명해야 내용 요소의를. 다음 형제 요소가 아닙니다. 그래서 나는 다음과 같은 솔루션 같은 느낌입니다 하지 사양 (전화 번호는 내부에 실제로있는 것처럼 대부분의 접근성 도구는 실제로 같은 관찰 행동을했을 경우에도에 따라 span요소) :

<span class="icon-phone"
  title="Our phone number"></span>+33 7 1234576