Are book covers "Decorative Images" for accessibility purposes when they go to the same place as the next link?

[RayBB]

Question

Are book covers "Decorative Images" for accessibility purposes when they go to the same place as the next link?

Additional context

I'm working on #4940 as part of the bigger accessibility work here #4897. I realized that perhaps the focus indicator doesn't need to be fixed since we may not need it at all. I first thought this because eBay and Amazon do not focus on pictures of items when tabbing though search results/lists. I later discovered Walmart does the opposite in that they focus on just the image but not the title. This lead me to do some searching about why and I learned about decorative images.

According to W3:

Decorative images don’t add information to the content of a page. For example, the information provided by the image might already be given using adjacent text

It seems to me, that for openlibrary there are many cases where the book cover is just a decorative image since the next link right after the cover is pointing to the same place and is the title of the book.
These include:

• The list page (https://openlibrary.org/people/mekBot/lists/OL103955L/Childhood_Favorites)
• The search results page (https://openlibrary.org/search?q=accessibility)
• The subjects lists widget (https://openlibrary.org/subjects/historical_fiction)
• The lists list on a profile page (https://openlibrary.org/people/mekBot)
• The lists list page (https://openlibrary.org/people/mekBot/lists)
• Please help me find the rest

Examples that would be excluded from this issue are like on carousels. In that case the book cover takes you to the works page and the borrow button takes you to the borrow page.

Issue resolution criteria

When the community decides if such images are decorative.

Please share your thoughts.

Stakeholders

@bpmcneilly

[Yashs911]

@RayBB I don't know if this is useful but according to this comment #4633 (comment)
We combined the links for cover and text (Lists Page). But I don't think that solution will work for all the pages.

[RayBB]

@Yashs911 this is very helpful context thank you for linking. I'm not sure if there are any major advantages to combining to one link vs just making the tabbing skip over covers. Perhaps it depends on the case. I look forward to hearing what others think.

[Yashs911]

@RayBB I would suggest you make separate issue/PR for each page because for example:
Combining links for the Lists Page didn't change the design.
But for Subjects Page:

[RayBB]

@bpmcneilly I'm trying to handle some of the more complicated cases first such as list and search result.

I looked at the example Yash mentioned about the lists page and how it works using float: left. That seems to work fine for that example. I'm currently struggling to get this working on something like the list or search result page.

Two problems that come up right away:

• These pages are responsive and when looking at them on mobile the image gets bigger and goes above the title, so using float left beaks this.
  • This could possibly be worked around by using mobile specific css that causes the title to go to the next line. I'm not sure exactly what this would look like.
• If a title is quite long, then the title/author/edition/etc all wrap around and go below the image as well to the right of it. This is quite visually unpleasant.
  • There may be a way to address this with CSS but it will likely add a lot of complexity.

In both of the above issues, I actually don't know how to fix them with css. I could dig into it but I suspect there isn't an easy solution going that route.

In the community call we discussed that the other approach of basically hiding the image link from the screen reader but not changing the visual appearance. I think that we said we should try to take a similar approach to what has been done elsewhere on the site. However, given the difficulties with the single anchor approach I want try the option of hiding the image link from screen readers.

That being said, I'm not sure how to hide the link from screen readers.
I did some searching and the best I could come up with is using role="presentation" and aria-hidden="true", and tabindex="-1". That seems like maybe it is too simple and may not work in some case?

Edit: Link to relevant file

openlibrary/openlibrary/templates/type/list/view.html

Lines 196 to 208 in eddaa12

	<span class="bookcover">
	<a href="$seed.url">
	<img src="$cover_url" alt="$seed.title"/>
	</a>
	</span>
	<span class="seed-key hidden">$seed.key</span>
	<div class="details">
	<div class="resultTitle">
	$if seed.type in ['edition', 'work']:
	$ doc = seed.document
	<h3 class="booktitle">
	<a href="$seed.url" class="results">$seed.title</a>
	</h3>