Make 404 page funner - Githubissues

geeksforsocialchange / gfsc-v3

GFSC site migration to Hugo

https://gfsc.studio

1 stars 2 forks source link

Make 404 page funner #371

Closed r-ferrier closed 11 months ago

r-ferrier commented 1 year ago

Fixes #293

Description

Adds a venn diagram to our 404 page with silly reasons given for landing here
Keeps the main title and adds error 404 to the centre to make sure it's clear still to all users what page this is
Uses slightly different styling to homepage venn at mobile, to preserve look of diagram as descriptions not required

@geeksforsocialchange/developers

r-ferrier commented 1 year ago

Hello! I've updated the cursor bug. I did have a think about this screenreader issue when I was designing it. I couldn't work out if it was the kind of thing that would be an annoying distraction for a screenreader user or worth sharing in an accessible format for them too.

Reasons for hiding the image:

The necessary info is covered in the title 404 page not found
The image just repeats this message with some decorative silliness, and repeating information is something I think you want to avoid for screen reader users, for sanity's sake

Reasons for showing the image / adding some screenreader only content:

people using screenreaders also have a sense of humour and deserve decorative silliness too

Maybe I could just rephrase and list out the silly reasons in some screenreader only content? Something like "This page could not be found. Suggested reasons for this are pocket browsing, overzealous autocorrect, curse by witch on birthday."

aaaaargZombies commented 1 year ago

Did you make the changes locally and not push?

I'd like to see content for screen readers that is equivalent to the diagram, ideally the diagram would be screen reader interactive to support people who are partially sighted and use the screen reader for assistance rather than purely. But that is tech debt I have created :|

aaaaargZombies commented 1 year ago

@geeksforsocialchange/content maybe one of you could support with some alt text for the SVG image?

rebeccawigmore commented 1 year ago

I'll do this now!

rebeccawigmore commented 1 year ago

@aaaaargZombies and @r-ferrier I've tweaked the copy because maybe a screen reader is not so pocket-based, a lot of the time? I'm not sure where to drop the code this time because it's not a usual page, so could you possibly do it for me? I'll do better next time, when I'm not so time-panicked!

[copy]

This page could not be found. Common causes include: deceased links, overzealous autocorrect and ongoing witch-based curse.

r-ferrier commented 1 year ago

that's great, I can pick this up later today!

cloudflare-pages[bot] commented 1 year ago

Deploying with Cloudflare Pages

Latest commit:	`9cfaeda`
Status:	✅ Deploy successful!
Preview URL:	https://da539ff1.gfsc.pages.dev
Branch Preview URL:	https://feat-293-404-page.gfsc.pages.dev

View logs