Earlier this month, I read this post about accessibility testing:
Beyond automatic accessibility testing: 6 things I check on every website I build
Step five makes the point of not conveying information with color alone, and goes on to cite hyperlinks as an example. Hyperlinks should be underlined to easily differentiate them from normal text. I realized that the Harvey Mercheum website was just using color to indicate a hyperlink, and decided to implement underlines. After some experimentation, I decided to only do this for the “content area” of the pages, in other words not the menus, sidebars or footer.
Once I decided upon the underlines and was already working with the website’s Cascading Style Sheets (CSS), I wanted a clearer way to indicate whether the hyperlink was internal or external. I mentioned early last year about how I checked to make sure all internal links open in the same tab, and external links open in a new tab. I read this post on wpmudev:
How to Style External Links in WordPress Like Wikipedia
Then, rather than worry about licensing an icon, I found this way to create one on the fly as a Scalable Vector Graphic (SVG):
CSS: Style external links
I love learning new (to me) technologies such as CSS, and I am always looking for ways to improve the Harvey Mercheum website. What do you think of these changes? Leave a comment below, or use the
Contact the Curator form to let me know!
Featured image credit: Andreariverac [CC BY-SA 3.0], via Wikimedia Commons
