Making Pixel Point’s Medium Widget Accessible

The Pixel Point medium widget feed on my personal website (nikolaso.com)
The Pixel Point medium widget feed
Missing alternative text errors from WAVE
Finding the class name of the main image in the medium widget using dev tools
Finding the class for the main image
// First attempt at getting the <a> element
((d, w) => {
console.log(d.getElementsByClassName("medium-widget-article__image"));
})(document, window);
Developer tools showing a 0 length HTMLCollection
The result
Selecting and logging one element using a MutationObserver
developer tools screenshot of an HTMLCollection with 3 <a> element entries
The result
scripts.js
<!-- Main Image -->
<img src="https://cdn-images-1.medium.com/fit/300/300/1*DeuT8iD3FaiRTevzz4VODQ.png" alt="Reviewing how performance and accessibility requirements were met and thinking about the future">
<!-- Avatar Image -->
<img src="https://miro.medium.com/fit/c/200/200/0*RgY7ABMwMVBvipXA" class="medium-widget-article__avatar-picture" alt="">

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store