Mark avatar icons as decorative

A screen reader announced the service's name before every author.

3 files changed, 7 insertions, 11 deletions

diff --git a/custom/extensions/email-gravatar.lua b/custom/extensions/email-gravatar.luaindex eca31ee..d5c30fc 100644--- a/custom/extensions/email-gravatar.lua+++ b/custom/extensions/email-gravatar.lua@@ -42,7 +42,6 @@ local has_digest, digest = pcall(require, "openssl.digest") local avatar_size = 13 local default_image = "retro" local base_url = "https://www.gravatar.com/avatar/"-local alt_text = "Gravatar"   -- One name reaches this filter as an open, writes and a close, so what the@@ -111,7 +110,8 @@ end  -- A log page can carry one icon per commit, so the attributes let the -- browser defer the fetches for icons still off screen and keep decoding--- off the critical path.+-- off the critical path. The icon only decorates the name beside it, so its+-- alt text is empty and a screen reader goes straight to the name. function filter_close() 	if avatar_hash == nil then 		html(buffer)@@ -119,8 +119,7 @@ function filter_close() 		html("<img src='" .. base_url .. avatar_hash .. 			"?s=" .. avatar_size .. 			"&amp;d=" .. default_image ..-			"' alt='" .. alt_text ..-			"' width='" .. avatar_size ..+			"' alt='' width='" .. avatar_size .. 			"' height='" .. avatar_size .. 			"' loading='lazy' decoding='async'> " .. buffer) 	end
diff --git a/custom/extensions/email-gravatar.lua b/custom/extensions/email-gravatar.lua
index eca31ee..d5c30fc 100644
--- a/custom/extensions/email-gravatar.lua
+++ b/custom/extensions/email-gravatar.lua
@@ -42,7 +42,6 @@ local has_digest, digest = pcall(require, "openssl.digest")
 local avatar_size = 13
 local default_image = "retro"
 local base_url = "https://www.gravatar.com/avatar/"
-local alt_text = "Gravatar"
 
 
 -- One name reaches this filter as an open, writes and a close, so what the
@@ -111,7 +110,8 @@ end
 
 -- A log page can carry one icon per commit, so the attributes let the
 -- browser defer the fetches for icons still off screen and keep decoding
--- off the critical path.
+-- off the critical path. The icon only decorates the name beside it, so its
+-- alt text is empty and a screen reader goes straight to the name.
 function filter_close()
 	if avatar_hash == nil then
 		html(buffer)
@@ -119,8 +119,7 @@ function filter_close()
 		html("<img src='" .. base_url .. avatar_hash ..
 			"?s=" .. avatar_size ..
 			"&amp;d=" .. default_image ..
-			"' alt='" .. alt_text ..
-			"' width='" .. avatar_size ..
+			"' alt='' width='" .. avatar_size ..
 			"' height='" .. avatar_size ..
 			"' loading='lazy' decoding='async'> " .. buffer)
 	end
diff --git a/custom/extensions/email-libravatar.lua b/custom/extensions/email-libravatar.luaindex 3422dc1..719be2e 100644--- a/custom/extensions/email-libravatar.lua+++ b/custom/extensions/email-libravatar.lua@@ -40,7 +40,6 @@ local has_digest, digest = pcall(require, "openssl.digest") local avatar_size = 13 local default_image = "retro" local base_url = "https://seccdn.libravatar.org/avatar/"-local alt_text = "Libravatar"   -- One name reaches this filter as an open, writes and a close, so what the@@ -109,7 +108,8 @@ end  -- A log page can carry one icon per commit, so the attributes let the -- browser defer the fetches for icons still off screen and keep decoding--- off the critical path.+-- off the critical path. The icon only decorates the name beside it, so its+-- alt text is empty and a screen reader goes straight to the name. function filter_close() 	if avatar_hash == nil then 		html(buffer)@@ -117,8 +117,7 @@ function filter_close() 		html("<img src='" .. base_url .. avatar_hash .. 			"?s=" .. avatar_size .. 			"&amp;d=" .. default_image ..-			"' alt='" .. alt_text ..-			"' width='" .. avatar_size ..+			"' alt='' width='" .. avatar_size .. 			"' height='" .. avatar_size .. 			"' loading='lazy' decoding='async'> " .. buffer) 	end
diff --git a/custom/extensions/email-libravatar.lua b/custom/extensions/email-libravatar.lua
index 3422dc1..719be2e 100644
--- a/custom/extensions/email-libravatar.lua
+++ b/custom/extensions/email-libravatar.lua
@@ -40,7 +40,6 @@ local has_digest, digest = pcall(require, "openssl.digest")
 local avatar_size = 13
 local default_image = "retro"
 local base_url = "https://seccdn.libravatar.org/avatar/"
