[Sakai Jira] Resolved: (SAKIII-3832) Buttons on My Dashboard Suggested Content Carousel Aren't Labeled for Adaptive Technologies

[Nicolaas Matthijs (JIRA)]

     [ https://jira.sakaiproject.org/browse/SAKIII-3832?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ]

Nicolaas Matthijs resolved SAKIII-3832.
---------------------------------------

    Resolution: Fixed

https://github.com/sakaiproject/3akai-ux/commit/23c4b35408aa90a5c30cbddedd9e0df1c7a0be55

> Buttons on My Dashboard Suggested Content Carousel Aren't Labeled for Adaptive Technologies
> -------------------------------------------------------------------------------------------
>
>                 Key: SAKIII-3832
>                 URL: https://jira.sakaiproject.org/browse/SAKIII-3832
>             Project: Sakai 3 UI Dev
>          Issue Type: Bug
>          Components: Accessibility, Dashboard
>    Affects Versions: Sprint 110
>         Environment: Adaptive Technologies / Screen-reading software / etc.
> DEBUG: Nakamura Version: 0.10-20110426-725-g35105af | UX Version: 0.6-1954-g53f4458
> DOC mod date: 08/10/2011 10:41:50 | PLACE: me
>            Reporter: Brian Richwine
>            Assignee: Gonzalo Silverio
>            Priority: Critical
>             Fix For: Unknown Future Version
>
>         Attachments: DozensOfUnlabeledButtons.png
>
>
> The buttons (icons) on the carousel are coded with the button element and use CSS to load an image that is used to represent the icon. Unfortunately, no text is available for adaptive technologies to announce for these buttons. Bringing up a form control listing simply presents a long list of "Unlabeled Button" (see attached image "DozensOfUnlabeledButtons.png").
> Current coding technique:
> <span class="carousel_bottom_buttons">
>   <button data-entityid="hU8hAvIkaa" class="s3d-link-button s3d-action-icon s3d-actions-share carousel_sharecontent share_trigger_click" type="button"></button>
>   <button data-entityid="hU8hAvIkaa" class="s3d-link-button s3d-action-icon s3d-actions-addtolibrary carousel_savecontent savecontent_trigger" type="button"></button>
>   <button data-userid="aa6054" class="s3d-link-button s3d-action-icon s3d-actions-author personinfo_trigger_click" type="button"></button>
> </span>
> SUGGESTION:
> Part 1:
> Consider using either the title on button elements to provide text for each button. Using the title attribute would allow mouse over tool tips to appear and provide text for adaptive technologies. Since the mouse-over tool tips would be helpful to some users, we suggest using the title attribute.
> For example, the resulting HTML structure for the buttons themselves could look like this (added title attributes):
> <span class="carousel_bottom_buttons">
>   <button data-entityid="hU8hAvIkaa" class="s3d-link-button s3d-action-icon s3d-actions-share carousel_sharecontent share_trigger_click" type="button" title="Share this content"></button>
>   <button data-entityid="hU8hAvIkaa" class="s3d-link-button s3d-action-icon s3d-actions-addtolibrary carousel_savecontent savecontent_trigger" type="button" title="Add to Library"></button>
>   <button data-userid="aa6054" class="s3d-link-button s3d-action-icon s3d-actions-author personinfo_trigger_click" type="button" title="Get Author Personal Information"></button>
> </span>
> Part 2:
> The above would only be a partial solution, since it is likely that there will be many of each of these buttons on a given page where they appear. For example, in this instance, extra contextual information would be necessary to let the non-visual user know what exactly they are adding to the library by pressing the "Add to Library" button. In HTML, additional context for a given set of form controls is provided through use of the fieldset and legend elements. It is suggested that the item type (image, document, file, etc. if known) and title are added to the buttons through the fieldset. For example:
> <fieldset class="hiddenFromSightlings"><legend>Image: picasso148.jpg</legend>
> <span class="carousel_bottom_buttons">
>   <button data-entityid="hU8hAvIkaa" class="s3d-link-button s3d-action-icon s3d-actions-share carousel_sharecontent share_trigger_click" type="button" title="Share this content"></button>
>   <button data-entityid="hU8hAvIkaa" class="s3d-link-button s3d-action-icon s3d-actions-addtolibrary carousel_savecontent savecontent_trigger" type="button" title="Add to Library"></button>
>   <button data-userid="aa6054" class="s3d-link-button s3d-action-icon s3d-actions-author personinfo_trigger_click" type="button" title="Get Author Personal Information"></button>
> </span>
> </fieldset>
> CSS can be used to hide the fieldset / legend border and text from appearing on the screen and yet keep it available to adaptive technologies.

-- 
This message is automatically generated by JIRA.
-
For more information on JIRA, see: http://www.atlassian.com/software/jira