SitePoint Sponsor

User Tag List

Results 1 to 11 of 11

Thread: Graphic headers

  1. #1
    SitePoint Wizard
    Join Date
    Aug 2002
    Location
    N.Ireland
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Graphic headers

    If I was designing a site and wanted to make it look as pretty as possible, I might substitute a graphic for a <h1> tag. I was thinking, might it be better to use javascript to write out the graphic and then use the noscript tag for a text alternative <h1>?

  2. #2
    SitePoint Wizard silver trophy Jeremy W.'s Avatar
    Join Date
    Jun 2001
    Location
    Toronto, Canada
    Posts
    9,123
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Accessibility wise, wouldn't it be the same to have the "alt" tag properly used? I haven't used readers and such myself, but I believe they specify what the pictures are, and read off graphics (if the user so desires)...

    J
    SVP Marketing, SoCast SRM
    Personal blog: Strategerize
    Twitter: @jeremywright

  3. #3
    SitePoint Wizard
    Join Date
    Aug 2002
    Location
    N.Ireland
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes that's true, the screen reader will read out the alt tag but I was thinking for better markup wouldn't it be better to provide a noscript alternative? Immediately the screen reader would recognise it as a heading and might include in a page summary of all of the headings.

  4. #4
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Jeremy, yes, you can use the alt attribute, but you lose the structural information conveyed by a "true" header.
    daz, i believe (but don't quote me on it, as i'll need to verify this and am swamped just now) that you can actually have something like
    Code:
    <h1><img src='.......' alt='blah' /></h1>
    to cover your bases...the alt gives the information, and the enclosing header tags give it structural meaning.
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  5. #5
    SitePoint Wizard silver trophy Jeremy W.'s Avatar
    Join Date
    Jun 2001
    Location
    Toronto, Canada
    Posts
    9,123
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Fair enough, thanks for the info

    J
    SVP Marketing, SoCast SRM
    Personal blog: Strategerize
    Twitter: @jeremywright

  6. #6
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no problem, mate

    btw: the reason you should strive to keep structural info such as headers is that screenreaders such as JAWS have special functions that can display the structure of a document...e.g JAWS has a function to list all "proper" headers...
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  7. #7
    SitePoint Wizard
    Join Date
    Aug 2002
    Location
    N.Ireland
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yep it'll say page has blah blah headers...

    redux I'll like to see confirmation of that one, having the graphic enclosed in <h1> tags

  8. #8
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok...confirmed.
    http://dev.salford.ac.uk/test.html validates http://validator.w3.org/check?uri=ht...uk%2Ftest.html

    haven't got JAWS at the ready on this machine...but does it recognise it as a header ?
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  9. #9
    SitePoint Wizard
    Join Date
    Aug 2002
    Location
    N.Ireland
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well I can't test it at the moment but I do know Jaws recognises text between <h1> tags as headers. It summarises every page and there might be an option to read all the headers out as I know some screen readers do that.

  10. #10
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    just got on the other machine with JAWS, and am happy to confirm that it does indeed recognise the image as a heading, and lists it in the heading overview (INSERT+F6) with its alt attribute.
    case solved...
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  11. #11
    SitePoint Wizard
    Join Date
    Aug 2002
    Location
    N.Ireland
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Excellent, there's another way to improve our coding Thanks Redux.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •