A11y
YEAH, THAT’S RIGHT YOU WERE TRICKED! YOU ARE GOING TO HEAR ABOUT ACCESSIBILITY.
Now, when we talk about accessibility, know that I don’t expect you to have your page immediately up and running to meet all accessibility standards. You’re not a major corporation with a whole team doing coding, who can designate someone to go in an do all the alt text.
But you should be striving for it. Take your time, but do have it in your mind;
“I want everyone to be able to use this website.”
It is worth our time to make technology accessible. That includes funny little fansites. Do I have 13,000ish photos I have to go back and describe at some point, yes, but I do intend to do so. So that if someone is blind and wants to know how I reacted to a particular season of Gundam; they can.
The full checklist is available form the A11yProject website. I won’t be covering everything, so use this checklist to go more in depth about what you can be doing.
Here is your cheatsheet checklist;
- Make sure your text is readable
- Give all images alt text; if there’s text in the images, include it in the alt text
- Don’t be overly descriptive with the alt text, just enough to give the idea
- If an image is purely decorative (line separators), its
<img src=”…” alt="">leave the alt text empty - Avoid long repetition (and, let’s be real, copypastas) that can’t be skipped with a screen reader
- Have ONE
<h1>tag, then, if you can, go down the tags in sequence (<h2>,<h3>,<h4>, etc.) - Make links distinct from the rest of the text (different colours, underlined, etc) and identified if in greyscale
- You don’t need to use _blank in every link.
- Don’t have autoplay media
- Have media controls; muting, pausing, etc
- Add captions to videos and check they are seizure safe
- Offer transcripts for audio content
- At 200%, content should still be readable
- Mobile Accessibility.
That’s right, mobile accessibility. It’s fine if your website is best viewed on desktop, but you should be designing for mobile alongside that.
Many people will be accessing your website from their mobile or tablet, which was something we didn’t have to account for in the original run of fansites. A lot of designs that you may want to reuse from back in the day are completely incompatible with modern technology because they have no ability to translate to mobile devices.
It really sucks when you want to check a website, open it on your phone, and half the site has floated off into the void or become too small to read.
The designs I give you in this will have code to make them work with mobile, so you’ll get to see some of it as we go! I’ll talk you through the work when we get there. While we’re working, you’ll be able to check these on your mobile, by resizing your browser window, or by using inspect element and clicking these icons to change it to mobile dimensions;
If you’re not using the templates, remember to do a design for mobile users as well. You never know. Someone out there may be stuck with a small screen but be desperate for the content that’s on your website!
Flex Box
One of the easiest ways to make your website work with mobile browsers is by implimenting Flex Box. Flex box allows the elements (boxes) on your website to be resized and move around as the screen is resized. You can set the order you want things to appear in if the page is resized past a certain point, prevent things from growing too small, and define the space between each element.
It’s worth knowing; your desktop site doesn’t have to use flex box for you to use flex box on mobile. Later, you will see the @media section, which is where we change the CSS for mobile screen sizes. You can set the display to flex in there, even if it wasn’t flex on the regular pages.
For a beginner’s guide to flex box, I recommend checking out CSS-Tricks. Their guide is easy to understand and I check back on it regularly for new things I could be using.