Home » Accordion Menus Accordion Menus Accordion Menus in Webcourses Accordion Menus (aka Show/Hide sections) can help organize content, reduce visual clutter, enhance readability, and increase student engagement and interactivity. However, Accordion Menus are not included in standard HTML and CSS and can be difficult to implement properly. Does your menu function as users expect? Is it accessible to users with screen readers or who use keyboards to navigate? Is it useable on any screen size? The Center for Distributed Learning has developed a template for Accordion menus that works across devices and browsers, is fully accessible, and is simple to import into your existing Webcourses. Sample Accordion Menu Why Use Accordion Menus? — Accordion tab content begins here. You may edit or insert additional content using the normal editor. — Accordion Menus like this one can: Help organize course content visually Reduce on-screen visual clutter Enhance readability Increase student engagement and interactivity — Accordion tab content ends here. — Essential Features When correctly done, Accordion Menus should: Be visually recognizeable They should look visually distinct from text so users can tell that they are interactive. The mouse cursor should change when hovering over any clickable areas. Be keyboard accessible Users should be able to navigate between tabs using the keyboard. This example works with tab to go forward and shift-tab to go back. Users should be able to open and close tabs using the keyboard. This example works with spacebar. Be screen reader accessible Screen reader users should be able to navigate between tabs using the screen reader’s navigation menu. Screen reader users should be able to open and close tabs using the screen reader’s navigation menu. Be mobile accessible Users should be able to navigate between tabs using touch gestures. Users should be able to open and close tabs using touch gestures. Be responsive Accordion Menus should be able to adapt to different screen sizes. Accordion Menus should be able to adapt to different screen orientations. Additional Capabilities Any kind of content can normally be included on a web page can also appear inside an Accordion Menu. Images Tables Links Lists Forms Interactive elements And more… Creating Your Accordion Menu While creating your pages in Webcourses, click on the plug-in’s button and select “Accordion Menu Creator”. Try it out… (create and link to KB article)
