Uploaded image for project: 'Sakai'
  1. Sakai
  2. SAK-31549 Ensure screen reader specific content is rendered off-screen rather than hidden or not displayed
  3. SAK-31597

Ensure screen reader specific content is rendered off-screen rather than hidden or not displayed - Forms




      Throughout the environment screen reader specific content is placed off-screen with the CSS class ""skip"". This is used in many different scenarios, such as <label> elements for input fields, informative text placed in <span> elements, and skip-links used to jump to the main content. All of these elements are positioned off-screen with this ""skip"" CSS class, however the class itself utilizes the CSS display:none property. This not only hides the content off-screen, but it also hides it from assistive technology. As such, screen reader users never interact with this content.

      Developers must ensure that screen reader specific content placed off-screen remains exposed to assistive technologies. In order to ensure that this content remains exposed, the CSS display:none property must not be utilized.


      Here is additional guidence for invisible content http://webaim.org/techniques/css/invisiblecontent/
      Many examples of the ""skip"" class suggest that the should be placed off-screen as opposed to not read. The label a11y:invisiblecontent has been added to track the larger scope of this issue.

      In Forums, this use was identified

                              <!-- Buffered Body Tool Content -->
      <div class=""portletBody"">
      	<span class=""skip"" id=""firstPendingItemTitleHolder"">Go to first pending message</span>
      	<span class=""skip"" id=""nextPendingItemTitleHolder"">Go to next pending message</span>
      	<span class=""skip"" id=""lastPendingItemTitleHolder"">Last pending message</span>
      	<span class=""skip"" id=""firstNewItemTitleHolder"">Go to first new message</span>
      	<span class=""skip"" id=""nextNewItemTitleHolder"">Go to next new message</span>
      	<span class=""skip"" id=""lastNewItemTitleHolder"">Last new message</span>
      	<form id=""msgForum"" method=""post"" action=""http://qa03-sakai.marist.edu:8080/portal/site/e72d72d4-f582-4dce-8261-6b923060787c/tool/79f75896-1ff8-460e-b1ee-c4fd7bc57a13/discussionForum/message/dfViewThread"" enctype=""application/x-www-form-urlencoded"">


        Gliffy Diagrams




              • Assignee:
                ottenhoff Sam Ottenhoff
                mclare Matt Clare
              • Votes:
                0 Vote for this issue
                2 Start watching this issue


                • Created:

                  Git Source Code