CSSEdit 2, though, has been feeling a little old and tired lately.  Though the backbone of the rendering engine in CSSEdit is recent enough (webkit code) that it displays CSS3, the visual editors don’t support CSS3. Visual editors for some CSS3 features (like gradients) would be super helpful. So, I decided to take a look at Espresso 2, MacRabbit’s new offering, which they claim has “CSSEdit 3″ built right in.

For reference, here are some pictures of the CSSEdit 2 and Espresso. Notice I don’t have both the code inspector and the color picker open in Espresso – because you literally con’t have both open at the same time!

CSSEdit 2:

Espresso:

If you are used to CSSEdit 2, there will be a few frustrations:

Now you HAVE to override the CSS file if you want to edit it in a separate window (unless I am missing something?). This kind of negates the “wow, I can see my changes as I type!” functionality that made CSSEdit such a revolution for me. This is easily solved by pasting the CSS into your main file when you are done, but slightly annoying.

Some of the buttons have moved around, which slows down the workflow at first.

The inspector disappears when you click in to edit the CSS. It appears that now you are supposed to double click the element to get the inspector?

Some things are maddeningly missing:

There’s a new, low powered color picker rather than the default OSX one, and you can’t switch back to the OSX color picker! This is a deal breaker for me, since most of what I use CSSEdit for is playing with colors and I have a bunch of plug ins that make that easier in the OSX color picker. There’s not even a color wheel in the espresso color picker. And, it always appears in the same part of the screen, you can’t reposition it somewhere more convenient. All in all, a big lose.

Old color picker (4 of the screens, anyway):

new color picker:

They took out the handy code cleanup feature. Why?

Some basic CSS3 things just are not there in the visual editor – like rounded corners.

Some things, however, are great

The CSS3 features that are not missing are elegantly implemented. Creating a multi step gradient is easy peasy, except for the horrible color picker getting in the way.

The layout changes to the visual editor make a lot of sense, and there’s a lot less clicking between palettes. Most of the stuff I need the visual editor for happen to be in the same tab.

Final thoughts

I have not evaluated Espresso for coding much. I currently use oXygen, because most of my code is XML/XSL and oXygen handles formatting far better than anything else I have tried.

CSSEdit 2 was one of those perfect mac apps that did one thing and did it well. I’m happy I purchased a copy before they stopped selling it. At $80, Espresso would be totally worth buying for just the CSS editing capabilities – IF they can fix a few minor annoyances, like the color picker. For people that code in more popular frameworks/languages, Espresso might be just fine as an editor, but in my experience, the text editor itch has already been scratched by most OSX coders.

I’ll be sticking with CSSEdit 2 for now, but keeping an eye on developments, and I will buy Espresso if they decide to fix the color picker/missing CSS3 attributes/ disappearing inspector issues. I continue to be disappointed that I can’t just buy a copy of CSSEdit 3.

Panelists:
- David Baron, Mozilla (@davidbaron)
- Elika Etemad, Invited Expert (@fantasai)
- Molly Holzschlag, Opera Software (@mollydotcom)
- Sylvain Galineau, Microsoft Internet Explorer (@sgalineau)
- Tab Atkins, Google Chrome (@tabatkins)

They all love feedback! Message them on twitter with ideas, suggestions, concerns. If you blog about CSS, they probably won’t see it, so send them the link. The majority of people want to be involved in the standards, take the time to participate.

You can also follow @csswg for minutes and drafts.

When asked how many in the audience preferred Internet Explorer’s incorrect implementation of the CSS box model, many raised hands. I was one of them.

Question: What would they change about the CSS spec?
Answer: Galineau said that there should be other methods for laying out pages than float:left and right. Floats are delicate and easy to break. Also insane we don’t have variables. CSS sheets are giant and unwieldy.

Social media tools are not just a utilitarian way of getting the word out, they are also a divide between generations. They provide a narrative for the current generation to produce change.

