Hi! This is my first actual post here, please be kind XD
I just “finished” my big site redesign for Dizzy’s Bunny Hell, but I don’t think that it’s accessible, like, at all. There is a gif freeze function using Solaria’s gif pausing script, but I don’t know how to make it so that the gifs stay paused when you go over to other websites.
I’m also using a font switcher and it works really well… for the main body. Ideally, I want everything that has a monospace font on my website to switch to Intel One Mono, and I want to ensure that, when you switch the main font to Hyperlegible, it also affects the areas that have my bitmap serif font. It’d also be nice if the landing page had, like, an options menu where one can change these settings before going on the website itself, and the settings would always be avaliable from the sidebar on the main site.
I dunno. I hope that all makes sense ^_^
Really, any help is appreciated. Feel free to look through my code (CTRL+U or inspect element is your friend) and point out any big fuck-ups that I ought to change. I’m sure that there’s a lot!
I just had a look at the JavaScript in the Pastebin you shared, and it looks like it’s only setting the CSS font-family on the body selector.
Your stylesheet doesn’t have a font-family rule for pre and code, either, so it’s just using the browser’s default monospace font unless you apply a class that specifies a font-family.
My suggestion is that you get rid of the JavaScript font switcher. People who have trouble reading web pages without assistive technologies are going to have trouble finding it, let alone using it. Also, font selection should be handled in CSS.
Here is how I would create font stacks for your site, so that the browser can select the appropriate font. I’ll throw in some sizing and spacing code to improve your typography as well.
html {
font-size: medium;
}
body {
font-family: 'Atkinson Hyperlegible', dizpixserif, serif;
font-size: 1.2rem;
line-height: 1.5;
}
pre, code {
font-family: 'Intel One Mono', 'Proggy Clean', monospace;
}
Here’s how the code above works:
In html, I’m setting the font size to “medium”. In most browsers, that’s 16px by default unless the user changes it via settings.
In body, I’m telling the browser to use the Atkinson Hyperlegible font if it’s available. If not, it should use dizpixserif. If that isn’t available either, it should use the default serif font. This is called a “font stack”, and there is actually a website called systemfontstack that provides sans serif, serif, and monospace stacks made from fonts pre-installed on common operating systems.
I apply a different font stack to the pre and code elements. For these, we’ll use Intel Code Mono if available. Otherwise, we’ll try Proggy Clean. If that’s not available we’ll use the default monospace font.
On the body element I’m setting the font size to be 1.2 times the size of the root element, html. You can use rem units to size elements based on the root element’s font size to make your page more responsive on different screens and scale everything up or down as the user zooms in and out. I’m also setting the line height to one-and-a-half spacing to make text in paragraphs a bit more readable.
Hopefully this helps. You’re doing a solid job so far, but have you tried testing your site with https://wave.webaim.org or using the WAVE extension? I use it regularly at my day job and for my personal sites.
I might have skipped over something previously. So if you’re confused that might be my fault. I’m not suggesting that there should be a “CSS-only font switcher” like the JavaScript-powered dropdown you’re currently using. I don’t think you could do something like that JS switcher in CSS anyway.
There are reasons for that, but to explain them I’m going to have to get theoretical for a bit. Please bear with me.
JavaScript is mostly an imperative programming language. You provide explicit instructions for how to do things. HTML and CSS, on the other hand, are declarative programming languages. You use them to specify what you want done, but not how to go about doing it. For example, your browser knows how to render a paragraph as long as you used the HTML <p> element.
Likewise, if you select a set of fonts and create a CSS font stack, your browser knows how to apply your selections as long as those fonts are available. You don’t have to tell the browser how to apply your selected fonts; it will always use the first available font in the list.
So, if you want to use Atkinson Hyperlegible, you’d put that at the top of the stack. If a user who needs it has it installed, that’s what they’ll see. Otherwise, if they have your pixel font installed, they’ll see that. And if they have neither, they’ll get a system font as long as you specifed serif or sans-serif last as a fallback.
Basically, as long as you think ahead you can specify the way you want a page to look using HTML and CSS and the browser will do its best to implement your design. If this still doesn’t make sense, please let me know.
You’re welcome. If you’re all set, you might want to edit the topic title and add [SOLVED] to the beginning, so that this topic shows up as “[SOLVED] Trying to make my site more accessible!”.
letting folks here know as well that there’s no need for a [SOLVED] tag - you have the ability to mark a reply to your thread as a Solution, which will also give that member credit for being helpful and solving the problem :) then it is given a solved icon in the topics, and the solution reply is highlighted.
thank you all sm for being such helpful members! <333
Coming from a slightly different angle, I wanted to share a good resource from WebAIM, Typefaces and Fonts.
I’m assuming you want the font switcher so that you can use the pixelated font normally, but allow folks to choose a different font if it’s too difficult for them to read.
Generally, folks who need to use custom fonts on a regular basis will know how to override website fonts to something more legible (for example, you can change the fonts and colors websites use in Firefox). So they don’t need a font switcher (or accessibility overlay).
But if we assume that more people than usual will have trouble with the pixelated font, which seems likely based on the WebAIM article, I can understand wanting to allow people to change it; they might not know how to change it in their browser, because it isn’t something they have to do on a regular basis.
On a commercial website, the answer is to simply use an easier to read font by default, but that erases artistic choices on personal sites. @starbreaker’s suggested font stack uses Atkinson Hyperlegible if folks have it installed, and people who change fonts often will see the font they choose, but people without AH installed and who don’t usually change fonts in their browser might struggle. (If we assume the font is harder to read for more people.)
My hesitant recommendation would be to use AH (combined with a legible system font stack) for the body text, and only use the pixelated/display font for headings (and perhaps the menu), letting people change the fonts using browser settings/extensions if they need anything further.
I think we should mark @eladnarra’s addition as the true solution. She went deeper than I since I was trying to preserve @doctordizzy’s pixel fonts. I had assumed that those were his preference.
Offering font switching is nice, but I think I would find it troublesome to use on each site if it was something I needed. Making sure that the site works with the “reader view” provided by some browsers and extensions is probably more convenient for visitors. Visitors can set their font and color preferences once and then use those for reading on every site.