HTML Coding

This was a topic that I thought I understood, but apparently I didn’t.

Up until yesterday, my understand was that <strong> was always better to use, especially for accessibility reasons for those web users who are hindered in their web surfing. My understanding a couple of months back was that Screen Readers actually read HTML code out loud with the text, and for that reason, it was better to use <strong> to mark up important words because “strong” read out loud meant a lot more than “b”.

I hadn’t connected the ideas, but when I was looking at a tutorial the other day things came together for me.

It is ok from a validation standpoint to use the <b> tag, it isn’t depreciated in XHTML 1.0, and it does the same thing that <strong> does visually.

The key is in how the screen reader interprets the tag. A “bold” tag doesn’t mean anything to a screen reader, it is purely there for visual markup reasons. But if we use the “strong” tag, not only will it bold the text visually on screen, but it will also be emphasized when read by the screen reader.

So keep this in the back of your mind when choosing your HTML markup. Don’t just bold something because, but because you want it to be emphasized. Your impaired users will thank you that your web page makes sense read out loud as well as to those who read it when they visit.

Recently I did a small stretch on accessibility and screen readers and I came across an interesting tidbit of information. This was something I had noticed, but never really thought about and this was a good explanation.

As you notice in the screenshots below from three common browsers, I am trying something new with my webpages. When I seperate a section of my site in the title of the webpage, I use a horizontal bar “|”.

There are many different kind of characters that you can use from a design point that make things interesting, these are some common ones;

• ::
• ||
• –
• >>

However, when an inpaired user comes across any of these it reads them outloud. So, while you may want to have a site have that small detail to make it look cool, wouldn’t it make more sense to just give that idea up and make it less obxonious for all of those users?

I am using one “|” because it is simplest to be read, and that way, impaired users can actually skip parts of the title easier and move down to the main content of the page. When most browsers load a page, they put a “-” “browser name” at the end of the page title. By not using a “-” anywhere else in the title, this gives the user the ability to tell the reader to skip everything past the dash.

In this case, the reader would read the page title, and then go straight to the content or links, or whatever the user wants, without reading the name of the browser each time the page loads.

Not to be contradictory, for now, I am keeping the double ::, because I wanted a heiracrhy of seperation between the name of my website and the actual page structure.

Final Note

This information may be kind of trivial. I don’t know enough about screen readers to know if the users can sense a pattern in titles, or if they try to figure out a pattern, that they tell the reader to pick out certain title seperators and skip after them, anything from a dash to colons. I don’t really know, but for now, I think this is a helpful idea until I figure out otherwise, and from what I read online.

I had come across a problem in one of our clients sites the other day. I noticed that there was an ugly space between two tables, the top table containing a small flash movie intro, and the bottom table containing content.

Naturally I thought I would double check the padding margin in any classes involved in the table rows or tables themselves. But the only declarations I used in the styles were for background properties. I could not for the life of me figure out what was going on, and after the rough week I had had this week with strange CSS problems, I thought I was losing my mind. But working backwards I figured out the problem.

When I removed the <object> tags from the embedded Flash movie, the gap disappeared in Mozilla Firefox, which was my problem browser.

First off, I decided to set the margin and padding of the <object> element to 0 like so;

object {
margin:0;
padding:0;
}

But after that did not work, I decided “When in doubt, make it xhtml compliant”. I made sure that this section of the site was xhtml compliant code, all the css was written in shorthand as much as possible for loading considerations, and I replaced the containing table with a div container instead.

Then, to make sure that every part of the site was xhtml compliant, I decided for the second time to use the “Satay Method” from Alistapart.com. I had used this on EVSMinder.com to make that a fully compliant CSS website and had good success. But I still have my reserved feelings about using it for large amounts of Flash on any given site.

I wrote about the method a little while back which you can find in the Flash section. But basically what it says to do, is to get around using the proprietary <embed> by using certain attributes of the <object> tag and “param” data combined with loading the final Flash movie into a container .swf of the same size. It should load quickly since the container will have nothing in it and will be around 1k.

As soon as I set this up and removed the duplicate tag, or as the Satay Method calls it - twice baked, (embed vs. object) the gap disappeared.

It was the end of the day, I didn’t get to research this, but I intend to, and I intend to follow up.

But if I am lucky enough to have any of the design community read this, hopefully they could post a comment with an explanation about this problem I was having.

There were a couple of ways that you could do this unpleasantly, and one of them would have been to partition your system, and load different Operating Systems on each, with different browsers. So in order to view your all CSS website for testing, you would have to logout, and change to Windows 98, for example.

Well, I came across an article on Sitepoint.com, on how to get any older IE browser to run on your system simultaneously with others.

