Review updates made to link example page

[mcking65]

The Link Examples page
needs the following updates.

• Restructure content to use the current example template
• Change the page title to "Link Examples".
• Update title tag.
• Fix misspellings.

Requested Reviews

• Review by @jongund
• Review by @annabbott
• Review by @shirsha

[mcking65]

The pattern says that shift+f10 opens the link context menu. Our examples do not have a context menu to open the link in a new tab, etc. Should we include this feature?

[ZoeBijl]

Might be worth it to at least implement a keyboard shortcut for “open in new window”. On macOS this would be cmd+enter. Regardless of whether we implement the context menu.

[mcking65]

@michiel, I created issue #275 to address the adding of context menu with keyboard shortcuts. I don't think we should do one without the other. I assigned this to the release 2 milestone.

[mcking65]

@annabbott, @jongund,

Question: does link number 4 disappear in high contrast mode?

[jongund]

Matt, The link 4 example will disappear it uses a CSS background image technique. This is a common practice of social media links. Jon From: Matt King [mailto:notifications@github.com] Sent: Tuesday, February 7, 2017 1:21 PM To: w3c/aria-practices <aria-practices@noreply.github.com> Cc: Gunderson, Jon R <jongund@illinois.edu>; Mention <mention@noreply.github.com> Subject: Re: [w3c/aria-practices] Updates needed for link example page (#228) @annabbott<https://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_annabbott&d=DwMCaQ&c=8hUWFZcy2Z-Za5rBPlktOQ&r=REZD8fc2AwufInstfW3L5jSLVS8bjZtAodDOhat7yAI&m=jNhDqAB9KyVAeVvmz7wX22jLQNLUsXsg2s9XZLDyAW0&s=3VqHfgg8rd09nMA7tsMl-MQ1zedJJ3t79Oi-tk_Gi00&e=>, @jongund<https://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_jongund&d=DwMCaQ&c=8hUWFZcy2Z-Za5rBPlktOQ&r=REZD8fc2AwufInstfW3L5jSLVS8bjZtAodDOhat7yAI&m=jNhDqAB9KyVAeVvmz7wX22jLQNLUsXsg2s9XZLDyAW0&s=cFsVhHU1TGg4LJ0-vRAwWIHo_zzmZKGG3ZIdDNcZRS4&e=>, Question: does link #4<https://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_w3c_aria-2Dpractices_issues_4&d=DwMCaQ&c=8hUWFZcy2Z-Za5rBPlktOQ&r=REZD8fc2AwufInstfW3L5jSLVS8bjZtAodDOhat7yAI&m=jNhDqAB9KyVAeVvmz7wX22jLQNLUsXsg2s9XZLDyAW0&s=-Db_zFlvsFI7egr9dMt-wjET08hR5ZR3blVFbtXdfKc&e=> disappear in high contrast mode? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<https://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_w3c_aria-2Dpractices_issues_228-23issuecomment-2D278111189&d=DwMCaQ&c=8hUWFZcy2Z-Za5rBPlktOQ&r=REZD8fc2AwufInstfW3L5jSLVS8bjZtAodDOhat7yAI&m=jNhDqAB9KyVAeVvmz7wX22jLQNLUsXsg2s9XZLDyAW0&s=gmWCuUqq38knwfuwhV3POAJ0lnlZ6m3k8_fIWdslxUY&e=>, or mute the thread<https://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_notifications_unsubscribe-2Dauth_ABcE7HM48r6s0Ej5udEX-5FvfP5D1-5FwCAJks5raMQbgaJpZM4LMwA1&d=DwMCaQ&c=8hUWFZcy2Z-Za5rBPlktOQ&r=REZD8fc2AwufInstfW3L5jSLVS8bjZtAodDOhat7yAI&m=jNhDqAB9KyVAeVvmz7wX22jLQNLUsXsg2s9XZLDyAW0&s=P_32IDVhdDdimyuS8VmtbogXMGkRrP2eP-G_XinmWus&e=>.

[jongund]

For the context menu to open link in a new window or new tab. Is there any other markup that needs to be added to the link like: aria-haspopup, aria-expanded and/or aria-controls.

I am assuming the context menu follows the ARIA menu pattern.

Jon

[shirsha]

Example#3 doesn't have focus.

Thanks,
Siri

[shirsha]

If a link takes to another webpage(outside the current website) , should they be informed through the screen reader text.

Thanks
Siri

[mcking65]

@jongund wrote:

For the context menu to open link in a new window or new tab. Is there any other markup that needs to be added to the link like: aria-haspopup, aria-expanded and/or aria-controls.

No.

As with menubutton, aria-controls and aria-expanded are not necessary.

While it would not be incorrect to add aria-haspopup, all links already have context menus so there is no value in doing so.

I am assuming the context menu follows the ARIA menu pattern.

Yes.

[mcking65]

@jongund wrote:

The link 4 example will disappear it uses a CSS background image technique.

OK, that's what I thought. I wonder if we should flag that example as not recommended and put a note for the reason? Thoughts?

[mcking65]

@shirsha wrote:

Example#3 doesn't have focus.

You mean, the focus ring disappears when link 3 gets focus? What browser? Others seeing this?

[mcking65]

@shirsha wrote:

If a link takes to another webpage(outside the current website) , should they be informed through the screen reader text.

Some sites have such a policy, but that is not needed for accessibility. Some sites use an icon to indicate that, and if they do, they should make sure that icon is accessible. One thing I did at IBM was to make it more screen reader friendly by having the accessible text that represented that icon appended to the end of the link text even though the icon preceeded the link. But, again, that is not core to this pattern.

Now, you might be thinking of a WCAG technique that suggests that links should indicate whether they open a new window. While that is not an essential aspect of this pattern, we could have a note that references it from the design pattern. We reference WCAG in a few other places.

[shirsha]

@mcking65 wrote:
You mean, the focus ring disappears when link 3 gets focus? What browser? Others seeing this?
When I tabbed to Example #3, I can't see focus around it. This is in Internet Explorer 11.

[annabbott]

When using only the keyboard, the link for Example 3 gets an odd and unexpected indication of focus:

[ZoeBijl]

@annabbott I’ll fix that a bit later today.

Update: Fixed!

[annabbott]

Confirmed fixed

[mcking65]

All reviewer feedback has been addressed. Closing to complete the review process.