search

hlxsites / delta

https://main--delta--hlxsites.hlx.page/us/en/skymiles/overview
Apache License 2.0
2 stars 3 forks source link

feat: add accessibility quick links #117

Closed ramboz closed 1 year ago

ramboz commented 1 year ago

Add quick navigation links for accessibility compliance.

Fix #115

Test URLs:

aem-code-sync[bot] commented 1 year ago

Hello, I'm Franklin Bot and I will run some test suites that validate the page speed. In case there are problems, just click the checkbox below to rerun the respective action.

aem-code-sync[bot] commented 1 year ago
Page Score PSI Audit Google
/us/en/skymiles/how-to-earn-miles/overview SI FCP LCP TBT CLS PSI
ramboz commented 1 year ago

Screenshot 2023-03-27 at 4 51 20 PM Screenshot 2023-03-27 at 4 51 13 PM

ramboz commented 1 year ago

@asthabh23 A few notes I should have added initially:

  1. The live implementation is not consistent to begin with between mobile and desktop, and since this isn't really something that would show up on regular navigation, I simplified the CSS (no point in wasting extra bytes for something that is not really supposed to be visible). It also doesn't actually shift the focus… which is the main purpose of those links
  2. Since this is usually triggered via assistive technologies, it's not immediately visible on the page and you'd have to "TAB" your way to it. The easiest to trigger it is probably just to click the header once (somewhere on the blue background) and SHIFT+Tab back until you hit the link focus
  3. These links are meant to be used for keyboard navigation, so you'd "TAB" your way to it, then follow the links via "ENTER", and then continue "TAB"-ing to the next focusable elements. It's a way to skip the link-heavy navigations and immediately have the assistive technologies focused on the main content (for voice over or quick navigation between links/forms)
Here is a live vs. PR comparison of the 2: delta.com PR
mobile Screenshot 2023-03-28 at 7 45 00 AM Screenshot 2023-03-28 at 7 47 42 AM
desktop Screenshot 2023-03-28 at 7 47 21 AM Screenshot 2023-03-28 at 7 47 54 AM
asthabh23 commented 1 year ago

Thanks for the detailed explanation on this @ramboz . I could now actually follow it. Though it's now not visible as red button over the hero image, rather hidden behind the section menu below header. I guess that's the actual place it has to be at, right? Rest, seems fine to me.