Unintentionally Blank

Accessibility is not just about blind users who use screenreading software to hear websites. More than a year and a half ago Joe Clark wrote an article for A List Apart under the name Big, Stark and Chunky. It brought to light a different group of web users that need to be considered when making your site accessible. There are groups of users who aren’t blind, but do have visual impairments, they don’t use screenreaders, instead tend to increase the text size on websites or use magnifiers to view the web. Joe’s article goes on to describe how a site should be designed to accomodate these users and how CSS can help. Light on dark text, single columns, simple navigation and large fonts are the keys to the design we need.

In order to increase awareness of these techniques (and show off my own style sheet switcher) I tore apart my site’s design today in order to come up with a high contrast design that would be more accessible for visually impaired users. Continue reading “High Contrast Design” »

Being relatively new to the web standards scene, and especially since I was drawn in by marvels such as the CSS Zen Garden, I have read over the many different ways of replacing text with an image. Time and time again I was disappointed with each method for one of two reasons; it used an extra empty span element or would not work in the “images off/css on” scenario. Using an extra span is unsemantic and “images off/css on” left a gap where either the image or text should have gone.

Continue reading “Image Replacement - Getting Closer?” »

I was just running through my examples yesterday evening, checking they work in IE7 when to my horror my stylesheet switcher failed miserably. I ran to IE6 to see if I had overlooked the problem for IE in general and it turned out that I had. I guess that since the majority of visitors to this site use Firefox (in which the function works perfectly) no-one else had noticed either. The strange thing was that it was only the final version that didn’t work, the first version, using just links rather than the dropdown box, did work. This means that the stylesheet switching function was working fine and there was a problem with the dropdown box.

Continue reading “Stylesheet Switcher - Part 3: Revenge Of IE” »

I recently came across some problems whilst posting code on this blog. I was showing the javascript for my font sizing and stylesheet switching scripts and found that it was often awkward to format and display the code properly, even though I am using styled code tags around it.

The Problems

Indenting, line breaks… all the formatting that I had applied to make the code clearer to myself disappeared. Then I remembered the HTML element that retains that formatting; the <pre> (preformatted text) element. Using <pre> instead of <code> would make the script appear clearer and easier to understand. However, semantically the code element Designates a fragment of computer code. I want my markup to remain as meaningful as possible so what is the solution?

Continue reading “<code> and <pre>: Semantic Code Markup: A Quick Tip” »

Yesterday I began to create a stylesheet switcher using javascript and the HTML DOM. I finished up with an example of the work so far, but I failed to address a few of the points in my requirements, namely:

• Use a dropdown box to select styles
• Populate the dropdown box with stylesheet names from the title attribute of the link tag
• Graceful degradation in browsers without script
• Future proof javascript

Today I will tackle these issues.

Continue reading “Stylesheet Switcher - Part 2″ »