Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

If I have:

<h2>
  Edit your details 
  <a href="/help?topic=editDetails">
    <img 
      src="/images/helpIcon.gif" 
      width="20" height="20" 
      alt="Help about: Editing your details"
    />
  </a>
</h2>

Is the heading accessible?

A heading list generated by AT would include the link text, this sounds like a reasonable thing to do.

The link in the example above contains only an image, so the image's alt text may be used instead, so I understand. Does this make the heading more difficult to understand?

I suppose the help icon could be taken outside of the element. I'm just wondering if there's any real issue here.

EDIT : To make it clearer, these are the variations of how it may appear in a browser:

If the image is available:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

VS. If the image is not available:

mockup

download bmml source

Could this formulation of the help feature pose a problem for a user understanding the action?

Author Update:

The scenario where the icon's alt text is (visually) displayed to the user is also valid, but I'm not sure that matches my question. I don't think the user will not understand the help icon, but the heading. I'll explain further:

I have found this graphic which demonstrates how HTML Headings are presented to users of JAWS (screen reader for visually impaired users):

How HTML Headings are presented to the JAWS screen reader for quick navigation

Such users will often navigate a HTML page using the headings to start the reader reading from the heading they're interested in.

I'm concerned that the Help Icon may cause the meaning of the heading to be confusing and therefore it's probably not ideal to put a link/icon inside a header element.

share|improve this question
1  
I'm not really following what the question is exactly, but it does sound like it's more along the lines of syntax and implementation rather than UX/usability, and therefore off-topic for this site. Are you sure you posted this on the correct SE site? –  AndroidHustle Oct 10 '12 at 10:36
1  
@AndroidHustle, er, dunno I figured accessibility is more of a design discipline than a technical one. I wish there was an accessibility.stackexchange.com. In terms of UI design, doesn't accessible pretty much mean usable by everyone/anyone? So the question is if AT presented the heading to the user as "Edit your details Help about: Editing your details". Would the user find that difficult to understand? –  Lee Kowalkowski Oct 10 '12 at 12:43
    
Ok, I think I understand what you mean now. I've edited the question to more directly describe the problem (ie. how i recorded it that is) by adding mockups of how the heading can be shown in a browser. Does my edit go along the lines of what you were asking? –  AndroidHustle Oct 10 '12 at 13:13
    
@AndroidHustle: Eek, kinda (I hadn't thought about if the image isn't available), it was more to do with if the user is navigating/controlling a screen reader from the headings (heading based navigation). I've just found this article: standards-schmandards.com/2005/browsing-habits - which probably better explains why I'm concerned about the help icons. –  Lee Kowalkowski Oct 10 '12 at 21:02
    
@AndroidHustle: I've added more information to the question. I was trying to phrase the question without 'leading the witness', and deliberately leave it open to interpretation in case anybody had any other worthwhile usability/accessibiliy related thoughts on the given HTML construct. Matt Obee has since answered along the lines I was thinking, but your edit also raised a good point. –  Lee Kowalkowski Oct 10 '12 at 21:30
show 1 more comment

3 Answers

up vote 2 down vote accepted

In theory, if the help link is contained within the heading element alongside the text "Edit your details", it would be sufficient for the alt attribute of the help icon to be simply "Help", since its meaning can be derived when combined with the heading text (both visually and programmatically by those relying on AT). That would reduce the amount of redundant information being announced by AT when browsing the headings.

Personally however, I would present the Help link next to but outside of the heading element and set the alt attribute to "Help with editing your details". That avoids the help link being announced when navigating with AT between headings or via the document outline, while making sure that the meaning of the link is explicitly clear when encountered without the surrounding context.

share|improve this answer
add comment

No need to remove the icon

its perfect

its HIP these days(in fashion)

a user stuck and needing help will look for the (?) in upper right

its effective

Display the text as a tool-tip ( a tool tip is the text in box that appears when you hover over an element)

Dont use the text implementation. its less readable

share|improve this answer
add comment

No need to take the icon outside of the element, it sits perfectly well where it currently stands. Providing the help icon is clear as to what purpose it serves, the user will have no troubles. The alt text of the image will only be displayed as a tool-tip upon the user hovering over the image with their cursor.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.