Make "Before" & "After" text on image an actual text

[marvieqa]

Description

The text "Before" & "After" on an image found in the "Transform a Property" page is part of the image. We should make this text an actual text element so that users who are using assistive tools can adjust according to the desired visual presentation, such as changing font size, foreground/background color, line/character spacing or alignment.

Recommendation

• Put an actual text "Before" / "After" on top or bottom of the appropriate image.

[JT0Y]

The lift here seems simple enough. Is it okay to add these text elements before/after the current image? I have a couple concerns:

• This asset is one image and not two, so the two text fields would be in reference to the same image
• The current before & after text is part of the image itself, so the text will be repeated twice visually

[marvieqa]

@JT0Y thanks for picking this up. One option I could think of is to add a caption at the bottom of the photo that depicts these 2 images, like "an example of a Philadelphia lot before and after cleanup" - substituting the image text. Would this work with our current design?

cc @bacitracin @thansidwell ?

[bacitracin]

@marvieqa @JT0Y

Right now the image has some problems on mobile. For example, "after" is clipped on narrow screens.

I think it makes sense to crop the image to remove the bottom sliver that includes the "before" and "after" text, and add a visible caption that appears either before or after the image. After that the image's alt text needs updating.

Currently the alt text is "A Philadelphia lot before a clean up and the same lot, filled with trees and greenery after a clean up." That would be pretty repetitive once we add the caption. Instead I'd remove the alt text, add an id to the new caption, and have aria-labelledby point to the new caption id. See example 1 here - https://www.w3.org/WAI/GL/wiki/Using_aria-labelledby_to_provide_a_text_alternative_for_non-text_content

[marvieqa]

@bacitracin 100% agree! Maybe we can incorporate the descriptiveness of the current alt text to the caption: "An example of a Philadelphia lot before cleanup, and transformed with trees and greenery after cleanup.". Something to this effect.

[zhenbright]

Can someone assign me this?

[bacitracin]

@zhenbright Assigned! Marvie and I have made a few comments, but basically the approach we like is:

1. Crop out the text at the bottom of the image
2. Add a visible caption below the image that says "An example of a Philadelphia lot before cleanup, and transformed with trees and greenery after cleanup". Add an id to this element.
3. Remove the alt text "An example of a Philadelphia lot before cleanup, and transformed with trees and greenery after cleanup"
4. Add aria-labelledby where the alt text used to be to point to the id of the new caption.

[zhenbright]

I have done above things and you can see in my screen. Please let me know if it is okay. If it is okay then could tell me where I should push it - main branch or my own branch?

[bacitracin]

Hey @zhenbright - your own branch. Check out the instructions here for how to format your PR, they'll be much clearer than me trying to explain. https://github.com/CodeForPhilly/clean-and-green-philly/blob/main/docs/CONTRIBUTING.md#quickstart