Test Images for Accessibility

[bpmcneilly]

Help us make sure all of the Open Library images are accessible to our users!

For this task, we want you to take a look through the images on Open Library & make sure they have appropriate alternatives for screen reader users.

Steps

1. Go through each of the pages under the 'Pages to Test' heading
   1. If you can't take on every page, no worries! Just add a comment here & let us know what pages you're reviewing ☺️
2. Every time you encounter an image on a page, look at the underlying HTML code
   1. If the image is an inline img element:
      1. Make sure the element has an alt attribute
      2. If the image adds meaning to the page, make sure the alt value represents the meaning the image adds
      3. If the image is purely decorative (e.g. if it adds a background color or shading, or does not supply "content") make sure the alt attribute is null (i.e. alt="")
   2. If the image is implemented with CSS (e.g. through the background-image property):
      1. Make sure the image is purely decorative
3. If any of the steps above do not pass, please file a bug (or better yet a PR!) related to this image
   1. General bug / PR formatting is available on the main Accessibility Issue: Site Accessibility Review & Implementation #4202
   2. For image issues / PRs, make sure you include what the current alternative is (if any) & what you think the alternative should be!

Resources

• If you're asking yourself, "Is this image decorative?" or "Does this alt attribute really represent what this image shows visually?", take a look at this article from WebAIM about Alternative Text
• If the image you're investigating is implemented in another way (e.g. an SVG icon, something implemented with the CSS content property, or something more elusive) feel free to flag us if you know how alternatives work for this image type. Otherwise, reach out to the accessibility contact!
  • Contact info is available on the main Accessibility Issue: Site Accessibility Review & Implementation #4202

Pages to test

• Test Home Page Images For Accessibility #4630 - Home
• Testing Subjects Page Images for Accessibility #4631 - Subjects
• Testing Individual Subject Page Images for Accessibility #4632 - Individual Subject
• Testing Lists Page Images for Accessibility #4633 - Lists
• Testing Individual List Images for Accessibility #4634 - Individual List
• Testing Advanced Search Page Images for Accessibility #4635 - Advanced Search
• Testing Search Results Page Images for Accessibility #4636 - Search Results
• Testing Search Inside Results Page Images for Accessibility #4637 - Search Inside Results
• Testing Book Page Images for Accessibility #4638 - Book Page
• Testing Help Page Images for Accessibility #4639 - Help Page
• Testing Library Explorer Images for Accessibility #4640 - Library Explorer
• Testing Log In Page Images for Accessibility #4641 - Log In
• Testing Loans Page Images for Accessibility #4642 - Loans
• Testing Want To Read Page Images for Accessibility #4643 - Want To Read
• Testing Want To Read Stats Page Images for Accessibility #4644 - Want To Read 'Stats'
• Testing Privacy Settings Page Images for Accessibility #4645 - Privacy Settings
• Testing Edit Profile Page Images for Accessibility #4646 - Edit Profile
• Testing Report a Problem Page Images for Accessibility #4648 - Report a Problem
• Testing Recent Changes Page Images for Accessibility #4649 - Recent Changes
• Testing Add A Book Page Images for Accessibility #4647 - Add a Book

[Sabreen-Parveen]

@bpmcneilly I would like to work on this issue.

[nynaalekhya]

@bpmcneilly Can I work on this issue

[SaravgiYash]

@bpmcneilly I would like to work on Lists Page

@Sabreen-Parveen This particular issue involves many pages you can select one page at a time and start working on that particular page. Other contributors can also do the same. So that others don't get alienated from contributing. :)

[Sabreen-Parveen]

I have noticed that the footer Internet Archive logo, has an alt attribute and it's null, Should I change it to Internet Archive logo?

[Sabreen-Parveen]

I have checked the login page and Subjects Page, we do not need to make any changes in them.

[nynaalekhya]

@bpmcneilly I would like to work on Book page and Search Results page

[bpmcneilly]

@Yashs911 Let me know when the lists page is done!
@Sabreen-Parveen Thanks for those two confirmations on the login & subjects page! Let me know if there are any others you plan on taking a look at.
Regarding the footer, I think this is an instance where a null attribute is appropriate - the logo is there, but without the logo we get all the same information because the text after reads "Open Library is an initiative of the Internet Archive...".
@nynaalekhya Awesome, let me know when you've taken a look & if there are any issues!

I think our checklist is all up to date with all of our progress so far!

[Sabreen-Parveen]

Want to read , Report a problem pages are good to go, found no issues on them.

[dwaipayan05]

I'd be reviewing Recent Changes

Edit :- Recent Changes seems fine, no changes required.

[SaravgiYash]

@bpmcneilly I would like to work on Lists Page

@bpmcneilly I went through the list page and I noticed that the cover image for a list is a book cover of the book present in that list but the alt attribute says alt="Cover of: integrity books(list name)" which is technically wrong.

[bpmcneilly]

Hey everyone, I converted the list to a series of tasks so we can keep discussions relevant to only a single page there, rather than clutter this larger issue. Feel free to assign yourselves to any of the other pages you're currently testing, and any questions you have have!

[melissa-tan10]

I can work on Testing Library Explorer Images for Accessibility #4640

[github-actions]

Assignees removed automatically after 14 days.