-local alt_text = "Libravatar"
 
 
 -- One name reaches this filter as an open, writes and a close, so what the
@@ -109,7 +108,8 @@ end
 
 -- A log page can carry one icon per commit, so the attributes let the
 -- browser defer the fetches for icons still off screen and keep decoding
--- off the critical path.
+-- off the critical path. The icon only decorates the name beside it, so its
+-- alt text is empty and a screen reader goes straight to the name.
 function filter_close()
 	if avatar_hash == nil then
 		html(buffer)
@@ -117,8 +117,7 @@ function filter_close()
 		html("<img src='" .. base_url .. avatar_hash ..
 			"?s=" .. avatar_size ..
 			"&amp;d=" .. default_image ..
-			"' alt='" .. alt_text ..
-			"' width='" .. avatar_size ..
+			"' alt='' width='" .. avatar_size ..
 			"' height='" .. avatar_size ..
 			"' loading='lazy' decoding='async'> " .. buffer)
 	end
diff --git a/tests/extensions/test-email-avatar.lua b/tests/extensions/test-email-avatar.luaindex b4a4545..41cba8c 100644--- a/tests/extensions/test-email-avatar.lua+++ b/tests/extensions/test-email-avatar.lua@@ -13,10 +13,8 @@ local script = arg[1] local mode = arg[2] or "stub"  local base_url = "https://www.gravatar.com/avatar/"-local alt_text = "Gravatar" if script:find("libravatar", 1, true) then 	base_url = "https://seccdn.libravatar.org/avatar/"-	alt_text = "Libravatar" end  if mode == "stub" then@@ -46,7 +44,7 @@ end local out, ret = render("<author@example.com>", "A U Thor") h.contains("an icon is drawn for an address", out, "<img src='" .. base_url) h.contains("the size lands in the query", out, "?s=13&amp;d=retro'")-h.contains("the alt text names the service", out, "alt='" .. alt_text .. "'")+h.contains("the icon is marked decorative", out, "alt='' width=") h.contains("width matches the size", out, "width='13'") h.contains("height matches the size", out, "height='13'") h.contains("the fetch is deferred", out, "loading='lazy' decoding='async'")
diff --git a/tests/extensions/test-email-avatar.lua b/tests/extensions/test-email-avatar.lua
index b4a4545..41cba8c 100644
--- a/tests/extensions/test-email-avatar.lua
+++ b/tests/extensions/test-email-avatar.lua
@@ -13,10 +13,8 @@ local script = arg[1]
 local mode = arg[2] or "stub"
 
 local base_url = "https://www.gravatar.com/avatar/"
-local alt_text = "Gravatar"
 if script:find("libravatar", 1, true) then
 	base_url = "https://seccdn.libravatar.org/avatar/"
-	alt_text = "Libravatar"
 end
 
 if mode == "stub" then
@@ -46,7 +44,7 @@ end
 local out, ret = render("<author@example.com>", "A U Thor")
 h.contains("an icon is drawn for an address", out, "<img src='" .. base_url)
 h.contains("the size lands in the query", out, "?s=13&amp;d=retro'")
-h.contains("the alt text names the service", out, "alt='" .. alt_text .. "'")
+h.contains("the icon is marked decorative", out, "alt='' width=")
 h.contains("width matches the size", out, "width='13'")
 h.contains("height matches the size", out, "height='13'")
 h.contains("the fetch is deferred", out, "loading='lazy' decoding='async'")