Alt text, description field, and visual impairment

  • Unknown's avatar
    chloebaggins · Member ·

    Hello, I’m drawing online comics where the text is embedded in the image. To help visually impaired I want to include the dialogue, like in the style of a play. Ex. Person 1: Hear me now! Person 2: Blah blah.
    The WP help file on alt text is geared towards images, rather than dialogue. Alt text, the article indicates, is meant to be short, whereas my dialogue is not.

    Currently my images have captions and the dialogue is in the Description field (and I don’t know if this is even helpful at all and would appreciate knowing the distinction between description and Alt text). I tested my comic (9 panels) with a screen reader (and yeah, I know they aren’t all created equal) and it jumped right over all the images.

    What’s the best way to address this issue so as not to overwhelm my database, while concurrently building accessible comics?

    Thank you!

    Correct account: Yes

    The blog I need help with is: (visible only to logged in users)

  • kokkieh · Staff ·

    Hi there,

    Text you add in the Description field gets added to the image HTML as a title attribute, and doesn’t really do anything for accessibility – text added as a title attribute appears as a tooltip when someone hovers their mouse over the image, but isn’t read by screen readers. Most screen readers just look at the alt attribute, and at visible content, i.e. the caption.

    I found a good explanation of this here:

    https://www.a11yproject.com/posts/title-attributes/

    So you’ll either need to add your dialogue to the Alt Text or to the caption, or alternatively include it somewhere in the body of the post/page itself (you can use the <details><summary> HTML tags to hide the dialogue so it’s not immediately visible on your page, but where both sighted and non-sighted visitors can find it. If it were my site, I’d go with that option.

    You use those tags by adding this in a custom HTML block:

    <details>
<summary>Click here for a text version of the comic</summary>
Your dialogue here - you can wrap it in <p></p> tags, or even a HTML list if you want.
</details>

    The line in the summary tag will be visible on the screen, with the rest only appearing once you click on that.

    https://www.geeksforgeeks.org/html-5-summary-tag/

    Let me know if you have any questions about this.

    Just a final note: your site isn’t hosted on WordPress.com, but just connected here via the Jetpack plugin.

    Your site is made with the open source WordPress software, and hosted at another provider. The best place for help with your version of WordPress is the WordPress.org community forums where that software is made:

    https://wordpress.org/support/forums/

  • The topic ‘Alt text, description field, and visual impairment’ is closed to new replies.