Making Your Blog Accessible: Graphic Designing for the Blind and Hard of Sight

Featured image is by Phillipe Put, “blind guy
Image description: Out of focus braille text over an even more out of focus silhouette of what appears to be a white man. The braille text is three lines, reading “blind aveugle ineedair” which is either an error in my translation or a poor translation by the original artist.

Designing a gorgeous, accessible blog layout is important. Making sure that your layout is legible and accessible to all of your users is also important. But how do you make sure that your blog is accessible to all of your users, including those with disabilities?

I interviewed one of my mutual followers, thelinuxdemon on Tumblr. Thelinuxdemon has coloboma, which results in visual impairment. They are completely blind in their right eye and have limited visual field and acuity in the other eye. They are a programmer, and have to make modifications to their workspace. I figured they would be a good person to interview and examine my website.


“The general layout seems good from what I’ve seen so far, the one thing I notice, which is very common on many sites, is text overlays on a picture not having enough contrast, and its not something easily fixed,” they said, after examining my blog. I asked them what features they encounter frequently on websites.

Well, #1 is font size, I know for me, anything below 14 pt becomes difficult to read with standard contrast (black text on white background, standard font, like arial or times new Roman). I know for some of the people I’ve met through the DBS (division if blind services) events have trouble with much below 16, but they also usually have a program like zoomtext or a screen reader for instances like that.

Thelinuxdemon still has some remaining vision, but for those who are completely blind, there needs to be text-based equivalents for pictures on the website – which, to be quite frank, I only have sparingly. Blind individuals can use screen readers to get information on the page read aloud to them, and many websites don’t support this feature well.

For the color blind, they need well-contrasting colors depending on their level of color-blindness. Most people don’t consider color-blindness when designing their website, either, although the condition is surprisingly common for AMAB (assigned male at birth) people. Information shouldn’t be presented by color alone, and if the website is dependent on color for that reason, there should be other ways that features are visually distinguished.

Below is some information that thelinuxdemon was willing to pass on to me regarding how to better adapt the website to the needs of a low-vision user, with certain lines I have emphasized in bold for important points.

… [C]olor mostly pertains to text color vs background color, for instance, using contrasting colors, like white and black, rather than like light grey text on a white background. So like my Java IDE for instance, uses yellows, oranges, greens, and blues, all subtle shades, on a dark grey background, so it highlights the text rather than the background, like a lighter coloured background would do.

Though for many sighted users, they seem to prefer the classic dark text on a light background, which is why I’ve seen some sites have an option at like the bottom of the page to change the color scheme.

Also, one thing that isn’t as applicable to me, but is for people who use screen readers, I notice on many sites, (and just realized yours as well) people don’t tend to use the “alt” parameter on images, which means a screen reader can’t give a description of the picture.

Update: I posted this on /r/Blind and got a fair amount of suggestions for making sites more accessible. Go check them out here. I’m going to probably make a follow-up post for all of them in the future.

Advertisements

2 thoughts on “Making Your Blog Accessible: Graphic Designing for the Blind and Hard of Sight

  1. Way way way way back in the day, when I was coding websites by hand in plain old HTML (pre CSS!), there was a website, Bobby something or other, that you could run your site through to test accessibility. I see the tool is now defunct (Bobby Approved), but there’s a short history, and there are far more sophisticated tools out there to replace it anyway.

    I do think the movement toward responsive web design is forcing people to think about how humans interact with content (Google Material Design comes to mind), but unfortunately, most of the developments in accessibility happen either by mistake (accidentally making design more accessible) or after there’s already a problem (tables… tables aren’t great for screen readers, particularly when they’re used for layout instead of table data).

    Great post, and thought-provoking. I certainly don’t do enough to make things accessible, and when I do, it’s too often an afterthought. I’m more interested in design (the kind that doesn’t prioritize accessibility) and that means my priorities aren’t in the right order. I’m going to have to fix that–thanks to you, and to thelinuxdemon, for the reminder. 🙂

    Like

    1. That’s really, really cool. I started off with HTML and CSS and didn’t go much farther from there (I learned from Neopets!). I tweaked my design a little bit after writing this article for that reason, too.

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s