링크 제목을 억제합니다

StackOverflow https://stackoverflow.com/questions/809795

  •  03-07-2019
  •  | 
  •  

문제

링크에서 팝업 제목을 억제 할 수있는 방법이 있지만 여전히 시각 장애가있는 페이지에 보관하십시오.

도움이 되었습니까?

해결책

이는 링크 제목을 해석하고 툴팁/팝업을 표시하는 브라우저의 함수입니다. 그들을 억제 할 방법이 없습니다. 나는 (클라이언트가 그들도 좋아하지 않았기 때문에) 시도했지만 주변에는 방법이 없습니다.

다른 팁

나는 이것이 해결되었다는 것을 알고 있지만이 해결 방법도 발견했다. 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");
}
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top