HTML 이미지 버튼을 텍스트 링크로 바꾸는 방법은 무엇입니까?

Question

내 웹 페이지의 호환성을 높이고 싶습니다. 그래서 사용자가 사이트를 탐색 할 때 모든 스타일을 끄면 텍스트로 모든 것을 찾을 수 있기를 바랍니다. 문제는 내 웹 페이지의 일부처럼 이미지 버튼을 사용한다는 것입니다 다음이 내가, 내가 대신의 버튼 이미지를 얻을 (NO 스타일 모드) 등의 버튼이있는 페이지를 방문 할 때부터 문제가

<a href="next.html"><img src="images/next_button.png"></a> 

텍스트 링크. 이러한 경우 이미지 버튼을 텍스트 링크로 대체하려면 어떻게해야합니까? 감사!

Answer 1

이 솔루션은 HTML 만 텍스트를 사용하여 CSS의 이미지를 양식에 일치하는 것입니다

HTML :

<a href="next.html" class="next-button"><span>Next</span></a> 

CSS :

.next-button 
{ 
    display: inline-block; 
    width: 100px; /* image width */ 
    height: 20px; /* image height */ 
    background: url("../images/next_button.png") 
} 

.next-button span 
{ 
    display: none; 
} 

편집 : 추가 범위 태그를 사용하여 배경을 표시 할 때 텍스트 숨기기

Answer 2

alt 속성을 사용 하시겠습니까?

<img src="images/next_button.png" alt="next" /> 

Answer 3

사실, HTML 사양 은 그렇게처럼 IMG 태그에 ALT 속성이이 필요합니다

<a href="next.html"><img alt="Next" src="images/next_button.png" /></a> 

같은 이미지가 표시되지 않는 텍스트 모드 브라우저, 스크린 리더, 및 다른 사람과 같은

브라우저, 이미지의 ALT 텍스트가 자동으로 대체됩니다.

Answer 4

마크 업과 관련해서는 이 누락 된 점을 제외하고는 접근성면에서 문제가 없습니다.alt 속성 HTML 유효성 검사기에서 이것을 실행하면이 사실을 알려줍니다.

그것은 또한 다음 페이지로 관계형 링크한다는 것을 표시하려면 a 태그에 rel="next" 속성을 추가 가치가있을 것입니다 : 언급 한 바와 같이

<a href="next.html" rel="next"><img src="images/next_button.png" alt="next page"></a> 

Answer 5

는, 적절한 alt 속성은 쉽게 수정 될가 .

가능한 경우 언제나 CSS를 사용하여 (실제 텍스트의 스타일을 지정하는) 아이디어가 마음에 들었습니다. jQuery를 사용한다면 jQuery UI의 새로운 버튼 위젯을 살펴 보자.

페이지에서 실제 텍스트를 유지 한 다음 텍스트로 이미지를 덮거나 CSS를 통해 텍스트를 밀어 넣는 이미지 대체 기술을 사용할 수도 있습니다. 두 경우 모두 실제 텍스트는 접근성/SEO 목적을 위해 존재할 것이며 이미지는 단순히보기 좋게 보이게하는 배경 이미지 일뿐입니다.