blogher07*note: if you would like to see some additional links, or have suggestions for some links, please let me know in the comments*
Session description:
Find Out Why Bloggers Care About Web Standards
Last year, many attendees’ eyes were opened by a relatively brief presentation on making your blog more accessible for people with disabilities. This year we discuss how you can make your blog easier to find, easier to navigate, and easier to use for many visitors who aren’t viewing your blog in a standard web browser on a computer screen. Find out how to use web standards and other tools to optimize your blog for mobile users, users with disabilities, and various applications that are just now starting to index content about people, events, and more based on microformats. Skye Kilaen revisits making your blog more accessible for users with disabilities, while Virginia DeBolt covers how to check your site’s readability on mobile platforms and introduces you to using microformats to organize your content.
(Link to the presentation at http://allaccessblogging.com) (I’ll come back later and link to some of the terms you may not be familiar with.)
Welcome from Virginia DeBolt and Skye Kilaen.
Virginia is a technology contributor on BlogHer. She wrote a book on html & css together. Skye has no html or css coding by hand, but enjoys customizing MT.
Why do we care about web standards? What are they? They are the means of best practices, MOSTLY agreed upon for websites. We’ll be talking about two standards from W3C – html & css; accessibility; micro-formats (smaller standards for specific pieces of content).
Why standards? For cross-browser compatibility, opens door for more traffic.
Accessibility – what is it? Prevent barriers to disabled persons accessing your site. Why care? 18-20% of people in US have disabilities that can affect their browsing ability. They could be using screen readers or magnifying the sites to see better or using keyboard instead of mouse, or just have difficulty navigating. No one specifically excludes them, but some of our design decisions could affect them.
Standards are helpful. WCAG, 508, ADA – what is different? ADA doesn’t have anything to do with technology. WCAG & 508 address standards. (More info on their presentation online)
Basics of accessibility.:
COLOR: distinguish text from background.
LINKS: make them discernible and change the color after they’ve clicked the links, don’t open in new window without warning), make link text meaningful (don’t just say ‘click here’ ). Break up your text into paragraphs.
MARKUP: using headings, lists, and quotes using appropriate tags so screen readers can read the structure of the post.
IMAGES: label the images – use alt text that describes the image. Skye’s blog has information on the different platforms and how they handle. Example: Flickr grabs the title of the picture as alt text (when you use their auto-link text, but not when you use ‘blog this’ ). Discussion about how to use alt text, how to find, how to edit it into what actually describes the picture.
Let’s talk about ’captcha‘ . What for? There to prevent comment spam. The problem: these images make it impossible for people who can’t see them or interpret them. It’s a big barrier, especially those with learning disabilities. Just be aware of the barriers. See what you can do with plug-ins and other alternatives to reduce spam.
If you know how to adjust your template, you can try these things:
Screen readers will have to go through all of your links to get to content. Put a link (anchor) to the content, skipping the navigation. (Code will be in the presentation. ) Watch out for widgets that prevent your users from getting to your content.
Want to know what your blog will look like for those with disabilities? Try the “tab” test. Put away your mouse and just use the tab bar on your keyboard to navigate through your site. Colorblink Web Page filter: http://colorfilter.wickline.org. Firefox web developer toolbar: http://www.ariadne.ac.uk/issue44/lauke. Cynthia says validator: http://www.contenquality.com. Validate your HTML: http://validator.w3.org.
Switch to Virginia. Why do we care about mobile users? There are millions who use a small screen to access the web. On the global market especially. Make sure your site works even in the least-capable devices. How? Make sure your basic site (the bare bones) is set up properly. The naked test. The site has to look good without any css. Start with good html that makes sense and tells what your site contains. Using Firefox web developer tool to see the elements (the html tags) in your page. It tells you the attributes of content, etc. on your site. Examples from the Web Standards Project web site with good html. Examples from IMDB with bad html. (example: “span” and “font” tags) The html is what speaks to the mobile device and it must make sense to the device.
Another thing you can do with the web developer tool: disable your site’s css (in css menu) and javascript (in disable menu). Look at it that way to see how it appears to mobile users. Another way to test: the Opera Mini Emulator: http://operamini.com/demo. Looks like a mobile phone; you can navigate your site just like you would with a mobile device. Example using fandango.com, and good optimization for a mobile device. Remember that mobile users have a short attention span and they need to get to content quickly.
A lot of mobile devices don’t know css. A mobile device (handheld) style sheet is helpful for those devices that can read some css. It’s easy to add. Some coding is in the presentation (linked at http://allaccessblogging.com). The stylesheet helps you get rid of things that would clutter a mobile device (if the device understands css). Example onscreen of Virginia’s site without handheld css and with handheld css.
Next: microformats.
What is it? A little snippet of html formatted in a standard way. Follows a set pattern. If you know what you’re looking for, you can find it and use it in different ways. Ex: hCard (biz card), hCalendar (scheduling), XFN, hReview (product reviews, etc. ). When Virginia started putting her reviews in hReview, they started coming up high in Google. She listed several other microformats. Who uses: hCard on LinkedIn, cord’d, Yahoo local. Geo on Google Maps, etc. (names of these are listed in the presentation, under the speakers notes).
One way to generate the microformats: Site: http://microformats.org. Top nav link: Code. Click on one of the code links, and it will generate the code for you as you fill out the form. Then just paste into your blog entry (make sure you paste it into your entry form that accepts code, if your blog software has more than one way to input your blog entry). Other resources listed in the presentation, too.
End of session.
