Accessibility, Share Links, And More

I did more work on the site today and learned a lot about accessibility. I also implemented some new features like social sharing and started learning about SVG icons.

Web Accessibility

First up today was an accessibility pass on the site. Although I normally have accessibility in mind and consider semantic markup, alt text, contrasting colors, etc., this freeCodeCamp Medium article I came across recently showed that there were still a bunch of things I could improve upon. What I did today:

Hide thumbnail image links from screenreaders and keyboard tabbing; the thumbnails are repetitive since they sit right next to another link that goes to the same place, so it’s a better experience to get rid of them. This article from 2012 shows a comparison of how to best combine role="presentation" and aria-hidden="true" with tabindex="-1" to create a better user experience. I also removed the alt text from these images (alt="") since it was just a further repetition of the title.
Learned about tabindex which determines whether an element can be focused, and also the order elements are focused in. Best practices says it’s better not to use it for any value other than -1…good markup will make it not necessary to use.
Added title attributes to <iframe> elements. The site drops in a media player and the code was copy-pasted from the media provider, but the iframe element did not include a title, so I added it.
Label icons. The site uses a few Font Awesome icons for navigation, but without a label, screenreaders just see an empty link; they needed an aria label:
<a href="https://twitter.com/spacex" target="_blank" rel="noopener">
<i class="fab fa-twitter" aria-label="Space X on Twitter"></i>
</a>
Label buttons. Same as the icons, I added aria labels to the submit buttons on my search form and email sign up.

Going through the process, I used a couple of accessibility checkers like the WAVE Web Accessibility Tool, WebAccessibility, and AChecker (though it’s super old) to highlight things I’d missed. The WebAIM Color Contrast Checker also was a good tool.

Still To Do

One thing I didn’t do was shrinking the text width. I made an attempt at this a while back (after reading this article about it) and it’s pretty decent, but on super-wide screens maybe still a bit too wide. This is still on the to-do list.

I wanted to add the normal share buttons to each post but without using the developer tools or buttons. First, because I want consistency in the buttons’ appearance; and second, because I really don’t want to add a bunch of trackers and crawlers to the site. Just plain links are what I want. I found this great repo which lists how to create a plain sharing link for a long list of social media websites. Win!

SVG Icons

Another thing on the list is to remove the Font Awesome dependency on my site so I started with a bit of research about using SVG icons instead. This YouTube video was a great, quick look at how to include and style them, and this one went a bit more in-depth on more customizations. This video of a talk by Sarah Drasner gave a whole bunch more things to be aware of, including how to make the SVG icons accessible.

I’ll be picking this up in my next coding session!

Other Stuff

Finished 2 books today! One on negotiation, and I took a lot of notes, so been reading it for a while. The other was a YA apocalyptic future novel. So yeah, diversity 😋

Up Next

Tomorrow I want to swap out all FontAwesome icons for SVGs, add the sharing buttons, and get started on moving my comments from Disqus to my own forms.