문제
링크에서 팝업 제목을 억제 할 수있는 방법이 있지만 여전히 시각 장애가있는 페이지에 보관하십시오.
해결책
이는 링크 제목을 해석하고 툴팁/팝업을 표시하는 브라우저의 함수입니다. 그들을 억제 할 방법이 없습니다. 나는 (클라이언트가 그들도 좋아하지 않았기 때문에) 시도했지만 주변에는 방법이 없습니다.
다른 팁
나는 이것이 해결되었다는 것을 알고 있지만이 해결 방법도 발견했다. jQuery를 사용하여 기본 툴팁을 숨기십시오
클라이언트가 자체 툴팁 (CSS로 수행 된)을 표시하려는 프로젝트 에서이 문제를 겪었지만 브라우저 개시 툴팁도 두 번 보여주었습니다. 우리는 '제목'속성을 제거하고 대신 '데이터'를 사용하여 CSS의 텍스트를 채우면서 이것을 해결했습니다.
소스 코드에서만 볼 수 있기 때문에 시각 장애인을 위해 페이지에 보관한다는 의미가 확실하지 않습니까?
예를 들어:
<a href="link" title="something">Link title here</a>
페이지에 링크 '링크 제목'과 호버링 할 때 성가신 팝업을 표시합니다.
<a href="link" data="something">Link title here</a>
링크 '링크 제목'을 표시하지만 호버링에 성가신 팝업을 표시하지는 않지만 여전히 사용할 수 있습니다. data
당신이 거기에 놓을 것을 참조하기위한 태그 (우리의 경우, 우리는 CSS를 참조 할 툴팁의 텍스트를 넣습니다).
분명히 제목 태그를 완전히 제거하면 문제가 해결되었지만 문제가 해결되어야한다고 말했습니다.
이것은 jQuery에서 작동합니다.
var val;
$('[YOUR_SELECTOR]').hover(function() {
val = $(this).attr('title');
$(this).removeAttr('title');
},function() {
$(this).attr('title',val);
})
... 아마도 이상적이지는 않지만 항상 시도 할 수 있습니다. title
속성 <a href>
, ㅏ <span>
내 <a>
태그 :
/* screen.css */
a { }
a span.titleText {
display: none;
position: absolute;
bottom: 1.2em;
left: 0;
}
a:hover span.titleText,
a:active span.titleText,
a:focus span.titleText {
display: block;
}
/* audio.css */
a span {
display: inline; /* or whatever the relevant attribute would
be in an audio stylesheet. */
}
<head>
<link href="screen.css" type="text/css" rel="stylesheet" media="screen" />
<link href="audio.css" type="text/css" rel="stylesheet" media="screen-reader, audio" />
</head>
<a href="http://some.url.com">
<span class="titleText">This is the title</span>This is the link
</a>
그러나 나는 그것을 특히 실용적인 솔루션이라고 제안하지 않습니다. 그리고 나는 그것이 검증되지 않을 것이라고 확신합니다. 내가 JS를 알고 있다면 더 실행 가능한 것을 제안 할 것이지만 심지어 그것이 효과가 있다고 확신하지는 않습니다.
내 브라우저의 링크는 title
기인하다.
원한다면 사용할 수 있습니다 Greasemonkey Evey 페이지 에서이 JavaScript를 실행하여 제거합니다.
var anchorTags;
anchorTags = document.getElementsByTagName("a");
for(var i = 0; i < anchorTags.length; i++) {
anchorTags[i].removeAttribute("title");
}