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
Formatting Ordered lists so they look like an outline in Microsoft Word.
Before I first started building this site I thought that lists were kind of a useless HTML tags <ul> <li>. But as I was reading up all of the different information about CSS and building my own CSS based site, I realized the built in capabilities of lists were very powerful. The main problem I had in the past, the same with header tags s<h1>, is my lack of knowledge in controlling the styling away from the default settings.
So what we are going to do here is show you how to style those elements and then how to do nested.
Also, as a sidebar. Another important design issue to address when making a CSS site, or any website with CSS styling is how you organize your stylesheet. The beauty of a stylesheet is that it is such condense markup that you may have a 8 page file that is only 7K that gets loaded once into the computer’s cache and never loaded again.
That said, 8 pages is a lot of crap to surf through and try to remember, so labeling your stylesheet is a good idea. But I wouldn’t over label however because the whole idea behind CSS is that you are condensing unnecessary code, and by adding comments that are beyond “basic explanations of out of the ordinary elements” are extraneous.
The format I use for smaller sites, (50 pages or less as that is all I have built so far) is to separate all of the block elements specific to the page into one section and then label that section. It’s looks something like this;
/* Start “Photo Diary” Page Selectors */
div.mainContent h3{
font-size:13px;
color:#6C6C6C;
padding:0px;
margin:0px;
text-align:center;
}
div.mainContent h3 span{
color:#3399CC;
font-size:13px;
font-style:normal;
font-weight:bold;
}
div#dashed{
width:186px;
border-bottom:1px #666666 dashed;
margin:0px 0px 0px 4px;
}
Then, when I need to find something, I can do a Ctrl+F in Dreamweaver and search for “Photo Diary” and boom I am in the section I need to be to edit or add addition styles.
Back to styling list selectors.
1) Open up your stylesheet.
2) Find the appropriate section where you are using the list selectors. I am going to use “Home Page” as my section in the example.
3) Type in this code
ul{
list-style-type: square;
font-size:12px;
color:#330033;
padding:0;
margin:0;
}
This code will set the font size of the list, change the color of the text, change the type of list marker in “list-style-type” and then take away the default browser padding and margin for each element so they stack right on top of each other.
(As a sidebar, when using a measurement of “0″, you do not need a size declaration because 0 is the same value no matter what measurement you use, and is just another small way to reduce your code.) See the results;
- First List Item
- Second List Item
- Third List Item
Now, like a propositioned in the title, we can then use this styling knowledge to style selector specific styles for nested elements.
Here is the code you can enter;
ul ul{
list-style-type: disc;
color:#cc0099;
}
ul ul ol{
list-style-type: upper-roman;
}
In the first style I have specified when there is an “unordered list inside an unordered, use a disc” as the list style element. In the second style I have specified an even more specific instance when there is an “ordered list inside an unordered list inside an unordered, use upper-roman numerals”.
Note: Each of the properties will be inherited down in the nesting from the first established instance of the selector. So, your second set of unordered list information will retain the font, color, padding, and margin of the first list unless otherwise set. This is the result;
- First List Item
- Second List Item
- Third List Item
- First List Item
- Second List Item
- Third List Item
- First List Item
- Second List Item
- Third List Item
Without getting too technical, that is a visual example of how to make nested lists. If you look at my code, I haven’t used an external stylesheet and linked it, instead for this example, put the styles inline which is easier to keep my information organized, but is much less portable and in the end defeats the purpose of efficient CSS code.
For more information on ordered and unordered lists, visit W3Schools.org. They list off all of the type of options for styling your lists with the appropriate marker or letter / numeral combinations for your needs. I hope this was helpful.
Which HTML Selectors are block elements and which are inline elements by default?
We have talked about the display property before, but I just wanted to make note here what the defaults are for a select few HTML Selectors.
Elements that default to display:block, and will force a break, are;
p, h1, and div
Elements that default to display:inline and will stay as the name says, inline with other elements, are;
strong, span, and em
Remember, you can change the rules for all of these selectors in your external style sheet in how they display. Here is an example of what you write;
h1, h1, h3 {
display:inline;
}
span {
display:block;
}
In the second example for the redefined span tag, here is what would happen.
The redefined span element with a display of block will now force a break mid line.
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.
Empty div containers will cause a break without a comment in them.
Using a “Clear” container like I have mentioned in a previous article, to correctly extent the wrapper div element around content that has extended longer than it’s base dimensions, is a necessity when optimizing in Mozilla browsers. Mozilla browsers correctly followed the w3c spec for the “clear” element and as a CSS designer you have to be familiar with a blank “clear” element.
The other part you need to be familiar with is that a comment inside of the div element will prevent a break after it. So you may try this when setting up your “clear” element.
This is what you type to set it up.
div.clear{
clear:both;
}
Then when putting it in your document, it should look something like this;
<div class=”clear”><!–This is the clearing element–></div>
How to use float to get a gallery of thumbnails to evenly space each other.
I am still learning the proper way to use the “float” property in CSS.
Until the other day, I was under the impression that you can do is float two objects side by side with either a “float:right” or “float:left”. But when I was rebuilding a section of our Online Show Management System the other day, I figured out that by setting a number of “div” layer blocks to float left, that they will align next to each other.
The other nice part of that is they will go down to the next line when they reach the boundary of their container. Let me demonstrate.
Here is my class;
div.container{
width:250px;
}
This previous class is the container I will use to set up my little example thumbnail gallery. Here is the container for the thumbnails;
div.thumb{
float:left;
width:30px;
height:30px;
border:5px solid #cccccc;
background-color:#3399cc;
margin-right:8px;
}
I have set up a background color and a border so you can see the benefits of setting up some of your design to take advantage of the super fast CSS markup. Plus, it makes it easy to see each of the thumbnails. I then setup a margin to the right of each of the thumbnails and the bottom so they aren’t right up against one another. Finally, don’t forget the float:left, which will allow each of these thumbs to push against each other, minus to margin.
Here it is;
This is useful is so many ways, but just remember that a float:left will stack against each other horizontally. But also, this works best with objects that are the same height, because otherwise, this will happen.
The div block will go to the next line, but hit the lowest dipping layer and stack accordingly. But like I said, useful no matter what direction you are floating.