Let's see if each other's sites are accessible

[IndigoGolem]

I read Brennan Brown (of brennan.day)'s article about accessibility % ereyesterday, and it reminded me that my site is not as good at accessibility as it should be. Brennan goes on to say that a good thing to do about this is ask people with disabilities to read your site and see what problems you missed.

That's why i'm bringing this up here. I'm shy about telling people i know in Reality about my website, and even more uncomfortable asking people unprompted to look at it. But here on the Web it's different. I figure this thread can be where people ask for feedback on this aspect of their sites, then list their relevant disabilities/qualifications (color blindness, etc.) and give feedback on other sites that have been brought up here.

I'll start by saying my site is anveozo.net. I'm nearsighted but sit close enough to my computer that reading on it isn't affected much. But i do browse most sites with javascript and embeds from other sites (images, fonts, CSS, etc.) blocked so i'm good at seeing when a site relies on those.

What stuff does my site do badly? I know some things, like not enough semantic HTML and alt text, but i'm sure there's stuff i don't know about too.

[chilblands]

I was going to write a blog post about accessibility myself! I really like a11's post with their table. Admittedly accessibility is an afterthought for me as well, but I think the easiest way to start with is colour contrast (readability is important for everyone... especially colour-blindness). Oh and at least 16px or 1rem font size! It absolutely piss me off when the website is itty bitty (what is this, website for ants?!)

I think there is a barrier of one person tending a website vs a group of people so I would not get too hung up on it. I like the accessibility function on Noah's website, which is perhaps a function you'd be interested in for yours.

This is a small list of "non-intrusive" accessibility functions:

• 16px or 1rem font-size
• colour contrast
• toggle to stop animation
• semantics HTML
• similar to semantics HTML, use headings H1,H2,H3,etc... (and in order H1->H2->H3->etc...)
• alt text to describe images

For your site, I can see you use < big > instead of headings and < small > for normal text. As well as "&" to navigate instead of the whole link like "<- Back to home". I'm not visually impaired but the small links to click on is difficult for me. It is something I am also trying to fix for my own website I think starting at all is better than nothing! People don't have to be disabled to use accessibility features.[/list]

[Dan Q]

I'll start by saying my site is anveozo.net

I took a quick look, and the things that stand out to me are:

Generally it does okay. Better than many big sites! (Amazon makes some pretty catastrophic choices, for example!) So pat yourself on the back for caring!

Some changes I'd consider:

1. There are few landmarks to jump to (well done on using a <nav> for your menu, though): a <h1> and maybe some <h2>s would go a long way. You can always make them look the same as your current site using CSS; they don't have to mean a design change.

2. Your use of single-character links is challenging. Screen reader users (and some power users!) will often press a keyboard shortcut to list all of the links on the page. Do that on e.g. your About page, and all they get is &, &, &, &, &. To interpret that, they have to have first read a message on your home page (which they might not have visited yet: remember, people can land on your site on any page). In a few places on the home page you've tried to mitigate this by writing e.g. <a href="..." alt="A description of where the link goes"> which is laudable but there is no alt="..." attribute for links; you might mean title="..."?

Personally, I'd say that these symbols are decorative and, if you want them, should be added via CSS! E.g. if you did <a href="..." class="internal" title="..."> and <a href="..." class="external" title="...">, then you could have some CSS to "add" the symbol after-the-fact, e.g.:

Code

a.internal::after {
  content: ' &';
}

a.internal::after {
  content: ' %';
}

Single-character links can also be pretty hard "hit targets" for people without strong fine motor control skills, although at least your site respects resizing/changing fonts etc.

That's all that leaps right out at me!

[Dan Q]

I like the accessibility function on Noah's website

Beware: accessibility "overlays" like this are really contentious. Some people with accessibility needs hate them! So long as you've made your site accessible in the first place, they don't add anything because people can already change their font size, contrast, cursor size, etc. and use text-to-speech... and because they use these things all the time then the way they're already used to doing so is better than any overlay would be! But worse, sometimes these overlays (and I'm not saying this is the case for Noah's; I haven't checked!) actually get in the way of established accessibility technologies!

This site summarises them pretty well, albeit from a very corporate/minimise-your-risk of getting sued for failing to create an accessible product kind of way.

In my opinion, making a site that existing accessibility technologies understand is a much more-valuable use of your time than bolting on some JavaScript. But I'm first to admit that this is a hotly-debated topic!

[chilblands]

So long as you've made your site accessible in the first place, they don't add anything because people can already change their font size, contrast, cursor size, etc. and use text-to-speech... and because they use these things all the time then the way they're already used to doing so is better than any overlay would be!

