Make sure that any images used to illustrate lessons have accessible alternatives

[ostephens]

We use images in the lesson - we should ensure that there is always an accessible alternative with descriptive text so that those using screen readers or similar technology can still understand the lesson

[ostephens]

In markdown this is done using format like:
![Alt text](/path/to/image)

So this task it to check all images used have alt text and that the alt text is a good description of the image

See the blog post at https://carpentries.org/blog/2021/04/Acc-athon/ for more information on adding good alt text and including images in markdown

[zkamvar]

FWIW, there are five images used in this lesson and all of them have alt text associated with them (though you might want to inspect them to make sure they are the correct alt text).

The syntax for alt text is now [caption](link){alt="alt text"} as shown in https://carpentries.github.io/sandpaper-docs/episodes.html#figures

# setup ------------------------------------------------------------------
options(width = 200)
library("fs")
library("tibble")
library("usethis")
library("pegboard")
tmp <- tempdir()
create_from_github("LibraryCarpentry/lc-open-refine", tmp)

# Read in lesson and validate links --------------------------------------
lcor <- Lesson$new(path(tmp, "lc-open-refine"), jekyll = FALSE)
links <- as_tibble(lcor$validate_links())
links[links$type == "image", c("filepath", "sourcepos", "path", "alt")]
#> # A tibble: 6 × 4
#>   filepath                            sourcepos path                                  alt                                                              
#>   <fs::path>                              <int> <chr>                                 <chr>                                                            
#> 1 episodes/02-importing-data.md              71 fig/openrefine_ui.png                 Screenshot of Open Refine Create Project Screen                  
#> 2 episodes/03-working-with-data.md           54 fig/rows.png                          Screen capture showing OpenRefine in Rows mode.                  
#> 3 episodes/03-working-with-data.md           55 fig/records.png                       Screen capture showing OpenRefine in Rows mode.                  
#> 4 episodes/06-working-with-columns.md        37 fig/sort-menu-highlight.png           Addition of Sort menu to OpenRefine grid after first sort command
#> 5 episodes/13-looking-up-data.md             71 fig/openrefine_add_columns_by_url.png Add column by fetching URLs screen capture                       
#> 6 learners/setup.md                          56 /badge.svg                            Binder

^{Created on 2023-08-08 with reprex v2.0.2}

[jas58]

Thanks for the episode locations, @zkamvar
May I verify I understand the next step?

In the repo for episodes, I would open 02 to find the row with the image and replace some part of what I see there with:

Create Project in OpenRefine{alt="Screenshot of Open Refine Create Project Screen"}

Or is this something I could edit in the repo under images?

Once I have the pattern, I will be more confident to repeat with the other five.
I just tried it in 02 for PR#309.

[bencomp]

I think you got the syntax correct (but I see the rendered Markdown here). The caption would show up below the image, the alt text would show instead of the image if the image could not be loaded (or it would be read aloud by a screen reader, for example).

In terms of the actual alt text: I think it should get the message across that the visual image is supposed to present. In this case, the image has highlights for certain settings and I think the image serves as a summary of the steps explained above it. Perhaps a more descriptive alt text for this image would be: OpenRefine Create Project screen, with highlights for the address bar, mentioned settings and the Create Project button.

[ostephens]

List of changes needed:

• episodes/02-importing-data.md line 71 fig/openrefine_ui.png Screenshot of Open Refine Create Project Screen
• episodes/03-working-with-data.md line 54 fig/rows.png Screen capture showing OpenRefine in Rows mode.
• episodes/03-working-with-data.md line 55 fig/records.png Screen capture showing OpenRefine in Rows mode.
• episodes/06-working-with-columns.md line 37 fig/sort-menu-highlight.png Addition of Sort menu to OpenRefine grid after first sort command
• episodes/13-looking-up-data.md line 71 fig/openrefine_add_columns_by_url.png Add column by fetching URLs screen capture
• learners/setup.md line 56 /badge.svg Binder