ade21ee4e0109c70e29860d5393306e48e6a44d3 lrnassar Mon Mar 16 16:38:58 2026 -0700 Adding keyboard navigation accessibility to the Genome Browser menu bar and all main CGI pages. Converts non-focusable menu bar span elements to keyboard-accessible buttons using the W3C disclosure navigation pattern, adds aria-expanded state for screen readers, skip navigation link, and main content landmark. Also adds a Keyboard Navigation section to the accessibility page with screenshots. refs #37252 diff --git src/hg/htdocs/style/nice_menu.css src/hg/htdocs/style/nice_menu.css index 4273db56165..ec7d6540d40 100644 --- src/hg/htdocs/style/nice_menu.css +++ src/hg/htdocs/style/nice_menu.css @@ -1,564 +1,608 @@ /* @font-face { font-family:"Metrophobic"; src:url(/sites/all/themes/genome/images/font/Metrophobic.ttf); src:local('Metrophobic'), url(/sites/all/themes/genome/images/font/Metrophobic.otf); } */ +/* Skip navigation link for keyboard accessibility */ +a.skipNav, a.skipNav:link, a.skipNav:visited { + position: absolute; + left: -9999px; + top: 0; + z-index: 1000; + padding: 8px 16px; + background: #003a72; + color: #fff; + font-size: 14px; + font-weight: bold; + font-family: Arial, Helvetica, sans-serif; + text-decoration: none; +} + +a.skipNav:focus { + left: 0; + outline: 2px solid #fff; + outline-offset: -2px; +} + /* Contains all css needed for drop-down global navigation menus */ /* FROM Jabico's style.css */ /* body.cgi { margin:0px; padding:0px; font-size:13px; color:#6b6b6b; line-height:19px; background:#e6e3db; font-family:Arial, Helvetica, sans-serif; }*/ #main-menu-whole { width:100%; min-width:1000px; /* NOTE: must cover all top menu options, else wrapping breaks menu */ height:32px; background:#2636d1; font-family: Arial,Helvetica,sans-serif; line-height:19px; font-size:13px; margin:0 0 5px 0; } #hgTracks-main-menu-whole { width:100%; min-width:1000px; /* NOTE: must cover all top menu options, else wrapping breaks menu */ height:32px; background:#00457c; font-family: Arial,Helvetica,sans-serif; line-height:19px; font-size:13px; margin:0 0 5px 0; } #main-menu { /* width:1031px; */ margin-left: 30px; } /* from Jabico ... probably need to apply this to #maindiv-whole { background: url("../images/internal_bg1.jpg") repeat-x scroll left bottom #F9F9F7; } */ /* from nice_menus_default.css */ /****************************** Global CSS for ALL menu types ******************************/ ul.nice-menu, ul.nice-menu ul { list-style: none; padding: 0; margin: 0; border-top: 1px solid #ccc; } ul.nice-menu li { border: 1px solid #ccc; border-top: 0; float: left; /* LTR */ background-color: #eee; line-height: normal; } ul.nice-menu a { padding: 0.3em 5px 0.3em 5px; } ul.nice-menu ul { top: 1.8em; left: -1px; /* LTR */ border: 0; border-top: 1px solid #ccc; margin-right: 0; /* LTR */ } ul.nice-menu ul li { min-width: 12.5em; } /****************************** HORIZONTAL (down) menus ******************************/ ul.nice-menu-down { float: left; /* LTR */ border: 0; } ul.nice-menu-down li { border-top: 1px solid #ccc; } ul.nice-menu-down li li { border-top: 0; } ul.nice-menu-down ul { left: 0; /* LTR */ } ul.nice-menu-down ul li { clear: both; } ul.nice-menu-down li ul li ul { left: 12.5em; /* LTR */ top: -1px; } ul.nice-menu-down .menuparent a { padding-right: 10px; /* LTR */ } ul.nice-menu-down li.menuparent { background: #eee; } ul.nice-menu-down li.menuparent:hover { background: #ccc; } ul.nice-menu-down li li.menuparent { background: #eee; } ul.nice-menu-down li li.menuparent:hover { background: #ccc; } #header-region ul.nice-menu-down li ul li ul { left: 12.5em; /* LTR */ top: -1px; } #header-region ul.nice-menu-down li.menuparent { background: #eee; } #header-region ul.nice-menu-down li.menuparent:hover { background: #ccc; } #header-region ul.nice-menu-down li li.menuparent { background: #eee; } #header-region ul.nice-menu-down li li.menuparent:hover { background: #ccc; } /* nice_menus.css */ /* Below should fix menu being a few pixels away in some themes, and menus disappearing behind other stuff. */ .block-nice_menus { line-height: normal; z-index: 10; } ul.nice-menu, ul.nice-menu ul { z-index: 5; position: relative; } ul.nice-menu li { position: relative; } ul.nice-menu a { display: block; } ul.nice-menu ul, /* For Garland header. */ #header-region ul.nice-menu ul { position: absolute; visibility: hidden; } ul.nice-menu li.over ul { visibility: visible; } ul.nice-menu ul li { display: block; } ul.nice-menu:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* Show submenus when over their parents. */ ul.nice-menu li:hover ul, ul.nice-menu li.menuparent li:hover ul, ul.nice-menu li.menuparent li.menuparent li:hover ul, ul.nice-menu li.menuparent li.menuparent li.menuparent li:hover ul, ul.nice-menu li.over ul, ul.nice-menu li.menuparent li.over ul, ul.nice-menu li.menuparent li.menuparent li.over ul, ul.nice-menu li.menuparent li.menuparent li.menuparent li.over ul, /* Repeat all this stuff just for Garland headers. */ #header-region ul.nice-menu li:hover ul, #header-region ul.nice-menu li.menuparent li:hover ul, #header-region ul.nice-menu li.menuparent li.menuparent li:hover ul, #header-region ul.nice-menu li.over ul, #header-region ul.nice-menu li.menuparent li.over ul, #header-region ul.nice-menu li.menuparent li.menuparent li.over ul { visibility: visible; } /* Hide sub-menus initially. */ ul.nice-menu li:hover ul ul, ul.nice-menu li:hover ul ul ul, ul.nice-menu li:hover li:hover ul ul, ul.nice-menu li:hover li:hover ul ul ul, ul.nice-menu li:hover li:hover li:hover ul ul, ul.nice-menu li:hover li:hover li:hover ul ul ul, ul.nice-menu li.over ul ul, ul.nice-menu li.over ul ul ul, ul.nice-menu li.over li.over ul ul, ul.nice-menu li.over li.over ul ul ul, ul.nice-menu li.over li.over li.over ul ul, ul.nice-menu li.over li.over li.over ul ul ul, /* Repeat all this stuff just for Garland headers. */ #header-region ul.nice-menu li:hover ul ul, #header-region ul.nice-menu li:hover ul ul ul, #header-region ul.nice-menu li:hover li:hover ul ul, #header-region ul.nice-menu li:hover li:hover ul ul ul, #header-region ul.nice-menu li:hover li:hover li:hover ul ul, #header-region ul.nice-menu li:hover li:hover li:hover ul ul ul, #header-region ul.nice-menu li.over ul ul, #header-region ul.nice-menu li.over ul ul ul, #header-region ul.nice-menu li.over li.over ul ul, #header-region ul.nice-menu li.over li.over ul ul ul, #header-region ul.nice-menu li.over li.over li.over ul ul, #header-region ul.nice-menu li.over li.over li.over ul ul ul { visibility: hidden; } /*************** IE 6 Fixes ***************/ /* Iframe to fix z-index bug when menu hovers over