I find myself with some frequency creating a grid of inputs using a table where each cell consists of just an input field and the column headers define what the field is for. PHPStorm complains with this setup about the individual fields not having an associated label and I am wondering if providing one is really necessary.
As an example, here's a table I recently made.
download bmml source – Wireframes created with Balsamiq Mockups
The user can add as many rows as necessary to complete their data entry and each row consists of a simple input in each column. I'd prefer not to clutter the table visually with a label for every input, but should I be adding something for each input for accessibility or is it ok to ignore the warning and leave them unlabeled?
If I should label them, what would be the best way to go about doing so while maintaining a simple design such as this? What would make a good individual label? "Row 2 Adjustment"?
Answer
You should probably mark it up as a table and follow the WCAG guidelines for accessibility.
Yours is a table with text inputs. You could use the aria-labelledby
attribute as shown in example 2.
You might need to label each row also (with a tag at the beginning of the row and then you add it to your aria-labelledby
e.g. aria-labelledby="adj row1"
). You should listen to it through a screen reader to check if it makes sense.
Adjustment
Debit
Credit
No comments:
Post a Comment