A few weeks ago, Sadia asked if I would like to collaborate for a post on accessibility for today. Today is an awareness day for people with disabilities. Sadia’s completed post has the official title of the day along with an image. Her post really came out great. She is really dedicated to making her blog accessible to the visually impaired. Below is a snippet of what she wrote, followed by what I wrote for her blog. Enjoy!
Most of us think of blogs as a visual medium. They’re made up of text, photos and videos. Rarely have I seen sound clips incorporated into blog posts without an accompanying image, usually a movie of some sort. However, for people with limited vision, blogs can be an auditory experience. Many folks with vision impairments use screen readers rather than monitors to interact with their computers, including their access to the internet. Screen readers are a type of software that turn the electronic data that our monitor interprets as pixels into synthesized speech. The most commonly used one is JAWS, although Window Eyes is also popular.
A couple of the regular readers of Double the Fun are blind. I have made a few simple modifications to this blog to make it more accessible to screen reader users. Before I get into the specific accessibility choices I’ve made, allow me to talk about accessibility in general, and get a little geeky on the subjects of HTML and CSS.
Accessibility is a huge topic. It includes a variety of things we do as a society to make services available to everyone, from translating government forms into multiple languages to constructing buildings with elevators and wheelchair ramps. When it comes to web accessibility, I tend to focus on accessibility for the visually impaired, although cognitive and learning disabilities also deserve attention.
Web Accessibility in Mind has a website that is a fantastic resource if you’re interested in learning more about web accessibility. They also produce a nifty web accessibility evaluation tool called WAVE. You can enter your blog’s URL in the box, click “WAVE this page!”, a receive feedback on common accessibility shortcomings.
One of the keys to creating an accessible website, in my opinion, is to know a little about HTML and CSS. Basically – very basically – HTML is the format used to write the content of web pages, while CSS is used to determine how that content will be presented. In an ideal words, your text should be in HTML, while things like font-size and italics are in the realm of CSS. A fantastic tutorial is available at HTML Dog, which is where I learned the basic web concepts I use in my day job. If you can leave presentation matters to CSS, then screen readers can stick to the HTML content and don’t have to muck with the stuff we put into our web pages to make them look pretty. Blogger templates generally do a pretty good job with this.
Modifications on this Blog
I’m pretty comfortable with tweaking the CSS and HTML in my Blogger template, but you don’t have to be able to do that to increase the accessibility of your blog.
I provide descriptions for the photos and images I include in my blog posts and in the sidebars. The way I do this is to go into the HTML for the image, and add a description as an alt tag for the image, like so:
When I add a button, whether to a post or a sidebar, I make sure to add in a description of what it is, because screen readers can’t read it otherwise, no matter how pretty it is. Here’s what my Multiples and More button code looks like:
The original button had no alt text. I added “I Heart Multiples: Multiples and More Blog Network button”.
To give my posts structure, I often use headings. Instead of using italics and bold to identify headings, I use HTML headings, and make sure that the heading level reflects how concepts are embedded in other concepts. In this post “Web Accessibility” and “Modifications on this Blog” are Level 4 headings (
), while “Photo descriptions” is a Level 5 heading (
Back when I had the daily tantrum report, I visually represented its secondary nature by putting it in an embedded text box off to the right of the post. To signal to my screen reader audience that this was not the main post, I used a Level 4 heading for the words “Daily Tantrum Report.” Furthermore, I added another Level 4 heading with the content “Main Post Content” at the beginning of the main post, styled in such a way as to make it invisible to my visual readers. If you care to try this yourself, put this code in your header tag:
style=”height: 1px; left: -10000px; overflow: hidden; position: absolute; top: auto; width: 1px;”
Skip to content
Web pages very rarely dive right into the content. Instead, we have headers, navigation links and all sorts of helpful fluff. A nice thing to do is to add page-internal links towards the top of your page that allow screen reader users to skip down to the meat of what you have to say. Blogger templates very kindly include skip links to both the blog content and the sidebar.
For the same reason, I have chosen to put my sidebars to the right (logically after my post content).
Whenever I embedded videos in my posts, I am sure to provide a link to them somewhere in the surrounding text, so that screen reader users don’t have to figure out how to get them to play; both Youtube and Dropshots automatically start playing videos if you go directly to the video page.
A First-Hand Account of a Screen Reader User
*This post is part of the Bloggers Unite People First: Empowering People With Disabilities event. Please visit some of the other posts on this important subject.
Here is my contribution:
First of all, let me thank Sadia for asking me to collaborate with her on this post. I’d also like to say that I am by no means a screen reader expert. After going blind in April of 2008, I taught myself the Apple computer because their screen reader is included. I am sure I have not yet discovered all the tools I have in my arsenal, so if something I write about how I do things makes your head spin as a well learned screen reader user, by all means, share it with me. 😉
To get an idea of what it is like to navigate the web using a screen reader, take a look at this page. Look at the very top of the page and focus on every detail from left to right, inching down slowly as you go. Every single item you just looked at is spoken, item by item, link by link, image by image, frame by frame. Tedious, right?
Luckily, there are ways to make things faster. I have been using my screen reader, Apple’s Voiceover, for a year and a half. I have not mastered every aspect of it, and constantly learn something new. I don’t use a mouse, like you do. My computer is controlled with key board commands. No point and click. I have to find the item I want by scrolling through everything on the page until I locate what I need, and then execute the Voiceover commands to “click. From here on out, let’s refer to Voiceover as VO, to make this easier on me.
My best friends on any website are headings. I can navigate by headings and skip past all the clutter before finding my content. On Blogger blogs, this function is invaluable, and Sadia’s blog has clearly marked headings, as do most Blogger blogs. I have run across a few where the blog author has given their heading text a stylized look, so my screen reader won’t read them. That’s rather difficult if looking for a specific post.
I also use a link chooser menu on sites I know well. I bring up a list of all the links on the page, type in a few letters of the link I want, and click once to be brought to where that link is on the page. If I click twice, I activate the link. Clicking once is useful for quick orientation on a page, like my Dashboard. To get to the current list of new blog posts, I use the link chooser menu to find the last blog on my reading list, which begins with “Words”. If I click once on that link and arrow over, my reading list is right there.
Blogs like Sadia’s are great, because I load the post and navigate by headings to the subject of the blog, then arrow down and read it. If I want to view a list of posts and maybe skip past a few to get to a specific one, I can navigate by headings to get there. I can also navigate by headings to find the comments, and then skip to the next heading to leave a comment. This also works if I’m viewing a list of blog posts and want to get to the comments. The headings take me right to the comments link.
This leads me to a very important topic among blind bloggers, the dreaded CAPTCHA. The word verification. The little tool Blogger offers where commenters must solve the word picture in order to post their comment.
If you’d like blind bloggers to comment, please don’t use this. If you’re worried about spam, switch to comment moderation. You have total control over what comments see the light of day on your blog. It’s also a nice way for bloggers to leave personal information because you can just reject the comment after you take down an address or phone number.
Google has an audio CAPTCHA, where we can click a link to listen to the numbers and/or letters. If you run across a CAPTCHA, just click the ‘listen’ link. It sounds like a heavy metal record being played backwards to look for hidden messages. A creepy guy speaks leters and numbers you have to type. I’ve gotten fairly good at these, but if there’s any outside noise, I need to plug in my headphones. I often listen to baseball games on my computer and check out blogs during commercials. If you have a CAPTCHA, I’m not going to comment if it means turning off my game. So, to keep your blog not only accessible to the blind, but also to the deaf/blind (CAPTCHAs are totally inaccessible to the deaf/blind), and to keep your sighted readers a little more happy, don’t have a CAPTCHA.
Now I’d like to talk about image descriptions. If you have a bunch of images in your blog post, all I’m going to hear is “image, image image”. VO cannot describe pictures. If there’s no text, VO has no information. This is another reason I love Sadia’s blog. She includes image descriptions on all her photos. Take a look at this post as an example. Back when she posted it, I got mistye eyes imagining her husband greeting their daughters at the airport.
It is also important on websites that use images to make their links and titles more eye catching, that there be text descriptions. If you have a cool graphic that says “home”, but you don’t add a text description, my computer will just say “image” and I’ll never get “home”.
Thanks again Sadia for all your hard work! Be sure to check out Sadia’s completed post. It’s a wonderfully detailed post and I am so glad she took the time to write it!