Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Ensure tab order in each media context/screen size facilitates accessibility: 3 #245

Closed
paregorios opened this issue Mar 2, 2018 · 6 comments
Closed

Ensure tab order in each media context/screen size facilitates accessibility: 3 #245

paregorios opened this issue Mar 2, 2018 · 6 comments
Assignees
@alecpm
Labels
priority: high requirement A modification levied by the University or ISAW for compliance or other mandatory reasons.
Milestone
Autumn 2018

Comments

@paregorios
Copy link
Member

paregorios commented Mar 2, 2018 •
edited
Loading

When in desktop CSS layout:

  • “Skip to Main” link
  • NYU Institute for the Study of the Ancient World home logo link
  • Top Bar Menu
  • Main Menu
  • Breadcrumbs
  • Main Content Area
    • Tab only to focusable elements.
  • Sidebar
    • Should focus top to bottom including the expand/collapse buttons.
  • Footer links

When in mobile CSS layout:

Tab order for the mobile will be slightly different since the hamburger menu > is active.

  • NYU Institute for the Study of the Ancient World home Link
  • Hamburger Menu
  • Menu Items
    • Should focus from top to bottom
    • Includes search bar
  • Close button
  • Main Content Area
    • Tab only to focusable elements.
  • Footer links

screen shot 2018-04-24 at 2 24 02 pm

screen shot 2018-04-24 at 2 22 00 pm

Traceability: Microassist Report 1 > Tab Order > Desktop

Traceability: Microassist Report 1 > Tab Order > Mobile
@paregorios paregorios added the requirement A modification levied by the University or ISAW for compliance or other mandatory reasons. label Mar 2, 2018
@paregorios
Copy link
Member Author

Regarding mobile view see also #234 (comment)

@paregorios paregorios mentioned this issue Apr 24, 2018
Closed
@paregorios paregorios changed the title Ensure tab order facilitates accessibility Ensure tab order in desktop/tablet view facilitates accessibility Apr 24, 2018
@paregorios paregorios changed the title Ensure tab order in desktop/tablet view facilitates accessibility Ensure tab order in each media context/screen size facilitates accessibility: 3 May 25, 2018
@paregorios paregorios added this to the Accessibility 2018 August milestone May 30, 2018
@paregorios
Copy link
Member Author

paregorios commented Dec 6, 2018 •
edited
Loading

WCAG says:

"focusable components receive focus in an order that preserves meaning and operability."

So, I think our current behavior of tabbing through main nav (colorful) before we tab through secondary nav (top gray bar) is good.

See further: https://www.w3.org/WAI/GL/WCAG20-TECHS/H4.html

@alecpm
Copy link

alecpm commented Dec 7, 2018

I think this is working well at this point, though we need better focus indications on the logo, search button, breadcrumbs, and navigation portlet among other things.

@paregorios
Copy link
Member Author

OK. Merge and deploy to production. I'll create new ticket(s) for the remaining focus indication contexts.

@paregorios
Copy link
Member Author

@alecpm @skleinfeldt can you verify that this has been merged to master and deployed to production? Thanks

@paregorios
Copy link
Member Author

Sorry I got confused. Disregard previous comment.

@paregorios paregorios mentioned this issue Jan 14, 2019
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@alecpm alecpm

Labels
priority: high requirement A modification levied by the University or ISAW for compliance or other mandatory reasons.
Projects
None yet
Milestone
Autumn 2018
Development

No branches or pull requests
2 participants
@alecpm @paregorios