빈 앵커 태그를 사용해도 되니?

나는 내가 클릭 수 링크에 이미지를 설정하려면 다음과 같은 처리를 할 수 있다는 사실을 알고 :빈 앵커 태그를 사용해도 되니?

<a href="http://twitter.com/username"><img src="icons/twitter.png" /></a>

그러나 나는 호버 상태를 가질 수 있도록 CSS 배경 이미지를 사용하는 것을 선호합니다 : 내가 아무것도 포함하지 앵커 링크가 전적으로 유효 확실하지 않다 제외

<a class="twitter" href="http://twitter.com/username"></a> 

# css 
.twitter{display:block; width:16px; height:16px; background:url("twitter.png")}

이 잘 작동합니다. Chrome은 FF와 마찬가지로 잘 렌더링하지만 다른 사람이 같은지 확실하지 않습니다.

나는 링크 안에 약간의 텍스트를 넣고 text-indent: -9999px으로 숨길 수 있다는 것을 알았지 만, 그 접근 방식을 결코 좋아하지 않았다. various reasons. 내 코드가 브라우저 간 호환 가능합니까?

은 유효하지만 당신은 거기에 뭔가를 넣고 그것을 멀리 숨길

font-size: 0;

같은 것을 사용 않은 경우가 가장 좋습니다. 이 방법으로, CSS (화면 판독기)가없는 사람은 링크가 무엇인지 대략 알 수 있습니다.

Here's a great article on the subject

출처

2012-05-08 18:47:31

또는'font-size : 0;', 아마도,'em' 단위로 된 상대적인 크기 설정은 그것으로 인해 심하게 영향을받을 것입니다. –

@DavidThomas : 왜 내가 "뭔가 같은"몇 가지 해결책이 있습니다 :) –

또는 다양한 이미지 대체 기술 중 하나 : http://css-tricks.com/css-image-replacement/ –

완전히 유효하지만 원하는 경우 내부에 빈 공간을 넣을 수 있습니다. &nbsp;

2012-05-08 18:45:53

덕분에, 그 생각을하지 못했습니다 :) – stephenmurdoch

는 기본적인 접근성 원칙을 나누기 때문에 그것은, 전혀 OK입니다. 콘텐츠 이미지에 img 태그의 alt 속성을 사용하는 것과 같은 방법으로 배경 이미지의 대체 텍스트를 지정할 방법이 없습니다. WCAG 2.0 Guideline 1.1을 참조하십시오.

마우스 오버시 이미지를 변경하려면 CSS 및 JavaScript 기술이 필요합니다.

2012-05-08 19:35:39

접근성에 대한 좋은 지적, 링크 감사합니다 – stephenmurdoch

사용 & nbsp; 텍스트로, 그리고 당신은 좋다.

2012-05-08 20:02:22

위의 내 대답에 대한 의견을 참조하십시오 왜 그렇게 나쁜 연습. –

Markup.tips에서 최근에 우리는 iOS 8에서 접근성 테스트를 일부 수행했으며 VoiceOver가 빈 링크로 이동할 수 없음을 발견했습니다. 적어도 비파괴적인 공간이 있어야합니다. 이것이 iOS 버그로 간주되어야하는지 여부는 확실하지 않습니다.

2015-04-05 23:01:24

답변