Accessibility Testing

Hiiiiya I'm down to the wire here but I am only late by a bit! No late marks please! :P

So. I'm sorry for how long this list is, was thorough. I don't have any screenshots but if anything I describe doesn't make sense please ask me to clarify more! Also you'll see as you go through that some of these things are of higher priority than others (like the heading structure being off, versus something like adding embed classes to make alt tags look nicer), but it's just everything I thought worth mentioning when going through with the intent of being nit picky.

General pieces that apply across the site:

The heading structure on each page is not arranged in a proper hierarchy. Some don’t have h1s or h2s, and are just in a strange order.
The aria-labels have a spelling error using an underscore instead of a dash. They need to be aria-label not aria_label.
In the tag order, the "back to top" button is right after the banner. Would it make more sense to put it further down, so that it functions to send the user back to the top vs. when they are already at the top of the page? Possibly put it in the footer pattern instead of the header? It should be last in the tab order I would think.
Should the “Support” link in the nav say something like “Mentors” instead? The phrasing of "Support" doesn’t make sense to me in that context.
When testing without Javascript the filtering system and quiz don’t work, but that could be assumed lol so no concerns there.
I couldn’t figure out how to test without sound? I feel like that mostly applies to the interview videos. In general I don’t understand how to turn the captions on, however I believe that is because you don’t have those files fixed from the motion team yet, so, I’m sure that’s already a known entity.

Homepage:

Home page has no h1 or h2s. It probably makes sense to list the logo as the h1 with an if statement? Right now there isn’t a title for the site in general, as the aria-label lists the button action but there is no place that explains the purpose of the site as a whole, if that makes sense? Mostly though, needing an h1 is the biggest thing.
The heading structure in general is mixed up (I’m assuming because of this being built with patterns), but in general I would think that most of the headings on this page should be h2s? It'll need to be looked at though.
I have poor internet and the video doesn't load sometimes? It should have an alt option if this happens. You can include an img tag after the source tag inside the video tag, and then it will show alt text etc if it doesn’t load, or the image if the video doesn't show. Probably the logo would be good here?
Also, the video is cut off on the viewport. I know that is because of the size of the video, but could we try adding the wrapper class or something so that the full video is visible from loading? I guess that's a preference thing but it makes the video seem like it's centred wrong.

Designers:

The alt text for the student headshots is showing a warning (not an error) for being too long. It’s maybe a lower priority, but I don't know that these tags need to describe the students so specifically, as much as it’s lovely and clearly a lot of energy was put into that. I feel like the teacher alt tags (“The headshot of so-and-so.”) are perfect and to the point.
On the note of the teachers, they are being affected by the filtering system and all blur out every time one of the filters is set. I’m not sure that is necessary (although maybe fun to suggest they don’t have any of these skills lol awkward).
Sometimes the student cards load slowly? Again, my internet is not great. If embed classes are used for them at the square 1x1 ratio they will at least load at the same size? The length of people’s name/alt text is making them all appear at different sizes while loading right now. I assume that's a quick fix on one pattern (and hopefully not necessary because the images will always load), but just a thought to make things look tidier.
The pages for students are in the tab order when the filters are applied, which isn’t ideal for someone trying to tab through a specific specialization of students. When they are blurred adding a tab-index of -1 should help this I think?
When a filter is put on, it links tab users back to the “#designers” id, which means they have to tab through all the menu items again. It might help to add a new id to the grid of student cards themselves to remove this step for the user. So just adding an id to the div with the student cards grid.

Quiz:

No h1, starts at h3? - Heading structure again.
None of the student images have alt tags on this page. :(
Can the full list of "results" not show until after going through the quiz? Feels counter-intuitive to have "results" before starting?

404:

Isn't appearing, I'm getting that "Page Not Found" message from Github, but not a branded 404 page. It’s called “page-404.html” in the code, it should just be “404.html” and that should be sorted!

Student Templates: The templates all showed the same base issues.

The heading structure on each template needs to be looked at. The student pages do have h1s though!
The alt text on the student projects is too long in some cases when using what the students provided (which, shocker lol). If the project images are in a figure with a fig caption instead of a div, then we don’t need the alt text there and it might help that issue? I think that should be another quick pattern fix, might need some css adjusting for styling that is automatic to figures.
The projects and their descriptions are not in the tab flow at all.
Several of the pages I tested have contrast errors based on the specialization colour. Branding (-ation word and quote), Illustration (quote), Motion (quote), Print (quote). :,(

Things I noticed on happenstance:

Behance icon isn’t appearing?
Cole happens to not have a description of one of his projects (the first one) and the hover still appears without the content so it looks empty? I wonder if an if statement can be added to not show hover states when there is no content provided. I'm not sure if he didn't provide any or if it was missed, but anyways. Just making you aware of it!
Ian also still has that google drive link issue on his page (I’m sure you know about this).
Ziai Zhao has no -ation word, a bunch of social tags that are empty and the empty video ports under her projects (I’m adding this because I assume she won’t be testing her page for you based on how hard it has been to reach her, and I happened to open her page).

Y'all are CHAMPS! Like I said please ask me to clarify if anything doesn't make sense, especially if it is somewhere where I suggested a fix but it makes no sense the way I wrote it.

algonquindesign-grads / 2021

Accessibility Testing — Hannah #86

Checklist for Chrome Accessibility testing on Desktop:

With the Web Developer Toolbar:

Other Testing:

Deadline: Saturday, March 20th, 11:59PM