A11Y: onebox avatars/images are decorative, so screenreaders can skip (#33572)

Adding `alt=""` to tell screenreaders to skip these, we don't reliably
have alt content available for onebox images and they tend to be
decorative, so better to omit.


<img width="738" height="151" alt="learn.microsoft.com onebox with the
link whats new in C# 11, there's a purple C# badge to the left of the
link"
src="https://github.com/user-attachments/assets/15bdc830-683f-4c69-a11b-9d54c66fa627"
/>


We already do this in some oneboxes, so this covers some more cases
including the generic.
This commit is contained in:
Kris
2025-07-11 09:55:48 -04:00
committed by GitHub
parent 970323d1f3
commit cb0b8351a9
5 changed files with 6 additions and 6 deletions
+1 -1
View File
@@ -1,7 +1,7 @@
<aside class="onebox {{subname}}" data-onebox-src="{{link}}">
<header class="source">
{{#favicon}}
<img src="{{favicon}}" class="site-icon"/>
<img src="{{favicon}}" class="site-icon" alt=""/>
{{/favicon}}
{{#article_published_time}}
@@ -1,4 +1,4 @@
{{#image}}<img width="{{thumbnail_width}}" height="{{thumbnail_height}}" src="{{image}}" class="thumbnail"/>{{/image}}
{{#image}}<img width="{{thumbnail_width}}" height="{{thumbnail_height}}" src="{{image}}" class="thumbnail" alt=""/>{{/image}}
<h3><a href="{{link}}" target="_blank" rel="noopener">{{title}}</a></h3>
@@ -1,6 +1,6 @@
<aside class="onebox preview-error">
{{#favicon}}
<img src="{{favicon}}" class="site-icon"/>
<img src="{{favicon}}" class="site-icon" alt=""/>
{{/favicon}}
<a href="{{link}}" target='_blank' rel='noopener noreferrer'>{{title}}</a>
<article class="onebox-warning-message">
+2 -2
View File
@@ -1,11 +1,11 @@
{{#avatar}}<img src="{{avatar}}" class="thumbnail onebox-avatar">{{/avatar}}
{{#avatar}}<img src="{{avatar}}" class="thumbnail onebox-avatar" alt="">{{/avatar}}
<h4><a href="{{link}}" target="_blank" rel="noopener">{{title}}</a></h4>
<div class="threads-screen-name"><a href="{{link}}" target="_blank" rel="noopener">@{{screen_name}}</a></div>
<div class="thread-contents">
<span class="thread-description">{{{description}}}</span>
{{#image}}
<div class="scale-images"><img src="{{image}}"></div>
<div class="scale-images"><img src="{{image}}" alt=""></div>
{{/image}}
</div>
+1 -1
View File
@@ -1,4 +1,4 @@
{{#avatar}}<img src="{{avatar}}" class="thumbnail onebox-avatar">{{/avatar}}
{{#avatar}}<img src="{{avatar}}" class="thumbnail onebox-avatar" alt="">{{/avatar}}
<h4><a href="{{link}}" target="_blank" rel="noopener">{{title}}</a></h4>
<div class="twitter-screen-name"><a href="{{link}}" target="_blank" rel="noopener">@{{screen_name}}</a></div>