Skip to content

Remove alt attribute in image_tag filter where unnecessary #2117

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 2 commits into from
Nov 21, 2022
Merged

Remove alt attribute in image_tag filter where unnecessary #2117

merged 2 commits into from
Nov 21, 2022

Conversation

@ludoboludo
Copy link
Contributor

@ludoboludo ludoboludo commented Nov 10, 2022 •
edited
Loading

PR Summary:

It was noticed that some images aren't receiving an alt attribute even when the image doesn't have one.
We usually defaulted to an empty alt='' in the past to prevent screen readers from reading the file name when going through an image. That wasn't the default behaviour of the image_tag filter but that should be changing soon.

In the mean time, we can remove the alt attribute where it's referencing the image.alt as it automatically added by the filter (docs with details on this).

Why are these changes introduced?

The filter automatically takes care of setting up the alt attribute on images. So I'm removing the code where we manually added that attribute.

What approach did you take?

I scanned through our theme file for the use of alt: and confirmed where I could remove the alt parameter from the filter.

Other considerations

Decision log

# Decision Alternatives Rationale Downsides
1

Visual impact on existing themes

No visual impact, but an impact for screen readers. As they currently would read out the file names when they shouldn't

Testing steps/scenarios

  • Use Safari and Voice over to test some of templates/sections edited in this PR and confirm that the alt is set properly on the images. That the files aren't being read if none has been added.

Demo links

Checklist

@ludoboludo ludoboludo self-assigned this Nov 10, 2022
@ludoboludo ludoboludo changed the title Add fallback to alt attribute where image_tag filter is used Remove alt attribute in image_tag filter where unnecessary Nov 14, 2022
@andrewetchen andrewetchen self-requested a review November 14, 2022 22:32
andrewetchen
andrewetchen approved these changes Nov 21, 2022
View reviewed changes
Copy link
Contributor

@andrewetchen andrewetchen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I actually looked at this a few days ago. This looks good to me!

@ludoboludo ludoboludo merged commit 2f9b9f3 into main Nov 21, 2022
@ludoboludo ludoboludo deleted the missing-alt-a11y branch November 21, 2022 20:44
Rabter1 added a commit to Rabter1/dawn-icletta that referenced this pull request Nov 23, 2022
@Rabter1
Squashed commit of the following:
2592c41 
commit dc81806
Author: Ken Meleta <[email protected]>
Date:   Tue Nov 22 13:32:46 2022 -0700

    Add media sizing settings to featured product (Shopify#2114)

commit 9875aea
Author: Ken Meleta <[email protected]>
Date:   Tue Nov 22 13:17:55 2022 -0700

    Adjust constrain media values for quick add modal (Shopify#2113)

    * Adjust constrain media values for quickadd

    * Adjust offset logic

    * Minor formatting fix

commit 2eb8bf6
Author: Ludo <[email protected]>
Date:   Tue Nov 22 11:50:50 2022 -0500

    Add fixed sizes for some images to prevent errors (Shopify#2087)

    * remove the mention of sizes where unnecessary

    * remove another instance

    * add fixed size to the images in structured data

    * adjust size to 1920

    * edit logo size in structured data

    * remove conditional info

    * change value to match other logo size values

commit 2f9b9f3
Author: Ludo <[email protected]>
Date:   Mon Nov 21 15:44:24 2022 -0500

    Remove alt attribute in image_tag filter where unnecessary  (Shopify#2117)

    * Add fallback to alt attribute where image_tag filter is used

    * remove unnecessary use of alt attribute in image_tag filter

commit 251e5d9
Author: Ludo <[email protected]>
Date:   Mon Nov 21 12:18:44 2022 -0500

    Move share button into a snippet (Shopify#2123)

    * Move share button into a snippet

    * change the property name to context and add details in snippet

    * address review comments

    * edit props names and description

    * Address reviewers comment. Remove unused prop and edit existing ID

    * move script at the top

commit 539af27
Author: Eugene Kasimov <[email protected]>
Date:   Mon Nov 21 09:01:58 2022 -0800

    Prettier liquid files snippets. (Shopify#2115)

commit 503fdf8
Author: Eugene Kasimov <[email protected]>
Date:   Thu Nov 17 08:51:21 2022 -0800

    Remove noscript css import for product recommendations (Shopify#2101)

commit b2b01fd
Author: Eugene Kasimov <[email protected]>
Date:   Thu Nov 17 08:50:33 2022 -0800

    Change variables names (Shopify#2055)

commit cf05d0d
Author: Francisca Calabria Rubio <[email protected]>
Date:   Thu Nov 17 16:50:55 2022 +0100

    Select text input content on trapFocus (Shopify#2106)

    * Select text input content on trapFocus

    * PR fix

commit b86d1f3
Author: Ken Meleta <[email protected]>
Date:   Thu Nov 17 08:50:43 2022 -0700

    Change thumbnail media fit to "fill" by default (Shopify#2044)

    * Change thumbnail media fit to cover by default

    * Simplify and cleanup thumbnail fit approach

commit 8ab8e61
Author: Ludo <[email protected]>
Date:   Thu Nov 17 10:50:28 2022 -0500

    Tweak the image_url size to be the max value where necessary (Shopify#2110)

    * Tweak the image_url size to be the max value where necessary

    * fix sizing in the header.

commit c337301
Author: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com>
Date:   Thu Nov 17 10:49:52 2022 -0500

    Update 1 translation file (Shopify#2130)

    Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com>

commit bc8f433
Author: Ken Meleta <[email protected]>
Date:   Thu Nov 17 08:49:10 2022 -0700

    Add constrain media and media fit settings to product page (Shopify#2052)

    * Add constrain height setting

    * Add constrain scaling functionality

    * Add media fit setting and functionality

    * Quick add override and typo fixes

    * Update setting language and code cosmetics

    * Update 8 translation files

    * Update 5 translation files

    * Update 3 translation files

    * Update 3 translation files

    * Update 1 translation file

    * Add comment

    Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com>
phapsidesGT pushed a commit to Gravytrain-UK/gt-shopify-dawn-theme that referenced this pull request Sep 3, 2024
@ludoboludo
Remove alt attribute in image_tag filter where unnecessary (Shopify#2117
ad070b0 
)

* Add fallback to alt attribute where image_tag filter is used

* remove unnecessary use of alt attribute in image_tag filter
lost-end-found pushed a commit to lostendfound/librairiesanstitre-shopify that referenced this pull request Oct 8, 2025
@ludoboludo
Remove alt attribute in image_tag filter where unnecessary (Shopify#2117
b6436b4 
)

* Add fallback to alt attribute where image_tag filter is used

* remove unnecessary use of alt attribute in image_tag filter
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@dan-menard dan-menard dan-menard approved these changes

+1 more reviewer

@andrewetchen andrewetchen andrewetchen approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

@ludoboludo ludoboludo

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@ludoboludo @dan-menard @andrewetchen