0

say, 

<a href="#somelink" id="someID" onclick="searchValue();" class="someClass" title="My Search">
</a>


<style>
someClass{
  background: url("someimage.png") no-repeat scroll 0 0 transparent;
  border: 0 none;
  cursor: pointer;
  float: right;
  height: 27px;
  padding-left: 5px;
  width: 27px;
}
</style>

when the CSS is disabled will the page still show the title ? if not what is the work around for this issue.

FelipeAls
  • 21,711
  • 8
  • 54
  • 74
user2067736
  • 1,615
  • 2
  • 13
  • 11

1 Answers1

3

No the title will not show, at all when CSS is disabled. Some assistive technology does not read, or give the user access in some cases. In short, do not use title.

The proper way is:

<a href=".."><img src="image" alt="Search"></a>

This will still work even with CSS is off. If the image fails to load for whatever reason, it will say search still - like what you were aiming for.

Per your comment, if you are wanting to provide more context to a part of the page, instead of:

 <div title="Some instructions  here">.......</div>

You should do:

<div aria-describedby="instID">
<p class="hidden" id="instID>Some instructions</p>
  .... 
</div>

where .hidden is:

.hidden {
 position: absolute;
 top: 0;
 left: -999px;
}
Community
  • 1
  • 1
Ryan B
  • 3,364
  • 21
  • 35
  • 1
    +1 and with or without CSS, the link would be empty. Bad for accessibility and SEO. Relevant WCAG 2.0 Technique is [Providing link text that describes the purpose of a link for anchor elements - H30](http://www.w3.org/TR/WCAG-TECHS/H30.html) – FelipeAls Feb 16 '13 at 16:26
  • Thanks Ryan, one more doubt I have , what if the element is a DIV and is not a link ... how to get it identified when the CSS is disabled in terms of accessibility ... 'title' attribute will again fail to display with CSS disabled. – user2067736 Feb 19 '13 at 07:21
  • I am not sure what you mean by "... how to get it identified when the CSS is disabled in terms of accessibility", can you edit your original question? The `title` will never show. There is a firefox add-on, I believe, that makes it show, but I doubt it is accessible. – Ryan B Feb 19 '13 at 13:06
  • Say for a div , if it has a title to it , now if the css is disabled, when we test for accessibility as per 508 guidelines , how will the screen reader identify the div element for differently abled users. – user2067736 Feb 20 '13 at 09:18