The Logical Blog by IconLogic

Creating Accessible Websites: Don't Just "Click Here!"

by Mary Gillen

Most people who surf websites don't think twice about the link they're about to click. The linked text typically says "click here." The web surfer assumes the link will load a page based on something seen earlier in the text. However, if the web surfer is visually impaired, assistive devices such as screen readers will inform the surfer where the link will take them. When you use generic text like "Click Here" or "Read More" as instructions in linked text, it is confusing because the link says nothing about the content that will appear once the link is clicked. Another thing to note: screen readers often tab from one link to the next. Tabbing between links labeled "click here" sounds like "click here, tab, click here, tab, click here" when read by an assisitive device. As an alternative, consider changing the link text so it is an explanation of the target content. This will make more sense when read by a screen reader. EXAMPLE Original Instruction Text: Click here Revised Instruction Text: Click here to read the latest news

***

Looking to learn more about creating accessible websites? Check out Mary's upcoming mini course: Website Accessibility: 17 Steps You Can Take Today to Ensure Future 508 Compliance.

***

Since 1995, Mary Gillen has designed and developed Web sites and applications that serve, all responsive, 508-compliant, accessible and search engine-optimized. Over the years, she has developed responsive and accessible-compliant Web sites for large corporations, small startups, non-profits, associations, Federal government agencies, and more. Clients include: National Institutes of Health, The World Bank, International Brotherhood of Teamsters, Cancer Research Foundation of America, American Pharmacists Association, McKinsey & Company, and many others. Responsive design, search engine optimization, 508-compliant, and WCAG 2.0 standards (from A to AAA) are always applied.

eLearning & Design: Want to be a Better Designer? Play this Color Game

by AJ Walther

We've talked about gamification. We've talked about color. Why not participate in a little bit of gamification that could strengthen your color knowledge--and maybe even make you a better designer?

Blendoku is a mobile puzzle game that is free for Android and iOS.

The object is to organize colors by saturation, shade and hue. While it sounds simple, things get tricky pretty quick; and next thing you know you're immersed in a Sudoku-crossword rainbow puzzle. Not sure you're grasping the concept? Check out this brief demo video.

If you've got some free time (or perhaps a lot of free time), give it a go and let me know what you think. Already feel like you're becoming a color master? Or was this just a (visually stimulating) waste of time?

Note: This game isn't color blind friendly (yet), but according to this Mashable article, creators Rod Green and Yeong-Hao Han say they're working on a way to shift the colors so that everyone can play.

HTML Clinic: Are You Logical Or Physical?

by Kevin A. Siegel

You can format your Web pages using one of two categories of text style: physical and logical.

 

Physical text styles are newer styles found in HTML versions beyond version 2.0. They can be ignored by some browsers. Logical text styles are part of HTML 2.0 and can look exactly like some of the physical text styles. The difference between the two text styles is that when viewed in older browsers, most of the physical text styles would be ignored.

 

Work with Physical Tags

 

1. Start a Word processor (such as NotePad) and type the phrase IconLogic's Web Site Development Basic
   
   
2. Click in front of the word IconLogic's
   
   
3. Type <B>
   
   
4. Click after the word Basic
   
   
5. Type </B>
   
   
6. Click in front of the phrase "Web Site Development"
   
   
7. Type <U>
   
   
8. Click just to the left of (in front of ) the </B> tag you typed
   
   
9. Type </U>
   
   
   
   The tags you just typed, if viewed via a Web browser and assuming the page contained the minimum HTML tags such as the HTML and BODY, will turn your text bold (<B>) and underlined (<U>).
   
   
   
   
   
   Combining the bold and underline tags the way you did is known as nesting. Remember to type your tags in reverse order when nesting. In other words, you typed the bold tag, then the underline tag, then the stop underline and then the stop bold.

Work with Logical Tags 

1. Click in front of some text and type <strong><EM>
   
   These two tags will display as bold and italic via a Web browser.
   
   
2. Click after the text and type </EM></strong> to close the tags
   
   
   
   Keep in mind that text tagged with logical tags will typically look identical to physical. However, while they look the same, there is a difference. Not all browsers will display logical styles the same way. You may expect the text to be bold, but end up with plain text that has a different color. On the other hand, if the browser doesn't support physical styles, the text might not get any formatting at all.

---

Want to learn more about HTML? Attend our HTML Basics class. Click here for more information.

HTML Clinic: Heading and Paragraph Tags

by Kevin A. Siegel

 

There are six levels of headings within HTML, numbered H1 to H6. Think of your headings in order of importance. H1 is the largest and should be the most important; H6 is the smallest and least important. The font you get when you choose a heading is not in your control. Each browser selects fonts based on the preferences of the person viewing your document.

 

