RSS

Category Archives: CSS

Navigation images and accessibility

I am working on a homepage for my personal website. I have an image that I want to use as my navigation, but I also want to make my site accessible to text-only browsers and screen readers (not that there’s going to be any great stuff on my website, but I want to learn good practices). Making image navigation accessible is a lot harder than it sounds.

If you make the text of the image hidden using CSS, some screen readers won’t read the text. The same is true for the negative text indent, which advocates giving your text-indent a high negative value so that the text doesn’t appear on the screen. But both of these approaches don’t help when a user has a text-only browser, has images turned off, or is using certain types of screenreaders (some people turn off images on their portable devices to speed up download times, which can be agonizingly slow when you’re used to a broadband connection on a computer). So what to do?

There is a rather cumbersome workaround that involves putting an empty <span> element in each list item of the navigation so that you can put the navigational image on top of the text version, thereby showing the text if images are off or someone is using a screen reader. The empty <span> is certainly not good semantic use of html, and the process also involves giving each <li> in the nav its own id.

The best workaround I have found is Seamus Leahy’s “Image Replacement–No Span”. It is beautifully simple and gets the job done. Try it in your browser. You can easily view the “bare bones” html output in Firefox 4; View>Page Style>No style. For IE9, Tools>Internet Options>Advanced>Multimedia, uncheck “Show Pictures”. In Chrome 12, Wrench icon>Options>Under the Hood>Content Settings>Images>check “do not show any images”. (It would be really nice, IE and Chrome, if you could turn images off for just one page at a time like you can in Firefox!!) If you try this with Leahy’s code, you’ll see that without images, the text appears on the screen. In the case of navigation links, the links appear and are fully functional. Voilà!

Advertisements
 
Leave a comment

Posted by on July 12, 2011 in CSS, HTML5

 

Tags: , ,

Learning CSS

Unfortunately, the course “HTML and CSS from the beginning” turned out to be “HTML from the beginning”. The instructor decided that he didn’t have time to keep preparing lessons and providing feedback along with his work obligations, so the course was prematurely terminated. That means I am learning CSS on my own. It’s too bad, because the instructor was very good. It was a free course, though, so I can’t complain too much.

Fortunately there are practically infinite web sources to learn CSS. But unlike HTML5, which is a fairly new standard upheld by the major browsers, CSS is still in version 2.1 and still has some major limitations and browser quirks. CSS 3 is in development, but some browsers are implementing some of its features now. This is a long-winded way to say that it seems to be harder to find current CSS best practices than it is to find HTML5 best practices. If you’re learning something new anyway, you might as well learn it the right way!!

Since I’m trying to learn web design with the best practices possible, and since I don’t have any production deadlines to meet (yet), I want to learn as much about accessibility as I can while learning CSS. More on that in the next post.

 
2 Comments

Posted by on July 12, 2011 in "HTML and CSS from the Beginning", CSS

 

Tags: , ,

Week #4 reflection

I find that the more I’m learning, the more I realize I don’t know. I guess that’s not a bad thing; it just stimulates the desire to learn more.

“Learn By Doing” has always been one of the most effective learning methods for me. Once I make a certain mistake and learn how to correct it, I’m not likely to forget the right procedure the next time. One implementation of that this week is my attempt to use internal CSS stylesheets in some of my HTML documents (my elementary attempts at CSS in previous weeks were done with external style sheets). Jamie had said a few weeks back that I should comment more, so in an effort to do so, I had put some comments within the style tag (that’s where you put an internal style sheet). I found out putting comments inside the style tag is not a good idea!! Evidently, it can screw up the browsers’ reading the stylesheet, as I found out in my p, article, header, footer file. I had put a comment inside the style tag of that document and could not figure out for the longest time why my browser was formatting the #notable properly but ignoring the formatting for the #checklist (both were after the comment, but the comment seemed to affect them differently)!! And I found out in week #2 that you can’t leave a space between a number and its unit in CSS, because if you do, the CSS doesn’t work! So that is another mistake I won’t make again. Learn By Doing, it’s a mantra to live by 😉

I really like that HTML5 has tags that seem to be more descriptive of their contents than the “universal” div tag, like header, footer, article, nav, etc. I’m sure it will lead to code that’s easier to read, even if I don’t totally understand all the uses of the new tags yet.

Enjoying this learning journey very much, but not quite sure where I’m going with the final project…have to keep thinking. I’ve also learned a lot from my fellow classmates and enjoy reading their blogs; thanks to all of you for your help!

Antsy to start CSS!!

 
 

Tags: , ,

Reflections on week #2, or how I jumped the gun with CSS…

I learned quite a bit from this week’s assignment where we had to put tags on Jamie’s text file. Being the type A that I am 🙂 I wanted to make my text file look exactly like Jamie’s, even though I knew the indents were there to make the code read easily. But how do you indent something on a web page in this day and age? That’s right, CSS! I sort of knew this organically but wasn’t too sure; help from Jamie and sedmikrasky in the IRC chat room confirmed what I already knew and had found by googling. (Here’s the mantra, say it with me, “HTML for structure, CSS for appearance, JavaScript for behavior”). Being the curious person that I am, I then wanted to know how to indent using CSS, because I needed to indent IMMEDIATELY!! I followed a CSS tutorial at http://www.html.net/tutorials/css/ and learned that there is a CSS property called

{

margin-left:

}

that lets you indent. Now here’s where the major learning came in (I learn best by actually applying things I’ve learned to something I’m working on, rather than knowing it theoretically)….I read in the tutorial that the value of the margin-left property consists of a number and a unit (pixels, centimeters, inches, what have you). So I made a class “.tab” and put a value in my CSS sheet (thank you, Jamie, for showing me how to read the source code for CSS sheets):

.tab {

margin-left:60 px;

}

(Apologies; I can’t get the previous statement to format (indent) the way I want. I need a CSS sheet for this post!!)

and called the class in my html

<p class=”tab”>
Paragraph paragraph paragraph paragraph paragraph<br />
paragraph paragraph paragraph paragraph paragraph<br />
paragraph paragraph paragraph paragraph paragraph.
</p>

but it didn’t work!! I was so disappointed! I put other properties in my .tab class that did work, like colors, so I knew my .tab class and calling the class were okay; the problem was somewhere in my margin-left statement. Here was the problem (which took me a while to figure out): you cannot leave a space between the number and unit values in the value statement. It must read 60px, NOT 60 px.

I know we haven’t done the CSS portion of the course yet, but all you CSS newbies, don’t be frustrated by leaving a space and having your properties not be applied!! You can bet I’ll never make that mistake again 🙂 — that’s what I mean by my learning better when I actually have a problem to solve.

I thought the part of our assignment where we tag photographs of the world around us was fun, and an interesting way to look at HTML. It was especially interesting to me because I tend to see things very literally and don’t consider myself too creative, so the assignment took me out of my “comfort zone” and helped me to see HTML in a more creative light.

Looking forward to more fun learning in week 3! I really do love learning new things…

 
 

Tags: , ,