Add ARIA for accessibility [#2092283]

Carousels have a number of known accessibility & usability challenges with them.

To help mitigate some of the accessibility challenges it would be good to:

Add aria-labelledby to the tabpanels which point to the id of the associated control/tab.
To each control/tab, add aria-controls (which points to the id of the associated tabpanel) and aria-selected (boolean) attributes.

http://www.marcozehe.de/2013/02/02/advanced-aria-tip-1-tabs-in-web-apps/
http://www.accessiq.org/create/content/anatomy-of-an-accessible-carousel

Comment	File	Size	Author
#9	add_aria_for_accessibility-2092283-9.patch	1.23 KB	jackfoust
#9

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

gillisig CreditAttribution: gillisig commented 17 September 2014 at 14:15

Issue summary:

View changes

I think this is pretty important so I am bumping this issue up!

Comment #2

NickDickinsonWilde

He/Him/His

English

Victoria, BC (T'So-uke lands)

CreditAttribution: NickDickinsonWilde at BriarMoon Design commented 19 January 2017 at 20:00

Assigned:	Unassigned	» NickDickinsonWilde
Status:	Active	» Needs work
Issue tags:		+a11y

Comment #3

NickDickinsonWilde

He/Him/His

English

Victoria, BC (T'So-uke lands)

CreditAttribution: NickDickinsonWilde at BriarMoon Design commented 19 January 2017 at 20:01

Assigned:	NickDickinsonWilde	» Unassigned
Status:	Needs work	» Fixed

Only fixed in 7.x (which is 90% of active installs anyways). Postponing for 8x as I'm thinking of a significant amount of adjustments there.

Comment #4

19 January 2017 at 20:01

NickWilde committed 14632f3 on 7.x-3.x

Issue #2092283 by NickWilde: Add ARIA for accessibility

Comment #5

2 February 2017 at 20:04

Status:

Fixed

» Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

Comment #6

andrewmacpherson CreditAttribution: andrewmacpherson as a volunteer and at Annertech commented 8 February 2017 at 11:24

Issue tags:

-a11y

Tag clean up: "accessibility" is the preferred one. The "a11y" tag doesn't have many issues so I'm moving them all to "accessibility". This issue was already closed, and is in contrib, but this is so the core accessibility maintainers don't have to monitor two tags.

Comment #7

adixon CreditAttribution: adixon as a volunteer commented 2 March 2017 at 22:30

I believe this causes accessibility issues if you don't include a pager.

Specifically, in such a case, it adds an aria-labelledby with a non-existent id.

The patch would be:

diff --git a/contrib/views_slideshow_cycle/theme/views_slideshow_cycle.theme.inc b/contrib/views_slideshow_cycle/theme/views_slideshow_cycle.the
index 0609d29..cd750df 100644
--- a/contrib/views_slideshow_cycle/theme/views_slideshow_cycle.theme.inc
+++ b/contrib/views_slideshow_cycle/theme/views_slideshow_cycle.theme.inc
@@ -137,7 +137,7 @@ function template_preprocess_views_slideshow_cycle_main_frame(&$vars) {
   if (isset($options['top']['views_slideshow_pager']['enabled']) && $options['top']['views_slideshow_pager']['enabled']) {
     $aria = "aria-labelledby='views_slideshow_pager_field_item_top_${vss_id}_";
   }
-  else {
+  elseif (isset($options['bottom']['views_slideshow_pager']['enabled']) && $options['bottom']['views_slideshow_pager']['enabled']) {
     $aria = "aria-labelledby='views_slideshow_pager_field_item_bottom_${vss_id}_";
   }
 
@@ -282,4 +282,4 @@ function _views_slideshow_cycle_preprocess_views_slideshow_cycle_main_frame_row(
  */
 function _views_slideshow_cycle_preprocess_views_slideshow_cycle_main_frame_row_item(&$vars) {
   template_preprocess_views_slideshow_cycle_main_frame_row_item($vars);