Use labels instead of placeholders on contact form #2050

tut-tuuut · 2025-04-26T10:56:29Z

This PR to add the bare minimum of accessibility on the form to contact the DSF.

Basically, display labels in dedicated labels instead of using the placeholder attribute.

That helps:

users of screenreaders who rely on "accessible labels" for knowing what is expected;
users with some attention or cognition disorders who need to see what is expected while they are typing content in the field.

When I'll have the whole "translation" part figured out I will try to fix the send button label ("Send →"). Ideally I would like to have the → in an span with aria-hidden=true because it is decorative.

bmispelon

Wow, thanks for taking the time to submit this! 🙏🏻

Here's a (folded) screenshot of how that looks like (light mode):

I think the changes to move away from placeholder in favor of a real <label> are the way to go. I've left a suggestion for a simplification of the template.

As for the arrow in the send button, I remember @marksweb and me discussing it on his PR to make the site translatable and I was the one to suggest including the → into the translatable string, on the basis that some languages might want to invert the direction. But that's not something I'm very confident about so I'd be happy to be told that's not a good practice. Also, even though most of the site is marked for translation we currently don't have any infrastructure for it, so don't be afraid to make changes since it won't actually break anything in that regard.

Thanks again for sending this, and don't hesitate to open other accessibility-improvements PR! 🎸

bmispelon · 2025-04-28T20:07:13Z

djangoproject/templates/contact/foundation.html

  <form action="." method="post" accept-charset="utf-8" class="form-input">
    {% csrf_token %}
    <p>
+      <label for="{{ form.name.id_for_label }}">{{ form.name.label }}</label>


You could use:

Suggested change

<label for="{{ form.name.id_for_label }}">{{ form.name.label }}</label>

{{ form.name.label_tag }}

It's not strictly equivalent since it will add a : after the label but I think that's not a bad change.

Oh I like this!

tut-tuuut · 2025-04-28T22:38:34Z

djangoproject/templates/contact/foundation.html

    </p>
    <p class="form-email">
+      <label for="{{ form.email.id_for_label }}">{{ form.email.label }}</label>
      {% if form.email.errors %}<p class="errors">{{ form.email.errors.as_text }}</p>{% endif %}


Oh I've seen something else that needs a fix: if form.email.errors is true, then you will have two nested <p>s, which will break something. I will fix it in this PR too.

Ah yes, good catch! If we're ok using a <div> to wrap up the label+input+errors we could simplify the template a lot and use:

<div>{{ form.name.as_field_group }}</div>

tut-tuuut · 2025-04-28T22:45:10Z

I'll come back to this later (this week I hope?) to fix this nested <p> issue. I could use divs but it will lack semantics and need some styling, so I may need some sleep to get a better idea. :)

tut-tuuut · 2025-04-28T22:51:28Z

For the send button, we could add the arrow in CSS generated content (like ::after) with an empty alternative text; then use :dir(ltr) to change the generated content in order to display a left arrow in that case. The browser support for this pseudo-class is not so bad, and if it breaks it's "only" a weird arrow in a button.