Thank you for sharing! It is really ironic that accessibility overlay aren't accessible. But it does makes sense! I don't know how these accessible technologies work so the articles you linked are helpful.

I see online that many people prefer reader modes as an accessibility tool so I'll look more into it. Perhaps using it myself will give me some insights

[Noah_S]

How can I find out if mine interferes? That's not what I want it to do.

It's a premade module that came with joomla, I just turned it on. Silly me assuming that accessibility additions are by default accessible...

Edit immediately: Thank you for the explanation about accessible links. That's helpful for some browser games I'm planning to add. Both to make them accessible and fair regardless of how you play.

[Dan Q]

How can I find out if mine interferes? That's not what I want it to do.

I don't know, I'm afraid: the best best would be to get somebody who uses an accessibility technology every day to try it!

I've gotta say, yours is one of the least-obtrusive that some I've seen!

By the way, anybody: if you want a quick and simple audit of the most-common and easiest-detected accessibility no-nos, the WAVE extension (for several browsers) is very helpful! It can't detect everything, and it sometimes mis-detects some things, but it's good for telling you where you've made silly and annoying mistakes like broken heading cascades, missing alt text, etc. (It has no concept of accessibility overlays at all, so it can't help with that.)

For Noah's site, I'd recommend:

1. Adding a <h1>; for many pages this ought to be similar to the <title>.
2. If you put an <img> in a link, you shouldn't just use role="presentation" and no alt text, otherwise this looks like a "blank" link to screen readers.
3. Your 'link me' and 'thoughtbox' <textarea>s look like inputs, but don't have labels. Either (a) wrap "link me" and "Thoughtbox" in labels with a for="id-of-the-textarea", or (b) add an aria-label that explains what they are, or (c) switch them for some other element e.g. <output>, <p> and just style it to look like a textarea.
4. Fix the alt text of your header; it probably should be something like e.g. "Noah S Art" or "Noah S Art header featuring various animals on a brightly-patterened background", depending on whether you consider the image behind the text to be essential to the meaning? Right now it's "Image".

Generally, though Noah: your site looks excellent to me, from an accessibility perspective. Good landmarks, good navigation, good alt text, and "fancy" features like the light/dark switch implemented in a careful and considered way. A++ marks to you, in my mind!

[MediocreMetastasis]

I know damn well my site is not accessible. For one, you can't use it on mobile. It's somewhat semantic (I use h1, h2, and h3) but not enough (no use of nav), not alt text anywhere, I not sure it bright yellow text on a maroon background has enough contrast so you decide, a lot of stuff is nested also.
I am surprised using tab works on my dropboxes when they're pretty much just <a> elements that uses css to open and close.

It also requires javascript. I am planning on adding <noscript> elements in the future.

[poesu]

@MediocreMetastasis

