ScottLogic / blog

The Scott Logic blog
http://blog.scottlogic.com
Other
9 stars 86 forks source link

Improving how we handle images - better accessibility and click to enlarge image #144

Open chayes-scottlogic opened 10 months ago

chayes-scottlogic commented 10 months ago

It would be great if we could do the following:

  1. Allow users to click on images included in a blog post to enlarge them: While they can view the image in a new tab, it would be nice to have a way of enabling users to enlarge images while remaining on the page. There isn't a way to do this currently and this can make images difficult to view without zooming in.
  2. Accessibility considerations: While Alt Text is included, it would be good to provide users with more information about what the image contains. If there was a way to include an image description that would be ideal.
jcarstairs-scottlogic commented 10 months ago

Hi Charlotte!

(1) sounds like an interesting technical challenge ;) Can you give an example of how this would be useful?

Technical note: If we manage to get #133 merged, we'll be able to write custom plugins. I can imagine a solution where we post-process generated HTML and transform <img> elements into something slightly fancier, like the images which become dialogs on click on Rick Viscomi's blog.

Re (2): What's the problem needing solved here? Why/when doesn't image + alt text provide all the information you need?

chayes-scottlogic commented 10 months ago

Hi Joe,

So...

  1. Yes, exactly!
  2. A good example would be this image: @.*** I tried my best to articulate what I had drawn here but wondered if there was a preferred / better way of essentially providing a full description of all the information that the image is conveying? Hope that makes sense and happy to chat if you'd like as this could well be that I didn't know what I was doing! :D

Charlotte Hayes Senior Test Engineer [A black text on a white background Description automatically generated] @.**@.> www.scottlogic.comhttp://www.scottlogic.com/ @.https://twitter.com/Scott_Logic @. http://www.linkedin.com/company/scott-logic-limited

Scott Logic Ltd is a company registered in England and Wales. Registered office: 6th Floor, The Lumen, St James Boulevard, Newcastle Helix, Newcastle Upon Tyne, England, NE4 5BZ. Registration number 05377430, VAT number GB 866 1051 30. This message is private and confidential. If you have received this message in error, please notify the sender and remove it from your system.

From: Joe Carstairs @.> Sent: Wednesday, December 20, 2023 9:47 AM To: ScottLogic/blog @.> Cc: Charlotte Hayes (She/Her) @.>; Author @.> Subject: Re: [ScottLogic/blog] Improving how we handle images - better accessibility and click to enlarge image (Issue #144)

You don't often get email from @.**@.>. Learn why this is importanthttps://aka.ms/LearnAboutSenderIdentification

Hi Charlotte!

(1) sounds like an interesting technical challenge ;) Can you give an example of how this would be useful?

Technical note: If we manage to get #133https://github.com/ScottLogic/blog/pull/133 merged, we'll be able to write custom plugins. I can imagine a solution where we post-process generated HTML and transform elements into something slightly fancier, like the images which become dialogs on click on Rick Viscomi's bloghttps://rviscomi.dev/2023/11/a-faster-web-in-2024/.

Re (2): What's the problem needing solved here? Why/when doesn't image + alt text provide all the information you need?

- Reply to this email directly, view it on GitHubhttps://github.com/ScottLogic/blog/issues/144#issuecomment-1864164196, or unsubscribehttps://github.com/notifications/unsubscribe-auth/BBJHVCV3ORTYHMEYSSHEA7DYKKXYPAVCNFSM6AAAAABAZMKTOGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQNRUGE3DIMJZGY. You are receiving this because you authored the thread.Message ID: @.**@.>>

jcarstairs-scottlogic commented 10 months ago

Noting this for later: one way to implement an image you can click on to enlarge