[DG: User Experience] Swapping text links for icons

[Christian Vuerings]

When you hide something with display:none, most screen readers will  
not pick it up.

But since you provided a title attribute on the anchor tag, I think a  
screen reader will read it.
I am definitely not sure about the above statement and it would be  
useful if someone else could confirm this.

Christian

On 8 Sep 2009, at 18:07, Sean Keesler wrote:

> Well, I guess that my point was that hiding the anchor tag isn't what
> we really want, we want to hide the stuff inside it (the text).
>
> So, if Sakai built links like:
>
> <li  id="editSite" role="menuitem">
>    <a href="#" title="Edit" onclick=" location="somewhere.url">
>          <span>Edit</span>
>    </a>
> </li>
>
> Then the thing to "hide" would be the internal span...and the <a> tag
> could have the background icons and NOT be hidden.
> Any negatives to "hiding" via display: none instead of your method?
>
> Sean Keesler
> 130 Academy Street
> Manlius, New York 13104 USA
> 315-663-7756
> sean.keesler at threecanoes.com
>
>
>
> On Tue, Sep 8, 2009 at 1:05 PM, Sean Keesler<sean at keesler.org> wrote:
>> Well, I guess that my point was that hiding the anchor tag isn't what
>> we really want, we want to hide the stuff inside it (the text).
>>
>> So, if Sakai built links like:
>>
>> <li  id="editSite" role="menuitem">
>>     <a href="#" title="Edit" onclick=" location="somewhere.url">
>>           <span>Edit</span>
>>     </a>
>> </li>
>>
>> Then the thing to "hide" would be the internal span...and the <a> tag
>> could have the background icons and NOT be hidden.
>> Any negatives to "hiding" via display: none instead of your method?
>>
>> Sean
>>
>> On Tue, Sep 8, 2009 at 12:03 PM, Christian
>> Vuerings<vueringschristian at gmail.com> wrote:
>>> Hi Sean,
>>>
>>>
>>> I do think it is a good idea but there are better alternatives  
>>> than your
>>> solution.
>>> In your solution you completely hide the <a> tag with display:none.
>>> More recent screen readers won't read anything.
>>>
>>> The technique you describe is also referred to a "CSS image  
>>> replacement".
>>> There are various methods for that technique, but each one has its  
>>> up and
>>> downside(s).
>>>
>>> The method I prefer is called the "Phark method" (with the David  
>>> Shea touch
>>> - add a title attribute):
>>>
>>> <h3 id="header" title="Revised Image Replacement">
>>>        Revised Image Replacement
>>> </h3>
>>>
>>> /* css */
>>> #header {
>>>        text-indent: -5000px;
>>>        background: url(sample-opaque.gif);
>>>        height: 25px;
>>> }
>>>
>>> Here you don't use display:none, you don't need to add an extra  
>>> span and you
>>> get a tooltip if you go over the image.
>>> The downside of this method is that when you disable the images,  
>>> but leave
>>> the CSS on, you won't show anything on the page (and it doesn't  
>>> work in
>>> IE5).
>>>
>>> For more information on this technique, please see:
>>>  - http://www.mezzoblue.com/tests/revised-image-replacement/
>>>  - http://css-tricks.com/css-image-replacement/
>>>
>>>
>>> Regards,
>>> Christian
>>>
>>> On 8 Sep 2009, at 15:39, Sean Keesler wrote:
>>>
>>>> This weekend I worked on a non-sakai project where I was exposed  
>>>> to a
>>>> css trick that "hid" a text link and displayed a background image  
>>>> (an
>>>> icon) in a containing wrapper. The supposed benefit is that screen
>>>> readers and other agents would "see" the text link, while the  
>>>> sighted
>>>> user would be presented with an attractive, intuitive icon in its
>>>> place.
>>>>
>>>> Is this a good idea? Pros and cons are welcome.
>>>>
>>>> Looking some Sakai markup:
>>>>
>>>> <li  role="menuitem">
>>>>  <span class="">
>>>>     <a href="#" title="Edit" onclick="location =
>>>>
>>>> 'http://server.edu/portal/tool/~admin-365? 
>>>> panel 
>>>> = 
>>>> Main 
>>>> &amp;sakai_action=doGet_site'+buildQueryString('sitesForm');return
>>>> false;">
>>>>        Edit
>>>>     </a>
>>>>   </span>
>>>> </li>
>>>>
>>>> The css might look like:
>>>>
>>>> li span a { display: none }
>>>> li span { height: 10px; background:url(edit_icon.png) }
>>>> li span:hover { height: 10px;  
>>>> background:url(edit__hover_icon.png) }
>>>>
>>>> Of course, this particular example isn't very good because the  
>>>> Sakai
>>>> markup doesn't provide good ID's or classes on the html to allow  
>>>> the
>>>> css author to name the "Edit"  span and a tags specifically.
>>>>
>>>> If this approach to css swapping is accessible and gets the "thumbs
>>>> up", would it make sense to develop some recommendation for how to
>>>> create this semantic markup for Sakai designers/developers?
>>>>
>>>> Sean
>>>> _______________________________________________
>>>> sakai-ux mailing list
>>>> sakai-ux at collab.sakaiproject.org
>>>> http://collab.sakaiproject.org/mailman/listinfo/sakai-ux
>>>>
>>>> TO UNSUBSCRIBE: send email to
>>>> sakai-ux-unsubscribe at collab.sakaiproject.org with a subject of  
>>>> "unsubscribe"
>>>
>>>
>>