Open ostephens opened 2 years ago
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
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
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.
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.
List of changes needed:
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