I could go into detail, but basically is came down to this one guy, who downloaded an update of IE 6.0, and looked at the files he got, asked a question, and then set out to answer it.

I know you are hooked, so go ahead and view the article by Joe Maddalone.

Now, this is the advice I would give anyone who is trying to do this. As Joe suggests, you should unzip each set of .cab files individually. The way he explains it was a little confusing to me. I would suggest to go to evolt.org and get the IE browsers you need, then completely unzip all of the .cab files into another directory. Then, I would copy all of the files for the version he suggests into a new folder, and try the browser by clicking on the .exe icon.

This worked best for me. Plus, as he is stripping out so much stuff, the “About” won’t display the right browser, but it does display like the version you are using.

Enjoy. This is a great tool.

I was having troubles the other day when adding some radio buttons to a form. Since I don’t use them that often I had forgotten to make them work the way I needed.

Typically a radio button’s function is to allow a user to pick one choice from a list, and that choice will have a green mark in the radio button.

But when I was working with my radio buttons, there were two of them, when I previewed the file and tried clicking either button, the both stayed clicked. I couldn’t remember why that was, and then I figured out why. Because of the idea behind a radio button, where a checkbox is for a list of choices that a user can pick more than one, you need to label the buttons accordinly.

The radio buttons must have the same name in order to be clickable one or the other, like this;

Last Name - Rothe <input type=”radio” name=”name” />
Chapman <input type=”radio” name=”name” />

This code will spit out these two radio buttons and if you try them, by setting the “Name” to the same value, only one is clickable at once.

Using images on regular HTML buttons is something I have discovered in the last five months that can really help with the graphical appearance of a static form. Here is an example of a graphical button and the code;

Now granted, this is a quick example I pulled from my image archive, but you can design anything you want and use it in it’s place, here is the code;

<input type=”image” src=”/images/design/why_question.gif” alt=”Submit Button” />

The thing that is most important about graphic buttons is to use the alt attribute and here is why. Most browsers have options to turn off the downloading of images. Some people who have slow connections take advantage of this option, and therefore you button won’t be downloaded, and without an alt attribute, the user wont’ have any way of using a form, or any indication that there should have been a button there.

However, if you include the “alt” attribute, that alt text will come up in the dimensions of the button and the user will still be able to click the text instead. (This also helps if you are lazy and forget to check your link, and it becomes broken.)

I left out the “src” attribute for the input field below and look what the alt text does.

I’d had enough of this problem. It seemed stupid to have two table cells, one for an image and one for some text that was right next to each other. But every time I put an image right next to some text in a cell, the text aligned at the bottom edge of the image.

After some research, I found a “new to me” attribute for the image tag, Align. The align attribute will take care of that problem with the text and the image.

Here is the traditional image next to some text;
See what happens? It aligns to that bottom edge.

But if you add an “align” property to the image tag like this;

<img src=”/images/design/html/indy.jpg” align=”absmiddle”/>

This is what that thumbnail does now;

See what happens? Now it aligns in the middle.

Now, I am not sure what the difference is between the “absmiddle” and “middle” declaration of that property, but when I was using them the other day with two sets of text and images in cells next to one another, with the same sized thumbnail icons, the thumbnails were not on the same like, but were off one pixel when I used the “middle” declaration.

Here is the same example with “middle” set for align;

It seems to align pretty much the same as absmiddle.

Try it out, either way it is a nice little code saver and very useful on a day to day basis.

Like those neat little footnotes you can add when doing word processing so you can properly annotate all of your sources? Of course not. But do you want to know how to achieve it anyway using HTML? Sure you do.

This was something I assumed, wrongly, that was done with CSS. But there are actually HTML tags to achieve subscript and superscript footnote type annotations. These are the two tags;





Surround the number, or whatever else you may be using these tags for, with this markup and you have your effect. You can redefine the selector in CSS, but I didn’t have much luck. I added a font-weight:bold to the selector, but when trying to adjust the font size, when set to font-size:10px I couldn’t see the number as good as when I didn’t set a font size.

Now, when I was reading about these two tags, I read that sometimes they can cause some problems with line height and making your line spacing look larger between lines in places where there is subscript or superscript. You can easily adjust that by added a little line height for your paragraph<p> for a certain section or a specific class, something like this;

p.lineChange{
line-height:20px;
}

or

.lineChange{
line-height:20px;
}

That is what I was asking when the new version of Dreamweaver came out and I started using it this spring. When ever I was inserting a form field of any sort, DW was inserting a tag surrounding my form element. Today I finally learned its usefulness.

If you have a checkbox or a radio button or some small form element like that, it may be hard for some users to click in that specific spot to fill out a form. So by using a tag, you can set up the form so the user can click the text and that will tick the form element for them. Here is the code;