The revolutions which are happening now are the end of a long process, not a new process. The Kefaya movement started in 2004, using blogs to coordinate efforts. But what happens when the long game is not there? People don’t know who to trust.

What people really want is a more responsive government. (Karin’s note: I have heard this repeated again and again – the cry isn’t for “democracy” per se, but a government who will listen to the people. Sometimes democracies don’t even seem to have that.) Feminism correlates strongly with attempts to make government more responsive.

Totalitarian governments are running into a problem – in order for economies to be competitive, people need to be informed. Everyone with a cell phone. But that gives people a way to organize. They can synchronize, coordinate, and document, as well as share.

What can we do?

Pay attention! Pick an area you care about and learn about it. Bloggers, tweeters, etc who can make informed decisions about what to repeat are valuable. They can add context and explain.

Help out. Example: Egyptian linux users group shared information with other linux user’s groups. Share expertise, experience.

Finally, Clay showed a picture of the Christian Egyptians holding hands to protest the muslims praying. We can do that. Join hands around the muslims in this country, stop hateful political grandstanding.

(note: these notes are pretty disjointed, was busy taking it all in!)

12% of sites are powered by WordPress.

Blogging isn’t dead, it’s just changing

Mullenweg about tumblr – (paraphrased) some will say it’s all porn, but it’s artistic.

Tumblr is a different product, with a different focus. It integrates the reading/writing process in a beautiful way. WordPress should do more of that.

WordPress.com is made to be a consumer service – for people who don’t want to deal with the plugins, etc.

Interviewer – “You do seem to make money with advertising, but you seem to hate it.”

Originally how the ads worked is they would only be served to people who were coming from google, had never been to WordPress.com before, and were not on Firefox.

Question: Any ideas how to change the monetization of WordPress? Promoted posts like Twitter? Promoted accounts like Tumblr?

Answer: WordPress is very sensitive to putting things on people’s blogs. There is a little more room on pages that feature collected posts on a theme, because you are not messing with people’s personal style or infringing on their space.

They do monetize by providing value for the users – with things like premium themes, etc.

Jetpack launch!

Jetpack is a new plugin which aggregates some features which were available previously in seperate plugins, and brings features from the WordPress.com site to the .org site, like analytics and a math markup language. The goal is to have 100% feature parity between WordPress.com and self hosting users.

Guided transfer lanch!

Guided Transfer is a service which costs $99 and will help the user leave WordPress.com to their own guided host.

Business model: “We make a good thing, tell people about it, people give us money.”

Mullenweg was born and raised in Houston. Was in a linux user’s group and a palm users group there.

How the WordPress business works:

There are 80 people around the globe, the most people in any one place it 5. They use very little email, but use IRC for chat, and the P2 theme (for WordPress, duh) to keep track of projects. It has sort of a twitter/friendfeed feel. They have more P2 installs than they have employees. Superior to email because it is archivable and searchable. Great for catching new people up on the projects.

Question: Are there enterprise solutions? Pay for a certain level of uptime?
Answer: They already do this. WordPress.com powers some of the largest sites in the world – CNN, lolcats, time magazine

Question: What separates the entrepreneurs who make it?
Answer: Are you willing to outwork everyone else?

Question: What would Matt like to see in WordPress?
Answer: Handle media better. There is already a full screen writing mode for the visual editor (see pic below) , but Matt would like to improve even more.
Wants to continue to put authors first.

Question: Are there any plans to make podcasting better?
Answer: This will continue to be handled by plugins, and WordPress will continue to provide the hooks to make it work.

Question: Will you make it easier to livestream?
Answer: Matt recommends picking up a WordPress theming book and get skinning. You can use categories to distinguish livestreaming entries. “Scripting is a new literacy.”

Question: When will you make the iPhone app better?
Answer: It will continually get better, along with the blackberry, android, etc. apps. These are like nothing WordPress has worked on before, there are 5 different codebases. Also, people don’t like to contribute to closed platforms, so they are not getting the open source community help they do with other stuff.

