Design System: Audit Sticky Side Nav element

[Aveline-art]

Overview

We need to review the current sticky side nave and create a standard for the component so that when you see two pages with that navigation style, they function the same and that they are WCAG compliant and have the best industry practices.

Action Items

• Find all instances of the HTML, CSS, or (inclusive) JS code for the sticky side nav from all pages (one can be found on the about page) as of issue creation.
• Research online on what the standards are in terms of HTML tags, accessibility, etc. for this component.
• Do a write-up on your research as a comment on this issue.
  • If the recommendation requires visual changes, bring to Sunday meeting to have designers create a new redesign issue for design.
  • If the recommendation requires a refactor or other non-visual changes to the component (and can be made before redesign), please release dependency on Design System: Standardize Sticky Side Nav #2174
    • Add a link to your write-up in issue Design System: Standardize Sticky Side Nav #2174

Resources/Instructions

Where the sticky nav can currently be seen

• about page
• Figma, Guides pages - Alyssa is the designer and developer who started the new guides page layout that includes the sticky menu

[github-actions]

Hi @AzaniaBG, thank you for taking up this issue! Hfla appreciates you :)

Do let fellow developers know about your:-
i. Availability: (When are you available to work on the issue/answer questions other programmers might have about your issue?)
ii. ETA: (When do you expect this issue to be completed?)

You're awesome!

P.S. - You may not take up another issue until this issue gets merged (or closed). Thanks again :)

[AzaniaBG]

Availability: 7 AM - 8 AM 10/8/2022; 7 AM - 8 AM 10/9/2022; 10 AM - 11 AM 10/10/2022; 1 - 4 PM 10/11/2022
ETA: 10/11/2022 by 7 PM

[AzaniaBG]

Weekly update: I'm almost finished with the write-up, but I have a question that I was not able to address at Tuesday's meeting. I will also be attending Sunday's meeting to discuss this issue, so my new ETA is 10/16/2022 by 10 AM.
Availability: 6:30 - 7:30 am 10/12/2022; 1 - 2 pm and 5 pm - 8 pm 10/13/2022; 6:30 - 7:30 am 10/15/2022

[AzaniaBG]

Write Up:

Research Findings:

• WCAG success criteria for determining information, structure, and relationships programmatically can be satisfied with nav. The <nav> element is used to group navigation links, making them easier to locate and skip past. If more than one <nav> element is used on one page, use the aria-label or aria-labelledby attribute. See here for details. This can be used instead of an ARIA landmark, and is preferred when possible (see MDN docs for more information on this). General Principles for ARIA Landmarks indicate HTML sectioning elements can be used.

• WCAG success criteria for keyboard accessibility requires ensuring keyboard control for all functionality, so the sticky sidebar should incorporate that functionality.

• When creating a sticky sidebar/nav, a programmer should ensure:

  • it does not overlap with other page elements
  • the focus is navigable and is not obscured
  • it does not cover too much of the screen on high zoom or on small screens
  • it is visible with landscape orientation
  • it does not prohibit interactions like keyboard focus and navigation
  • it works with zoom

(see this article for details)

• WCAG success criteria for use of color requires a contrast ratio of 3:1 with surrounding text, as well as additional visual cues on focus for links where color alone is used to identify them (see here for details).

Summary:

The CSS styles and JavaScript logic for the sticky sidebar addressed many of the problems that a sticky sidebar might cause. Therefore, my recommendations include keeping the dynamic styles using JavaScript. I also recommend adding features related to keyboard accessibility and navigation as well as using proper color contrast ratios for the links within the sidebar (according to this color contrast checker, the color contrast is not sufficient for font sizes below 18pt/24px).

Recommendations (based on Research Findings above):

• Use <nav> element instead of <div> for correct semantic HTML
• If more than one <nav> element is used on one page, use the aria-label or aria-labelledby attribute to distinguish each group.
• Ensure sticky side bar is accessible with keyboard-only user
• Use visible focus to indicate which element has focus
• Ensure 3:1 color contrast ratio for sticky sidebar links with a font size below 18pt/24px (or increase font size)

