[68.2] Improve WCAG 2.0 rating of website to meet AA standards

[alex-418]

Investigate changes as discovered in #88 to meet AA standards

[alex-418]

Fix the following on all pages:

1. Header nesting - header following h1/h2 are incorrect.
2. Add text to the label elements
3. select elements missing an associated label.

[alex-418]

1. Header nesting on homepage fixed via https://github.com/BCcampus/open-sage/commit/1aab90948d9fda1664945ccdcc1c9b1c6c0a1dce

2. Adding text to labels on homepage: This one required replacing wp_get_search_form() in the header with our own custom search form so that we can generate the search form with the aria-label attribute to make it screen-reader friendly.

3. In the find open textbooks page, the select list for the filters needed a label. I opted to use aria-label attribute once again via https://github.com/BCcampus/opentextbooks/commit/3ef4387008a0ebdf506a6018797169db07d7aed2

This tackles all of the major accessibility issues that I found using the following tool: https://achecker.ca/checker/index.php

*Please note, it will still give a warning forlabel element, this is because it does not detect the aria-label attribute which also satisfies this requirement, but it does so without needing to have visible text for non-screen reader users on the page. This matches our design better.

[ehbeattie]

Ok...

[josieg]

I have some comments on this actually. I went through the page with a screen reader and noticed some things that could use improvement. This is just for the home page. Happy to talk about any of this more if there are questions.

• The "Create Open Textbooks" and "Use Open Textbooks" boxes are linked in addition to having "Learn More" links, which is redundant. Plus, the Learn More links are not descriptive. I would propose removing links from the headings/images and adding descriptive link text to all of the "Learn More" buttons so they are unique. For example, they could match the heading (i.e. FIND OPEN TEXTBOOKS) or be longer (i.e. LEARN HOW TO CREATE AN OPEN TEXTBOOK)

• the stats section is confusing for someone using a screen reader, and there are a few reasons for this and I'm not sure about what a good fix would be. Here are the problems I found:

  1. The numbers are headings, and they shouldn't be.
  2. Only the icons are linked (confusing for someone reading links on the page)
  3. The images themselves are descriptive and don't actually require link text My thoughts: Remove alt tags and links from icons, and remove heading status from numbers. Instead create one link (imitating the Browse All Guides and Toolkits button) that says "Find More Open Textbook Stats."

• Headings levels are off (they seem to address styling rather than the content structure): There is no heading 1 h2: Find Open Textbooks h3: Search the B.C. Open Textbook Collection h2: Create Open Textbooks h2: Use Open Textbooks h2: Open Education at BCcampus h2: Getting Started

• the alt tags for social media icons do not need to include "icon"

• can we title the collection search box so it says "Search collection. " Right now it seems to say "search terms."

[alex-418]

Nice, thanks @josieg for taking the time to go through it with a screen reader. I have never used one but would be keen to learn, it'd be great to make this work well for screen readers. My suggestion would be to put each of these (along with any other ones you discover) into the issue backlog at https://github.com/BCcampus/open-sage so we can discuss, prioritize, estimate, and schedule into the next sprint.

[josieg]

Awesome. I will move these into their own issues and add more if I find any. If you use a windows computer, I can give you some tips on using screen readers. I have no experience with Macs.