Mar 022014

I’m definitely not an expert on this topic, I just wanted to share what little I’ve learned in case it might help others.

Accessibility. If you have all your limbs, if you can walk and run with ease, if you can see relatively well with or without glasses, if you can speak without assistance, if you can hear without major problems… probably don’t think about accessibility as often as you should. It’s easy to have those blinders on. Easier still if you do not know anyone deaf, blind, handicapped.  At my first conferences it was a little tough for me to remember to face certain people when I spoke to them, and I screwed up sometimes. Luckily they’re not afraid to speak up and remind me to look at them, and then repeat myself.

If you’re able-bodied and don’t know anyone who isn’t, it’s sadly too easy to forget about accessibility.  I try, I do, but I don’t  get it as well as I could. Yesterday I learned something new.  A reader, Amanda, sent me this awesome note:

Hi Lilly,
I just wanted to let you know how much I appreciate your blog. I am blind, and I really appreciate the thoroughness of your reviews, as well as the absence of bullshit.  Also, I don’t know if you intentionally made your blog redesign accessible with a screenreader, but it is, and I was pleasantly surprised. Often, when people redesign their websites, accessibility is the last thing on their minds, and I find myself no longer able to read something I used to enjoy.  Definitely NOT the case with your redesign, and that’s just fantastic as far as I’m concerned.  Also, I can’t even begin to tell you how much I appreciate the fact that you almost always put descriptions of pictures you post in the images’ alt text. It’s so helpful.

There wasn’t really much of a point to this email. I just wanted to let you know how helpful your blog is to someone who can’t see pictures and who has to depend on the overblown ad copy when shopping for toys. So… thank you. :)

Screen readers. I knew in theory that they exist, but I knew nothing about them. Scratch that, know nothing. I’ve never seen one in action. I don’t know the tech. All I know is that this magical thing can look at a website and read it out loud. Usually. The problem apparently is compatibility. While I don’t have all the info yet, Amanda said:

The problem is that there are several different screen readers, and not all of them support the same things. For example, I use a Mac and its built-in screen reader, VoiceOver. Until very recently, VO and the Mac browser, Safari, didn’t support the Disqus comment system, whereas JAWS (a Windows-based screen reader) always supported Disqus.

But how do we know if a blog theme or site design is screen reader compatible? You can go the long route and utilize some of the sites and tools I have listed at the end, but accessibility to screen readers is just not a feature that gets mentioned when you’re looking at the technical info on a theme. I hope that someone can educate us in the comments of this post. I’m thrilled that the WordPress theme “Suffusion” is so accessible1. It’s not the only aspect to work on, though. When Amanda was mentioning the “alt text”, it’s something you do manually one of two ways. The first is by clicking on the “Edit Image” button if you’ve already inserted the image into the WYSIWYG editor portion of WP. The second is manually typing it in. The following code is for an image.

Up top is the Tantus Black Widow Harness. Below is the Lelo Mona 2, the We-Vibe 4, the We-Vibe Touch 2 and Tango 2, Lelo Mia 2, and Jopen Ego e5

Here are screen shots of what I was talking about with the alt text, too:

A screen capture showing what a draft of a post looks like in WordPress, demonstrating how to access the attributes of an image   A screen capture showing what the attributes window looks like for a photo in the draft post process of WordPress.

Here are a few links that might help if you’re interested in making your blog more accessible to screen readers and beyond.

I hadn’t even seen Robin’s post until after I’d heard from Amanda and written most of this, so it’s great timing. Robin, a great blogger/educator/reviewer, is going to be presenting at CatalystCon in a few weeks and talking about accessibility.  She makes her points about access being not JUST for those needing a screen reader, but other sorts of disabilities. While I’m not hearing impaired enough / in the right way to be able to use a hearing aid (yet), I am hard of hearing to a degree. I come across SO many podcast and video posts that I cannot use because I can’t understand what they’re saying. A transcript would go a long way. So instead, I miss out on the information because I don’t even bother to try listening anymore. I may be able to understand half of it, which is more than others who have more hearing loss than me. It’s not an uncommon disability, yet it’s common for podcasters and vloggers to forget it.  I’m sure it’s not easy work, but could do an mturk for someone else to transcribe it and the results mean that more people can access your information. Win, no?


Accessibility is making sure that people aren’t left out. It requires effort on our parts, but why wouldn’t you if you know how? You’d want it done for you if you were in their shoes. Also? The fact that no bullshit = more accessible is a giant fucking WIN.


