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

Ensure custom controls provide proper textual name, role, and state information



    • Previous Issue Keys:


      [Not fixed] - 3/23/2018The "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 Brock University. 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. However, this link does not inform screen reader users that it expands a section of content on the page. As it is simply announced as a link, 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.

      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"><a id="propsTrigger_0" href="#">Add details for this item</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.  The code below is provided as an example of this remediation:WHEN EXPANDED<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"><a id="propsTrigger_0" href="#" aria-expanded="true">Add details for this item</a>WHEN COLLAPSED<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"><a id="propsTrigger_0" href="#" aria-expanded="false">Add details for this item</a>

        Gliffy Diagrams




              • Assignee:
                jonespm Matthew Jones
              • Votes:
                0 Vote for this issue
                0 Start watching this issue


                • Created:

                  Git Source Code