Question: Is there any plan for plugin consistency?
Answer: This is hard because the plugin makers have leeway. But there is a UI group where plugin makers can ask about the best place to put things.

Updates are still not as easy as Matt would like. Working to make it better.

Programming is defining processes. Be a code craftsman – build good code, that can’t be commoditized. Develop habits and use tools that allow a craftsman do his or her job well. Work with good teams and develop good habits and practices. A good programmer can describe complex processes in a precise way.

Programming and similarities to music

Both work in an abstract way – the musician records the music in a notation that is an abstraction of the actual music, a representation (dots on a page). The coder also works in abstraction.

How music is created:

• Make something simple and interesting (like the hook of a song)
  • {build on it (loop)}
• End up with something enormous, stale and boring
• Trim the fat
• Repeat as necessary

The Dahl went into a musical history, which I don’t think would be as useful without the clips he played. But the gist was, music goes in cycles from simple to complex to simple again.

Simple -> Complex -> Simple -> Complex -> Simple -> Complex

It is operating well between the simple and the complex that leads to beauty.

Minimalism is a positive aesthetic.

Programming and similarities to writing

An essayist writes and rewrites, as a programmer codes and then refactors code to make it better.

Is language ambiguous? Is that the problem? Or is the problem that we don’t realize that language is imprecise, so we don’t take it into account?

There is not a 1:1 correlation between what we want and how it can be expressed in code, this is why coders are needed in the first place.

George Orwell the essayist

Read George Orwell’s “The politics of the English Language” – it connects poor writing to poor thinking.

Example: the US Patriot act. The name does not tell you anything, it co-opts your ability to think intelligently about whether it is a good idea. It should have had a title like “The expanded surveillance act.” The sloppy title inserts the idea beyond rationality into someone’s brain, and demonstrates sloppy, unclear thinking.

Bad writing is more prone to bugs. The presenter gave an example of terribly unclear writing that had a quadruple negative, one of which didn’t need to be there. Clear, direct writing makes it easier to follow the thinking and detect bugs.

Orwell’s rules:

1. Never use a metaphor, simile, or other figure of speech which you are used to seeing in print.
2. Never us a long word where a short one will do.
3. If it is possible to cut a word out, always cut it out.
4. Never use the passive where you can use the active.
5. Never use a foreign phrase, a scientific word, or a jargon word if you can think of an everyday English equivalent.
6. Break any of these rules sooner than say anything outright barbarous.

Application to programming

• Minimalism
• Clear direct writing
• Take simplest approach to coding
• Clever code is bad code
• Any code not doing something is harming your product. If your users don’t need it, get rid of it.
• Accept constraints – work witht he language and framework when possible
• If something isn’t local business logic, it belongs in a library. (In MVC, model should not be huge)
• If it is not local, consider using open source
• Don’t over or under abstract
• Always actively clean up your code – otherwise your code is degrading
• Code tracker – always document what needs to be done
• Apply these rules wisely
• Simple code is beautiful
• Break hard problems down

Consume

• pair programming, hold code critiques, view other people’s code
• read good prose
• listen to good music
• study and learn

Produce

Good programming is:

minimal – direct – beautiful

Questions

Question: How to justify to stakeholders time spent on cleaning up code?
Answer: Don’t tell them. They hired you to do the best job you can, and the best is not broken spaghetti code.

Question: How do you deal with an organization love of complexity?
Answer: I didn’t record an answer for this one. If anyone thinks of something, let me know!

Christmas at parent's house: an OLPC on top of another laptop.

I know this is late. I started it yesterday but did not quite finish.

