나는 font-awesome을 사용 하고 다음과 같은 글꼴을 표시합니다.
<i class="icon-lock"></i>
이것은 멋진 작은 자물쇠 기호를 표시합니다. 사용자가 그것이 정확히 무엇을 의미하는지 알기 위해 title 및 alt와 같은 속성을 추가하려고 시도했지만 아무 소용이 없었습니다.
<i>이미지의 경우 alt와 링크의 제목과 동일한 작업을 실행하는 태그에 사용할 수있는 속성이 있습니까?
답변:
모든 요소와 같이 요소에 title속성을 사용할 수 있습니다.i
<i class="icon-lock" title="This symbolizes your being locked inside"></i>
도움이되는지 여부는 더 어려운 문제입니다. 브라우저는 일반적으로 title마우스 오버시 속성 값을 "툴팁"으로 표시하지만 사용자가 아이콘 위에 마우스를 올려 놓는 이유는 무엇입니까? 그리고 그러한 툴팁은 유용성이 떨어집니다. 소위 CSS 툴팁이 종종 더 잘 작동합니다.
스크린 리더는 사용자에게 title속성에 대한 선택적 액세스 권한을 부여 할 수 있지만 빈 콘텐츠가있는 요소로 무엇을하는지 잘 모르겠습니다.
title요소 자체를 선택할 수있는 한 내용이 없어도 일반적으로 읽음
<i>태그는 일반적으로 선택-수 없습니다, 당신이 그들에 대해 tabIndex를 추가하지 않는합니다.
title속성이 효과가 있을지 , 아닐 수도 있습니다. 누가 알겠습니까? " 120 명의 사람들이 찬성 할 수있을만큼 충분히 좋은 것으로 간주되었습니다. 스크린 리더 지원이 대부분의 웹 개발자들로부터 얻는 영구적 인 노력을 보여줍니다. 직업으로서 우리는 이러한 문제를 이것보다 더 엄격하게 해결하는 방법을 찾아야합니다.
title시각적으로 숨겨진 텍스트 (예 : .sr-onlyBootstrap의 클래스) 외에 추가하는 것이 좋습니다 . 여기에 좋은 예를 참조하십시오 fontawesome.com/how-to-use/on-the-web/other-topics/...을
WAI-ARIA 의 발전으로 글꼴 아이콘을 사용할 때 접근성을 향상시키기 위해 다음 조합을 사용해야 할 것입니다.
작성자 는이 콘텐츠를 숨기는 행위가 중복되거나 관련없는 콘텐츠를 제거하여 보조 기술 사용자의 경험을 개선하기위한 목적인 경우에만 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
<span>대신 그 라인을 따라 또는 무언가를 사용해야 합니다. 원하는 title=""경우 마우스 오버시 속성을 사용하여 텍스트를 제공 할 수 있습니다 . 스크린 리더에 대한 접근성 또는 SEO 값을 제공하는 한 다음 CSS를 추가 할 수 있습니다.
.icon-lock{
text-indent:-99999px;
}
그런 다음 다음과 같이 마크 업을 작성하십시오.
<span class="icon-lock">What I want the screen reader to say</span>
<i>HTML 4.01에서 더 이상 사용되지 않습니다.
<u>과 <s>했다, 난 항상 자신이 생각 발견 <b>하고 <i>그들이 가지고 특히 이후,뿐만 아니라이었다 <em>하고 <strong>,하지만 당신은 전적으로 옳습니다.
<i>태그는 텍스트를 표시하기위한 것입니다. 이 태그의 의미 론적 의미를 이탤릭체를 사용하여 아무 관련이없는 것으로 변경하고 있습니다 (이탤릭체 태그도 나쁜 생각입니다). SPAN대신 a 를 사용해야합니다 .
기울임 꼴 요소는 alt속성을 지원하지 않고 요소는 지원 합니다 IMG. ALT속성 을 원하면 이미지를 사용하십시오.
<i>주므로 그렇게하면 잘못 될 일이 무엇인지 말해야 할 것입니다. <i>원래 의도하지 않은 방식으로 무언가 (이 경우 )를 사용하면 위험이 따르지만,이 경우에는 수억 명의 사용자가있는 수천 개의 평판이 좋은 사이트가 이미 font-awesome을 사용하고 있다는 사실로 인해 위험이 완화되었습니다.
이미지처럼 작동하는 글꼴의 역할은 role = "img"로 예약되어야한다고 생각합니다. 그런 다음 aria-label = "alt-text"와 함께 사용할 수 있습니다. ARIA Accessible Name 알고리즘 때문에 작동합니다. 참조 : Img 역할을 사용하는 Aria 기술 .
.sr-only별도의<span>.