Skip to main content
Library homepage
 
Loading table of contents menu...
Workforce LibreTexts

7.3: Activity 12- Accessible Menu Bar

  • Page ID
    15630
  • \( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \) \( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)\(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\) \(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\)\(\newcommand{\AA}{\unicode[.8,0]{x212B}}\)

    Accessible Menu Bar

    activity_sm.pngBased on the Menu bar details on the previous page, apply what you have learned to the associated activity files to make the menu 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 menu bar by applying the highlighted code to the /assets/ik_menu.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 menu bar with ChromeVox to ensure each element described in the marking rubric below is functioning as suggested.

    Requirements

    When you have applied your changes and tested to be sure your menu bar functions as described, submit the URL to your menu.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
    Instructions Provided:
    Instructions are announced on how to use the menu bar with a keyboard, when the menu bar first receives focus.
    1.0 pts
    Menu Bar Semantics:
    List item semantics are replaced with menu semantics.
    2.0 pts
    Submenus Announced:
    When a menu item with a submenu receives focus, the presence of a submenu is announced.
    2.0 pts
    Focus Control:
    Only elements of the menu bar that are in view are able to receive focus.
    2.0 pts
    Keyboard Operable:
    As described in Adding Keyboard Operability for a menu bar, the menu bar functions using a keyboard (and mouse).
    3.0 pts
    Total Points: 10.0

    This page titled 7.3: Activity 12- Accessible Menu Bar is shared under a CC BY-SA license and was authored, remixed, and/or curated by Digital Education Strategies, The Chang School.

    • Was this article helpful?