나는 다양한 마우스 이벤트를 추적하기 위해 숨겨진 <span> 태그와 Javascript를 사용하여 특정 사항에 대한 툴팁을 제공하는 웹 사이트를 운영합니다. 그것은 훌륭하게 작동합니다. 이 사이트는 비전 문제가있는 사람들을 대상으로하므로 Javascript 나 cCSS가 없으면 가능한 한 성능이 저하되도록 노력하지만 일반적으로이 점에 대해서는 성공적이라고합니다.CSS가 활성화 된 경우에만 존재하는 텍스트
내 질문에 CSS가 사용되는 경우에만 <span>이 존재할 수 있습니까? 문서로드시 Javascript에서 툴팁을 작성하는 방법에 대해 생각해 보았습니다. 그러나 더 나은 해결책이 있는지 궁금해하고있었습니다.
아마 툴팁을 제공하는 방식을 다시 생각해야합니다. 의미 적으로 적절한 요소의 title 속성에 내용이 포함될 수 있습니까?
편집 : 추가 정보를 제공하면 누군가가 더 많은 해결책을 제안 할 수 있습니다. 툴팁이 어떤 종류의 요소로 나타나고 있습니까? 이미지? 약어 태그가 적절합니까?
난 그냥 함께했다빠른 솔루션 : <span> 제목을 포함 core attributes에 액세스 할 수 있습니다, 그래서 당신은 제목에 도구 설명 텍스트를 포함하고, 제목이 모든 스팬에 대한 툴팁을 표시하기 위해 jQuery를 같은 자바 스크립트 라이브러리를 사용할 수 있습니다 .
빠른 해킹은 HTML의 배경 (예를 들어, 흰색에 흰색)로 텍스트를 같은 색상, 다음 (화이트 블랙) 다시 볼 수 뭔가 색상을 변경하기 위해 CSS를 사용하는 것입니다. 물론 이것은 텍스트를 볼 수있는 사람들에게만 관련이 있습니다. 화면 판독기 등은 텍스트를 숨겨진 것으로 보지 않습니다.
CSS는 읽거나되지 않는 페이지 요소를 정의하기 위해 스크린 리더에 의해 사용된다. 화면 판독기는 거의 항상 일 것입니다. 표시가있는 요소는 표시되지 않습니다. none이 적용되어 CSS를 사용하지 않으면 스크린 리더의 존재를 나타내는 지표가 아닙니다.
크리스 '제목 (또는 alt) 속성을 기반으로 툴팁을 생성하는 데 javascript를 사용하는 아이디어가 있습니다.
당신은 툴팁 만있는 유효한 스타일을 JS가 활성화되어, 그래서 만약 설정하고 CSS는 다르게 추가 정보를 처리 할 수 비활성화 될 때 (예를 들어, 각주)를 표시하도록 JS를 사용할 수 있습니다.
http://juicystudio.com/article/screen-readers-display-none.php http://www.456bereastreet.com/archive/200711/screen_readers_sometimes_ignore_displaynone/
나쁜 생각, 그 조사합니다. –