Uploaded image for project: 'Sakai'
  1. Sakai
  2. SAK-31591

Ensure custom controls provide proper textual roles and descriptions

    XMLWordPrintable

    Details

      Description

      The “Create Folder” page of the Resources section of the environment provides the user with the ability to create custom folders listed in the shared resources of Sakai. After giving the custom folder a name, a link is provided that is titled “Add details for this item”. Activating this link reveals a series of input fields further down the page that allows the user to enter further information about the folder they are creating. Once this section has expanded, there are two more links provided to expand options for even more additional fields for the folder being created. However, these links do not inform screen reader users that they expand a section of content on the page. As they are simply announced as links, screen reader users will believe that activating the link will navigate them away from the current page, as opposed to provide more options on the current one.

      <a title="Show label.lom" href="#hideMetadata_lom_0" id="showMetadata_lom_0"><img width="13" border="0" height="13" align="top" alt="Show label.lom" src="/library/image/sakai/expand.gif" id="showMetadataImage_lom_0">Learning Object Metadata</a>

      Developers must ensure that all controls inform screen reader users of their role and state. As this link controls the expansion of additional content on the current page, it must be assigned the <aria-expanded> attribute with a value switching between “true” and “false” depending on the state of the control. Currently this link utilizes both the <title> attribute on the anchor with a value of “Show label.dc”, as well as the <alt> attribute on the inner image with the same value. Not only are these values not informative to the purpose of the control, but they cause serious confusion for a screen reader user. As such, the <title> attribute on the anchor element must be removed, and the <alt> attribute value changed to null (“”) on the inner image. This combined with the addition of the <aria-expanded> attribute will more clearly inform screen reader users of the purpose of the control. The code below is provided as an example of this remediation:WHEN EXPANDED

      <a href="#hideMetadata_lom_0" id="showMetadata_lom_0" aria-expanded=”true”><img width="13" border="0" height="13" align="top" alt="" src="/library/image/sakai/expand.gif" id="showMetadataImage_lom_0">Learning Object Metadata</a>

      WHEN COLLAPSED

      <a href="#hideMetadata_lom_0" id="showMetadata_lom_0" aria-expanded=”false”><img width="13" border="0" height="13" align="top" alt="" src="/library/image/sakai/expand.gif" id="showMetadataImage_lom_0">Learning Object Metadata</a>

      http://qa03-sakai.marist.edu:8080/portal/site/e72d72d4-f582-4dce-8261-6b923060787c/tool/2f629dad-7e64-41c5-bb12-64d95eb17a15/sakai.resource.type.helper.helper#Ace8b247ef23d42314ed25b5c733dbdc-HTML

        Gliffy Diagrams

          Attachments

            Issue Links

              Activity

                People

                • Assignee:
                  Unassigned
                  Reporter:
                  mclare Matt Clare
                • Votes:
                  0 Vote for this issue
                  Watchers:
                  1 Start watching this issue

                  Dates

                  • Created:
                    Updated:
                    Resolved:

                    Git Source Code