• There're... so many scrollbars on the home page. Especially horizontal ones — they're generally a no-no, unless it's a carousel. Even when I zoom out, it doesn't remove them because the page is not responsive.
• On Skelecool page links are moving which makes them very hard and confusing to press.
• Non-clickable links or links to "under construction" pages/sections are pretty confusing to navigate: you don't want a user to wonder is there something missing on their or your end and why they met a dead end. I'd remove these entirely before the corresponding page actually goes online (maybe make a page of to-do's and list them there instead) or make links non-clickable and having an obvious indication that it's a "coming soon" thingy.
• Art page doesn't fit the screen on 100% zoom and is also not scrollable, so there's no way to see all content without zooming out.
• In graphic design it's generally considered bad for text to have an outline, unless you really know what you're doing. I gather that you did it probably for readability reasons, but just like with the accessibility overlays discussed above, you may want to focus more on making good contrast between the text and background instead, which is the core issue. I personally don't strive for A++ contrast, but I try to make it (hopefully) good enough.

Unrelated to accessibility, but an image in the header is broken and only displays alt text. And for some reason your website eats more resources that I would expect from a small website... I didn't look into the cause of that. Maybe that's just me though.


I use multiple h1 elements on the pages like Indieweb because these are several independent sections and it doesn't make sense to have an h1 with like a title of the page itself and only then using h2 for the sections ??

Also I have stupid vertical tabbing on the front page where artworks reside. They're laid out with column-count. I like like how it looks, but it's not tab-friendly! The previous solution was to grid-template-column them, but it makes vertical artworks kinda tiny. I don't want to crop the thumbnails, I'm sorta generally against that in terms of art galleries for a reason that is a bit hard to put into words.

Making a no-JS tooltip for the definition of NSFW art on the front page was way too hard than it should've been. I could rewrite "NSFW art" link to "18+" but I still need a content warning somewhere and I don't want it to be overbearing and take too much space in the same time... Sigh.

I want your opinions on these issues and on my website generally, Melonlanders!

My site: https://poesu.neocities.org/

[Noah_S]

2. If you put an <img> in a link, you shouldn't just use role="presentation" and no alt text, otherwise this looks like a "blank" link to screen readers.
3. Your 'link me' and 'thoughtbox' <textarea>s look like inputs, but don't have labels. Either (a) wrap "link me" and "Thoughtbox" in labels with a for="id-of-the-textarea", or (b) add an aria-label that explains what they are, or (c) switch them for some other element e.g. <output>, <p> and just style it to look like a textarea.
4. Fix the alt text of your header; it probably should be something like e.g. "Noah S Art" or "Noah S Art header featuring various animals on a brightly-patterened background", depending on whether you consider the image behind the text to be essential to the meaning? Right now it's "Image".

These things have been fixed. Thank you for introducing me to aria-label. I also updated the link for the random image to lead to the extended gallery. Still figuring out how to solve the h1, h2... The ones I have are currently in order of importance, but some pages skip a group.

[MediocreMetastasis]

@poesu Thanks for the feedback!

And for some reason your website eats more resources that I would expect from a small website...

What do you mean by resources? Do you mean processing power or bandwidth?

For your site. It's definitely 100% accessible from what I've seen.
The only complaint I have is navigating the image gallery on the main page using tab is very weird. It goes by columns instead of row. (Oh oops you already stated the problem in your reply)

[Dan Q]

These things have been fixed. Thank you for introducing me to aria-label. I also updated the link for the random image to lead to the extended gallery. Still figuring out how to solve the h1, h2... The ones I have are currently in order of importance, but some pages skip a group.

Yeah, managing a heading cascade in a way that's sustainable is a nightmare!

There was a proposal once for relative headings and I thought it was a great idea. It would mean that you could add <heading>s and just say when you wanted to go another level "deeper", and the browser would work it out for you. So you could take an existing page, copy its code into a new page, put a new top-level heading at the top of it... and the other headings would all drop one-level lower!

I saw a proof-of-concept of it in... I want to say XHTML 2.0?... but it never caught on and quietly died.

Maybe someday, when the browser manufacturers get bored with playing with AI and the W3C takes a break from refining some edge-case CSS features, we'll get it!

[poesu]

What do you mean by resources? Do you mean processing power or bandwidth?

Meant to say CPU, sorry!

Thanks for the feedback, too!

[Noah_S]

The wave extension is giving false positives because of my accessibility add-on being coded weirdly. It claims that the contrast is much lower than it is. I checked by taking a screenshot and putting the rgb in a contrast checker, that gave a completely different value. I also asked a friend who struggles reading low contrast, and he could read it. When I had it temporarily disabled, the wave extension gave me a score of 9.9/10. With its complaints being the missing header levels and that I sometimes have long alt text. I'm keeping the alt text as it is. Every alt text I've added is aimed at drawing attention to the same things I hope the reader's attention ends up on if they see the images.

[larvapuppy]

Things I've already done to make my site accessible:

• made the main parts of my site mobile friendly
• started doing the same as above for subpages with different css styles
• alt text everywhere I noticed it was missing
• header, footer, and nav tags
• dithering on some images and compressing others
• hid my animated pixel art under a details/summary element
• added noscript tags that explain what any scripts I use do for those who have them blocked
• went through the browser's accessibility inspector and did everything I was able/willing to do
• and more 

There are a few things I'm aware are not 100% accessible but I'm unwilling to change them until I find a solution that works just as well for my site and self expression (colour scheme contrast, iframe nav bar, a few animations). Basically, these (very few) things would greatly reduce my enjoyment/ease of viewing and building my own site and make the hobby inaccessible to *me*, so I won't do them until I find suitable replacements. 

This leads me to ask: how much of accessibility is the responsibility of the webmaster and how much should be bridged by the person who needs the accommodations ? I still use scripts on my pages despite the fact that there are many people who block them, but they have their own tools to do that. I don't have an inbuilt text to speech function on my site, but screen readers will do that work for the people who need it as long as I format my site in a way that's acceptable to those programs. And, my font size is small, but my site still looks fine upon zooming in, so does that mean it's accessible enough?    Food for thought... I'm curious about what others think.

I'd love some feedback on my site, as I'm always trying to find more ways to improve it:
https://larvapuppy.neocities.org/