UPDATE: I wanted to add in some choice quotes from those who were able to attend Robin’s session on accessibility at Catalyst, as they apply to blogs/sites.

  1. For the record, my previous theme was, too, but Amanda’s point was that she encounters changes in design too often that negatively impact her ability to read it. My last theme was Glow from
Jul 082011

I write this post with full knowledge that I’m going to offend or at least bruise egos of many bloggers. Our blogs are our homes and how we decorate them says a lot about both us individually and the nature of our blog.

I get it. I DO. My first two blog themes were very dark and sexy and gothy and  I cringe, CRINGE, when I look back at screencaps from those days. Why? Well let’s ignore first that my original banner on my blogspot blog was fucking hideous, and admit that I did the whole all-dark-all-the-time and had white text on a dark background. With the blog design that came before this current, bright (in comparison) color scheme was yet another dark and gothic fantasy world – but I’m still proud of that design. I and CoyPink‘s hubby, Alec, worked quite hard at that and I’m still proud of that header with its clickable words. At least I’d wizened up though and made a compromise – dark on the side, white for the posts. Perhaps some things in my sidebar were still a little hard to read for some, but it was a big improvement over the first real design.

What I hate and why I hate it:

1. You can convey a sexy sex blog without all being in the black/gray/very dark jewel-tones color scheme all the time everywhere. A little goes a long way.

2. For the love of pete please realize that for many people white/light text on a black/dark background is VERY hard to read1. As is a very bright colored text on a very dark background (red and blue are the worst). I’ve actually had to stop reading a blog because the color choices hurt my eyes so much.

3. Fun fonts are fun. But fun fonts should be used sparingly because they can sometimes be hard to read. Especially when they’re white text on dark background. They should be limited to the blog name in the header and at most the blog post titles or sidebar heading titles. Something that is bigger than your standard 12pt font – a crazy font will be easier to read when it’s larger.

4. Not knowing and respecting the width of your theme’s sidebars and body sections. Learn how to trim down the size of YouTube embedded videos. Keep your photos in posts to half (3/4 at most) of the width of your post body section. And please pay attention to all that crap in your sidebar. You probably CAN change the size of the items, you just don’t know how or don’t think it’s a big deal. It is. At best it just looks like crap, at worst it covers up text in the post body section.

For some of you reading along I might have just inadvertently told you that your blog, your very own blog, hurts my eyes and makes me cringe. I’m not saying this to offend you personally but to offer the wisdom of someone who’s been around the blogging block a bit. Having a blog that is pleasing to the eye and easy to read visually will not only increase your readership but keep them on your blog to explore. I’ve seen some blogs recently that I’d truly like to explore more but I can’t – I absolutely can’t deal with the color and/or design. Don’t take just my word for it, I’ve not designed nearly as many websites as AAG has. I’ve added her comments in below.

My suggestions for making changes:

1. You don’t need to know much about code to make color changes in your existing theme (the only people who can’t do this are the free WordPress bloggers who aren’t able to get into the CSS stylesheet, I do believe that the newer Blogspot dashboard allows you access to the code, be it html or CSS). If you utilize the Firefox browser and then use this add-on called Firebug, you can bring up your blog, turn on Firebug and see the code. You can then go through it and start “turning off” lines of code to figure out what that line of code affects. This won’t actually change your code – just what you see. (I hear that the latest version of FireFox and FireBug make it so that if you’re self-hosted your changes in FireBug CAN be permanent but that’s not my point here). So scroll through it and try to find the sections that are usually labeled “post”. Using this helpful website, pick a new hexadecimal color and replace it (black is #000000 (zero’s, not O’s), white is #ffffff, occasionally coders will abbreviate those two to just #000 or #fff). This way you can change what the post portion of your blog looks like without having to ditch the theme that you like. You can keep the dark background on the sides and top and bottom just have the posts portion be readable.

2. Use your header and graphical design of the blog theme to express your individuality and sexuality, within reason. Also make that header clickable so that it can easily take a reader back to your home page.

AAG sez: a) Reign in the individuality just a wee bit – the header can be sexy but probably shouldn’t be, for example, a close-up lifesize image of your asshole. (yes, this was a true story)

3. Changing to a hand-writing or script-y font just to be different can lead to your blog being even harder to read visually. Sure, it’s different. It’s “you”, even. But it makes me run away very quickly.

