Testing the website for accessibility etc. #236
Labels
No Label
a11y
Backlog
Blocked
Bug
Content
Dependencies
Design
Feature Request
Good First Issue
In Progress
Performance
Priority - High
Priority - Low
Priority - Medium
Untriaged
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…
Reference in New Issue
No description provided.
Delete Branch "%!s(<nil>)"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
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:
Just a couple of notes after testing the site on my phone in Google Chrome:
(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:
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!
@a3thakra With all the lighthouse issues, would a Lighthouse label on Gitea would be 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 :)
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.
@e26chiu
It would also be a good idea to run https://accessibilityinsights.io
Let me know if you need any help with that.
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.
here
(hover on linkhere
, 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.news archive
page instead of it only being accessible in the home page (maybe as a new navbar link?)tab
to navigate, there's no way of skipping the navbar links to go straight to the content.bluegreen-gradient
paint-order
,font-weight
,font-family
,overflow
not allowed (bluegreen-gradient)tab
to navigate in the Events page, the tab highlights the content of the event and not theSee details
link.alt=""
. For meaningful images, add descriptions.