“Styling web forms”: Add an accessible version of the postcard

[GeorgeDaris]

MDN URL

https://developer.mozilla.org/en-US/docs/Learn/Forms/Styling_web_forms

What specific section or headline is this issue about?

"A specific styling example"

What information was incorrect, unhelpful, or incomplete?

None at all! I thoroughly enjoyed this article and how it showcased how to style different form elements. I would like to suggest however including an accessible version of this postcard, unless you don't consider it necessary for this example, as that wasn't the main focus.

Perhaps there could be a note in the beginning about it not being designed with accessibility in mind.

If possible, I would like to create such a version, as it would be interesting to see, although as I'm taking another look at it, it doesn't seem that bad. Could a legend with a hidden aria-role explaining the site work?

What did you expect to see?

No issues here

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

No response

MDN metadata

Page report details

• Folder: en-us/learn/forms/styling_web_forms
• MDN URL: https://developer.mozilla.org/en-US/docs/Learn/Forms/Styling_web_forms
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/learn/forms/styling_web_forms/index.md
• Last commit: a501ad4
• Document last modified: 2022-04-14T02:35:15.000Z

[Josh-Cena]

@estelle I find this example fine accessibility-wise. Could you do a check and see what exactly needs to be done?

[estelle]

The example is fairly accessible. Two features that might make it more accessible would be to:

1. Make the background of the textarea white while it has focus so the text is visible where the post office stamp is. It obfuscates the text at the end of the first row.
2. Provide alternative text for the ::after.
   It is done accessibly in that it is using after instead of before, but AT does add >>> to what is read. So, content: ">>>" / ""; might be an improvement (if alt works on generated strings, not just generated images. Never looked it up so not 100% sure).

This is a standalone example. There are no instructions indicating that this is a postcard, but there shouldn't be. it can't be submitted so should not indicate to the screen reader user that it could be, or anything else that is not within the self contained example.

We could include a paragraph on the instuctional page saying what needs to be done, for example, 1) put the entire thing in a fieldset with a legend, or 2) include instructions prior to the form, optionally inluding an aria-decribedby linking the id of that paragraph. but not sure it's necessary for a learning to style forms example that we include the text that would come before that form. If included, this should be in the tutorial, not in the live example; it doesn't actually get submitted, so we can't provide it on the example itself as that would make the example inaccessible.