The 7 Deadly Neocities Sins
There's something really special about the neocities community and how everyone comes together in a collaborative space to create something personal and unique. I want to talk about accessibility though, and I know that that is a bit of a touchy subject. Proper web accessibility standards are pretty tight and can come across as really restricting, and so people don't look into them because they want their site to be a pure expression of their creativity.
While making all of these points, I do have some sites in mind, however, I will not be using screenshots from them or naming them as examples. I'm not here to start fights, I just want to see everyone improve. If you think you might be the reason behind one of these points, please know that I don't hate you or anything, and you don't have to change your site if you don't want to.
The aim of this guide is to be a resource for accessibility lite, with what the issue is, and how to fix it. Feel free to look through the whole article at once, or use the navigation bar to your left to jump to sections you think might be relevant. With all that out of the way, let's begin!
1. Small Text
Here's some body copy at 10px. Can you read it without leaning towards your screen or zooming in? How about with lower contrast? It's much more difficult now, even with this slight change. Text this small makes sites difficult to navigate and comprehend
Text at 10px, below the standard
Generally, the standard size for web text is 16px, or 1em/rem. Any text smaller than that can be really difficult to read, since generally people don't sit very close to their computer screens. The issue as well is some fonts are naturally very small (this is called x-height), so even if the font size is set properly the text comes across as very small. Small text should be saved for captions, rather than for body copy or navigation
How do I fix this?
Even if you feel it doesn't mesh aesthetically, just make the font size bigger, and if your font is already set properly but the text is still tiny, either set it larger or switch to a different font. If you're set on having small text, make sure the contrast is set very high.
2. Low Contrast
An example of low contrast text
Contrast is a huge issue when it comes to web design. Since a lot of people are very familiar with the content, it can be difficult to gauge how legible it actually is. One issue is that multiple of these issues compound on one another. Low contrast text is really hard to read if it's also small, so if that's the case, the contrast will have to be higher.
How do I fix this?
Making sure your contrast is high enough can be hard- I like to use the WebAim Contrast Checker. It can be pretty touchy with what it does and doesn't consider okay, but generally going for at least AA approval is a good call.
3. Hover States (or Lack Thereof)
One thing that's very important when making a website is indicating to the user that certain things can be clicked. Something I see pretty often is buttons or links that don't have hover states- that meaning, nothing changes when you hover over them. Hover states are essential in letting people know what can and cannot be interacted with. This goes doubly if you have a custom cursor that doesn't have a pointer state. Hover states can be as complex as changing shape or moving around, or they can be as simple as adding an underline.
How do I fix this?
Any element which changes when you hover over it needs to have a rule in your css dictating so. If you want to add a hover state to your buttons, add button:hover{ to your css, and then add rules so it changes appearance. There's a lot you can add, but the simplest thing to do would be to just change the background colour to something different.
4. Custom Cursors
I love custom cursors, I mean, who doesn't? They're a great way to add some variety to your site. Now, there's nothing wrong with having a custom cursor in and of itself, the issue is the lack of states. I've found that a lot of sites don't have a change state for when you hover over an object that is hoverable (links, buttons, span tags, etc). This makes it pretty difficult to understand what's clickable and what isn't especially when combined with the previous point.
How do I fix this?
First, find another variant of your cursor that you can use as your pointer. This can be a whole new sprite, or can be just a small colour swap. Then, in your css, add cursor: url("cursorimage.png"), pointer; to all of elements that should have a pointer cursor, such as your link hover state and your button hover state.
5. Display Fonts
This font is fun for headers, but not body copy
A display font, titled monoton
There are two types of fonts, display fonts, and body fonts. Display fonts are meant for titles, and body fonts are meant for the main copy. Unfortunately, display fonts are always cool as hell, but are not legible for the main copy. Typically, fonts will tell you if they're display by having it in the name or in the tags of whichever font site you're downloading it from, but another good way to tell is if the font is illegible at smaller sizes and in large chunks, you should use something else.
How do I fix this?
Honestly, just find another font. Display fonts are perfect for headers and special text, so just save it for that- it has more impact that way anyways. As for good body fonts, you can't go wrong with a good sans serif like Roberto or Poppins.
6. Overlays
The CRT filter a lot of websites use
Look, I love CRT filters as much as the next guy. They're really cool! Unfortunately, they also can obstruct some elements of sites and make them illegible. For example, any elements which are low contrast or small get obstructed by the CRT filter, especially small text. Some filters also have a flickering effect, which is very bad for photosensitive individuals. This also goes for other colour overlays, though these aren't as common. Colour overlays also make it difficult to parse low contrast elements.
How do I fix this?
Sadly, the easiest fix would be to remove the filter altogether, which I know isn't ideal for a lot of people. One fix could be to turn down the intensity and/or the opacity of the filter, and turning off the flickering effect if that's applicable. Another fix could be to have a toggle button for the CRT screen, using JavaScript. Here's a website that's implemented this.
7. Zooming Out
Sometimes when visiting a site, it becomes clear pretty quickly that it was designed to be viewed zoomed out- the page is simply too large for the average screen. I've even seen some sites in which the placement of elements gets totally screwed up if you're zoomed in normally. This is already pretty difficult to parse, since sometimes the messages specifying this are covered by other elements, but it also makes the design a lot less accessible. Fonts which were previously at the standard size are now a lot smaller, making them harder to read, and generally this compounds with a lot of previous issues mentioned.
How do I fix this?
There really isn't a silver bullet for this one. For elements which end up covering the screen at 100% zoom, the main fix would be to not use position:absolute for the placement and figure out how to get the layout without it. Generally, a lot of sites like these have to be zoomed out because of all the content, so the only real fix would be to remove elements and completely rework the page. This is a pain, but overall it would be worth it, since coding your page at 75% makes it harder for you to see the issues that would come up. My advice to anyone who has their site formatted like this, is to very slowly try to rework things so they work at all viewport sizes, and to have your width values in percentages rather than in pixels, which would make it more adaptable.
Bonus Sins
Here are a couple of smaller design quirks I see that have easy fixes but still make the websites difficult to navigate or understand. Consider this a lightning round!
1. Animated Backgrounds
Having a gif as your background isn't inherently bad, but make sure the animation is subtle or low contrast. Having a flashing gif as a background is a nightmare, because you can't just scroll past it like you could with a flashing gif.
How do I fix this?
Pick a different background, or have gifs paused when you load in, with the option to turn them on. Here's the code for gif play/pause toggle.
2. Images Over Text
I see this a lot, and I think it might be a formatting error with different viewport sizes. This goes to show you should double check these things, but even if it's on purpose, it's very difficult to read content that's partially covered by an image.
How do I fix this?
Moving the image is the easiest way to do this and putting in a place where it wouldn't cover the content, no matter the viewport size. Another cool solution would to have the images be movable with drag and drop- here's the code for that.
3. No Flash Warning
This one is pretty simple- if you have a lot of eyestrain and flashing images, it's a good idea to have a landing page before your main website giving a warning for that, so at least people can prepare. This can also serve as a warning for any potentially triggering or otherwise nsfw content on your site.
How do I fix this?
Create a new page as the index and have that be a landing page of sorts so that you can give people content warnings if they want to turn back. Then, take your original index page and name it home (or something similar), and change all the navigation links so they go there instead of the landing page. This can be a bit tedious, but it's good practice in the long run.
4. Preventing Right Click
Not a lot of sites do this, but it's incredibly annoying. Preventing being able to right click makes it difficult to download images (such as a site button), copy and paste text to look something up, or see the code to check how someone did something. I know people are protective of their code and don't want people copying it, but the reality is is that web design is open source- whether you like it or not. Preventing right click doesn't even stop people from looking at your code, so the whole thing is a wash.
How do I fix this?
Just remove the JavaScript.
5. Widows
A widow is a term in graphic design and typography, for a word at the end of a paragraph on a new line. You see this a lot in websites and even newspapers, and it's a personal pet peeve of mine. Generally it only applies to paragraphs though.
How do I fix this?
As seen above, this is an aesthetic issue more than anything, you can fix this by modifying the copy, adding more text, or changing the amount of space the text takes up in order to make it look a bit smoother.
Conclusion
So, now that we're done, where does that leave us?
Firstly, I want to thank you for reading this far. Internet accessibility is something that's really important to me, but making a website fully accessible is pretty daunting, and I feel like it's really creatively limiting. I wanted to make this guide to give an alternative to a full overhaul, and instead focus on some smaller elements that could be tweaked.
If you see an element on this list that you have on your site, please know that I'm not saying your site is bad or wrong, just that these things can make the experience harder for everyone. If you go forward and want to change these things, great! I'm glad I could help. If not, don't worry about it. Don't feel obliged to change your own expression of creativity just because some rando said so.
If you see any errors, or want anything added to the list, feel free to drop me a line on my Tumblr, either through DM or an anonymous ask. Thanks again for reading! I hope you have a great day!