Website development (+ tech support)

[beeps]

Everybody needs a site, having a site's pretty tight. I would say that though, making them's my job.

I do think folks should at least try having a personal homepage, though, somewhere you can create and publish whatever you feel like without the restrictions of formatting or moderation that most other web platforms require.

I also know that shit ain't easy, so I always wanna help people along too. Be that through helping solve problems or doing complementary accessibility audits, because accessibility is kinda important.

If you already have a site, feel free to show it off here. Otherwise, get on Neocities, y'all. (Other web hosting platforms are available.)

[linuxavali]

heya beeps,

What do you think of mine? https://linuxpony.dev/

It seems to pass the accessibilitychecker.org checkes for USA when I tried it but I would be interested to hear your opinion as someone concerned with accessibility.

[ihddn]

I want to recommend https://tomodashi.com/kiki Kiki - while the hosting side is a bit more complicated since you need the right PHP support, the website construction is a delight and very hackable, I'll have mine back up soon. I was hosting it off a raspi3 until a few days ago but I wanted to use that device for another project but I'll get it hosted again soon.

[beeps]

heya beeps,

What do you think of mine? https://linuxpony.dev/

It seems to pass the accessibilitychecker.org checkes for USA when I tried it but I would be interested to hear your opinion as someone concerned with accessibility.

Without going into a full on audit (cuz those take me several hours and get really long), some issues I've noticed skimming the homepage:

1. The hamburger menu icon isn't keyboard focusable and doesn't have an accessible label (text within it that screen readers can announce, an aria-label attribute, or an aria-labelledby attribute with the ID of a different element with an accessible label). The technique you used on the social icons should work fine here.
2. The navigation items that lead to the age gate are marked up as links, but behave like button elements. Same for the 'cancel' button in the age gate. They should probably be buttons.
3. The age gate modal retains the aria-hidden="true" attribute value when it is visible. This should switch to false.
4. Most of the links on the page don't meet a minimum 4.5:1 contrast ratio. They appear to be #467cca on #333333, which is a 3:1 ratio.
5. The green Derpibooru-style tags you use also don't have enough contrast between the text and background colours.
6. The arrows and dots on image carousels lack a keyboard focus state. It seems that that the styles associated with the Slick library has removed them.
7. A lot of the images in carousels seem to have repeated alternate text (e.g. "Reference sheet for [character]"). Alt text should ideally describe the contents of the image, not just the purpose, though in situations like this, you can probably be quite brief about the differences, such as only detailing the character design in the first image's alt text, then shortening it afterwards. I have a blog post on writing effective alt text if that helps.

Keep in mind that I work to the WCAG 2.2 Level AA standard, which may just be stricter than what that tool uses for US-based websites (though AFAIK it shouldn't be).

[linuxavali]

Thanks for that! I was curious. I'll fix the easy things but I plan to do a full re-write in the near future. This site is definitely not my best work and I really have grown to hate the "slick" library.

[linuxavali]

Okay, I fixed 1, 2, 4, 5 and 7.

For 3, I couldn't reproduce what you described in FireFox or Chrome unless you meant `aria-hidden=false` was invalid. Either way I made it remove the attribute instead now.

I'll deal with 6 later since it will likely be me just ripping out Slick

I also read through your blog post and noticed some of the example images didn't have alt tags, but I assume that was intentional for illustrative purposes?

[beeps]

Haven't thoroughly re-tested but at a glance things look better!

One thing I did miss earlier (probably because I was focused on the keyboard focusable issue with it) is that the hamburger menu should probably also be a button element.

For 3, I couldn't reproduce what you described in FireFox or Chrome unless you meant `aria-hidden=false` was invalid. Either way I made it remove the attribute instead now.

When I was testing the `aria-hidden="true"` attribute and value was persisting even when the modal was visible. Which might've been a bug somewhere, but regardless, removing the attribute entirely is probably fine.

I also read through your blog post and noticed some of the example images didn't have alt tags, but I assume that was intentional for illustrative purposes?

I explain that in the 'exceptions' part of the post. :3