• Keep the container that prevents overlap with other user interface components
• Keep the media queries that turn off sticky sidebar for mobile, smaller breakpoints, and zoom > 200%
• Keep the function that shows sticky sidebar when user scrolls up
• Keep the redundant visual cue (left arrow) to indicate the user's location in relation to the main page content

• Test the sticky:

  tests:

  • Display content on a device / user agent in portrait mode.
  • Change the orientation to landscape.
  • Check whether the sticky header and footer will be un-fixed depending on the existing media query settings.
  • Display content on a desktop / user agent at a starting viewport width of 1280x1024 CSS pixels.
  • Change the viewport size in width and height or use the zoom function of the browser.
  • Check whether the sticky header and footer will be un-fixed at specific sizes depending on the existing media query
    settings.

Research links / Resources:

• ARIA: navigation Role
• Sticky and fixed elements may cause huge accessibility problems
• Sticky elements: functionality and accessibility testing
• Sticky Headers: 5 ways to make them better

WCAG Standards:

• Using media queries to un-fix sticky headers / footers
• Focus Appearance
• How to Meet WCAG (Quick Reference)
• H97 Technique - grouping related links using the nav element
  • ARIA11 Technique - using ARIA landmarks
  • Sufficient Techniques for Info and Relationships
  • ARIA Landmarks - General Principles
• Distinguishable Use of Color
  • Ensuring at least 3:1 ratio between text and background
  • Using a contrast ratio of 3:1 and providing additional visual cues
  • Link Contrast Checker - against background
  • Link Contrast Checker - within text
• Keyboard Accessible - sufficient techniques
  • Using CSS when component receives focus - Focus visible
  • Navigable Guideline 2.4
  • Focus Not Obscured
  • Draft - Understanding Focus Not Obscured
• Headings - Exception for fixed page sections (e.g., sidebars)

[AzaniaBG]

Update: I added my Write Up via comment and Released #2174 by moving the issue to the "New Issue Approval" column. I'll be attending Sunday's meeting (tomorrow) to discuss re-design.

[AzaniaBG]

@blulady I spoke with @sijiapitts on the design team regarding re-design recommendations and she provided this link to Figma with 3 possible designs (current, larger font-size, same font-size, different color) for the sticky side nav. Should this link also be added to #2174?

[AzaniaBG]

Update: at the All-Team meeting Sunday, we discussed the new Figma designs Sijia created based on WCAG recommendations set forth in this issue. Bonnie approved one of the options and Sijia put this final design in a pink box. I'm not able to edit the Figma to add this issue number, but I gave it to, and I believe she will add it.

[sijiapitts]

Update: Issue number 2174 has been added to Figma next to the design frame.

[blulady]

Looks like amazing work as always @AzaniaBG. You did everything the issue asked and more. I love the test sections of the comment you left. Do you think I could possibly ask you to do one more thing and add this to the wiki? It would be a shame if we had all of this great info on how to make a sticky side nav and just left it in a comment on an issue somewhere.

[AzaniaBG]

Looks like amazing work as always @AzaniaBG. You did everything the issue asked and more. I love the test sections of the comment you left. Do you think I could possibly ask you to do one more thing and add this to the wiki? It would be a shame if we had all of this great info on how to make a sticky side nav and just left it in a comment on an issue somewhere.

@blulady ~ thank you! yes, of course ~ i can add it to the wiki. Can you clarify which wiki i should add it to?

[blulady]

I think this would be a good place. What do you think? Between Styling with reusable components and How to read and interpret issue labels?

[AzaniaBG]

Add write up to Wiki ETA: 10/27/2022 by 5 PM; Availability: 10/27/2022 10 am - 11 am; 4 - 5 PM

[AzaniaBG]

Added link to write up in Wiki

Wiki after link added

[blulady]

Thank you. I believe this issue is closed.