6.7: Activity 10- Accessible Tab Panel

Web Accessibility for Developers - Essential Skills for Web Developers · LibreTexts

0%

Contents

    Text

    Size
    100%
    Theme
    Typeface
    Line length
    Spacing

    From LibreTexts, under CC BY-SA, as the source states it; its equations are written in TeX, which the PDF shows typeset. This page at LibreTexts.

    activity_sm.png

    Accessible Tab Panel

    Based on the Tab Panel details on the previous page, apply what you have learned to the associated activity files to make the tab panel there accessible.

    Files for this activity include:

    Use the surroundings of the highlighted code on the previous page as a guide to find where the fixes should be applied. Repair the accessibility of the tab panel by applying the highlighted code to the /assets/ik_tabs.js file.

    Note: While we suggest using the highlighted code we’ve provided, you are free to come up with your own solutions provided they produce the expected results listed in the marking rubric below.

    Test your updated tab panel with ChromeVox to be sure each element described in the marking rubric below is functioning as suggested.

    Requirements

    When you have applied your changes and tested to ensure your tab panel functions as described, submit the URL to your tabs.html file on your GitHub Pages site, to the file on the web server you are using to host your copy of the activity files, or a GitHack URL.

    Grading Rubric

    Criteria Points
    List to Tab Semantics:
    List semantics are replaced with tab panel semantics.    		 2.0 pts
    Tab Position:
    Focus position in the tablist is announced.    		 1.0 pts
    Tab Focus opens Panel:
    When a tab is in focus, its associated panel displays.    		 1.0 pts
    Arrow Key Between Tabs:
    Arrow keys can be used to navigate between tabs.    		 2.0 pts
    Tab Key from Tab to Panel:
    Tab key can be used to move from a selected tab directly to its associated panel, Shift+Tab to move back to tabs.    		 2.0 pts
    Panels Focusable:
    Panels are keyboard focusable.    		 2.0 pts
    Total Points: 10.0

    This page titled 6.7: Activity 10- Accessible Tab Panel was last modified on Sat, 01 May 2021 18:30:25 GMT and is shared under a CC BY-SA license and was authored, remixed, and/or curated by Digital Education Strategies, The Chang School.