Heading and paragraph tags create vertical space in your Web document. The exact amount of space is not up to you. Instead, vertical space is controlled by the browser.

 

Add Headings Tags

1. Open your template (you learned how to create a template last week)
   
   
2. Click just below the BODY start tag
   
   
3. Type <H1>Module 01: basic tags</H1>
   
   
4. Press [return] twice to add some white space between the tags
   
   
5. Type <H3>Welcome...</H3>
    
   
   
   
6. Save your work.
   
   This is how the page will look in a Web browser:
   
   

Add Paragraph Tags

1. Click after the <H3>Welcome...</H3> tag
   
   
2. Press [return]
   
   
3. Type <P>to IconLogic's Web Site Development Basic. These materials will not only teach you HTML, the programming language that web pages are written in, but through our project based approach we will teach you a methodology for constructing a basic web site with links and graphics all in one day!</P>
   
   
    
   
   
4. Save your work.
   
   This is how the page will look if viewed in a browser:
   
   

Next week:

Physical and Logical tags.

---

Want to learn more about HTML? Attend our HTML Basics class. Click here for more information.

Learning HTML: Basic Structure

Most Web pages have the same basic beginning. Four "containers" are used as the basis of most Web pages: HTML, head, title, and body.

 

The HTML container tells the browser that it is reading an HTML document.

 

The head container is used for document information that will not necessarily be seen in the browser's window.

 

The title container is used to denote the title of the Web page and is found within the head container. When inserting a title into your Web page, be sure to use text only.

 

The body container is used for the document itself. Anything placed within the body container will appear within the browser's window.

 

Create an HTML Template

 

During this lesson, you will learn how to create an HTML template using any word processor that contains the basic containers outlined above. Once you have a valid template, you can use the template to create Web pages.

1. Start a text editor (you can use any text editor, such as NotePad)
   
   
2. Save the file with the name mytemp.htm
   
   
3. Create an HTML container by typing <HTML>
   
   
4. Press [return] twice and type </HTML>
   
   
5. Create a HEAD container inside the HTML container by clicking between the HTML start and stop tags that you just typed
   
   
6. Type <HEAD>, press [return] twice and then type </HEAD>
   
   
7. Create a TITLE container by clicking between the Head start and stop tags and typing <TITLE>
   
   
8. Press [spacebar] and type </TITLE>
   
   
9. Create a BODY container by clicking after the Head stop tag, press [return] twice and type <BODY BGCOLOR="#FFFFFF">
   
   The BGCOLOR="#FFFFFF" tag will result in a Web page with a background color of white.
   
   
10. Close the <BODY> tag by clicking just above the HTML end tag and typing </BODY>
    
    Your template should look like this:
    
    
    
    
11. Save your work. 
    
    And just like that... you've created a perfectly good Web page. All you need now is content and HTML tags for the content.

 

Next week: You will use your template to create a Web page and add heading tags and paragraph tags to the page.

---

Want to learn more about HTML? Attend our HTML Basics class. Click here for more information.

Link of the Week

Finally... Image Formats Explained... In English!

 

Do you know the difference between RIFs, TIFFs, PCTs, GIFs and JPEGs? No? How about the difference between interlaced and non-interlaced GIFs? Still drawing a blank? OK, how about the difference between rasters and vectors? If you find yourself overwhelmed by the glut of available image formats, the Image Formats tutorial at the HTML Goodies Web site is just what the doctor ordered!

 

Click here to read the Image Formats article.

Dreamweaver CS3: Navigation Menus

Should you use a JavaScript Navigation Bar or a Spry Menu Widget?

 

by Barbara Binder

 

Let's begin by saying that both the JavaScript navigation bars and Spry Menu Widget techniques can be used to create attractive, functional menu bar navigation systems.

 

Using menu commands built into Dreamweaver CS3, the creation process for either is both simple and straightforward. Of course, the code produced in the background is quite complex, but for those of you staying in Design view, who cares? The best part of Dreamweaver is that you get to produce very high-end coding with a point and click interface, and almost no typing-who doesn't love that?

 

So which one do you pick? I'd say go with the Spry Menu Widget, for one specific reason: we all want our Web pages to be picked up and indexed by search engines so that our sites will come up on a Web search. Search engines have a hard time with JavaScript-driven menus. Spry menus are just a fancy display of an unordered list, and so they are easy for the search engines to understand and index correctly.

For those of you spending time and money on Search Engine Optimization (SEO), this is a quick and easy way to get more bang for your buck. Here's how it works:

1. Place your cursor at the position where you would like to place your navigation bar
   
   
2. Choose Insert > Spry > Spry Menu Bar
   
   
3. Select a horizontal or vertical orientation
   
   
   
   
4. Click OK
   
   
5. Edit the navigation names directly on screen or, if you click on the blue Spry Menu Bar tab at the top right of the menu, you can edit in the Properties Inspector.
   
   You can add and delete menu levels, as well as edit the wording at any time.
   
   
   
   What was that about these being a fancy view of an unordered list? Click the Turn Styles Off button in the Properties Inspector and you'll see what I mean. You can edit the lists in this view as well.
   
   
   
   Wish they looked a bit prettier? After you click the Turn Styles On button to return to the menu view, edit the style with CSS.

Wow, functional navigation bars in just a few easy steps, and the links are accessible to the search engines. Pretty amazing.

 

Want more? Join our upcoming Introduction to Adobe Dreamweaver CS3 class on July 1-2, 2008. It will be held in a virtual classroom so you can attend this live, interactive class from anywhere in the country. All you need is a computer with fast internet access, a headset and a current version of the software. All virtual classes are led by a live instructor--this is not pre-recorded content. You will interact with me as I lead you through hand-on projects. You can ask all the questions you like. I hope to "meet" you in July! 

 

---

 

About the author: Barbara Binder is the president and founder of Rocky Mountain Training. Barbara has been a trainer for nearly two decades and was recently recognized by Adobe as one of the top trainers world-wide for 2007. 

"Essentials of Adobe Dreamweaver CS3" Now Shipping

We are proud to announce that our newest book, "Essentials of Adobe Dreamweaver CS3" is now shipping.

This workbook has been designed to quickly teach you all of the essential skills necessary to work with Dreamweaver CS3--a fantastic Web page development tool. You will learn how to define sites, format text using cascading style sheets, create and format tables, create templates, nest templates, use libraries, create and work with online forms, create and use frames, create Spry Navigation Bars, disjointed rollovers, create animations using the Timeline, and even FTP your completed files to your Web host.

Book Specifications:

ISBN: 1-932733-20-5 | Spiral Bound | 314 pages | Page Size, 8 1/2 x 11 inches | Retail Price: $39.00

Click here to learn more about this book and to order.

Link of the Week: CSS Made Easy

The best Web sites have a consistent look-from precise positioning of page elements to harmonious fonts and styles.

Using Cascading Style Sheets (CSS) in Dreamweaver will give you flexibility in controlling the appearance of your pages.

There are several types of styles:

Linked: The attributes of this type of style sheet are stored in an external CSS file that is not a direct part of any HTML file. Each style sheet can contain multiple styles and can be linked to multiple files.

HTML tag styles: You can redefine the formatting for tags such as <H1>, <H2>, <H3>, <P>, <UL> and <BODY> tags.

Custom CSS styles (classes): You can apply this kind of style to selected text or elements. These styles are stored in the HTML file.

CSS Selector styles: Control the appearance for combinations of tags. For example, if you created a CSS Selector named td h3, it would be used whenever an h3 header appears inside a table cell. There are also CSS Selectors that control link colors (active, hover, link and visited).

You will find some fantastic CSS articles and examples at the Dreamweaver Developer Center.

Want to learn more about Dreamweaver? Click here.

Dreamweaver 8: Rollovers Made Easy

When you visit a Web page, point to an image and watch it magically change to a different image, the magical behavior is often referred to as a “rollover.”

If you wanted to add a "rollover" behavior to your Web site, one way would be to write a “Swap Image” JavaScript that would get the job down.

If you are good enough to write the script required to perform a "rollover," kudos. However, creating a "rollover" doesn't have to be as complicated as writing the script from scratch. In fact, you're about to learn how to do it in Dreamweaver in just a few steps.

When swapping images, the swap image should be the same size (height and width) as the original. If not, you will see the swapped image take on the size of the original image as the swap occurs. For instance, if the original image is very small and the swap very large, you will end up with some unfortunate viewing.

If you use the “Swap Image” behavior, Dreamweaver automatically provides a “Swap Image Restore” behavior that restores a swap back to the original file.

Create a Simple Rollover

1. Choose Insert > Image Objects > Rollover Image
   
   The Insert Rollover Image dialog box appears.
2. Click the Browse button to the right of Original image and open your first image
3. Click the Browse button to the right of Rollover image and open the image you want to swap for the Original image
4. Click OK
5. Save your work and preview the page in the browser
6. Move your pointer over the image. It should swap from the original image to the new image

Want to learn more about Dreamweaver 8? Click here.