W3C logo Web Accessibility Initiative (WAI) logo

Before and After Demo (BAD): Annotations

This is an outdated draft. The latest version is available at http://www.w3.org/WAI/demos/bad/.

This is an internal planning page for the annotations to the Before and After Demo (BAD). Please send comments to public-wai-eo-badtf.

Last updated on $Date: 2016/05/18 16:54:15 $ by $Author: eeggert $


NOTE: these are just rough descriptions of the annotations to be added, the final wording will be edited carefully.

Annotations for Before Home Page

  1. entire page - carry over errors from template
  2. "C" icon in the headlines - does not have alt-text
  3. "heat wave linked to temperature" - not apparent as link
  4. "lack of brains" image - "image" is not equivalent alt-text
  5. "Mayor: These kinds of ..." text - does not linearize properly
  6. "more >>" images - do not have alt-texts
  7. "click here" link - not descriptive link text
  8. "read more" link - not descriptive link text
  9. rock concert image - does not have an alt-attribute
  10. list (bottom of page) - does not have structure
  11. list item bullet - "bullet" is not equivalent alt-text
  12. phone number image - wrong (placeholder?) equivalent

Annotations for After Home Page

  1. entire page - carry over repairs from template
  2. "C" icon in the headlines - included as CSS images (decoration)
  3. "heat wave linked to temperature" - now a linked heading
  4. "lack of brains" image - now has equivalent alt-text
  5. "Mayor: These kinds of ..." text - now linearizes properly
  6. "full story" link - supplemented with location info
  7. "click here" link - replaced by descriptive link text
  8. "read more" link - replaced by descriptive link text
  9. rock concert image - has empty alt-attribute (decoration)
  10. list (bottom of page) - properly structured
  11. list item bullet - included as CSS images (decoration)
  12. phone number image - put in text and in different formats

Annotations for Before News Page

  1. entire page - carry over errors from template
  2. "Heat wave linked to temperatures" heading - not a heading
  3. "After three years of effort ..." column - font difficult to read
  4. "As news of the conviction and sentencing ..." column - too little spacing
  5. "the way that air conditioning works" link - link not apparent
  6. "but also hot air that's ducted away to the outside" text - emphasized without semantic code
  7. baby photo - links to a form but wrong alt-text
  8. "Your Shout" section - visual reading order different from code
  9. "Return To Sender" heading - obsolete markup code
  10. diagram - unclear what it represents
  11. zoo keeper image - not equivalent alt-text

Annotations for After News Page

  1. entire page - carry over repairs from template
  2. "Heat wave linked to temperatures" heading - now proper heading
  3. "After three years of effort ..." column - better font
  4. "As news of the conviction and sentencing ..." column - more spacing
  5. "the way that air conditioning works" link - link easier to distinguish
  6. "but also hot air that's ducted away to the outside" text - semantic markup
  7. baby photo - corrected alt-text and outdated link removed
  8. "Your Shout" section - visual reading order now matches the code
  9. "Return To Sender" section - now proper markup
  10. diagram - better quality and alt-description
  11. zoo keeper image - now equivalent alt-text

Annotations for Before Tickets Page

  1. entire page - carry over errors from template
  2. "Citylights Ticket Offers" heading - image of text without alt-text
  3. "concert dates" table - does not linearize correctly
  4. "special deals" text - bolded visually but not semantically
  5. phone number image - not equivalent alt-text
  6. "M-u-s-i-c line" text - ascii art does not work well
  7. "Ticket Prices" table - complext table with insufficient structure
  8. "Ticket Prices" table - too little color contrast
  9. "Ticket Prices" table - acronyms are unclear
  10. "Terms and Conditions" section - too much text decoration

Annotations for After Tickets Page

  1. entire page - carry over repairs from template
  2. "Citylights Ticket Offers" heading - image of text removed
  3. "concert dates" table - now linearizes correctly
  4. "special deals" text - bolded with semantics
  5. phone number image - replaced with text
  6. "M-u-s-i-c line" text - removed ascii art
  7. "Ticket Prices" table - added sufficient structure
  8. "Ticket Prices" table - improved color contrast
  9. "Ticket Prices" table - expanded acronyms
  10. "Terms and Conditions" section - reduced text decoration

Annotations for Before Survey Page

  1. entire page - carry over errors from template
  2. form top - no filling instructions (esp required fields)
  3. radio buttons - not grouped in the code (fieldset)
  4. radio button (select any) - label not associated
  5. select box - not usable by keyboard (no grouping)
  6. select box - no title or label associated
  7. newsletter section - wrong reading/tab order
  8. survey results table - does not linearize properly

After Successful Submission:

  1. entire page - carry over errors from template
  2. page top - no indication of success
  3. survey results table - does not linearize properly

After Insuccessful Submission:

  1. entire page - carry over errors from template
  2. form top - unclear what happened - no error message
  3. form top - no filling instructions (esp required fields)
  4. two questions - only color coding

Annotations for After Survey Page

  1. entire page - carry over repairs from template
  2. form top - filling instructions provided
  3. radio buttons - grouped in the code (fieldset)
  4. radio button (select any) - label is associated
  5. select box - is usable by keyboard (by grouping)
  6. select box - has title associated
  7. newsletter section - fixed reading/tab order
  8. survey results table - linearizes properly

After Successful Submission:

  1. entire page - carry over repairs from template
  2. page top - indication of success
  3. survey results table - linearizes properly

After Insuccessful Submission:

  1. entire page - carry over repairs from template
  2. form top - clear error message
  3. form top - instruction and link to errors
  4. two questions - errors clearly highlighted in color and code, and with instructions
  5. two questions - previous input maintained

Annotations for Before Template Page

  1. enitre page - table layout (deep nesting and does not linearize)
  2. top banner - overly verbose alt-text
  3. quick menu - jumps automatically on change
  4. page top - no skip links
  5. date - scripting not supported by DOM
  6. left navigation - images of text without alt
  7. left navigation item (select any) - not focusable (scripting) and small click area
  8. "Read more ..." links - insufficient color contrast
  9. "Template" heading - not a heading
  10. "[Title]" heading - insufficient color contrast

Annotations for After Template Page

  1. enitre page - replaced table layout by CSS
  2. top banner - succint alt-text
  3. quick menu - added "go"-button
  4. page top - added skip links
  5. date - scripting supported by DOM
  6. left navigation - removed images of text
  7. left navigation item (select any) - focusable and enlarged click area
  8. "Read more ..." links - sufficient color contrast
  9. "Template" heading - now a heading
  10. "[Title]" heading - sufficient color contrast

Copyright © 2009 W3C (MIT, ERCIM, Keio ), All Rights Reserved. W3C liability, trademark, document use and software licensing rules apply. Your interactions with this site are in accordance with our public and Member privacy statements.