🐛 Fix alt text tags

[ShanaLMoore]

related to:

• 🦄 Spike: Use Alternative Text as entered in appearance tabs #43
• https://github.com/samvera/hyku/pull/1813/files
• 📎 SOW: Accessibility #393

Summary

Per the accessibility audit, alt text needs to be appropriately used and applied. We discovered a few issues after using a screen reading tool (mac VoiceOver. Extension):

• Logo Image: Update to use an alt attribute.

• Banner Image:
  • N/A. Screen readers typically do not read the alt text of background images because they are considered decorative and not essential for conveying information. The alt attribute is specifically intended for images inserted within the HTML content. It may be misleading to allow users to set it in the dashboard/appearance section. It currently sets the title attribute.
• Directory Image: TBD
  • Not sure where or if it's being used
  • This feature hasn't been contributed back to hyku yet. I will make an issue against hyku. It's being used in Pals

• Default Work Image:
  a. Thumbnail: Missing alt text

b. Default Image: Not displaying after being set

• Default Collection Image:
  a. Thumbnail: alt tag should be dynamic

b. Default Image: alt tag is empty and should be dynamic

Note: Default Images are used when the user creates a work without a fileset, or a collection without an image.

Acceptance Criteria

• If an alt text is set, it should be used. Inspect elements to confirm the alt tag is present and set to the appropriate values.

Screenshots or Video

Testing Instructions

It may be best to consult Diem who originally performed the accessibility audit and took note of failures. Retest this using the rubric she had.

ref: Report.for.https___test.hykucommons.org_.pdf

Otherwise...

Set all of the options in the appearance setting.
Confirm the alt tags are in the inspect elements in all of the places. Reference the bullet points in the summary section for guidance.

Notes

• Contribute alt text work back to hyku #474

Issue filed against hyku for missing directory image partial: samvera/hyku#1967

TODO:

• AllinsonFlex needs an alt tag added to https://github.com/samvera-labs/allinson_flex/blob/main/app/views/hyrax/my/works/_list_works.html.erb#L12C10-L12C10 .
  • Compare it to hyrax that included the alt tag, however it needs to be dynamic to pull in the alt text that we set it to in hyku. default_work_image_text
• IIIFPrint needs an update to representative_media. It currently references a default image when it should pull in the image we set it to in hyku. Default_work_image.
  • The alt text should be updated to be dynamic. pull in what is set in hyku.
• Hyku needs a partial override/copy of point number 2 to override hyrax proper which just uses the default image.
  • this will get updated when hyku updates iiif_print
• UTK media_display alt tag needs to dynamically pull in the settings from hyky. default_collection_image_text

[DiemBTran]

Needs further review:

tested on:

• Settings Appearance tab: https://qa.utk-hyku-staging.notch8.cloud/admin/appearance
• logo from dashboard test: https://qa.utk-hyku-staging.notch8.cloud/dashboard?locale=en
• logo and banner from homepage: https://qa.utk-hyku-staging.notch8.cloud/?locale=en
• default work icon: https://qa.utk-hyku-staging.notch8.cloud/dashboard/my/works?locale=en
• default collection icon: https://qa.utk-hyku-staging.notch8.cloud/dashboard/my/collections?locale=en

testing instructions:

• logo alt text is correct
  • from the home page, this is correct
  • from the dashboard, this is incorrect. should be alt attribute, not alt_text attribute
• banner alt text is correct
• directory alt text is correct
  • cannot be tested. N/A to UTK bc they don't have a directory splash page
• default collection image alt text is correct
  • alt text doesn't save properly
• default work image alt text is correct
  • alt text doesn't save properly

click to expand

[ShanaLMoore]

• logo alt text is correct
  • from the home page, this is correct
  • from the dashboard, this is incorrect. should be alt attribute, not alt_text attribute

• banner alt text is correct

• collection thumbnail has the incorrect alt value

• directory alt text is correct

  • cannot be tested. N/A to UTK bc they don't have a directory splash page (that is correct ✅ )

For the following two comments, if you only edit input field for alt text and click save, the form doesn't actually save. You. must re upload an image as well.

• default collection thumbnail image alt text is correct
  • alt text doesn't save properly
• default work thumbnail image alt text is correct
  • alt text doesn't save properly

[ShanaLMoore]

cc @kirkkwang fyi rework branch started: i43-alt-text-tag-followup

TODO:

track down and fix collection/work thumbnail alt texts per Diem's feedback ^^

[jillpe]

• logo alt text is correct

Screenshots

banner alt text is correct

Screenshots

Directory alt text is N/A for UTK because they do not use this feature.

• default collection image alt text is correct

Screenshots

See Shana's comment below for more details

• default work image alt text is correct

Screenshots

[ShanaLMoore]

QA Results: ❌

After meeting with Jill's assessment, this ticket ...

needs rework because when i set the alt text for the collection splash page banner image, it set the title element instead of an alt tag. Images should have an alt tag for accessibility reasons.

The user must set this by editing a collection from the admin dashboard's branding tab. They would upload an image and set the alt text there too. TODO: For rework, confirm that setting the logo also sets the alt element and not just the title of the image.

[kirkkwang]

@ShanaLMoore Since this a div tag i don't expect it to have an alt text. Perhaps the setting of it should reflect that it is setting the title?

[ShanaLMoore]

OHHH yea you're right! @kirkkwang 🙃

But should it be a div tag? 🤔 I agree the setting label is misleading if it should be.

What about the collection logo?

If that's good too then this passes cc @jillpe

[ShanaLMoore]

OHHH yea you're right! @kirkkwang 🙃

But should it be a div tag? 🤔 I agree the setting label is misleading if it should be.

What about the collection logo?

If that's good too then this passes cc @jillpe

We're good

the logo has an alt tag and an img element

[markpbaggett]

Looks good to me. Bumping.