Testing the website for accessibility etc.
We need to test our site and make sure it is accessible, and also verify that it works on different devices in different browsers.
For each item below that you are going to test, please edit this description:
- Replace the ??? with your name
- Test the entire site (https://csclub.uwaterloo.ca/~a3thakra/csc/main/), and take note of any issues you find
- Check off the item when you are done
- Try using a screen reader like NVDA or Orca -- Emily
- Check out Google Lighthouse in Dev Tools
- Check color contrast for any problems involving color blindness -- Jared
- Check to see if website is accessible without a mouse -- Jared (see #250)
- Desktop - Chromium browser (eg. Chrome, Edge, Opera) -- Amy
- Desktop - Firefox -- Amy
- Desktop - Safari -- Amy
- Mobile - Chromium browser (eg. Chrome, Edge, Opera) -- Amy
- Mobile - Firefox -- Amy
- Mobile - Safari -- Amy
- I tested on an iPad, so if someone has an iPhone then it might be worth looking at the site on there as well. -- Amy
Just a couple of notes after testing the site on my phone in Google Chrome:
- remove shapes from mobile /events/[year]/[term] page
- remove shapes from mobile /events/[year]/[term]/[event] page
- adjust shapes on mobile Meet the Team
- adjust shapes on mobile Our Supporters
- adjust shapes/top margin on mobile Tech Talks and Tech Talk pages
- /events/[year]/[term] page/MiniEventCard, maybe make "view details" become "hide details" when the card is expanded?
- mobile /events/[year]/[term] page, the "navigation" header still looks a little odd? It's left-aligned but with a wrap... (idk if there's an issue for this or if we're just going to keep it)
- mobile organized content previous/next buttons have an unusually wide line (I also noticed that the buttons have an unusually large clickable area even on desktop)
- tweak the logic for getting the mobile organized content menu button to show, since it can be difficult to get it to stay for long enough to click on (I think there is already an issue for this)
(I would try to investigate further/create separate issues/fix things, but I have to sleep now - maybe someone else can look into some of these, or I'll just come back to them another day.)
Yep, I think you're right! Just a couple of things though:
- Running Lighthouse through Dev Tools gives scores/suggestions on Performance, Accessibility, Best Practices, and SEO, whereas Pagespeed only appears to discuss the Performance metric.
- It appears that both tools only analyze one page at a time, so we might want to run them on a couple of different pages beyond just the home page, to see if different issues arise.
Ultimately though, I think testing out the site with a screen reader is more important than running everything through Pagespeed/Lighthouse - these tools are just helpful in generating suggestions for improving certain aspects of the site.
Oh I see. I'll try out Dev Tools and look at each page. Thanks!
I used the screen reader NVDA to test the website. Every text that I hovered over was legible for the screen reader (including navigation links, body paragraphs, and images). The background shapes that are there for decorational purposes and the Codey mascot didn't have any caption which I'm assuming is normal. There is only the social media links where hovering over each icon gives me nothing. I think we should give social media links captions for better accessibility.
I used the accessibilityinsights extension to run an Assessment. Here's the result and notes I took:
Summary of the results:
More details found in the file I attached above.
- Color Contrast: active nav link (current page),
here(hover on link
here, hover colour doesn't have enough contrast), subscribe button hover. Basically when you hover over the link, the secondary accent doesn't have enough contrast with the background.
- Page navigation: Add more ways of accessing the
news archivepage instead of it only being accessible in the home page (maybe as a new navbar link?)
- Repetitive Content: Bypass Block: When using
tabto navigate, there's no way of skipping the navbar links to go straight to the content.
- Duplicate id:
- Warning: Consider using the h1 element as a top-level heading only (all h1 elements are treated as top-level headings by many screen readers and other tools).
overflownot allowed (bluegreen-gradient)
- Links must have discernible text: social links (facebook, instagram, twitch, etc.) don't have an alt description (both in the footer and homepage)
- Not an error necessarily, just something I noticed: When using
tabto navigate in the Events page, the tab highlights the content of the event and not the
- Contrast: Not a contrast error, but classed as a contrast error in the report: there's a difference between the dropdown of About and Resources in the mobile version. When you activate the dropdown in the Resources link, the dropdown icon disappears. (see the picture for reference).
- Multimedia: This section would be rather long to solve: Videos (the ones in the tech talks) must have captions and audio description.
- Image: Every image must be coded as either meaningful or decorative. For decorative images, add
alt="". For meaningful images, add descriptions.
Deleting a branch is permanent. It CANNOT be undone. Continue?