v2.ocaml.org icon indicating copy to clipboard operation
v2.ocaml.org copied to clipboard

Improved accessibility on the Books page

Open Goodiec opened this issue 3 years ago • 1 comments

Issue Description

Noticed that some images on the OCaml website didn't have the alt attribute so I measured its accessibility using Lighthouse and I saw that images not having the alt attribute affected the accessibility score. Having an alt text provides screen readers and search engines with a textual description of what is on your page. Please include a summary of the issue.

Fixes # (issue) Fixes #1439

Changes Made

Added alt attribute with appropriate descriptions for the images, added alt attributes with an empty value for decorative images or images that have texts that already describe them or are just on the page for visual purposes, for example on the books page, with the name of the book above the image and an adjacent description of the book, there is no need to add an additional description in the alt attribute to avoid confusing the readers. With an empty alt, screen readers will ignore it, putting the empty alt is better than no alt attribute at all because some screen readers will announce the file name of the image when the alt attribute is not provided. One more thing that happens with adding alt attributes is that they are displayed in case images fail to load for one reason or the other which is better than having the broken image icon on the page. For images with empty alt, nothing gets displayed as shown in the after image.

Please describe the changes that you made. In addition to adding the alt attribute to images, I am also correcting typos and links on the affected pages.

Before alt-1

After alt-2

  • Please check if the PR fulfills these requirements
  • [x] PR is descriptively titled and links the original issue above
  • [x] Before/after screenshots (if this is a layout change)
  • [x] Details of which platforms the change was tested on (if this is a browser-specific change)
  • [x] Context for what motivated the change (if this is a change to some content)

Goodiec avatar Apr 15 '21 13:04 Goodiec

Realized that I made a mistake in pull request #1496, added the classes that I styled to fix the issue in the .html file instead of the .md file. After the request was merged I looked at the live site and saw the issue was still there and I realized my mistake. Decided to fix that in this pull request (the third commit), hope this is alright. I'm sorry about this.

Goodiec avatar Apr 25 '21 06:04 Goodiec