Making Pixel Point’s Medium Widget Accessible

The Problem(s)

Like many folks, as I started out writing articles on Medium I wanted a way to embed a “feed” on my personal portfolio website without having to manually add articles each time I posted them. There are a lot of resources out there covering this topic so I won’t repeat detailed instructions here.

The Pixel Point medium widget feed on my personal website (nikolaso.com)
The Pixel Point medium widget feed
Missing alternative text errors from WAVE

The Process

Since the <img> tags were being added to the DOM by the widget’s JavaScript on page load, it wasn’t as simple as just adding the attributes in my static HTML. I had to dust off my JavaScript in the DOM skills, which was a bit scary after living with the joy of React.js for so long. However, I figured this would be a great way to re-refresh my knowledge on the DOM and gain further appreciatation for what modern frameworks do for you.

  • Finding a source for the Alternative text
  • Selecting the proper HTML elements from the DOM
  • Adding the alt attribute
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="">

Conclusion

I now have a fully accessible Medium story feed on my personal portfolio website and have refreshed my knowledge on DOM manipulation.

Code

Code snippets: index.html, scripts.js

--

--

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
Nikolas Osvalds

Nikolas Osvalds

3 Followers

I’m passionate about doing good, giving back, and helping to tackle the climate crisis with my working life, ideally with code.