Do help icons in headings interfere with heading-based navigation?

Question

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:

^{download bmml source – Wireframes created with Balsamiq Mockups}

VS. If the image is not available:

^{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):

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.

Answer 1

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.

Answer 2

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

Answer 3

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.