Uploaded image for project: 'Kuali Rice Development'
  1. Kuali Rice Development
  2. KULRICE-8889 General Accessibility Cleanup and Work
  3. KULRICE-5514

UI Framework - Add standard markup for Tablist semantics - for tabs that should not refresh the entire page/contents

    Details

    • Type: Sub Task
    • Status: Closed
    • Priority: Major
    • Resolution: Fixed
    • Affects Version/s: None
    • Fix Version/s: Not version specific
    • Component/s: Accessibility, Roadmap
    • Security Level: Public (Public: Anyone can view)
    • Labels:
      None
    • Environment:
    • Rice Module:
      KRAD
    • Application Requirement:
      KS
    • Sprint:
      2.5.0-m2 Sprint 1, 2.5.0-m2 Sprint 3, 2.5.0-m3 Sprint 1, 2.5.0-m3 Sprint 2, 2.5.0-m4 Sprint 1, UXI 2.5.0-m4 Sprint 2, UXI 2.5.0-m5 Sprint 1, Core 2.5.0-m5 Sprint 2b
    • KAI Review Status:
      Not Required
    • KTI Review Status:
      Not Required

      Description

      For tabs that should not refresh the entire page but only the tabpanel area content, we should be encoding an ARIA tablist. See https://wiki.kuali.org/display/KULRICE/KRAD+2.2+R1+-+Tab+semantics+-+uplift+to+code+standards+%28including+accessibility%29

      See also KULRICE-5423 for tabs that should refresh the entire page.

      Related to WCAG 2.0 Level A (must have) criteria 1.3.1: Info & relationships: info, structure & relationships can be programmatically determined or are available in text

      We don't meet this requirement in how we are marking up tablists.

      For example, On the KNS L&F FiscalOfficerInfo Inquiry2 page, for the two visible tabs (Information and Accounts) the screen reader reads "Information, same page link" and "Accounts, same page link". These are not semantically encoded as tabs in a tablist, so assistive technologies can't convey to non-sighted users that there will be different content displayed in a tabpanel, if these links are selected.

      Note that same-page links are usually links that target another location on the same page. The target is usually indicated with a "named anchor" (e.g., <a name="targetname"></a>). When a same-page link is clicked, the screen scrolls and keyboard focus moves to the target location on the page. This is not quite how we are using this term "same page link", however.

      This applies also to tab structures found in In KRAD Testing - KS L&F- UIF Components (kitchen sink)- Other Fields page(scroll down).

        Attachments

          Issue Links

            Activity

            Hide
            csoders Candace Soderston (Inactive) added a comment -

            These two are related: one is a fix for tablists that should refresh the entire page, the other is for tablists that should not refresh the entire page.

            Show
            csoders Candace Soderston (Inactive) added a comment - These two are related: one is a fix for tablists that should refresh the entire page, the other is for tablists that should not refresh the entire page.
            Hide
            jkneal Jerry Neal (Inactive) added a comment -

            After converting tabs to Bootstrap, check the accessibility.

            Accessibility semantics need to be different for navigation tabs and group tabs.

            Show
            jkneal Jerry Neal (Inactive) added a comment - After converting tabs to Bootstrap, check the accessibility. Accessibility semantics need to be different for navigation tabs and group tabs.
            Hide
            jkneal Jerry Neal (Inactive) added a comment -

            Need to account for tab navigation and group tabs.

            Show
            jkneal Jerry Neal (Inactive) added a comment - Need to account for tab navigation and group tabs.

              People

              • Assignee:
                bsmith Brian Smith (Inactive)
                Reporter:
                csoders Candace Soderston (Inactive)
              • Votes:
                0 Vote for this issue
                Watchers:
                1 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved: