Sunday, June 17, 2018

Should I label every row in a table of inputs?


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.


mockup



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.

















Ledger
Adjustment Debit Credit

No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...