Beast-Blog.com
Mike Cherim's Professional and Personal Web Log

I have written about these before under the post name Hidden Focal Navigation, but that was back in November of 2005. I have refined my technique and would like to share with you this more semantic method of hiding-by-offset “jump links” or “skip links,” all while they remain “visible” to those who really need them. The who in this case — the beneficiaries — refers to the following user groups.

Continue reading “Offset Class Jump Links” »

If you’re into web standards as I am, you will of course use Cascading Style Sheets or CSS for presentational purposes; you won’t use mark-up to control this aspect of your web pages. If you’re into web standards, you’ll also use proper elements, just like me. I use heading elements for headings, the paragraph element for paragraphs, etc. And you do, too, right? See how much we have in common?

Continue reading “A CSS Starter File” »

You know those donation thermometers you see sometimes? The ones where the level of the mercury marks the charity’s progress? Well, I made one for the web using PHP and CSS. It started life as a growth gauge I made for a friend’s son, then I had the notion of making it a thermometer or gauge for measuring and displaying charity’s donations progress. Next thing I know, my friend’s friend, a person who in fact runs a charity, sees it and comes to the same conclusion as I and requests the gauge. This is for them I suppose.

Continue reading “PHP/CSS Donations Thermometer” »

I surf around the web and check out all sorts of cool sites on any given day. And gladly I report I do see a greater number of accessible, usable sites that look great — a beneficial trend. I visit some really fine websites that qualify for an A or two. Being so, you might understand when I say that it strikes me as a bit of an oddity when I see no link focus. What’s up with that? I ask myself. It’s so simple to do.

Continue reading “Let’s Focus on Focus” »

With block links you can create large and distinctive links

Mark-up, specifically HTML and XHTML, is found in two basic forms (display types): In-line mark-up and block level mark-up. In-line mark-up consists of things like links, spans, emphasis elements, etc. Block level mark-up, on the other hand, consists of paragraphs, headings, blockquotes, lists, etc. As you may or may not know, some of these elements can be styled opposite to their natural, default state. For example, lists, which are normally block level and render vertically by default, can be styled with your CSS to render horizontally or in-line. And to exemplify the opposite, certain in-line mark-up, like links, for example, can be styled with your CSS to render as block level elements.

Continue reading “Building Basic Block Links” »

It took a long time for me to get around to doing it, but I have finally submitted a CSS style sheet, an elastic design, to the CSS Zen Garden in hopes that it’ll be accepted as an official design. I have no idea if my submission is good enough. It’s not as fancy as many of the designs. I went with a straight-forward approach with keen emphasis on providing as many accessibility features as I could without touching the HTML mark-up. I succeeded well on this front, and this will hopefully be good for other web accessibilities advocates. Especially if the design becomes official.

Continue reading “CSS Zen Garden: Access Granted?” »

Here on this web log and on any page on my website I employ hidden focal navigation, “skip links” or “jump links” and such. I do this for the benefit of people not enjoying a proper visual display because they are using screen readers or they’re keyboard users. The latter, the keyboard user, is a prime example of how this plays a role. You see, a person using their keyboard to get around a site jumps from anchor to anchor (link to link). Now imagine having to tab through a long list of links to get from point A to point B. What a drag that would be. Jump links allow users to bypass certain sections. So what’s the solution? One is to provide these jump links at the top of the page leading all the way to the first content heading or div. I did this very thing at GreenMethods.com, top of each page, check it out. It works on that site. It fits. It doesn’t here, though… it wouldn’t look right. So what do I do, just forget about it, right? Some people will just have to deal, right? Wrong. The Jump Links are there, look again.

Continue reading “Hidden Focal Navigation” »

How cool is this? I got an instant message from Jonathan Fenocchi last night in which he pointed me to his latest blog entry. I came to learn that apparently someone really likes the layout and CSS styling of our GreenBeast CMS Content Management System and the web page made to support it, and submitted it to the CSS-showcase site CSS-Mania.

Continue reading “GBCMS Mania (II)” »

This is sort of out of date. The tech is okay, but the colors I used are poor choices.

Today, class, we will build some “Accessible Smart Tables.” First you will need to gather some two-by-fours… oh, wait, wrong class. All we’ll need here is Notepad or another text editor for writing our code. I will show you how to build a table with web accessibilities in mind, and it’ll be a table with a bit more functionality and style than one would normally have. But, first, let’s have a brief look at tables and the purpose they serve, then we’ll address how to make them better.

Continue reading “Accessible Smart Tables” »