To further build ADA compliance in our courses and to make things look prettier, we need an icon added to all external links created in the WYSIWIG.
Currently, all external links look like:
Community of Inquiry Model (links to an external site)
When it could look like this as seen in Canvas:
I have attached the code, even though I'm sure your team already know it.
Matthew Van Matre - #2 would be the way to go. Link text shouldn't be repeated in the title attribute.
Matthew Van Matre - If you add "Eternal link" or something similar as the link title attribue it will be available to assistive technologies and standard web-browsers in an unobtrusive way.
Hi Adam,
As a white belt developer, you have any sample code for me or a link to some, I'd appreciate that as a workaround for now.
Yet, I cannot imagine that'd be a solution going forward for every faculty member to do for every link they add to every lesson.
Matthew Van Matre - The link editor already lets you enter the title attribute without touching HTML. If you want to add more descriptive text for assistive technologies, and don't mind editing markup, you could also use the aria-label attribute on a link; just make sure the aria-label starts with the link text since most screen readers will favor the aria-label over the link text.
Hi Adam,
I think I'm getting it.
From W3: H33: Supplementing link text with the title attribute (links to an external site)
The objective of this technique is to demonstrate how to use a
titleattribute on an anchor element to provide additional text describing a link. Thetitleattribute is used to provide additional information to help clarify or further describe the purpose of a link. If the supplementary information provided through thetitleattribute is something the user should know before following the link, such as a warning, then it should be provided in the link text rather than in thetitleattribute.
From this I gather, that I would need to get in the code because the point is for screen-readers is to inform the learner that this link leaves the course. In the support notes, it says, "Current user agents and assistive technology provide no feedback to the user when links have title attribute content available."
Text Links: Best Practices for Screen Readers (links to an external site) suggests using the aria-label attribute over just the title. (If I understood it right, lol)
So, can I make this aria-label change in < > part of the editor?
Is this correct?
<h2>Screen Readers: Informing Students of External Links</h2>
<p>The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.</p>
<h3>Using a Title Only</h3>
<a href="https://www.w3schools.com/html/" title="Links to an external site">Visit our HTML Tutorial</a>
<h3>Using the Aria Label Thingy</h3>
<a href="https://www.w3schools.com/html/" aria-label="Links to an external site">Visit our HTML Tutorial</a>
Or, do I need to do more?
Matthew Van Matre - That article and those support notes were written some time ago and may not accurately reflect the current landscape. JAWS, NVDA, and Voiceover all read the title attribute on links when it differs from the link text (and it should never not differ from the link text). So title is probably the simplest solution for you since you can add that when adding the link in the GUI.
If you want to use aria-label it would need to be like this since some readers will prefer the aria-label to the link text.
<a href="https://www.w3schools.com/html/" aria-label="Visit our HTML Tutorial - Links to an external site">Visit our HTML Tutorial</a>
That said, for this specific use case I'd recommend title over aria-label which would still leave you the option to include additional info about at link in the aria-label as needed.
Hi Adam,
Final Clarification - what I'm going to train my faculty to do.
For external links: Am I having them do option one or option 2?
Thanks for your help,
Matthew