SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    Forensic SEO Consultant Webnauts's Avatar
    Join Date
    Jun 2003
    Location
    European Union
    Posts
    1,488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry Is it Bobby or Me? Please have a look!

    I am validating my new web site http://www.webnauts.net with Bobby, and I get the message:

    Priority 1 Accessibility

    This page does not meet the requirements for Bobby A Approved status. Below is a list of 1 Priority 1 accessibility error(s) found:

    1. Provide alternative text for all images. (12 instances)
    Lines 34, 35, 56, 57, 64, 65, 74, 75, 76, 77, 78, 79

    Can someone tell me if Bobby or I am wrong?

  2. #2
    SitePoint Guru okrogius's Avatar
    Join Date
    Mar 2002
    Location
    US
    Posts
    622
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It is fine to have alt="" for images which have no importance and such do not need to announced to other readers.

    However, in your case having those square images are nto needed either. You only use them to the left of list items, and as such should be done this way. You can specify a custom bullet image via css, so don't have those images inside the <li> blocks.

    Also, a random note about your contact page. Wouldn't it be better to just have something like "All fields are required" versus asterisks by every field?
    Last edited by Codename49; Jul 18, 2004 at 18:20.

  3. #3
    Forensic SEO Consultant Webnauts's Avatar
    Join Date
    Jun 2003
    Location
    European Union
    Posts
    1,488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Quote Originally Posted by Codename49
    It is fine to have alt="" for images which have no importance and such do not need to abbounced to other readers.

    However, in your case having those square images are nto needed either. You only use them to the left of list items, and as such should be done this way. You can specify a custom bullet image via css, so don't have those images inside the <li> blocks.

    Also, a random note about your contact page. Wouldn't it be better to just have something like "All fields are required" versus asterisks by every field?
    You are right. I must do that with CSS. About the contact form, I fixed it.
    You are absolutely right!

    Thanks a lot for your tips. Let more come in.

  4. #4
    SitePoint Zealot LSW's Avatar
    Join Date
    Jul 2004
    Location
    Juneau Alaska
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    [I have retracted my comments as Redux has explained in another forum that these were incorrect based on misunderstanding of the standards be my Mac using friends and myself.

    Simply put I scrwed up.]

    LSW
    Last edited by LSW; Jul 26, 2004 at 01:34.

  5. #5
    Forensic SEO Consultant Webnauts's Avatar
    Join Date
    Jun 2003
    Location
    European Union
    Posts
    1,488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question ???

    Quote Originally Posted by LSW
    Just a note - for accessibility you should also have a title attribute on all relevant images.

    Normally that is what the alt attribute is for, however mac does not support the alt attribute for some reason, so by duplicating it with title="" you have the same effect on Mac machines.

    LSW
    LSW I do so already, but the alt tags we are discussing about are null (empty) ones used for spacer (blind) gifs.

    If you see my web site, I am adding to all linked meaningful graphics a title tag too.

    Check that here: http://www.webnauts.net
    Last edited by Webnauts; Jul 22, 2004 at 15:51. Reason: Correcting spelling

  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)
    Quote Originally Posted by LSW
    Just a note - for accessibility you should also have a title attribute on all relevant images.
    aeh...i would beg to differ

    however mac does not support the alt attribute for some reason,
    mac what? IE5? safari?

    so by duplicating it with title="" you have the same effect on Mac machines.
    effect? what effect? the little tooltip? that's the way certain browsers have chosen to represent ALT, but that has nothing to do with accessibility. yes, if you're after having little tooltips show up, you should really use TITLE. but saying that you have to use them for accessibility reasons is wrong, sorry. the whole reason behind ALT is to provide alternative content when images can't be displayed, or to pass it along to assistive technology such as screenreaders. the fact that they show up as tooltips in IE and most other browsers is only coincidental, and in my view quite wrong anyway.
    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
    Forensic SEO Consultant Webnauts's Avatar
    Join Date
    Jun 2003
    Location
    European Union
    Posts
    1,488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Redux, do you mean that using title tags for linked graphics is wrong? Or did I get you wrong?

    If it is wrong using them, can you explain why?

    Thanks.

  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)
    LSW is suggesting that on all images with meaning/content, you should use both ALT and TITLE, to overcome a "problem" on the mac. i posit that the problem he's referring to is the fact that safari (?) does not pop up a tooltip with ALT. this is *not* a "problem", merely a choice that safari developers have made. ALT should only be used as an alternative when images are not displayed, and not abused to achieve visual effects like tooltip popups. that's all i'm saying. when it comes to links, you may or may not wish to complement them with a title, but if you're not providing any more information than what's already inside the link (which, if the image is not displayed, is the ALT text itself), then i'd say it's not worth it, as there's no real benefit.
    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
    Forensic SEO Consultant Webnauts's Avatar
    Join Date
    Jun 2003
    Location
    European Union
    Posts
    1,488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Redux for the info!

  10. #10
    Forensic SEO Consultant Webnauts's Avatar
    Join Date
    Jun 2003
    Location
    European Union
    Posts
    1,488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question alt="."

    A Web Semantics Advocate, tried to help me out with validating for W3C/WAI WCAG 1.0 AAA with Bobby, explaining me that if Bobby doesn't validate with alt="" or alt=" ", I can use instead alt="."

    Here is his quote:

    "Do not specify irrelevant alternate text when including images intended
    to format a page, for instance, alt="red ball" would be inappropriate
    for an image that adds a red ball for decorating a heading or
    paragraph. In such cases, the alternate text should be the empty string
    (""). Authors are in any case advised to avoid using images to format
    pages; style sheets should be used instead.

    This is completely correct but slightly misleading. The red ball spoken
    of here is decoration only, not a representation of the element. The
    unfortunate thing is they use red ball as an example so it conjures the
    image of a bullet point.

    The graphic has semantic meaning and is representing an element, it
    requires an alt tag to represent that. A bullet point could be alt="."
    in the case of a graphical hr it could be alt="---" a spacer image used
    to put space between two elements (not a layout holding spacer graphic)
    should be alt=" ".

    The RNIB (Royal Institute of the Blind) recommend using alt="Option 1"
    or alt="item" for graphic bullets, and they should know.
    http://www.rnib.org/xpedio/groups/public/d...ic_alttext.hcsp

    The best suggestion over such a contentious issue is, as the quote
    states, to remove the contention and use CSS instead."
    -----

    Question: Do you agree with him? And second, can someone give me the CSS code he is talking about?

    Well for the moment I use for meaning-less graphics alt="." while I want that my site validates with Bobby, even if the idea is not so usable, not while I care, but if potential customers try to check me with Bobby to evaluate our quality.

    Thanks in advance for your help..

  11. #11
    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)
    Quote Originally Posted by Webnauts
    he
    unfortunate thing is they use red ball as an example so it conjures the
    image of a bullet point.

    The graphic has semantic meaning and is representing an element, it
    requires an alt tag to represent that. A bullet point could be alt="."
    quite wrong, imho. it's a more fundamental problem: bullet points mean a list, and lists should be marked up with the relevant html element. it's pretty irrelevant to argue about adequate semantics of an alt attribute that would be used to make up for the lack of adequately structured html in the first place

    in the case of a graphical hr it could be alt="---"
    again, proper html structures should be used to denote different logical blocks, not a spurious image to act as a separator. then, you should use css to have the graphical effect, not an image.

    a spacer image used
    to put space between two elements (not a layout holding spacer graphic)
    should be alt=" ".
    same as above. use css, not images.

    The RNIB (Royal Institute of the Blind) recommend using alt="Option 1"
    or alt="item" for graphic bullets, and they should know.
    no, they're not the absolute font of all knowledge. heck, up until recently, they still suggested using ALT="*" for spacer images...
    they should be suggesting proper use of html markup, and css for styling...

    The best suggestion over such a contentious issue is, as the quote
    states, to remove the contention and use CSS instead."
    the only bit i agree with. but: this point should have been made from the start, as everything else if contentious and irrelevant...
    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

  12. #12
    Forensic SEO Consultant Webnauts's Avatar
    Join Date
    Jun 2003
    Location
    European Union
    Posts
    1,488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Redux for your cool definitions and suggestions.
    A few minutes ago, I got rid of the spacer images using for lists, and I styled the list bullets with CSS.

  13. #13
    SitePoint Enthusiast 2kool2's Avatar
    Join Date
    May 2001
    Location
    UK
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Patrick,

    I penned the quote, albeit stripped from context.
    I'm delighted that you completely concur, and I appreciate that you've substantiated my professional opinion.

    Thank you.

    F.Y.I. The RNIB used to recommend alt="*" because earlier versions of screen readers and braille output devices were unable to detect a null value.
    Last edited by 2kool2; Jul 29, 2004 at 19:52.
    mike 2k: )2
    <work> http://webSemantics.co.uk </work>
    <rest> http://2kool2.com/ </rest>
    <play> http://bangersandmash.com/ </play>

  14. #14
    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)
    Quote Originally Posted by 2kool2
    I penned the quote, albeit stripped from context.
    I'm delighted that you completely concur, and I appreciate that you've substantiated my professional opinion.
    i sort of realised that i stormed in there like a bull in a china shop, and only saw your own statement about "you should use css" at the end, after i ripped all the stuff apart...

    ah well, i thought that it would still be useful to present my thoughts on it, and glad to see we both got to the same conclusion on it anyway

    F.Y.I. The RNIB used to recommend alt="*" because earlier versions of screen readers and braille output devices were unable to detect a null value.
    cheers for that...good to know there was some reason behind the madness
    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

  15. #15
    SitePoint Guru okrogius's Avatar
    Join Date
    Mar 2002
    Location
    US
    Posts
    622
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by webnauts
    And second, can someone give me the CSS code he is talking about?
    As suggested by my original reply .

    The CSS property you're looking for is list-style-image. It's CSS 1 which means it's supported by practically everything (minus nutrcrape 4). Note, there is also a list-style shorthand property.

    In your case:
    Code:
        li {
        list-style-image: url(images/blank.gif);
        }
    However you might get a desired rectangle just by using this (voila, no images):
    Code:
       li {
       list-style-type: square;
       }
    Same support as list-style-image.

  16. #16
    Forensic SEO Consultant Webnauts's Avatar
    Join Date
    Jun 2003
    Location
    European Union
    Posts
    1,488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi everyboby. First of all I would like to thank you once again for your kind responses.

    I have a new problem were you probably could help me too? Then please see here: http://www.sitepoint.com/forums/show...24#post1342124


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
  •