March 24th is Ada Lovelace day, “an international day of blogging to celebrate the achievements of women in technology and science.” (http://findingada.com/about/) There are a lot of women in technology I could write about, but I am going to start with my first influence, my mom.

I first learned HTML because my mom learned it and encouraged me to do the same- and I got my first HTML coding job after she left it. She’s held several jobs involving programming and computers, but more than the jobs she’s always had a fascination with computers that she passed on to me.

Whenever a new technology comes out – most recently the iPad – people talk about subjecting it to the “mom test.” I laugh, because my mom is one of the most tech savvy people I know.

I can’t remember a time in our house when we didn’t have some kind of computer. I don’t remember all the different kinds we had, but I know my mom was the driving force in acquiring most of them. We had one that used an audio tape as its storage media- which enabled my mom to write a program that quizzed me on my spelling words using the tape to record her voice saying the words.

Today, mom always has the latest gadget- slingbox, android phone, netbook, and she hacks these devices to her liking. She listens to all the techie podcasts and uses open source apps. Most of all, she maintains an unrelenting excitement about the future of technology that I can’t match- but I know I can always check in with her if I want to know what hot new device is next on the horizon.

Whenever a new technology comes out – most recently the iPad – people talk about subjecting it to the “mom test.” I laugh, because my mom is one of the most tech savvy people I know. The test will probably change soon to the grandma test, and I’ll still laugh – my grandma’s a gamer.

Now that we have talked about Code and Navigation and Design, I’ll talk briefly about a few tools you can use to help you do a mini accessibility study on your website, and briefly point to some resources on doing more complete usability studies.

Web Developer Toolbar

The Web Developer Toolbar add on for Firefox is what I use most often to do a down and dirty accessibility check of webpages. You can download the Web Developer Toolbar from its page at Firefox.

You can use the web developer toolbar in many ways (in fact, I still find more uses for it!) but for the purposes of this discussion I’ll just go over a few simple tests.

You can use the web developer toolbar to disable images, CSS and Javascript on your pages. Doing this will give you a pretty good idea of how accessible your page is – if you can do this and still navigate around and get to content, you are in pretty good shape.

Sometimes the toolbar shows some pretty dramatic problems. Take the following site:

Buy Fresh, Buy Local

The site looks pretty – but when you turn off javascript by choosing Disable > Disable Javascript > All Javascript using the web developer toolbar, you get the following page instead:

Buy Fresh, Buy Local with javascript turned off

Problems are not always that dramatic.

Turning off all javascript (Disable > Disable Javascript > All Javascript) Styles (CSS > Disable Styles > All Styles) and Images (Images > Disable Images > All Images) On aadl.org points to the fact that there is no H1 tag. Inspecting the code with the code inspector turned on (Information > Display Element Information) confirms this.

aadl.org is lacking an H1 tag.

Finally, the Web Developer Toolbar contains a built in validator for your CSS and HTML (actually, it uses the validator at http://w3.org, but offers and easier way to get to it.) You can access the validation tools by navigating to the page you want to check (must be on the web) and choosing Tools > Validate CSS or Tools > Validate HTML.

Firefox Accessibility Extension

One of the more impressive, free tools out there to check your website’s accessibility is called the Firefox Accessibility Extension. With this tool, you can get access to reports on accessibility that will point out missing alt tags, etc. There are 2 high visibility stylesheets that let you see what your site might look like to a low vision user. These can be found under Style > High Contrast View 1 & 2.

There are many more features found in this extension than I can go into here, but you can read the documentation for more.

Greasemonkey, Stylish, and various scripts

Greasemonkey is a Firefox add on that lets you change how a website behaves. Stylish is another firefox add on lets you apply your own stylesheets to websites. Many people with low vision or other special needs use these and other add-ons to alter the look of webpages. It is worth installing these and a few scripts to see how your site looks when altered.

For example, the Readability Interface is a set – a script for greasemonkey, and a style for Stylish – that lets you change the font, font size, background color, and other things about a website so you can see it better.  Likewise, the Night Shift style for Stylish applies a dark gray color scheme to a web page, making it easier to read in the dark.

Usability Tests

Usability tests can range from the simple to the complex (think eye tracking software) but are useful if you can get a group together, no matter how small. In a library setting, you could ask for a few volunteers to come look at your website in various stages of the design. Ask them to complete some tasks, and then observe how easy or hard it is. Encourage them to vocalize their thoughts. Don’t interrupt them or try to direct them, just observe. Afterward, compile what seemed to trip the users up, and fix them for the next iteration. If this seems very simple, that’s because it is. Although usability testing can be very complex and expensive, it can also be cheap and easy.

In addition, there are online tools you can use for usability testing. This article lists many of them. (Thanks to commenter Bret Clement)

Keep in mind that while a usability test may be fairly easy, the problems it turns up are not often easy to fix. Also, keep in mind that what is easy for one person might be hard for another, so don’t be too quick to change something based on one user. A usability test should always be combined with an understanding of usability principles.

This quick overview is no way attempts to dismiss usability testing or make it sound overly simple. One could devote an entire book to it (in fact, there are many). However, watching a user actually interact with your website can be an enlightening experience, even if you don’t have the money for a full fledged usability study.

If you’d like to read more on usability, you can start with usability.gov, which is an excellent resource. You might also want to check out the wikipedia article on usability or Usability Testing Demystified, an article by Dana Chisnell.

Conclusion

It is rare to find a website that follows all the rules for accessibility and usability. If you find your website breaks many of the rules set out here, don’t worry. In fact when I started to run tests on my own site, I’m sorry to say I failed many of the tests.  Usability, especially, is more an art than a science, and incremental changes over time can make a big difference to a website. Just be aware, keep at it, and code carefully!

Design and navigation are important aspects of your site’s accessibility. Clear, concise navigation helps users that must use their keyboard to get around, and a clear, clean design helps users find your content with a minimum of fuss. A good design should also allow the user to change it – for instance, make the font bigger or smaller, or change the colors so they can see it easier.

Navigation

Use words your users will understand. Exactly what words your users will understand is still somewhat of a contested issue, but there are several articles to help. John Kupersmith has put together an excellent site citing 51 usability studies called Library Terms That Users Understand. Among his findings are that users do not understand things like library acronyms, brand names and jargon, and that many terms that are straightforward to a librarian, such as “databases” and “library catalog” may not mean the same to users. In general, try to use natural language phrases such as “find books,” “find articles” and “ask a librarian.”

Label outside links clearly, and never link to an outside site (i.e. one that has a different look or feel or different navigation) from what looks like a navigation area. This area is generally the top bar of the site, and sometimes a side bar as well.

Plan out your navigation carefully, and try not to have too many sections and subsections. There is no perfect number of navigation items, but the more there are, the more likely your user will end up lost and confused. Users won’t want to look over a list of 10 items to find what they are looking for. Plan out the top level and sub navigation so that users are presented with a few choices each time. Try to consolidate pages wherever possible. Write and rewrite your copy so it is clear and concise, and gives users an immediate idea of what to expect on each page.

Build a robust search, as many people will give up on navigation quickly and will jump straight to search to find what they need. If you use a search like Google’s custom site search, the hard work you did in coding will work for you – your titles and headers will lead the user to what they are looking for.

Let the user know where they are by indicating it graphically. You can show a user where they have been by incorporating breadcrumbs into your site, but at the very least the user should know where they are at a glance. This might be accomplished by changing the color of the navigation for the page the user is on, and including a title that lets the user know exactly what they can find on that page. See Derek Powazek’s article “Where am I?” for more.

Carnegie Library of Pittsburgh hightlights the navigation showing the section you are in, and has a "you are here" bar so users can orient themselves.

http://www.carnegielibrary.org/research/art/

Also note that the URL gives users and indications where they are- the main body of the URL is followed by “research” and “art,” which correspond to the section and subsection the user is in.

Use a list to mark up your navigation. After you have marked up your navigation, you can use CSS to make it look like whatever you want. Consider the following example:

On the left is navigation as a list. On the right, the navigation is shown not in a list.

The navigation on the right is hard to understand- but the list on the left gives it structure that will come in handy when a screen reader is trying to navigate your site.

Offer users the option to skip the navigation if at the top, or skip to the navigation if it is at the bottom. In the figure above, there is a “skip navigation” link that allows users with a screen reader to skip the navigation so they don’t have to listen to it over and over.

Design

Designing a website is hard. Trying to keep accessibility and usability in mind while designing a website is even harder. And trying to work with a designer- well, that can sometimes be really hard (I know, I’m a designer). But whether you are designing on your own or working with a designer, following a few ground rules can help immensely.

Set some rules. Before letting a designer loose on your concepts, set some expectations. For instance, if you want to avoid using text in images (as mentioned in the last part of this series), mention that up front. Likewise, if you want to avoid using images for navigation, mention that too. It is much easier to design with accessibility ans usability in mind than to retrofit a design after the fact.

Take advantage of open source design. If you are designing a site yourself, you don’t have to start from scratch. Whether you are using a content management system, or coding from scratch, you can take advantage of open source design to get started. Find a template, theme, or design that is close to what you want and then tweak it ’till you are happy. Just be sure to credit the maker as appropriate if you do go this route! Each design will include specifications on how to credit the maker. Google for open source design to find designs, or look at the templates available for the CMS you have chosen.

Try to avoid making content look like ads. People have been trained over years to avoid clicking on anything that looks like a banner or sidebar ad or text ad. As you look around the internet, think about where ads are placed, and about their side and shape. Then, avoid using these same conventions for your content. (See item number 10 on this article on usability findings for this and more usability tips.)

Simplify, simplify, and simplify again. This applies to the code, the design, the writing and the pages. Really look at each part of your site and think about whether it is needed, or whether it could be combined with another part. Try to eliminate parts of your pages and add whitespace between items. Simplify your writing to use shorter sentences and fewer words. (Think “being concise” rather than “dumbing down.”)

Realize your user will mess with your design. The beauty of the web is that it is malleable, and if you separate your design from your content, the user will be able to change the content so they can read it easier. This is great! This might be something as simple as making the font bigger on the page, or as dramatic as turning off all styles and viewing the page with white text on a black background.

Lincoln City Library website with readability interface user script and style applied.

UNL Libraries Website with styles turned off and Night reading style applied

The first step to creating accessible and usable websites is to create clean, semantically marked and validated up XHTML.

Well formedness, doctype, and validation

First, code should be well formed, and adhere to the doctype declaration at the top of the page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

The doctype declaration tells the browser what the code should look like. You can read more about doctypes here.

One of the aspects of good XHTML, is well formedness – which basically means that all the elements are nested correctly.

<html><body></body></html>

This is nested correctly

<html><body></html></body>

This is not nested correctly

You can validate your webpage using an HTML authoring tool, or for free online (more on that later). The fewer validation errors you have, the more accessible and usable your website will be.

Semantic Markup

Semantically marked up content refers to content that uses HTML tags as they were intended to mark up the content.

For instance, the <h1>, <h2>, and <h3> tags refer to first, second, and third heading, respectively. they are meant to be used much as one would arrange an outline.

As an example, take this page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>Main Library, Anywhere USA-Upcoming Events</title>
  </head>
  <body>
    <h1>Main Library, Anywhere USA</h1>
      <h2>Upcoming Events</h2>
        <h3>October</h3>
          <h4>Week one</h4>
          <h4>Week two</h4>
          <h4>Week three</h4>
          <h4>Week four</h4>
        <h3>November</h3>
          <h4>Week one</h4>
          <h4>Week two</h4>
          <h4>Week three</h4>
          <h4>Week four</h4>
  </body>
</html>

So, for every web page, you should have an <h1> tag, which is usually the title of the website, and use <h2> – <h6> tags as needed to separate the content.

The <title> tag in the header of the HTML is important as well – you should have  a title that is unique to each page. Many websites use put the name of the site first, and then the name of the specific page your are on.

fig 1: Page without style

Other information on the page might include lists, tables and paragraphs. For instance, navigational elements are best presented as a list of items. Sub navigation could be represented as a sub list. Blocks of text should be enclosed in <p> paragraph tags. Tabular data should be presented in tables.

There are several old HTML tags that are no longer used because they have no semantic purpose – these include the <font>, <i>, and <center> tags.  The <span> and <div> tags are semantically neutral, and this is how we add style – colors, fonts, sizes, etc., to our webpages.

One way to check the semantic markup of your webpage is to turn the styles off in your browser – while not foolproof, this gives a good indication of how well marked up your document is. You should see a neat page, white background, black text, which is easy to follow and linear – i.e. there shouldn’t be columns.  (fig 1.)

For more information, see this Guide to Semantic Use of HTML Elements.

Images

You cannot avoid using images in your web page, but you can mark them up so users without sight (or users who have images off) can still know what the images are. Alt tags should be used only for images that have presentational meaning on the page. So, for instance, if you use an image for spacing (which should not be necessary anymore) you would use no alt text. An image may also have a title attribute where you can specify additional information about an image. The title tag will show up when a user mouses over an image. The alt tag will show up if the image cannot display (for instance, screen readers).

The title attribute is also useful for links. When it is not clear from linked text what you are linking to, or you are linking using an image, you should give additional information with a title attribute.

In short, the alt tag should be used for images that affect the meaning of the page, and the title tag should be used for additional information about decorative images.

<a href="help.html" title="Link to help page">
  <img src="help_graphic.jpg" alt="Help Page" title="Your helpful librarian" />
</a>

More information on the alt and title tags.

One final note about images- whenever possible, don’t use an image in place of text on your website. Not only does it make the website harder to change, but it makes it harder for the user to do simple things with your content, like print out a nice copy or access the content with a screen reader. Sometimes, this might mean compromising on a design, but in the end, the accessibility boost is usually worth it. For limited amounts of images with text – say, a specific organizational logo, be sure to use alt text as described above.

CSS (Cascading Style Sheets)

I won’t go much into style sheets (you can take a course or read a book if interested), except to say when you use CSS to specify the font size, to use ems instead of font size. If you do this, the font size will be based off what the user has set – so if they have a large or small font size as their default, your page will reflect that. A good article on sizing text with ems can be found on A List Apart, “How to Size Text in CSS.”

Conclusion

The point of having clean, well formed, semantic XHTML is to present your content so that many different devices can access it. the upside to this is that this approach optimizes your site for accessibility (for instance, screen readers) and usability (for instance, you can easily create a version of your site for a mobile device). This also, incidentally, optimizes your site for search engines to find it, since the same principles that allow screen readers to parse your site also work to allow search engines to index your site. Once the code of your page is clean, it will also be easier to apply your design using CSS.

Accessibility and usability are hot keywords right now, and usability testing is a hot new money making venture. What one doesn’t often hear is that much of what makes a website usable and accessible is pretty simple, and easy enough to implement if you know how.

Definitions

Usability refers to how easy (or hard) it is for users to find and retrieve information on your website. Usability is not new – you also have usability concerns in your physical library. For instance, how easy is it to find what you want? Usability on a website might refer to how easy it is for people to find the card catalog or a calendar of coming events. The tricky thing about usability is, there’s no magic bullet. Different people will use things differently, so you have to try to find a happy medium that works for everyone.

Usability also refers to the different ways a person might use your site. For instance, a user might bookmark your site, share it on a social networking site, copy content to paste into an email, print out a page, save information for later, or otherwise manipulate data.

Accessibility refers to how easy your website is to navigate by different groups of people. In the physical library, this might mean providing wheelchair ramps and large print books. On the web, it means making sure your site is easy to navigate by screen readers for the blind or people with low sight. Accessibility on the web also means serving those that come to your site via a mobile device.

Contents

Part 1: Code – The first step to creating accessible and usable websites is to create clean, semantically marked and validated up XHTML.

Part 2: Design & Navigation – Clear, concise navigation helps users that must use their keyboard to get around, and a clear, clean design helps users find your content with a minimum of fuss.

Part 3: Tools – A few tools you can use to help you do a mini accessibility study on your website, and some resources on doing more complete usability studies.

Below are the slides from my presentation: