BCcampus / open-sage

Theme for open.bccampus.ca
MIT License
1 stars 0 forks source link

Entire site A11Y: Right-side menu/list of links #158

Closed josieg closed 5 years ago

josieg commented 5 years ago

Describe the bug On all pages that use that left-side navigation menu/list of links, those links are not easy to find for someone using a screen reader or someone on a mobile divide. For these people, those links appear at the very bottom of the web page, which makes them hard to find. This is especially a problem for the "Browse Our Collection" page, as someone would have to go through all the books on the page to find where there they can select specific subject categories.

And looking at different web pages on my phone, many of them I cannot find those list of links at all.

To Reproduce Steps to reproduce the behavior:

  1. Go to 'https://helga.bccampus.ca/wp/opentextbooks/2-0-find-open-textbooks/browse-our-collection/
  2. Activate screen reader.
  3. Try to figure out how to go through the categories that appear at the top of the screen.
  4. Fail miserably.

Expected behavior I expect that those links should be easy to find for someone using a screen reader or someone on a mobile device.

Screenshots This shows the location of the collection categories (at the bottom of the search results) on my Google Pixel phone in Chrome. mobileview

alex-418 commented 5 years ago

Change the menu on mobile to a drop-down style, move to a location (before the content) that works for all pages.

alex-418 commented 5 years ago

@josieg @ehbeattie completed this via #161. You should now see a new menu after the breadcrumbs on mobile.... with the heading "Browse Subjects".

Can you please test with a screen reader to see if the desired results were achieved? Please let me know of any other changes you'd like to this. Thank you.

mobile_menu expanded

josieg commented 5 years ago

Hi Alex, on my phone I am now seeing the "Subjects" drop-down menu on all pages, not just the "Browse Open Textbooks" page. For example, when I click the "Use Open Textbooks" page, I see a "Browse subjects" drop-down menu rather than the "Use open textbooks" drop-down menu.

alex-418 commented 5 years ago

Thanks @josieg I will limit this new subjects menu to the following pages:

I think that's the only places it should show up?

josieg commented 5 years ago

I think it should be:

josieg commented 5 years ago

Still no success finding the right-side menu with a screen reader

alex-418 commented 5 years ago

@josieg can you BlueJeans or Skype? I'd like to see what the screen reader sees.

josieg commented 5 years ago

Yep. The screen reader doesn't really show anything visually, but I can demonstrate what it says

alex-418 commented 5 years ago

We tested this with @josieg and while it works great for mobile, the desktop version requires the menu to be positioned BEFORE the content in the markup, this is so that the tabbing order is useful for when navigating with a screen reader.

This means moving the menu to the left on the "Browser our collection" page, and on individual book pages. If that's the direction we'd like to go, I can update the template. Here's a screenshot of what it would look like:

lefty

ehbeattie commented 5 years ago

Lovely. Good to go!