Skip to:
Content

BuddyPress.org

#8235 closed defect (bug) (fixed)

Accessibility: add information concerning links that open in a new tab

Reported by: audrasjb Owned by: mercime
Milestone: 6.0.0 Priority: normal
Severity: normal Version:
Component: Settings Keywords: has-patch has-screenshots commit
Cc:

Description

Hello,

I noticed some buttons (actually they are links with a button UI) that open a new tab in BuddyPress Settings screen.

While target blank links are not recommended by accessibility guidelines (as it forces the behavior of the interface - there is no "open in the same tab" option on a target blank link), it can sometimes be understandable to have some target blank links, especially on a settings page where the user could loose their form fields informations.

If we want to keep target blank links, I'd recommend to add proper information about the behavior of the links so screen readers users (and also sighted users) could know what it's going to happen when they click on the related links.

For example, I'd recommand to replace:

<a href="…" target="_blank">View</a>

With something like:

<a href="…" target="_blank">View <span class="screen-reader-text"> (opens in a new window)</span></a>

Or even better (for sighted users):

<a href="…" target="_blank">View <span class="dashicons dashicons-external"></span>
<span class="screen-reader-text"> (opens in a new window)</span></a>

(see screenshots below)

For reference:

  • Make/Accessibility - Link destinations:

https://make.wordpress.org/accessibility/handbook/content/link-destinations/

  • When to use and not use target blank:

https://css-tricks.com/use-target_blank/

Attachments (3)

Capture d’écran 2020-01-28 à 23.21.24.png (102.7 KB) - added by audrasjb 12 months ago.
Patch with dashicon-external added to the button
8235.diff (1.8 KB) - added by audrasjb 12 months ago.
Setttins: add screen reader text for link that opens in a new window, and a dashicon for sighted users as well (includes small CSS changes to handle dashicons in buttons)
8235-2.diff (1.7 KB) - added by mercime 12 months ago.

Download all attachments as: .zip

Change History (12)

@audrasjb
12 months ago

Patch with dashicon-external added to the button

@audrasjb
12 months ago

Setttins: add screen reader text for link that opens in a new window, and a dashicon for sighted users as well (includes small CSS changes to handle dashicons in buttons)

#1 @imath
12 months ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 6.0.0

Hi @audrasjb

I agree it would be a great improvement. @mercime could you look at it ?

#2 @audrasjb
12 months ago

  • Keywords has-patch has-screenshots added; needs-patch removed

#3 @imath
12 months ago

Thanks for the suggestion & patch, btw 👍

#4 @audrasjb
12 months ago

You’re very welcome @imath 🙂

@mercime
12 months ago

#5 @mercime
12 months ago

@audrasjb Thank you for the accessibility improvement!
Attached patch changes (opens in a new window) to (opens in a new tab) which is used for the WP dashboard's external links, adds aria-hidden="true" to <span> for dashicon addition, and applies style fix only to .settings_page_bp-page-settings .button-secondary .dashicon

Last edited 12 months ago by mercime (previous) (diff)

#6 @imath
12 months ago

  • Keywords commit added

Hi @mercime,

Thanks a lot for your patch 👌. Could you use echo esc_url( get_petmalink() ) in the href attribute, I think it’s best to sanitize the URL. Otherwise it’s good to be committed 💪

#7 @mercime
12 months ago

@imath 👍

#8 @mercime
12 months ago

In 12549:

Admin: Sanitize external links to activated BP component pages.

Props imath.
See #8235.

#9 @mercime
12 months ago

  • Owner set to mercime
  • Resolution set to fixed
  • Status changed from new to closed

In 12550:

Admin: Make external links in BP Settings > Page accessible.

The View link beside each new activated component opens up in a new tab to
ensure that a user may view the new BP page generated in the frontend without
losing the selection/s in the settings page before the user has saved such.

This fix provides hidden text for users of screen readers and an icon for
sighted users to indicate that the link will open in a new tab.

Props audrasjb, imath.
Fixes #8235.

Note: See TracTickets for help on using tickets.