[Bug 41639] New: OPAC cover images use non-descriptive alt text
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41639 Bug ID: 41639 Summary: OPAC cover images use non-descriptive alt text Initiative type: --- Sponsorship --- status: Product: Koha Version: Main Hardware: All OS: All Status: NEW Keywords: accessibility Severity: normal Priority: P5 - low Component: Accessibility Assignee: Laura.escamilla@bywatersolutions.com Reporter: Laura.escamilla@bywatersolutions.com QA Contact: testopia@bugs.koha-community.org CC: martin.renvoize@openfifth.co.uk, matt.blenkinsop@openfifth.co.uk, oleonard@myacpl.org Cover images displayed in the Koha OPAC currently use generic alt text values such as “Amazon Cover Image” and “Local Cover Image.” These values do not provide a meaningful text alternative for screen reader users and do not meet WCAG 2.2 AA Success Criterion 1.1.1 (Non-text Content). Because OPAC cover images are functional (they are clickable and serve as a visual identifier for bibliographic records), they cannot be considered decorative and therefore require a descriptive text alternative. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41639 Laura Escamilla <Laura.escamilla@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|NEW |ASSIGNED -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41639 --- Comment #1 from Laura Escamilla <Laura.escamilla@bywatersolutions.com> --- Created attachment 191537 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=191537&action=edit Bug 41639: Improve cover image alt text for WCAG 2.2 compliance Steps to Test 1. Enable at least one cover image provider: * Amazon cover images * Syndetics * Google Jackets * Open Library * Coce * Local cover images * Custom cover images 2. Go to the Staff Intranet search results page and locate a bibliographic record with a visible cover image. 3. Inspect the cover image element in the browser developer tools. 4. Observe that the <img> element (or injected cover element in the case of Google Jackets / Open Library / Coce) uses a generic or non-descriptive alternative text, such as: * alt="Amazon cover image" * alt="Local cover image" * alt="Cover from Syndetics" * or no meaningful accessible name for injected images (Google Jackets, Open Library, Coce) 5. Click into the bibliographic record detail page in the Staff Intranet. 6. Inspect the cover image again and observe the same behavior. 7. Test for all cover image providers. 8. Repeat steps for the OPAC. 9. Apply the patch. 10. Repeat steps 1 - 8. 11. Confirm that the alt text (or accessible name) is now dynamically generated using bibliographic metadata, for example: * alt="Cover of Complete Joe Pass by Joe Pass" 12. Everything is now accessibility verified, WCAG 2.2 SC 1.1.1 compliant, and with no regression across providers. Sign off and have an amazing day! :D -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41639 Laura Escamilla <Laura.escamilla@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|ASSIGNED |Needs Signoff -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41639 Avery Campbell (Butte County Library (CA)) <acampbell@buttecounty.ca.gov> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |acampbell@buttecounty.ca.go | |v --- Comment #2 from Avery Campbell (Butte County Library (CA)) <acampbell@buttecounty.ca.gov> --- Thanks Laura! This looks like it should work for most everything. We do have images of items that aren't books and thus don't have a 'cover'. For example we may have some instances of "Cover of [iPad] by [Apple Inc.]", or "Cover of [hand trowel] by [NULL]". Maybe for a future patch, we can have a required alt text field when we upload local images where we could add the required alt text to the image -- these non-book/DVD items don't have ISBNs to pull images from 3rd-party sources. That being said I think even if we end up having everything described as “Cover of [Title] by [Author],” we can make adjustments after the fact through further patches. If anything, it's something to think about in the future. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41639 Aleisha Amohia <aleisha@catalyst.net.nz> changed: What |Removed |Added ---------------------------------------------------------------------------- Keywords| |Academy CC| |aleisha@catalyst.net.nz -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41639 Raguram Gopinath <aviatorgaming309@gmail.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Needs Signoff |Signed Off -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41639 Raguram Gopinath <aviatorgaming309@gmail.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #191537|0 |1 is obsolete| | --- Comment #3 from Raguram Gopinath <aviatorgaming309@gmail.com> --- Created attachment 191827 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=191827&action=edit Bug 41639: Improve cover image alt text for WCAG 2.2 compliance Steps to Test 1. Enable at least one cover image provider: * Amazon cover images * Syndetics * Google Jackets * Open Library * Coce * Local cover images * Custom cover images 2. Go to the Staff Intranet search results page and locate a bibliographic record with a visible cover image. 3. Inspect the cover image element in the browser developer tools. 4. Observe that the <img> element (or injected cover element in the case of Google Jackets / Open Library / Coce) uses a generic or non-descriptive alternative text, such as: * alt="Amazon cover image" * alt="Local cover image" * alt="Cover from Syndetics" * or no meaningful accessible name for injected images (Google Jackets, Open Library, Coce) 5. Click into the bibliographic record detail page in the Staff Intranet. 6. Inspect the cover image again and observe the same behavior. 7. Test for all cover image providers. 8. Repeat steps for the OPAC. 9. Apply the patch. 10. Repeat steps 1 - 8. 11. Confirm that the alt text (or accessible name) is now dynamically generated using bibliographic metadata, for example: * alt="Cover of Complete Joe Pass by Joe Pass" 12. Everything is now accessibility verified, WCAG 2.2 SC 1.1.1 compliant, and with no regression across providers. Sign off and have an amazing day! :D Signed-off-by: Raguram Gopinath <aviatorgaming309@gmail.com> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41639 Irene <i.tortorella@arts.ac.uk> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |i.tortorella@arts.ac.uk -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41639 Katrin Fischer <katrin.fischer@bsz-bw.de> changed: What |Removed |Added ---------------------------------------------------------------------------- QA Contact|testopia@bugs.koha-communit |katrin.fischer@bsz-bw.de |y.org | -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41639 Katrin Fischer <katrin.fischer@bsz-bw.de> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Signed Off |Failed QA --- Comment #4 from Katrin Fischer <katrin.fischer@bsz-bw.de> --- Fails QA checks - please add the missing filters! Result: [PASS] koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/detail.tt [FAIL] koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/results.tt FAIL filters missing_filter at line 615 ( alt="Cover of [% cover_title %][% IF cover_author %]by [% cover_author %][% END %]") missing_filter at line 615 ( alt="Cover of [% cover_title %][% IF cover_author %]by [% cover_author %][% END %]") missing_filter at line 627 ( alt="Cover of [% cover_title %][% IF cover_author %]by [% cover_author %][% END %]") missing_filter at line 627 ( alt="Cover of [% cover_title %][% IF cover_author %]by [% cover_author %][% END %]") missing_filter at line 640 ( alt="Cover of [% cover_title %][% IF cover_author %]by [% cover_author %][% END %]") missing_filter at line 640 ( alt="Cover of [% cover_title %][% IF cover_author %]by [% cover_author %][% END %]") missing_filter at line 659 ( aria-label="Cover of [% cover_title %][% IF cover_author %]by [% cover_author %][% END %]") missing_filter at line 659 ( aria-label="Cover of [% cover_title %][% IF cover_author %]by [% cover_author %][% END %]") missing_filter at line 672 ( <img alt="Custom cover of [% cover_title %][% IF cover_author %]by [% cover_author %][% END %]" src="[% custom_cover_image_url | url %]" />) missing_filter at line 672 ( <img alt="Custom cover of [% cover_title %][% IF cover_author %]by [% cover_author %][% END %]" src="[% custom_cover_image_url | url %]" />) [FAIL] koha-tmpl/opac-tmpl/bootstrap/en/includes/cover-images.inc FAIL filters missing_filter at line 25 ( <img src="/cgi-bin/koha/opac-image.pl?thumbnail=1&biblionumber=[% SEARCH_RESULT.biblionumber | uri %]" alt="Cover of [% cover_title %][% IF cover_author %]by [% cover_author %][% END %]" />) missing_filter at line 25 ( <img src="/cgi-bin/koha/opac-image.pl?thumbnail=1&biblionumber=[% SEARCH_RESULT.biblionumber | uri %]" alt="Cover of [% cover_title %][% IF cover_author %]by [% cover_author %][% END %]" />) missing_filter at line 36 ( alt="Cover of [% cover_title %][% IF cover_author %]by [% cover_author %][% END %]") missing_filter at line 36 ( alt="Cover of [% cover_title %][% IF cover_author %]by [% cover_author %][% END %]") missing_filter at line 54 ( alt="Cover of [% cover_title %][% IF cover_author %]by [% cover_author %][% END %]") missing_filter at line 54 ( alt="Cover of [% cover_title %][% IF cover_author %]by [% cover_author %][% END %]") missing_filter at line 119 ( <img id="custom-thumbnail-[% SEARCH_RESULT.biblionumber | html %]" alt="Cover of [% cover_title %][% IF cover_author %]by [% cover_author %][% END %]" src="[% custom_cover_image_url | url %]" />) missing_filter at line 119 ( <img id="custom-thumbnail-[% SEARCH_RESULT.biblionumber | html %]" alt="Cover of [% cover_title %][% IF cover_author %]by [% cover_author %][% END %]" src="[% custom_cover_image_url | url %]" />) [PASS] koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-detail.tt Processing additional checks PASS! -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41639 Laura Escamilla <Laura.escamilla@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Failed QA |Signed Off -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41639 --- Comment #5 from Laura Escamilla <Laura.escamilla@bywatersolutions.com> --- Created attachment 196680 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=196680&action=edit Bug 41639: Fix OPAC accessibility issues (labels and cover image alt text) Fix improper use of <label> elements in opac-memberentry.tt where no associated form controls exist. Update cover image alt and aria-label attributes to: - include proper |html filters (QA compliance) - avoid awkward formatting when title or author is missing - improve overall accessibility and WCAG alignment" -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41639 Laura Escamilla <Laura.escamilla@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Signed Off |ASSIGNED -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41639 Laura Escamilla <Laura.escamilla@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #191827|0 |1 is obsolete| | -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41639 --- Comment #6 from Laura Escamilla <Laura.escamilla@bywatersolutions.com> --- Created attachment 196681 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=196681&action=edit Bug 41639: Improve cover image alt text for WCAG 2.2 compliance - Resolve conflicts with current main Steps to Test 1. Enable at least one cover image provider: * Amazon cover images * Syndetics * Google Jackets * Open Library * Coce * Local cover images * Custom cover images 2. Go to the Staff Intranet search results page and locate a bibliographic record with a visible cover image. 3. Inspect the cover image element in the browser developer tools. 4. Observe that the <img> element (or injected cover element in the case of Google Jackets / Open Library / Coce) uses a generic or non-descriptive alternative text, such as: * alt="Amazon cover image" * alt="Local cover image" * alt="Cover from Syndetics" * or no meaningful accessible name for injected images (Google Jackets, Open Library, Coce) 5. Click into the bibliographic record detail page in the Staff Intranet. 6. Inspect the cover image again and observe the same behavior. 7. Test for all cover image providers. 8. Repeat steps for the OPAC. 9. Apply the patch. 10. Repeat steps 1 - 8. 11. Confirm that the alt text (or accessible name) is now dynamically generated using bibliographic metadata, for example: * alt="Cover of Complete Joe Pass by Joe Pass" 12. Everything is now accessibility verified, WCAG 2.2 SC 1.1.1 compliant, and with no regression across providers. Sign off and have an amazing day! :D Signed-off-by: Raguram Gopinath <aviatorgaming309@gmail.com> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41639 Laura Escamilla <Laura.escamilla@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #196680|0 |1 is obsolete| | -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41639 Laura Escamilla <Laura.escamilla@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|ASSIGNED |Signed Off -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41639 Laura Escamilla <Laura.escamilla@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #196681|0 |1 is obsolete| | -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41639 --- Comment #7 from Laura Escamilla <Laura.escamilla@bywatersolutions.com> --- Created attachment 196682 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=196682&action=edit Bug 41639: Improve cover image alt text for WCAG 2.2 compliance - Resolved filter issues - Resolve conflicts with current main Steps to Test 1. Enable at least one cover image provider: * Amazon cover images * Syndetics * Google Jackets * Open Library * Coce * Local cover images * Custom cover images 2. Go to the Staff Intranet search results page and locate a bibliographic record with a visible cover image. 3. Inspect the cover image element in the browser developer tools. 4. Observe that the <img> element (or injected cover element in the case of Google Jackets / Open Library / Coce) uses a generic or non-descriptive alternative text, such as: * alt="Amazon cover image" * alt="Local cover image" * alt="Cover from Syndetics" * or no meaningful accessible name for injected images (Google Jackets, Open Library, Coce) 5. Click into the bibliographic record detail page in the Staff Intranet. 6. Inspect the cover image again and observe the same behavior. 7. Test for all cover image providers. 8. Repeat steps for the OPAC. 9. Apply the patch. 10. Repeat steps 1 - 8. 11. Confirm that the alt text (or accessible name) is now dynamically generated using bibliographic metadata, for example: * alt="Cover of Complete Joe Pass by Joe Pass" 12. Everything is now accessibility verified, WCAG 2.2 SC 1.1.1 compliant, and with no regression across providers. Sign off and have an amazing day! :D Signed-off-by: Raguram Gopinath <aviatorgaming309@gmail.com> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41639 Raina <raina@flo.org> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |raina@flo.org -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41639 Lucas Gass (lukeg) <lucas@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Signed Off |Failed QA CC| |lucas@bywatersolutions.com --- Comment #8 from Lucas Gass (lukeg) <lucas@bywatersolutions.com> --- In most these cases the "of" or "by" parts of the template need spacing on both sides. Or else we end up with instances of: Coverof [TILE] and Coverof [TITLE]by -- You are receiving this mail because: You are watching all bug changes.
participants (1)
-
bugzilla-daemon＠bugs.koha-community.org