Announcement

Collapse
No announcement yet.

Shopping cart table accessibility

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Shopping cart table accessibility

    Hi there,

    I would like to edit the shopping cart table to conform to the W3C accessibility guidelines for data tables. The problem area, IMO, is how the product description and quantity are displayed. The headers for those two columns are correctly marked as <th>, but in all other rows, the first two table cells are merged into one using <td colspan="2">. The data itself is then placed in a separate table nested inside that cell. I believe that this makes the table difficult for screenreaders to understand, as merging the two cells means that the quantity values are not correctly related to the "Quantity" header.

    I tried editing the Shopping Cart xml file to remove the colspan, and place the data directly in the first and second table cells instead of in the nested table. This worked fine in the Order files which are generated in the "Preview html" folder, but when I uploaded the changes to the website, the entire shopping cart table disappeared from all checkout and shopping cart pages!

    I reverted back to the old table, but I would like to be able to make this change as I'm keen on making websites more accessible. Does anyone have any ideas on what I may have done wrong, or if there is any other file which needs to be altered to make this work online? Or is there any particular reason why the table has been designed this way?

    Thanks very much!

    Lizzy

    #2
    I've tried to figure out how to do this, but have not succeeded. The problem is that some product lines have 'date prompt' values and 'other info prompt' values in the shopping cart table. So as well as reformatting the product names and descriptions, you have to decide how the prompt values are going to appear, and ensure all the table code still works if they don't appear.

    Look for the code that begins with <!-- Other info prompt begin --> and <!-- Date info prompt begin --> for the probable culprits that are affecting your design.

    Comment

    Working...
    X