LG-5632 Document Capture Field label for screen readers#5858
Conversation
**Why** In the document capture field for IAL2 the screen reader needs to tell the user the label for the document rather than the filename. The filename isn't descriptive while a screen reader stating "Front of your ID" or "Back of your ID" provides more context to the user.
| function getInputAriaLabel(label, fileValue) { | ||
| if (fileValue instanceof window.File) { | ||
| return fileValue.name; | ||
| return label; |
There was a problem hiding this comment.
There was a problem hiding this comment.
Can confirm. The aria-label is not needed if this is the expected result.
There was a problem hiding this comment.
Yea is stating "no file chosen" after a file has been uploading, so if we could possibly include the label as well as file name when uploaded that may be ideal.
|
Could you add an entry to the changelog? 🙂 |
Removed aria-label from file input entirely so now the screen reader will just pick up the <label> tag.
…632-doc-capture-aria-label
The aria-label will now say [Front or Back] of your ID - [filename] on a screenreader when a document is uploaded.
| function getLabelFromValue(fileLabel, fileValue) { | ||
| if (fileValue instanceof window.File) { | ||
| return fileValue.name; | ||
| return `${fileLabel} - ${fileValue.name}`; |
There was a problem hiding this comment.
Should we include the label in all of the possible return paths of this function, not just the one where we know the file's name?
There was a problem hiding this comment.
Yes I added a label to the second return statement. The last return path doesn't need it. I tested with a screen reader and it looks like the label field will take precedence over that.
4 participants
Why In the document capture field for IAL2 the screen reader needs
to tell the user the label for the document rather than the filename.
The filename isn't descriptive while a screen reader stating "Front of your ID" or "Back of your
ID" provides more context to the user.