Hi! Guess what? For two decades, I’ve known about the need for good color contrast in web content, especially text you want people to actually read. I’ve known that one of the first guidelines for charts, graphs, and infographics is to “never rely on color alone” to convey important information. You’re supposed to add pattern or placement as a secondary means to convey information. I’ve known that there are a large handful of types of color vision deficiencies out there, and that the Adobe Creative Cloud programs have simulators you can use to soft proof your contrast. For instance, in Illustrator, you can go to View > Proof Setup > Color blindness – Protanopia-type or -Deuteranopia-type.
I do have a hard time with these medical terms, and so, for the last twenty years, I’ve been unable to memorize what Protanopia and Deuteranopia mean, and I was assuming one was for the red/green color vision deficiency and the other was for the blue/yellow deficiency. But I was wrong.
I made a vector pattern in a blue and yellow color palette, and I tested it with both of Adobe’s presets, but neither one changed the color values very much. Turns out that both of these simulators are for different versions of the red/green one.
In the following screenshot, I’m previewing my pattern inside Illustrator with a third-party app that ChatGPT suggested: Sim Daltonism. I’ve opened the menu path for you to learn where the colorblindess simulators are, but I’m using the CMYK profile during this screenshot.
Sim Daltonism overlay shows the Tritanopia preview over a yellow pattern.
I turned to ChatGPT. I asked about the Adobe simulator and why it didn’t seem that my yellow-blue pattern changed much. Here is the response.
CHAT GPT on Color Vision Deficiency
Yes, this is an excellent question and a common point of confusion. There are indeed different types of color vision deficiency (CVD), but not all affect blue and yellow perception equally.
Adobe Illustrator includes two color blindness simulation modes:
Protanopia (red-blind)
Deuteranopia (green-blind)
These are the two most common types of red-green color blindness, and they primarily affect the ability to distinguish between red and green hues. Blue and yellow usually remain distinguishable in these cases, which is why you didn’t see much difference in your pattern when previewing with those simulators.
But what about blue-yellow color blindness?
The condition you’re referring to is called Tritanopia, which is a blue-yellow color vision deficiency. It affects the S-cones (short-wavelength cones), which are responsible for blue light detection.
In Tritanopia:
Blues can appear greenish
Yellows can look pinkish or faded
It can cause confusion between blues and greens or yellows and violets
Why didn’t Illustrator show it?
Adobe Illustrator does not currently include Tritanopia simulation in its color blindness proofing tools. This is likely why your blue and yellow pattern didn’t show noticeable changes. Illustrator’s built-in preview is limited to Protanopia and Deuteranopia only.
Recommendations:
To check for blue-yellow contrast issues, you’ll need to use third-party tools or plugins.
Tools like Color Oracle (free desktop application), Sim Daltonism (for macOS), or Stark (a plugin for Adobe apps and Figma) offer Tritanopia simulation.
You can also manually test your design by converting it to grayscale or viewing it with Tritanopia filters from accessibility checking software.
Since January, 2025, I have been studying for the certification called CPACC – (Certified Professional in Accessibility Core Competencies) from the IAAP (International Association of Accessibility Professionals). I’ve studied their body of knowledge document, plus I’ve enrolled in the Office of Information Technology at Princeton University – EduNext companion study guide.
Let me tell you, just because I’ve worked on making websites accessible for decades doesn’t mean I was automatically ready for this certification. Studying for it provides me with a much broader perspective on disability rights, human rights declarations, and models for which to understand disability.
While studying, I realized I needed much more depth of knowledge when it comes to laws, charters, and declarations. I was quite confused when I got to the “Domain 3” of the outline about laws. (National Instrument? What’s that???) I read it a couple times, worked with Chat GPT to get some basic knowledge which seemed to be inferred in the EduNext course, then I decided I needed to see all this information in a timeline format.
So, I made my own interactive timeline from the study materials. Go check it out for yourself. Because it is probably a bit inaccessible, I put it on a page by itself so it can be viewed without a sidebar.
When working on the web as a website content administrator, you’ll probably use a content management system (CMS) or a newsletter automation system to create and update your content. Each system handles the creation of links differently. Nearly all WYSIWYG editors use the chain icon to indicate a ‘link’, however. (That’s “what you see is what you get” and is a common acronym from web-two, when anybody with internet could suddenly be a content creator.)
And you’ll always need to make links!
What types of links are there?
Internal = Relative path. If you use the CMS’s internal method of finding a page within your own website; it usually starts with “/”, that’s a relative link. It’s ‘relative’ to the root domain.
External = Absolute path. When you go to the address bar of the browser and copy the entire address there and use the full URL in your link, that’s an absolute link.
Mail. Many CMS solutions have a special menu item for you to create an email link. Some do not. If you are trying to link an email address, and there isn’t a button there that says “email” you may simply need to know that you need to type in “mailto:” and then the full email address. Always test mail links after you publish the page to see if it opens an Outlook compose window, or at least offers to choose an email client for you. More about mailto links from CSS Tricks.
Document. You can’t link to a document that lives on your computer. It must have a URL so that your visitors can also access that document. Some systems require you to first upload to a media library, then highlight the link text and point to the new document. Some allow you to skip that extra step and combine uploading and linking to a document.
In regards to your document filenames, try and remember to change spaces to hyphens and remove extra periods or parentheses or the ampersand from anything you’re going to upload into a CMS.
Anchor Links. These are also called jumplinks. They take you to a different point on the same page. You first need access to the code view so you can insert an ID attribute. If you can’t get to the code view, try and see if your system has an anchor link option. For instance, here is a Shopify anchor link tutorial. Also, here is WordPress documentation for how to make an anchor link. (I found this after I recorded the video. I opened the Block Advanced pane in the post editor and found the link to this documentation there. You can pre-set the HTML Anchor on the headline of your choice, and then when you create the jumplink, the WYSIWYG will offer the ID tag for you to choose.)
The ever-helpful “Back to Top” links on long articles are anchor links. There would be an ID called “#top” set near the H1 on the page content, then you could add your own back to top links if the article is getting long. Like this one. But I’m not going to.
Telephone Links. These are usually the click-to-call buttons that work on smartphones. To make a link that places a call, you’ll need to start it with “tel:+1” and the phone number.
Parts of a link
The words you highlight to turn into a hyperlink are called ‘link text.’ The place where you point the link to is called the ‘link destination.’ Your link text can span multiple words.
If you are making a button, then the words that appear on the button are called the ‘button label.’
When making a link in a paragraph near the end of a sentence: do not include the final punctuation in the link text.
When making links in list items, be careful when selecting link text words.
Mechanics of Making Links
The icon of a link represents a chain, such as a chain to hold the gate on a chain link fence closed. The line inside of two horseshoe-shaped ovals represents the third chain that is turned 90 degrees. It’s an early-days metaphor still in action.
The mechanics: Using a computer mouse or trackpad, you can click at the last character of the link text and then drag through all the words backwards, and let go at the first character. I find this reduces my chances of accidentally hyperlinking the space after the last word of the link text. Once the correct link text is selected, click the chain icon in the WYSIWYG.
Setting the link destination:
If you were going to make a hyperlink to an offsite URL, load that URL into your clipboard before selecting the link text. Then, you won’t make a mistake in the time between seeing the empty field to paste the link and realizing you don’t have that link already copied into your clipboard. If you are going to create a relative link to another page or document in your own website, make note of what that content is called inside your system, so you can increase your chances of finding the correct page with the automatic content search tool.
Making sure it worked: In some systems, you’ll need to use the mouse to select the content offered by the link widget. Or, you could click the enter key if you have one, and if not, try the return key. Check if there is a save button or not. I think the newer content management link widgets are counting the selection of the internal content or external link AS the enter key, so they don’t display an OK or SAVE button.
Once your cursor is back in the page content, do you see the underline signifier on the link text you had highlighted? If so, save your edits. In content management systems, you’ll often be saving things that go live to the public right away. Your cadence for checking if you did it right will change based on how much you still need to edit. At the end of your editing, in a new browser tab, view that page like the public would. Then click that link you edited or created. Does it do what you expected? If you were linking a spreadsheet, check your downloads folder to see if you received a new copy. And so on. Continue proofing until it all behaves correctly. You can work between the two tabs to save time. One tab for the editing view, the other for the proofing view. Hit shift-refresh on the browser to pull down the newest changes on the proofing page between edits.
When fixing a broken link, what considerations are there?
If you use a broken link report service or a single-use page crawler, you’ll need to learn about error codes, what they mean, and how to know when you should break a broken link or find a replacement. Understanding the difference between relative and absolute links will come in handy if you’ve suddenly got a lot of broken links inside your site after renaming headlines or directories. In this case, you’ll also want to check whether the broken link page is published or unpublished.
Let’s say you need to point an existing link to a different page, and the link text is five words long. How would you do it? Would you be able to tell if you made an error? I have coached scores of new content managers how to edit links, and people go about it in different ways that surprise me.
In a CMS, you usually have access to a ‘break link’ icon, and it may look like a chain breaking. To ensure that all parts of the existing hyperlink get erased, place the cursor in the link but don’t highlight. Then choose the break link button. Then go ahead and highlight the link text and make the new link from scratch. You could also edit the existing link instead of deleting it first.
What is Empty Link Text? If your link report or accessibility report is saying your page has empty link text, it is most likely due to a copy and paste or a delete error. Sometimes when deleting link text, there is a space leftover that still has a hyperlink in it.
What’s the difference between a link and a button?
A button is hyperlinked and has a <button> tag underneath it in the code. A link is hyperlinked and can be placed in a paragraph tag, a list item tag, or a div tag, to name a few. The history behind choosing whether to make a link or a button is rife with lively debate. Usually a button is reserved for a desired user action or a user decision, such as downloading a report or signing up to an email list.
The controversy behind the link or button debate goes pretty far back, way back… Back to when we didn’t have CSS stylesheets and we didn’t have a button tag within semantic HTML. Web devs had to get creative to get a link to look like a button. So, now we have links that look like buttons but are not semantic buttons, and we have navigation elements that look like buttons but are links in the code. This causes accessibility problems, and if you really want to, take a deeper dive in the resources here:
Etiquette: We should stay away from placing links in headlines like H2 or H3 tags. There are exceptions to this, however, such as a blog feed or news feed page, where the entire headline of the article is automatically turned into a link to the full article. We should not include the period at the end of a sentence in the link text. When making links inside quotes, keep the linked text inside the quotation marks. We should refrain from making more than one link to a destination using different link text. And, for the love of links, stop using “click here” as the only link text. The link text should give a clue as to where the user will land when they click.
Drama? What about opening links in new tabs?
Yes, there is a lot of spirited debate over whether to open a link in a new tab or not. In most WYSIWYG editors today, there will be a toggle button for you to choose whether to open link in new tab. Try and be consistent with your choices.
Links to other pages on your website do not need to be opened in a new tab. They should consistently remain in the same tab.
The controversy lies in how to handle offsite links. Do we open those in new tabs so users will have your site still there if they close the new page? Do we open those in the same tab so users will have their favorite browser button enabled: the BACK button?
I’m in favor of just being consistent.
Topics about links I didn’t have time to discuss
That sums up my Links 101 article and companion video! However, I didn’t talk about styling links, or SEO, or keyword stuffing of links, or the UX study of effective link and button text, or how users of assistive technology experience links, or cloud sharing links, et. cetera.
Also, a little out of scope for this article and video was the topic of linked images. Yes, people have been placing links on image tags for a long time. There is a lot to unpack about this in terms of usability and accessibility. I found WebAim published an article of quick tips about accessibility, and Tip #11 is:
“When creating an image link, the image alternative text must present the content of the image AND describe the destination of the link. Make sure that the image’s alt text would be sufficient if it were the text in a regular link.” WebAim Blog Oct. 2024
Linking is the mainstay of the internet and there is so much to talk about from many different angles!
I found a fantastic blog post by Adobe about accessibility champion Dax Castro’s business CHAX Training and Consulting. I’ve been aware of Dax for about five years now, due to his free tutorials about PDF accessibility via InDesign during the livestreams of the Adobe Max conference. I encourage everybody who makes PDFs that get posted on the web to learn from Dax and his business partner Chad Celius. I have watched and re-watched several of their recorded training videos, and I find them so valuable!
I watched a few of the talks during the previous livestream of WordPress Accessibility Day, and I found them so intriguing that I volunteered to emcee at the October 2024 event. I’ve been approved for a shift, and I have to say I’m pretty excited about the T-Shirt this year.
The T-Shirt says “:focus – It’s a feature, not a bug,” and it is meant to educate content creators that the highlight on elements that happens when one tabs through a webpage are meant to be there, so one should not remove the :focus element from one’s CSS.
I booked a sponsor booth at a metaverse-based leadership summit on August 22, 2024. I gave a 15-minute talk about usability and the building blocks of accessibility to a group of people’s avatars live, and it was simultaneously live-streamed to a handful of re-streaming platforms such as Kick and Youtube. Hosted by CreativeOwls.io, there were panel discussions, and presentations on situational leadership and web3 wallet safety. You can still check out the Spatial.io space for the Web3 Leaders Summit. I had a great time!
Check out my own recording of my presentation. I focused on improving digital literacy through usability and inclusion. Yolantis is my artist name and business name.
I presented my five building blocks for accessibility, and will go deeper on these concepts in my webinar. Color contrast, heading hierarchy, alt text for images, descriptive link text, and keyboard-only navigation.
Please consider registering for my Zoom webinar on Aug 29, 2024 to hear more about the building blocks and see my accessibility bot in action. If you cannot make it during that time, and you register, I’ll email you with the link to the recording afterwards.
I’m planning something big. I’ve made a Wisdom Bot that is trained with the videos I’ve been creating for this blog since 2017. Below is an embedded widget, similar to the Wisdom Bot. Ask it something about accessibility. Try these simple queries: “pdfs,” “accessibility,” “alt text,” “heading”.
I’m planning activities, workshops, and webinars to expand my brand Yolantis Website Mentor.
LLC, created
Membership platform & community hub, purchased
Zoom workspace account, purchased
Speaking engagement secured
See me at the upcoming Web 3 Leader Summit in the Spatial.io metaverse, August 22, 2024. Tickets are free and you can watch from a browser or in a Meta Quest VR headset with Spatial installed.
