What is the different between the "b" and "strong" tags? What are "phrase" tags for screen readers?
Posted by jerothe in 
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.
Making Webpage Titles more accessible
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 am getting an unexpected space between my graphics with I use the "object" tag to embed Flash movies.
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.
My radio buttons aren't letting me select only one, but are selecting each individually when clicked.
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.
Last Name – Rothe Chapman
Using images on a regular HTML input button
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.
When I have an image right next to text in a table cell, why does the text start at the baseline of the image?
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.
How do I make Super or Subscript letters and numbers using HTML?
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;
<sub></sub>
<sup></sup>
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;
}
What does the "label" tag do and why should I use it?
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
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
This should work for most form fields, try it out and see what happens. For text field your cursor will change from a pointer to a typing tool to indicate to the user what should be done in that box.
Shortcomings of using Images in place of HTML buttons.
I was working on EVS Minder, the one stop shop for advanced online (pre) registration and on-site registration for conventions, at Esystems today. The online interface is very form intensive, and has a lot of submit buttons. My original designs had called for image replacement of the standard HTML button.
In order to use an image for a submit button, set this attribute in the input field;
<input type=”image” src=”something.jpg”>
However, the problem with using images for submit buttons is we found when a user submits information, the values returned were two numbers instead of the value set in the “value” attribute. The two numbers returned are coordinates, the value name plus an x and y coordinate. These numbers signify the place where the user clicked the button in relation to the upper left of the button.
So for Chris our programmer, it was screwing up his php code because he was testing for a value of “submit” and instead it was giving him something like this;
submit_y = 4
submit_x = 12
The other downfalls are that the buttons can be problematic in browsers. For browsers like Mozilla and Opera where a user can set whether they want to turn off all image downloading, the form will be useless as the image button wont’ show up at all. Since HTML 4.0 you can add an alt tag to the input field, so at the very least, if you insist on aesthetic over function, it will show the text in place of the image and the user can get an inclination of what was supposed to be there.
All in all, I decided to use a background image for all my submit buttons to spruce them up a little, but to keep them most accessible across the board.
Small HTML Tidbits
I came across some HTML I had never seen today. <big> and <small>which basically scale the text size in your webpage. It seems highly useless as it isn’t very specific.
<> These characters are known as chevrons.
Document Type Declaration doesn't work when I use an echo statement in PHP.
This is actually mostly a PHP thing, but since I don’t have a section for PHP and it uses HTML tags.
The problem is that you cannot have anything print out to screen before the Document Type Declaration (DTD) at the top of your HTML document. It can cause funny things to happen. If you are using it just for testing purposes, don’t worry about the errors continuing when you post your site pages live.
The particular problem we were having was with a center aligned using CSS content section. By the DTD not being declared first, the CSS was not reading correctly and hence did not look right.