diff options
| -rw-r--r-- | index.html | 28 | ||||
| -rw-r--r-- | script.js | 8 | ||||
| -rw-r--r-- | styles.css | 12 |
3 files changed, 24 insertions, 24 deletions
@@ -12,39 +12,36 @@ <script src="script.js" defer></script> </head> <body> - <nav id="hamburger-box" class="flex-row"> + <nav id="hamburger-box" class="flex-row" tabindex="-1"> <button id="hamburger-btn" class="openbtn" onclick="openNav()">☰</button> <h3 style="color: white; position: fixed; top: 20px; right: 5px; padding-right: 10px;">csci 1300</h3> </nav> <nav id="sidepanel" class="sidepanel" aria-label="drawer-navigation"> <img class="logo-img" src="assets/favicon.png" alt="Our logo image that directs to top of page"/> - <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> - <a href="#full_menu" class="link">menu</a> - <a href="#calendar" class="link">calendar</a> - <a href="#staff" class="link">kitchen staff</a> - <a href="#faq" class="link">faqs</a> + <a href="javascript:void(0)" class="closebtn" onclick="closeNav()" tabindex="-1">×</a> + <a href="#full_menu" class="link" tabindex="-1">menu</a> + <a href="#calendar" class="link" tabindex="-1">calendar</a> + <a href="#staff" class="link" tabindex="-1">kitchen staff</a> + <a href="#faq" class="link" tabindex="-1">faqs</a> </nav> <header> <nav class="nav-flex" aria-label="primary-navigation"> - <img class="logo-img" src="assets/favicon.png" alt="Our logo image that directs to top of page"/> + <img class="logo-img" src="assets/favicon.png" alt="our logo image" tabindex="-1"/> <!-- <a class="link" href="#weekly_specials">Weekly Specials</a>--> <!-- <a class="link" href="#course_info">Course Info</a>--> <!-- <a class="button" href="#xxx">Weekly Specials</a>--> <div class="flex-row"> - <a class="link" href="#full_menu">menu</a> + <a class="link" href="#full_menu" tabindex="2">menu</a> <a class="link" href="#calendar">calendar</a> <a class="link" href="#staff">kitchen staff</a> <a class="link" href="#faq">faqs</a> </div> </nav> - <section class="title-flex" id="#top"> <article class="title-info-flex"> <figure class="video-title-wrapper"> <video src="assets/uiux-logo-blue.mp4" id="video-title" autoplay muted></video> - <div class="hide-border"> - - </div> + <div class="hide-border"></div> </figure> <article class="course-title-wrapper"> @@ -62,7 +59,7 @@ <!-- </aside>--> </article> <figure class="pastries-wrapper"> - <iframe id="connie-pastries" src='https://my.spline.design/cs1300pastries-527b5a4ae57f8e04517708ce6f4dd80e/' frameborder='0'></iframe> + <iframe tabindex="-1" id="connie-pastries" src='https://my.spline.design/cs1300pastries-527b5a4ae57f8e04517708ce6f4dd80e/' frameborder='0'></iframe> </figure> </section> @@ -175,7 +172,8 @@ <figure class="spreadsheet-wrapper"> - <iframe id="schedule-iframe" class="embedded-iframe" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vR97aOo6hHLDmv_bqzK5ipCBHRUKqnzfox3c0RzjBggOjWAzn0a49S2GxRieW9Cgg/pubhtml?widget=true&headers=false"></iframe> </figure> + <iframe id="schedule-iframe" class="embedded-iframe" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vR97aOo6hHLDmv_bqzK5ipCBHRUKqnzfox3c0RzjBggOjWAzn0a49S2GxRieW9Cgg/pubhtml?widget=true&headers=false"></iframe> + </figure> </section> <section id="calendar"> @@ -610,7 +608,7 @@ <p>3d models forged by <strong>Connie</strong>,<p> <p>illustrations crafted by <strong>Melissa</strong>,</p> <p>animated title fabricated by <strong>Isaac</strong>,</p> - <p>all made with <a class="glow-on-hover rainbow" style="color: #FF1493; text-decoration: none; cursor: default;" target="_blank" href="./assets/chicken_ordinance_final1.pdf">♥</a> in Providence</p> + <p>all made with <a tabindex="-1" class="glow-on-hover rainbow" style="color: #FF1493; text-decoration: none; cursor: default;" target="_blank" href="./assets/chicken_ordinance_final1.pdf">♥</a> in Providence</p> </footer> </section> </main> @@ -1,11 +1,15 @@ -const THRESHOLD_FIDELITY = 150 ; +const THRESHOLD_FIDELITY = 150; + +// accessibility tab index +const sectionsAndHeaders = document.querySelectorAll('section, header'); +console.log(sectionsAndHeaders) +sectionsAndHeaders.forEach(ele => ele.tabIndex = "1"); // mutation observer for the video element const videoTitle = document.querySelector('#video-title'); // const pastryIframe = document.querySelector('#connie-pastries') - const observer = new IntersectionObserver(entries => { // note - if the boundingClientRect.y is negative, then they are scrolling down // note - since using id, only 1 entry @@ -75,7 +75,6 @@ section:nth-child(odd) { } - h2 { text-align: center; font-size: 2rem; @@ -133,7 +132,7 @@ nav { padding: 0; } -.button:hover { +.button:hover, .button:focus { /* goal - make it look clickable */ transition-duration: .2s; font-size: 107%; @@ -256,6 +255,7 @@ title area (animated text and connie's 3d model) justify-content: left; padding: 0; z-index: 1; + tab-index: -1; } .title-info-flex { @@ -264,6 +264,7 @@ title area (animated text and connie's 3d model) width: fit-content; max-width: 60vw; align-items: start; + tab-index: -1; } .video-title-wrapper { @@ -281,7 +282,6 @@ title area (animated text and connie's 3d model) user-select: none; } - .hide-border { position: relative; border: solid 4px var(--primary-color); @@ -291,6 +291,7 @@ title area (animated text and connie's 3d model) left: -2px; margin: 0; padding: 0; + tab-index: -1; } @@ -330,7 +331,6 @@ h1 { pointer-events: none; touch-action: none; user-select: none; - tab-index: -1; } #connie-pastries { @@ -344,10 +344,8 @@ h1 { left: -35vw; top: -60px; z-index: -1000; - tab-index: -1; } - .pastries-business-flex { display: flex; flex-direction: column; @@ -880,7 +878,7 @@ animation for a button to appear and glow on hover background: transparent; } -.glow-on-hover:hover:before { +.glow-on-hover:hover:before, .glow-on-hover:focus:before { opacity: 1; } |