This is a classic CSS issue of creating forms. I like your implementation and am especially impressed by the way that you show the headings only once. However, I think that there is a semantic problem here. For accessibility, you solution is the best one and I would use it myself. However, I think that this form should be in a table. This is not using a table for layout, it is the intended use for a table. For instance, if you were to make this same form as a print document, you would put it in a table. I understand why you did it that way and if I had to make a form like this today I would do it pretty much the same way. However, in the future I would like to see screen readers understand table forms better – since they are sometime the semantically appropriate method.
Arthus Erea
This is a classic CSS issue of creating forms. I like your implementation and am especially impressed by the way that you show the headings only once. However, I think that there is a semantic problem here. For accessibility, you solution is the best one and I would use it myself. However, I think that this form should be in a table. This is not using a table for layout, it is the intended use for a table. For instance, if you were to make this same form as a print document, you would put it in a table. I understand why you did it that way and if I had to make a form like this today I would do it pretty much the same way. However, in the future I would like to see screen readers understand table forms better – since they are sometime the semantically appropriate method.