Feedback on My Website's Accessibility

[k-cottonears]

I've got a personal website right here: https://k-cottonears.neocities.org/

Unfortunately, as much as I'm proud of it, accessibility is an afterthought. I've tried focusing on that like focusing on easy navigation for mobile users as of late (I'm still working on that), but there are other concerns I have:

• Zoom is somewhat worked on. I still need to fix the navigation menu for anything 200% or above, but aside from that, is the website tolerable at that level? How much should I care about zoom?
• Do I have to be concerned with bandwidth? The website from where I'm from doesn't have lengthy load times, but what about others in like rural areas?
• Ignoring bandwidth, what about performance?
• I've seen few accessibility systems complain about contrast about the header colors. Are there any other bad colors anywhere on the site? How do I test for color contrast myself?
• It also complained about not having an ability to turn off the GIF animations for people who could get sick from that.
• Is there any other accessibility issues that exist but I am missing?
• Is there any accessibility issue that's a bit overblown?

[SArpnt]

i haven't used a screen reader, but the nav elements don't look right.

you have 3 main nav elements where only one is visible at a time depending on the page size. which one is a screen reader supposed to see, and what happens if the screen reader switches between them?

you also have some nav elements *inside* other nav elements, which definitely isn't right.

accessibility isn't just about screen readers either. having only icons for navigation is incredibly confusing, and i would have no idea what any of the buttons do or which places i've seen on a tablet. i can only get by on a pc by hovering and looking at the link. text is far more important here than the icons, and you could shrink the icons quite a bit. it's also possible that the navigation could have the bottom cut off on a horizontal phone. you could make the side area a scrollable region to fix this.

i think the nav turning into a top bar with a tiny hamburger button is also just out of place. it would probably work better to just put navigation at the top of the page, maybe in a <details> tag.

other than the nav area everything looks good for screenreaders and other general readability, it's all just standard webpage. just keep in mind for anything new or anything i missed that it's generally better to have an undescriptive element like div instead of a badly used descriptive element.

i don't think you should need to do anything to disable gifs on your website. you barely have any, and browsers and oses already have settings for this everywhere.

i assume you don't want to get rid of the waterfall image but check if you can compress it better, it's almost a megabyte and significantly larger than the entire rest of the page. the decorative fur image on the anthro design page is also massive, and probably other similar decorative images on many pages. i suggest you go on squoosh, and make avif and webp versions of your images. avif compresses better than webp, webp compresses better than jpg.

[k-cottonears]

At 2/11/24 07:55 PM, SArpnt wrote: i haven't used a screen reader, but the nav elements don't look right.
you have 3 main nav elements where only one is visible at a time depending on the page size. which one is a screen reader supposed to see, and what happens if the screen reader switches between them?
you also have some nav elements *inside* other nav elements, which definitely isn't right.

accessibility isn't just about screen readers either. having only icons for navigation is incredibly confusing, and i would have no idea what any of the buttons do or which places i've seen on a tablet. i can only get by on a pc by hovering and looking at the link. text is far more important here than the icons, and you could shrink the icons quite a bit. it's also possible that the navigation could have the bottom cut off on a horizontal phone. you could make the side area a scrollable region to fix this.

i think the nav turning into a top bar with a tiny hamburger button is also just out of place. it would probably work better to just put navigation at the top of the page, maybe in a <details> tag.

other than the nav area everything looks good for screenreaders and other general readability, it's all just standard webpage. just keep in mind for anything new or anything i missed that it's generally better to have an undescriptive element like div instead of a badly used descriptive element.

i don't think you should need to do anything to disable gifs on your website. you barely have any, and browsers and oses already have settings for this everywhere.

i assume you don't want to get rid of the waterfall image but check if you can compress it better, it's almost a megabyte and significantly larger than the entire rest of the page. the decorative fur image on the anthro design page is also massive, and probably other similar decorative images on many pages. i suggest you go on squoosh, and make avif and webp versions of your images. avif compresses better than webp, webp compresses better than jpg.

As far as the navbar goes, how is it now? I changed the nav section to a top navbar, and holy shit, I'm so glad I did. I still need to work on making it compatible with mobile, but I think my website is more accessible and proper now, even if there's still issues. I've even tested it for how it operates with the Tab key, and besides needing to hit tab twice from opening to closing a submenu, I think it should be fine.

[SArpnt]

As far as the navbar goes, how is it now?

the new navbar design is good, but also has some new issues.

the navigation is tiny and entirely missable without javascript. you don't need javascript to make dropdowns! use the summary/details elements. mobile doesn't need a hamburger menu either, give it a wide button like everything else. easier to hit and lets you actually fit in text. you also have tons of room to let the 4 buttons shrink before condensing it all down into one. use flex-shrink.

i think in the context of your navigation it would be better to use "other" instead of "etc". etc usually goes at the end of lists of examples for things but your buttons are themselves seperate categories with full word names and "etc" seems out of place.

also, i don't know if something changed or if i just missed it before, but that little bobbing animation on your fancy webring display is using 10% of my cpu, and the rest of the website (probably the blurring effects) seems to also use up another 5% or so. it's not anything that slows down the website, but it's enough to make my laptop loud as hell. not sure if it happens on chrome, i'm on firefox. pretty sure that webring animation requires constantly recalculating the drop shadow (it doesn't move smoothly with the image, it keeps moving in 1px increments while the image moves smoothly, and there's weird shimmering on the edge). it might also keep trying to recalculate the layout to resize things. there might be a debugger tool to see how much work has to be done on all the elements?

definitely check the webring thing, and you can probably fake the blur and transparency since it's only used on small areas anyways.

you probably don't care about printing so much but if you press ctrl-p the layout sucks. you can use media queries to style specifically for printing if you want to improve that.

[k-cottonears]

At 3/1/24 05:50 PM, SArpnt wrote: you don't need javascript to make dropdowns! use the summary/details elements.

Isn't that a wrong usage for those tags, though? Even with overriding the ARIA roles, I feel like assistive readers would misread what those elements are actually for. You know, there supposed to be buttons, not a summary of something.

At 3/1/24 05:50 PM, SArpnt wrote: your fancy webring display is using 10% of my cpu

Can you please tell me what tool you used to find this out? I know there's Firefox's own performance tool, but TBH I don't know how to use it. Knowing what you used could be helpful in all sorts of places, not just the webring and effects.

At 3/1/24 05:50 PM, SArpnt wrote: you probably don't care about printing so much but if you press ctrl-p the layout sucks.

To be honest, I probably will not address this. With all due respect, I have to ask, does anyone actually use or even care about CTRL-P? I've never seen anybody use it or seen a website with a good printing layout. Even if they did, I can't imagine a good use case for it on website.

[SArpnt]

At 3/1/24 08:04 PM, k-cottonears wrote: Isn't that a wrong usage for those tags, though? Even with overriding the ARIA roles, I feel like assistive readers would misread what those elements are actually for. You know, there supposed to be buttons, not a summary of something.

that's the correct usage of the elements. the text you use to label your dropdowns describe what's inside of them, without just showing the whole thing. that's a summary!

Can you please tell me what tool you used to find this out? I know there's Firefox's own performance tool, but TBH I don't know how to use it. Knowing what you used could be helpful in all sorts of places, not just the webring and effects.

my computer got loud, i checked the task manager, and i got suspicious of the animations because the page doesn't have anything else on it. i then deleted the animated element to check it. i'm not sure how to *properly* profile page rendering, maybe the profiling tab shows information on it? you'll probably need to look into it yourself.

To be honest, I probably will not address this. With all due respect, I have to ask, does anyone actually use or even care about CTRL-P? I've never seen anybody use it or seen a website with a good printing layout. Even if they did, I can't imagine a good use case for it on website.

like i said, you probably don't care, it's not very important for your website. it would be more important for more general important information like wikipedia or various guides, where you might want to print out some information incase you can't use your computer later. maybe consider it if you ever put a guide on your blog or something like that.