Adjusting default ghost link embed

[peterfremlin]

The default ghost embed has too much information and is annoying to a screenreader user. It also misses alt-text from the image.

See an example here: https://www.disabilitydebrief.org/access-tests/

Here is the html of the default thumbnail card:

<figure class="kg-card kg-bookmark-card"><a class="kg-bookmark-container" href="https://www.disabilitydebrief.org/debrief/practice-what-we-preach/"> <div class="kg-bookmark-content"><div class="kg-bookmark-title">Do we practice what we preach?</div><div class="kg-bookmark-description">The discrimination we face while advocating on disability</div> <div class="kg-bookmark-metadata"><img class="kg-bookmark-icon" src="https://www.disabilitydebrief.org/content/images/size/w256h256/format/jpeg/2022/06/portrait-katan-oct2021-cropped-square-1.jpg" alt=""><span class="kg-bookmark-author">Peter Torres Fremlin</span><span class="kg-bookmark-publisher">Disability Debrief</span></div></div><div class="kg-bookmark-thumbnail"><img src="https://www.disabilitydebrief.org/content/images/2023/05/ramp-stairs-1.png" alt=""></div></a></figure>

A big accessibility improvement comes from (1) removing the metadata, and (2) adding in alt-text. I am happy to continue adding alt-text by hand as an alternative on our side would involve a programmatic solution.

However, the resulting link preview is very narrow, cutting the thumbnail image.

• [ ] Would it look better if the resulting link embed was a bit taller?
• [ ] Perhaps the metadata can be hidden from css rather than by hand

[cathysarisky]

A CSS or javascript hide/removal of the meta data is possible. These cards are unfortunately mostly baked into Ghost, which is not pulling alt text (if any!) for the image. Maybe best to treat the image as decorative (causing screen readers to ignore it), given it's a fairly low value image except for visual layout?

[peterfremlin]

Hiding metadata from css is great.

I will add minimal alt text by hand

The other point was the height of the card

[cathysarisky]

Ah, height of the card is no problem.

On Mon, Aug 14, 2023 at 11:08 AM peterfremlin @.***> wrote:

Hiding metadata from css is great.

I will add minimal alt text by hand

The other point was the height of the card

— Reply to this email directly, view it on GitHub https://github.com/peterfremlin/Disability-Debrief/issues/17#issuecomment-1677515412, or unsubscribe https://github.com/notifications/unsubscribe-auth/AKCXDVVCDPKYU7N7AY5OMZ3XVI5PNANCNFSM6AAAAAA3J2I3VY . You are receiving this because you commented.Message ID: @.***>

[peterfremlin]

Not sure if you were able to work on this?

[cathysarisky]

Looks like I missed it! Will add with the revisions.

[cathysarisky]

OK. Suppressing the metadata (author & site) and constraining image aspect ratio to 1.5 (which will stop them from being too short).

Do you ever use the captions, or would you like a bit of javascript that takes the caption and makes it the alt text for the image? Easy to do, and it'd make those embeds easier to create in Ghost without extra fuss.

[peterfremlin]

If javascript could pull the alt-text that would be great? I use the captions as captions

[cathysarisky]

It can't. The bookmark card comes from a page anywhere on the internet. It pulls the og:image or image from the meta data. There's no alt text available on the source page. I could grab something like the title or description, but the bookmark already has the title.

Should we put on the aria marking for presentation only? That'll cause screenreaders to just ignore it.

oh, here's an idea. If you can add the alt text in BOLD (highlight it and hit ctrl-B) in the figure caption, I can relocate ONLY the bolded text to the alt tag (and remove it from the caption). Do you currently bold anything in captions? Could use italicized instead. Best I've got. Let me know what you prefer.

[peterfremlin]

Ah good to know. I will put alt-text in by hand then.