Testing the website for accessibility etc. #236

Open
opened 1 year ago by a258wang · 9 comments
Owner

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:

TODO:

  • Accessibility
    • 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)
  • Javascript Disabled -- Amy
  • 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
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 TODO: - Accessibility - [x] Try using a screen reader like [NVDA](https://www.nvaccess.org/download/) or [Orca](https://help.gnome.org/users/orca/stable/introduction.html.en) -- Emily - [X] Check out [Google Lighthouse](https://developers.google.com/web/tools/lighthouse) in Dev Tools - See the related issues #234, #254, #255, #257, #258, #259, #260, #264, #265, #266. I added some of the problems that kept appearing. Feel free to close any. -- Jared - [X] Check color contrast for any problems involving color blindness -- Jared - [X] Check to see if website is accessible without a mouse -- Jared (see #250) - [X] Javascript Disabled -- Amy - [X] Desktop - Chromium browser (eg. Chrome, Edge, Opera) -- Amy - [X] Desktop - Firefox -- Amy - [X] Desktop - Safari -- Amy - [X] Mobile - Chromium browser (eg. Chrome, Edge, Opera) -- Amy - [X] Mobile - Firefox -- Amy - [X] 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
a258wang added this to the Pre launch milestone 1 year ago
Poster
Owner

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.)

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.)
Poster
Owner

I think this runs lighthouse: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fcsclub.uwaterloo.ca%2F~a3thakra%2Fcsc%2Fmain%2F

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.

> I think this runs lighthouse: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fcsclub.uwaterloo.ca%2F~a3thakra%2Fcsc%2Fmain%2F 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.
Collaborator

Oh I see. I'll try out Dev Tools and look at each page. Thanks!

Oh I see. I'll try out Dev Tools and look at each page. Thanks!
Collaborator

@a3thakra With all the lighthouse issues, would a Lighthouse label on Gitea would be a good idea?

@a3thakra With all the lighthouse issues, would a Lighthouse label on Gitea would be a good idea?
Collaborator

@j285he we have the performance label, we can create different labels like SEO, a11y, etc. I don't think creating a label for lighthouse is a good idea :)

@j285he we have the performance label, we can create different labels like SEO, a11y, etc. I don't think creating a label for lighthouse is a good idea :)
a3thakra added the
a11y
label 1 year ago
a3thakra added the
Priority - Medium
label 1 year ago
e26chiu self-assigned this 10 months ago
Collaborator

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 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.
Collaborator

@e26chiu

It would also be a good idea to run https://accessibilityinsights.io

Let me know if you need any help with that.

@e26chiu It would also be a good idea to run https://accessibilityinsights.io Let me know if you need any help with that.
Collaborator

I used the accessibilityinsights extension to run an Assessment. Here's the result and notes I took:

I used the accessibilityinsights extension to run an Assessment. Here's the result and notes I took:
Collaborator

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 archive page instead of it only being accessible in the home page (maybe as a new navbar link?)
  • Repetitive Content: Bypass Block: When using tab to navigate, there's no way of skipping the navbar links to go straight to the content.
  • Duplicate id: bluegreen-gradient
  • 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).
  • Attribute paint-order, font-weight, font-family, overflow not 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 tab to navigate in the Events page, the tab highlights the content of the event and not the See details link.
  • 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.
# 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 archive` page instead of it only being accessible in the home page (maybe as a new navbar link?) * **Repetitive Content**: Bypass Block: When using `tab` to navigate, there's no way of skipping the navbar links to go straight to the content. * **Duplicate id**: `bluegreen-gradient` * 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). * Attribute `paint-order`, `font-weight`, `font-family`, `overflow` not 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 `tab` to navigate in the Events page, the tab highlights the content of the event and not the `See details` link. * **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.
j285he added the
In Progress
label 9 months ago
Sign in to join this conversation.
No Milestone
No project
No Assignees
4 Participants
Notifications
Due Date

No due date set.

Dependencies

No dependencies set.

Reference: www/www-new#236
Loading…
There is no content yet.