AAG sez: a) bear in mind that not all operating systems will display various fonts (used in the body, not in images of course). Check them here.
b) keep in mind that a font that’s awesome today may be passe tomorrow. ask for feedback2
c) Pick a contrasting color for links that does something different yet recognizable upon hover. Check to make sure it doesn’t do something weird after the link is visited. Check this on various browsers as some display visited links differently.

3. Using a lot of banners & buttons and graphical wonders in your sidebar(s)? Consolidate, and change their size so that they’re all the same (or at least so that they fit into your sidebar’s size allotment and don’t spill out into posts or the outer edge). Easy size change tip: When you post the html code into the text box, erase the “height” marker and change the “width” number on them all3. Caution: only go down in numbers, never go up – it’ll look pixelated and cheap.

4. Don’t use lots of colors and/or font styles in one post. It looks high-school-ish (to me), is distracting, doesn’t flow, and doesn’t always translate very well into feeds (why not? see #5). I even run into the problem with my blog that a certain paragraph-styling looks one way on my blog but completely different in the feed.

5. If you insist on having a colored background for the posts section for all that is blog-holy please take caution in forcefully changing the font color of your writing. If the font color is hard-coded into the CSS stylesheet then it will still appear as black text on white background in your feed. However when you go and force the change in your post editor box it will show up in the feed as the color you changed it to – and guess what? Unless it’s a dark color, it’s going to be damn near impossible to read it for those who use feedreaders to keep up with your blog. You think I hate light text on dark background? Bright & light text on white background is even worse!

6. Don’t use a font that is too small. I’ve been to a couple of blogs where the font size is small even for my 21″ widescreen monitor – ok, it was also white on black, so that added to it. But find the Goldilocks Font4 for your theme – again this is a change that can be made utilizing Firebug and changing the CSS stylesheet – not too big, not too small, not too hot and not too cold.

I could have screencapped or linked to examples of some of the things I’ve mentioned above in a “don’t do this” sort of way but that’s not the angle I’m going after here – I’m not doing this to be mean or pick on a person. This is just about good intentions turned into bad designs. And just because you have violated my personal font/color mantra doesn’t necessarily mean that your blog design is terrible. It might be really awesome in every other way….just hard to read. If your answer to this is a shrug and “hey subscribe to the RSS feed, it’s plain black text on white background, just like you like it” then you’re missing the point. Don’t you want your readers to interact with you and each other? Don’t you want someone to pour through your archives and become a fan or friend? That won’t happen if they get to your site and their eyes bleed.

Comments are wide open. You can tell me to go to hell and why. You can tell me that you agree with me and give some other helpful suggestions or “Don’t”s. You can say “hey I think I might fit a bunch of these Do-not-do things, can you look at my site and give me your honest feedback?” and I will be happy to do so tactfully. I’d suggest a feedback site that at one point helped me really tweak this current layout and design thanks to honest & anonymous feedback on the design, but I got yanked for being “porn” as did another blogger; you can certainly try your hand and see how long it takes you to get flagged (given how easy they’ve made it to flag for adult content, don’t expect to last long): Feedback Roulette. You look at other people’s sites and tell them what you honestly think, good and bad, and then others do the same for you. Or….just ask me here.

 Go for it.


Color Scheme Designer – This tool allows you to input your primary preferred color and get many options. Various hues of the color, complimentary color, and a whole coordinating color scheme. For best use, enter in the Hex value of your primary color on your blog (next to the RGB work lower right of the wheel).

Colorzilla – An add-in to Firefox that allows you to find the Hex color (or RGB values) of any color on any web page.

Firebug – The most important add-on for Firefox to help you tweak your CSS stylesheet (if you need any help figuring out how to use it, please feel free to email me)

How to make your Header/banner clickable – This tutorial is geared towards WP users (self-hosted). For Blogger users I believe you can set that attribute in the Design Dashboard.

  1. Please note that I did not say everybody. And I’m sure someone will comment and say that one group of people or they personally prefer what I am saying is hard to read. That’s fine, go ahead. But when the majority of websites are primarily light-colored, that is when it becomes really hard on the eyes – switching from the contrast of the two.
  2. She’s on Twitter, if I were you I’d show it to her first. Just never Papyrus or Comic Sans.
  3. Why erase the height and only change the width? By doing it that way you are allowing the html to automatically proportionally re-size the height to match up to the new width. Otherwise you need to figure out on your own what is height-weight proportional and no I’m not talking about swinger club and adult dating site body requirements ;)
  4. And no I don’t mean the actual font named Goldilocks, sheesh!