fix: contact page accessibility problems

[virus-rpi]

Changes:

• Error message color changed from #FF0D35 to #EB0027 to make the color contrast WCAG AA compliant
• Changes error messages so that they suggest a fix (e.g. "Your name is missing" to "The field name is not filled in. Please fill in the field name to send the message.")
• Made the honeypot fields aria-invisible so that they don't get read by screen readers
• Added a aria-label to the google maps link
• Add aria-hidden to mandatory note at the bottom of the contact form

[netlify]

✅ Deploy Preview for satellytes ready!

Name	Link
🔨 Latest commit	d9f359d
🔍 Latest deploy log	https://app.netlify.com/sites/satellytes/deploys/65c24dc30844840008fc3581
😎 Deploy Preview	https://deploy-preview-792--satellytes.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 85 (🔴 down 1 from production) Accessibility: 100 (no change from production) Best Practices: 100 (no change from production) SEO: 93 (no change from production) PWA: 80 (no change from production) View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[georgiee]

Thanks for the good catches! Especially the honeypot thing is embarasing 😬 I've found some issues to fix, thanks!

[maxmarkus]

Idea: How about setting the whole map as aria-hidden? For visually impaired people it seems to bring no benefits, it has 5-6 links that can be tabbed and the readout is weird (screenshot below). Since we have the google maps link below, that might be enough.

Edit: After writing this, I realized that leafletjs is accessible. But the idea can still be valid.

[virus-rpi]

Idea: How about setting the whole map as aria-hidden? For visually impaired people it seems to bring no benefits, it has 5-6 links that can be tabbed and the readout is weird (screenshot below). Since we have the google maps link below, that might be enough.

Edit: After writing this, I realized that [leafletjs is accessible](https://leafletjs.com/examples/accessibility/). But the idea can still be valid.

i tried aria hiding the map but VoiceOver still reads it despite the aria-hidden=true.

[virus-rpi]

I found a way to make the map aria-hidden but it is still tab focusable and i could not figure out how to remove it from the tab order (tabIndex = {-1} gets ignored)

[maxmarkus]

Despite the fact that the general description "see no evil monkey emoji, because it's embarrassing" feels a bit weird I am approving it. We might think about rewording anyway.

Requested changes were done