Making Pixel Point’s Medium Widget Accessible

The Problem(s)

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

  • 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

Code

--

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

An Introduction to Flux

Node.js Tips — Change Directory with exec, Move Files, and Nested Schemas

swaggy python tricks

Angular vs React JS — Side-by-Side Review

How to Reduce your GeoJSON File Size Smaller for Better Performance

Using the logical OR for short circuit evaluation

Deploy create-next-app to Netlify

Lumion VR使用筆記

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

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

More from Medium

How to become a web designer on budget -Day1

Links that will make your coding life easier 2.0

What are Metatags in HTML?🚀

Metatags,SEO and Responsive Website

5 Easy Steps to Make Your Website More Accessible

Website Accessibility Header