RSS

Tag 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: , ,

The World Around You Part III

I have a lot of photos and files, but in some photos/files I cover more than one of the tags assigned.

p, article, header and footer tags

(oops, I forgot the h5 tags around the two small-font colored blocks of text above (the yellow “The Checklist” and the black “Notable Quote”. Sorry.)

The p tag is for a paragraph or unit of text. As with most block elements, it starts on a new line and adds a blank line afterwards. However, I learned the hard way that you cannot nest lists (ul, ol or dl) inside p tags (I know this because your code doesn’t validate if you do that).

The article tag is for a page unit that can stand alone, like an article, blog post, etc. It’s new in HTML5.

The header and footer tags are just what they sound like–tags that allow you to group items in your header or footer together. They are sort of like specialized div tags, and they’re new in HTML5 (yay, HTML5)!

View the p, article, header, footer HTML file here.


div tag

The div tag is basically a container for a unit of content that you want to treat as one unit. Before HTML5, things you now place in nav, header, footer or article tags would have been in div tags.

View the div HTML file here.


nav tag

The nav tag is a way to group the navigational items on your page in one place. Yet another new tag in HTML5.

View the nav HTML file here.


dl and blockquote tags

The dl tag is for a definition list, where the terms to be defined have dt tags and their definitions have dd tags. Blockquote is used to set off a block of text from the surrounding text, such as a quotation.

View the dl, blockquote HTML here.


ol tag

The ol tag is for an ordered list, where the items need to be in sequential order.

View the ol HTML file here.


ul tag

The ul tag is for an unordered list, where the items don’t have to be in a particular order.

View the ul HTML file here.


span tag

The span tag is an inline element, useful when you just need a touch of CSS for a few words, etc. within a block element.
View the span HTML file here.


time tag
The time tag is used to indicate a specific date or time. As many of you know, I have struggled with the use of this element 😉 but my current understanding is that it enables people and computers to be sure they are referencing the same exact date and/or time, which is useful for example when you are dating a blog post or the computer is parsing HTML for an appointment to go into a calendar. It is a new tag in HTML5 and there probably will be uses for the tag in the future that haven’t been invented yet.
View the time HTML file here.


It took forever to get the text to “stay” with its relevant photo; what a nightmare 😦

 
 

Tags: , ,

Self-Assessment #2 (one of week 4’s assignments)

Here is my self-assessment table. Both the HTML and CSS validated.

Three things I’m having trouble with in HTML:

(1) I don’t know if “having trouble” is the right word, but I feel like I need to learn and experiment a lot with the img tag, since it’s pretty important in creating a web page;

(2) Still don’t totally understand the time tag. I can write a valid one, and understand how it is used to mark the date of, for example, a blog post, but someone on the Google list said “We use the time tag at my work to display our hours for that specific day and to display any events we have going on (ex- we have a charity ride leaving in 2 hours……1 hour….etc)”. I would like to know specifically how that works, and haven’t been able to find an explanation that makes sense to me on the web yet;

(3)I understand how to nest tags but am still learning about block-level vs. inline, and which tags can/cannot nest inside which other tags (the p tag in particular). I’ve had it explained to me but can’t always remember it when I’m actually writing HTML.

 
 

Tags: , ,

Reflections on week #3

I learned a lot with this assignment, because unlike the previous two assignments where the html tags were mostly familiar to me, this week’s had many tags that were new to me, such as <time>,<article>,<dl> and so on. When validating my html file, I learned that certain tags can’t be contained within certain other tags. For example, lists can’t be nested inside the <p> tag.

I understand the value in marking up pictures, but I find it frustrating to do the text on them; there’s never enough room!!

Even though we haven’t done CSS yet, I have a .css file with my .html file this week because I’ve been fooling around with CSS.

Looking forward to the next assignment, especially since things have been a bit hectic in my house the last few days, but now I’ll have more time.

 
 

Tags: , ,

Marking up the world around you part II

(Oops, I misunderstood the assignment, so I did a freestanding html file with no relation to the pictures below; that is “Week #3 assignment”. I went back and did html for each picture after getting feedback from Jamie, and those links are below.)

Please find my Week #3 assignment here: http://dl.dropbox.com/u/29984044/week3assignment.html

It validated in both HTML and CSS.

Here are some marked up pictures:

(the html to go with the bus picture: http://dl.dropbox.com/u/29984044/busmarkup.html

the html to go with the score picture: http://dl.dropbox.com/u/29984044/NoHitterDay.html )

Bus markup

nohitterday

 
 

Tags: , ,