Adds label elements to mini mailing list signup forms

[ivan-kocienski-gfsc]

Fixes #314

@geeksforsocialchange/developers

[cloudflare-workers-and-pages[bot]]

Deploying with    Cloudflare Pages

Latest commit:	035c0e0
Status:	✅  Deploy successful!
Preview URL:	https://28f49335.gfsc.pages.dev
Branch Preview URL:	https://ik-314-form-label.gfsc.pages.dev

View logs

[aaaaargZombies]

@undividual would you like to have some input on this https://30d5d353.gfsc.pages.dev/blog/2023/raftt-design-blog-2/

see the box in the blog and the footer.

we are looking at adding missing labels to the form elements. The placeholder text is not sufficient for accessibility purposes because it 1. isn't readable by screen readers, 2. a real label can be clicked to focus on the input for people with poor dexterity.

[undividual]

I'm sorry — I'm afraid I don't really understand what I am being asked here. (Me being an idiot I think!)

[kimadactyl]

Isn't this what aria-label is for? https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label

(in other words - i wasnt aware what we had now is insufficient?)

[ivan-kocienski-gfsc]

I thought so too, @kimadactyl, but when I read around it seemed less clear cut. @aaaaargZombies pointed out that having an explicit label that was well marked up makes it easier for the mobility impaired to interact with the page.

When I put this through the WAVE tool it did flag the missing label problem which I then fixed by giving it an aria-label attribute which fixed the warning. But Alfie pointed out that the WAVE tool is just there to flag obviously bad problems with the code and not recommend best practices, so TIL.

As we aim to be a disability first org I feel that we should sacrifice slick design for accessibility, would this be fair?

@undividual the question here is that in the "sign up to our newsletter" components (in the blog content and in the footer) we are introducing label text that explicitly describes the expected input for email signup box. We are asking if you are happy that this is okay- design/layout wise?

[undividual]

Okay — I am going to leave that broader discussion to you and Kim if that's okay — I will respond to what I was asked re design look and feel.

I am broadly okay with it but I think the leading on 'email address' is a bit too thick (reduce the line spacing), and the end of the word 'address' sits slightly too close to the box, please make the gap between the end of the word 'address' and the left hand side of the box the same as the gap between the right hand side of the box and 'sign up'.

I'd also add a ':' after address.

[kimadactyl]

aaaaargZombies pointed out that having an explicit label that was well marked up makes it easier for the mobility impaired to interact with the page.

The input area is huge! I don't understand how a label helps on this front, its a gigantic text box you can click anywhere inside!

[aaaaargZombies]

current state with labels can be seen here https://ik-314-form-label.gfsc.pages.dev/blog/2023/raftt-design-blog-2/

[ivan-kocienski-gfsc]

Unfortunately I can't approve my own PR but it looks okay to me.