(Oh and to use ::after we'll need to change the input submit into a button.)

bmispelon · 2025-05-02T12:19:14Z

Thanks for making the changes, it's looking quite nice now:

Light mode (with errors)

Dark mode (with errors)

I find the styling of errors a bit jarring in dark mode, but I don't have a better proposal so I'll defer to you . If you're happy with how it looks, I'm happy to merge it. 🚢

tut-tuuut · 2025-05-02T14:52:37Z

I tried to add the css-generated arrow in the "send" button, and then… things happened :D

tut-tuuut · 2025-05-02T14:54:05Z

djangoproject/templates/contact/foundation.html

      <a href="https://forum.djangoproject.com">Django Forum</a>.
    {% endblocktranslate %}
  </p>
-  <form action="." method="post" accept-charset="utf-8" class="form-input">


I removed this class "form-input" as it made the <button> move on top right of the form, apparently because of an ancient class (2014) not used anymore for its original purpose throughout the site.

an ancient class (2014) not used anymore for its original purpose throughout the site.

That's probably a good 20% of our CSS styles at this point 😭

tut-tuuut · 2025-05-02T15:04:40Z

This is my final proposal: no update on error colors, I would like to compare with other colors through the website (currently it's not perfect but it was worse when the errors were not highlighted at all).

I added the styling with CSS-generated arrow on the "send" button, which adapts when the language is right-to-left.

LTR in white mode

LTR in dark mode

Send button in RTL mode (using `dir="rtl"` on root html node)

bmispelon · 2025-05-02T19:41:26Z

I like the CSS changes to remove the → from the button, but I think I'd prefer to have that in a separate PR so we can fix all the forms that use the same pattern (git grep -F '&rarr' shows 3 more instances). Are you OK with me merging the 3 first commits only?

bmispelon · 2025-05-02T19:43:05Z

djangoproject/scss/_style.scss

+.cta.arrow {
+  height: auto;
+  &::after {
+    content: " →" / "";


Also this is cool, I didn't know about the / syntax for content 🤯

tut-tuuut · 2025-05-03T09:09:42Z

I like the CSS changes to remove the → from the button, but I think I'd prefer to have that in a separate PR so we can fix all the forms that use the same pattern (git grep -F '&rarr' shows 3 more instances). Are you OK with me merging the 3 first commits only?

Yes, go for it 👍

tut-tuuut · 2025-05-04T09:04:59Z

I've extracted the 3rd commit into a dedicated PR @bmispelon so you can merge more easily. ❤️

marksweb · 2025-05-05T20:23:27Z

I agree on a separate PR for moving arrows into css. It will make things much cleaner 👏👍

tut-tuuut mentioned this pull request Apr 26, 2025

Accessibility issues with site design and implementation #1381

Open

thibaudcolas added the accessibility label Apr 26, 2025

github-project-automation bot added this to django accessibility improvements Apr 26, 2025

github-project-automation bot moved this to New in django accessibility improvements Apr 26, 2025

thibaudcolas moved this from New to In Progress / Review in django accessibility improvements Apr 26, 2025

thibaudcolas moved this from In Progress / Review to To Review in django accessibility improvements Apr 26, 2025

bmispelon reviewed Apr 28, 2025

View reviewed changes

tut-tuuut commented Apr 28, 2025

View reviewed changes

tut-tuuut force-pushed the fix-accessibility-of-contact-form branch from 55a3c73 to 6936b83 Compare April 28, 2025 22:43

tut-tuuut added 3 commits May 1, 2025 12:06

Use labels instead of placeholders on contact form

5d20339

Use tag label_tag instead of manually using <label>

2ccbcc8

Simplify the template and stylish error messages

262847b

tut-tuuut force-pushed the fix-accessibility-of-contact-form branch from 4bbe83d to 262847b Compare May 1, 2025 10:06

tut-tuuut commented May 2, 2025

View reviewed changes

tut-tuuut force-pushed the fix-accessibility-of-contact-form branch from d2c5a4e to 23a414c Compare May 2, 2025 14:55

bmispelon reviewed May 2, 2025

View reviewed changes

tut-tuuut force-pushed the fix-accessibility-of-contact-form branch from 23a414c to 262847b Compare May 4, 2025 09:01

tut-tuuut mentioned this pull request May 4, 2025

Extract decorative arrows in CSS #2063

Open

sabderemane requested review from SaptakS and sabderemane May 4, 2025 13:40

bmispelon merged commit 95ed0d5 into django:main May 6, 2025
7 checks passed

github-project-automation bot moved this from To Review to Done in django accessibility improvements May 6, 2025

	<label for="{{ form.name.id_for_label }}">{{ form.name.label }}</label>
	{{ form.name.label_tag }}

Uh oh!

Use labels instead of placeholders on contact form #2050

Use labels instead of placeholders on contact form #2050

Uh oh!

Conversation

tut-tuuut commented Apr 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

bmispelon left a comment

Choose a reason for hiding this comment

Uh oh!

bmispelon Apr 28, 2025

Choose a reason for hiding this comment

Uh oh!

tut-tuuut Apr 28, 2025

Choose a reason for hiding this comment

Uh oh!

tut-tuuut Apr 28, 2025

Choose a reason for hiding this comment

Uh oh!

bmispelon Apr 29, 2025

Choose a reason for hiding this comment

Uh oh!

tut-tuuut commented Apr 28, 2025

Uh oh!

tut-tuuut commented Apr 28, 2025

Uh oh!

bmispelon commented May 2, 2025

Uh oh!

tut-tuuut commented May 2, 2025

Uh oh!

tut-tuuut May 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

bmispelon May 2, 2025

Choose a reason for hiding this comment

Uh oh!

tut-tuuut commented May 2, 2025

Uh oh!

bmispelon commented May 2, 2025

Uh oh!

bmispelon May 2, 2025

Choose a reason for hiding this comment

Uh oh!

tut-tuuut commented May 3, 2025

Uh oh!

tut-tuuut commented May 4, 2025

Uh oh!

marksweb commented May 5, 2025

Uh oh!

Uh oh!

Uh oh!

tut-tuuut commented Apr 26, 2025 •

edited

Loading

tut-tuuut May 2, 2025 •

edited

Loading