ejcross.com » CSS

Creating your skip links

elliott — Sat, 03 Nov 2007 18:26:54 +0000

In part one of this series, I defined what skip links are and how they function. In part two I discussed the two theories about the skip link, and if they should be shown or not.

This is the third and last article on the series and I am going to show you how to create hidden skip links for your site. If you want to show your skip links, there are numerous methods to do so, and I won’t cover them here as each site design is unique. The basic code will still apply so you will need to style it to fit into your site accordingly.

I will use my site here as the example for creating and styling hidden skip links. The method used relies upon semantic xHTML code with CSS for the styling. All we are going to do is add a couple of id’s to an unordered list and move it off screen. We will also make it accessible so that it will appear if “active” to the user.

Create the list

When we are ready to incorporate skip links into the site, take a look at how your code is written. Do you have each section prepared for the skip link to function? Is your main content area clearly separated from your sidebar? What about your footer and your navigation?

This is where it is critical to use good semantic markup with clearly identifiable id’s for your site. Remember, however, that an id can only be used once on a single page.

Here is how my list looks for ejcross.com:


	Jump to Content
	Jump to Navigation
	Jump to Footer

Now, there isn’t much to it, just an unordered list of items. One note is that you want to make sure that this list is the first thing on your page, just below the opening tag. This will allow for it to be the first item shown to screen readers and other mobile devices so that they don’t have to go through all of your content or navigation to be able to use the skip links.

Also, while we are talking about the opening tag, let’s go ahead and put id="top" here. This will be for a skip link that you can place at the bottom of your site in the footer section, or at the bottom of your content area. This will allow for people to quickly navigate to the top of your page or site without having to scroll if your article is long. This should be a visible link.

What does it mean?

Let’s break the code down a little bit to explain what it is doing.


	Jump to Content
	Jump to Navigation
	Jump to Footer

The beginning

The list items are the skip links. This is where you will tell the link to direct to a specific portion of your site. The first option I want to offer is a skip to content. The internal link specifies a location of #content and on my main content area, I have the

to “catch” this internal redirect.

When you place a “#” sign prior to an internal link, it is telling the browser to look into the rest of the code of the site and find the “id” that matches it. This is where the ease of semantic code will really help. If you already have an id in use for your main areas, then just match the newly created skip link list to redirect to them.

You can repeat this process of adding or deleting items to your main skip link area, and then matching them to specific areas of your site.

As for the visible skip link that goes on the bottom of your page, the , you can add a skip link to the section of your footer or bottom of your content area that says “top” or something else that signifies that it is a link that will take the person back up to the top of the site or page.

It would look like this:

top

Pretty simple stuff so far? Let’s style the hidden links next!

To the CSS

As for the CSS that I use on my main skip link section, all we are doing is moving the “access” div off of the screen, and making it visible when it is “tabbed” upon. Let’s look at the CSS:

ul.access, .access {
	position: absolute;
	top: -9000px;
	left: -9000px;
	z-index: 9;
}

With this part of the CSS, we are giving the hidden skip link an absolute position off screen to the left of 9000 pixels. You can set this to what ever you desire, but this is a nice number to ensure it is out of sight. The z-index also ensures that it will remain visible above anything that might be over top of it.

Now for some CSS magic to make it reappear when it is active on the page:

ul.access a:focus, ul.access a:active {
	position: absolute;
	top: 9005px;
	left: 9005px;
	background: #690;
	color: #fff;
	padding: 5px;
	font-weight: bold;
	border: 2px solid #000;
	width: 10em;
	z-index: 9;
}

With this coding, all we are doing is telling it to reappear when the link receives focus, or is “active” for Internet Explorer. As you can see we are telling it to show up 9005 pixels from the left and 9005 pixels from the top. Remember, in the prior code to hide it we were telling it to hide by 9000 pixels, so in essence we are positioning this link area 5 pixels from the top and left.

The rest of the styling is for color, border and other styles that you can adjust or modify to integrate it more into your site.

In conclusion

I hope you have enjoyed this series on skip links and have found it useful and easy to integrate into your own site. If you have any questions, please let me know. This simple method will allow for better usability and accessibility for your site and only takes a few moments to put it into action.

The debate over skip links

elliott — Fri, 02 Nov 2007 12:00:04 +0000

In my first article entitled “What are skip links?“, I introduced what skip links are and how they serve a function to improve the usability and accessibility of your site.

In part two of this series dealing with skip links, I would like to discuss two theories that can divide designers and developers over whether skip links should be visible or not on your site.

Hide them off screen

The first theory is that there is no problem with hiding your skip links to sighted users. Screen space is a precious commodity in the design world that is rich in graphics and visual aspects of a site’s design. By hiding your skip links with CSS, you are still making them visible to users that might need them, such as screen reader technology. Also, by hiding them, you are leaving them accessible to tabbed navigation users that visit your site.

Another aspect that is growing in popularity is the use of web enabled mobile devices such as PDA’s and cell phones. These devices can also benefit from skip links, although designing your site with a mobile device style sheet is a better option. Having hidden skip links with PDA’s and mobile devices can create some problems and these are discussed in the next section.

One of the popular screen reader technologies is the Lynx Browser. If you are using the Firefox browser, there is a great plugin called the Yellowpipe Lynx Viewer that will allow you to see what your site looks like to a Lynx Browser user. This is a great tool to drop into your Firefox development and testing “bucket” as it will reveal what order your code is “seen” in by users of the Lynx browser. If you’re not using the Firefox browser, you can also use an online version of the Lynx browser by visiting delorie.com.

By hiding your skip links off screen with CSS, you are still providing accessibility and usability features for those users that need them. However, this leads us to an interesting discussion in the next theory of why they should be visible.

Keep them visible

The second theory about skip links is that they should be visible to all users and visitors of your site. In an interesting older article entitled “Skip Link Pros and Cons“, Mike Cherim and Gez Lemon debate the issue of whether to hide or show skip links.

Gez Lemon’s point of view is that if you have skip links and hide them, then you are limiting the usability aspect of the skip link. If a user comes to your site and doesn’t know that a feature is available to them, such as a skip link, then they might not know it and be able to use it.

To quote Gez from the article:

People with mobility problems benefit from mechanisms to bypass groups of links. For people using user agents that don’t provide mechanisms to navigate around a well-structured document, or people unaware that their user agent has those capabilities, then it’s commendable that some developers/designers implement them for their users. Hiding them makes no sense, as it totally depends on the user being able to understand the mindset of a developer that wants to “tick off” a problem, without much regard as to whether or not the solution is discoverable and usable.

With the growing popularity of mobile browsing, I can see that this is a very good point to consider. Mobile devices have smaller screens, and unless you have a mobile device style sheet, you could possibly be limiting the number of users that can access your content easily. Having visible skip links for mobile devices will allow those users to quickly skip to the area of the site that they desire to find, without going through numerous other links and content.

A great book on designing for mobile web devices can be found by visiting Cameron Moll’s site Mobile Web Design.

Mike Cherim’s view is that as long as the skip links are included, you are already one step ahead of most site’s for accessibility and usability issues. Even though they are hidden, the users that benefit the most from them will be able to access them.

So, the solution is?

This really depends on you and your site. There are many sites out there that use either hidden or visible skip links in their designs. The choice is ultimately up to you on whether you show the links, or hide them off screen with CSS. I would suggest using the skip links that most sites use on the bottom of long pages of content, or just someplace in the footer that allows for a user to click on a skip link that will take them back up to the top of the page.

As a developer or designer, the choice is up to your client. You can argue both points of whether to show them, or hide them as they are both valid arguments. Whether you choose to do either is up to you, but at least you have them in your site which is a great usability and accessibility plus for your design.

In part three of this series, I will show you how to code the links into your site using CSS and discuss the best practices for coding them to allow for validity and accessibility.

What are skip links?

elliott — Thu, 01 Nov 2007 13:00:28 +0000

A simple and easy way to improve your sites usability and accessibility is to incorporate skip links into your site. These are also known as jump links, or internal links. You might be wondering what their purpose is and if they are really necessary.

In this first article of three parts, I will describe what a skip link is and how is can improve your site with minimal effort. Skip links can be placed into any site, not just a Wordpress blog. The benefits will make your site more accessible and improve usability for all users.

Let’s get started!

To get started, scroll back up to the top of this page and press the “Tab” key. Go ahead, I’ll wait for you.

Great! You’re back! Did you see the green box in the upper left corner? It should have looked like this:

I have chosen to hide the skip links on this site to only appear when they are “active” or gain focus by using the “tab” key. However, they will also be one of the first things visible to a screen reader. This allows for a user to quickly navigate to the portions of the site that they want to quickly move to, such as the main content or navigation.

Other sites, such as Roger Johanssons 456 Berea Street have chosen to show their skip links.

Many sites also incorporate skip links on the bottom of their site, or long content pages that point back to the top of the page. This saves a lot of scrolling time, easily allowing for a user to move back to the top of a page in one click.

So why use skip links?

One of the main reasons to use skip links, whether you have them hidden or not, is to increase the accessibility and usability of your site. The skip link allows a “Tab” key user or screen reader user to quickly move to another part of the page. These links also depend on how your site is coded, such as if your main navigation is before or after your content sections.

If your content is before your navigation in your code, such as the case on a lot of right sided navigation sites, you would want to include a skip link to the navigation of the site. If your navigation is before the main content of the site, you might not want to include it, but it won’t hurt if you do.

Skip links are just internal links for your site that allow the user to “skip” to a certain portion of your site without having to go through the same content over and over again for each page.

Let’s take a quick look into what I have for mine here at ejcross.com.


	Jump to Content
	Jump to Navigation
	Jump to Footer

Not much to it! Just a simple unordered list of internal links. I also use a skip link at the bottom of this site that will allow for a quick return to the top of the page.

An example

Let’s say that you have a user come to your site that uses a screen reader to hear the content. Imagine if you can that user has to listen to all of the content on your main page before they can then get to the main navigation to hear what the options are. How long do you think they will be on your site? Will they come back?

Skip links should be the first thing on your sites coding, just after the beginning tag. This way, when each page is loaded, the user has the option to skip to the navigation, main content section, or where ever else you decide you want to allow your users to skip to.

Another example would be for someone that has dexterity issues with a mouse. As the internet user population increases in age, using a mouse can be difficult for someone with arthritis. Maybe using the “Tab” key is a better option for that user. You wouldn’t want to alienate a user that can’t use a mouse, would you?

So, by placing the skip links on your site a “Tab” user can then select the link to the section that they wish to quickly access, and be able to do so easily.

What is required

If your site is using good semantic markup, creating skip links will be easily accomplished. This site has the major sections divided by div’s with id’s such as header, content, sidebar and footer to help divide and control the layout. This article isn’t to debate the issue of CSS or semantic markup, maybe that will be another article later.

By using an internal link, all you are doing is creating a link to a specific portion of your page layout. If you are using id’s to specify a certain portion of your site, then you are almost done!

When someone comes to the skip link and select it, they are taken to that certain portion of your site. If they are wanting to get to your navigation area, instead of having to go through all of the other links and content in your content area, they are now able to “skip” to the navigation.

In conclusion

This is the first part of my series on using skip links. I hope you found this article interesting and insightful and do plan on coming back for the other two parts in the series. I will discuss the debate on whether skip links are really useful and should be visible or not, and in part three, I will show you more on how to code skip links into your site for maximum benefit.

New article series coming soon!

elliott — Tue, 30 Oct 2007 17:32:37 +0000

I just wanted to post a quick note about my next, and first, article series that I am working on.

I am working on a 3 part series about using skip links for your site. In this 3 part series, I will look at defining what skip links (or jump links) are and how they work, the debate over using them, and finally how to implement them in your site to improve accessibility and usability.

I hope you will enjoy this series, and the first post should be live Thursday morning!

Keep informed about this and other posts with my RSS feed.

Resize for your own eyes

elliott — Wed, 26 Sep 2007 01:15:24 +0000

There has been a lot of debate lately about how to design sites that allows for the most usable and accessible font size for each user. One of the greatest debates is how, as a designer and coder of a site, should in fact set the font size for the particular site that allows for the resizing in order for visually impaired users to read the site.

There have been widgets or javascripts that have allowed the user to click on a button that will make the size bigger or smaller to their own personal liking, however the better approach is to educate the user about their browsers particular settings in order to make things work better. This is because not every site has this widget or setting on the site to allow you to resize the font size to your liking. So, in helping to educate and spread the word like other sites are doing, I would like to help you, my reader, to learn how to resize your font size for your browser to make your viewing more enjoyable, and usable.

As was posted on accessify.com, a great video by Ian Lloyd shows how to resize your browsers font size to your personal liking. This helps both you, the visitor, and I as the designer, by allowing us to “work together” to make sure that the site is usable by all people. If you can’t see the video, there is a transcript available also.

So, you might ask yourself “What’s the big deal?”. Well, it comes down to the point as a designer that sites are designed with different screen resolutions, varying font sizes, and different perspectives on how a site should look and function. I can design a site that is using a base font size of 1em. This displays everything on your browser based upon your default setting, which is usually 16 pixels. So what does this mean?

If your default setting is less than 16 pixels, it might look really small. Or if your computer monitor is set to display at a resolution of 800 X 600, it might look really big. Each persons own preference is really hard for a designer to decide what will work best. This is where the usability portion of a designer comes into play.

Some browsers, such as Mozilla Firefox, Opera, and Safari for Windows will allow you to resize the text by using Ctrl+/- or holding down the Ctrl button and scrolling your mouse button. Other browsers, such as Internet Explorer version 6, don’t play nicely with this feature. So you have to change a few settings to increase or decrease your default font size.

Internet Explorer 7 offers a couple of options, both are found under the “Page” tab. You can “Zoom” the text size, which basically offers a zoomed in version of the site. Or you can also increase your default text size from the default of Medium, and increase or decrease to your liking.

The reason I am writing this is in order to help spread the word to all users of different browsers that things are just as they are. You can change your settings in order to make your browsing experience better. Just learn a little bit about your browser, and hopefully, you have here.

You can view more about this issue on the accessites.org article about educating internet users about how to resize their text size, and on Mike Cherim’s Beast blog site.

I would love to hear about your experiences, and if you have any questions, please don’t hesitate to ask via a comment so we can all share the knowledge.

You get what you pay for

elliott — Tue, 17 Jul 2007 19:13:59 +0000

One of the most interesting things about site development and services is the cost that is associated with them. By “them” I mean web site development, design, hosting, repairs and the list can go on. But how do you really know what you are getting when you find that person or business to develop your site?

As consumers of products, we are each responsible for asking questions, reading labels, and researching the products that we buy and consume. This isn’t only an issue with web design and other technology products, as it applies to the food we eat, the cars we drive, the homes we live in and just about every other aspect of life. For an example, if you were looking to build a new home, wouldn’t you take the time to research the builder? Ask a few friends about who their builder was, do some searching about the products they use, the neighborhood they are building in, checking out the homebuilders association and maybe even the better business bureau. There is a lot of time and money that goes into the process, but the end result can be satisfaction, or disaster.

The same can be said of creating a site for yourself or your small business. You don’t have to be an expert in all things web related. But that doesn’t mean that you shouldn’t be aware of some things to ask when searching for a quality designer. In a recent post about the cost of web design, Aaron Forgue talks about some of the basic aspects that go into designing a site and how much should they cost. To quote from the article:

Sure your computer geek nephew knows HTML and could build a web site for just $100. He also knows how to use a screwdriver. Does this mean he could build a safe, reliable, and fuel-efficient car for you? Probably not, so why take the same risk with your web site, a potentially large value-center for your company?

This also presents a new issue that has been around the web development community for some time, and it seems to keep growing the more I research it. The issue is companies and individuals that rely on templates to make “cookie cutter” sites that are not compliant with web standards, and are far from accessible to all users. Why would they do that? Well, it comes down to time is money. They can plug in a template, change a few colors, add your text and shazam, they are done!

Another issue with the “cookie cutter” approach is the lack of accessibility and usability that it lends itself to. One of the reasons for this is most of those sites use tables for layouts which lends itself to not being accessible to screen readers or other assistive technologies. It creates a lot of additional code and markup, thus creating longer download times and higher bandwidth issues. If you are trying to watch your costs as a small business owner with your own site, bandwidth overages can eat you alive if you aren’t careful.

Using valid CSS and (x)HTML can significantly reduce your costs, allow for future expandability and compliance and bring greater usability and accessibility to all users. In another great article on Accessites.org, Mel Pedley talks about the issue of Web usability and how it is closely tied into accessibility issues. To quote from her article:

Unlike web accessibility which impacts directly upon disabled users, web usability affects all users, and can be defined as a measure of how easy it is for a generic site visitor to carry out a task such as finding a given piece of information or buying a certain product.

So, how does all of this relate to the cost of having a web site designed and developed? You go back to the issue of you get what you pay for. Anyone can create a site using some of the software that is out there now. It will allow you to draw out the blocks of content, place text where you want, add pictures and it might even look good. But, is it accessible, usable, compliant with web standards? Probably not, and that is where the knowledge of a designer that creates accessible and usable sites really shines.

This site best viewed with…

elliott — Thu, 05 Jul 2007 23:45:21 +0000

Ok, so the great part about technology is the rapid advancement that it is known for. Just picture a few years ago there was Netscape 4, Internet Explorer 3 and they were going head to head in the browser wars. Ahh, that was the day. But moving to modern times, there is a multitude of browsers out for use, each with their own unique styles, users and methods of rendering web pages. Some of them do a great job, such as the Mozilla Firefox browser, Opera and even Internet Explorer 7 has improved by leaps and bounds. But this poses a unique problem to web developers and even users, without them knowing it.

One of the biggest issues we face as web designers and developers is ensuring that the product we create renders the same in the most browsers as possible. This can be a huge task, especially if the site is expansive or rich with “web 2.0″ designs. Why? Well, the more you use Cascading Style Sheets as an element in creating standards based sites, the more problems you will encounter trying to appease every browsers rendering model. This can create headaches trying to get that site to look just perfect in every browser, but there is hope.

Back in the initial days of the internet and even now, you can find sites that say “this site best viewed with browser X”. Maybe we should go back to doing that. Why go backwards you ask? Well, the answer is pretty simple. When Internet Explorer 7 came out some time ago, it was known that Microsoft was finally listening to the design and development community about fixing known rendering issues with its version 6 browser. They were even fixing issues in version 7 that went back into version 5 of Internet Explorer. Since Microsoft has made upgrading to version 7 a critical update, I am wondering why I am still getting more than 40% of my visitors using version 6 of Internet Explorer?

What hit me was a recent article I read while perusing my RSS feeds. Megan McDermott has noticed this issue as well and wonders why more people don’t upgrade to the latest version of Internet Explorer. I agree with her that people really should upgrade their browsers, not only for the security features that have been improved, but also for the browsing experience that will improve because of the behind the scenes features working better. Features such as improved rendering engines, better performance and especially security features in the day of trojan horse viruses and spyware.

But how can we convince the IT folks that run networks of hundreds and even thousands of machines that they should upgrade? I’m not sure, but maybe we all can push the message that if a better product is available and it’s free, why not?

Web Development for Business

elliott — Tue, 03 Jul 2007 02:06:08 +0000

I had been thinking for some time about writing a post that describes the process of how the internet works as it relates to sites for small businesses. So, while doing some research, I came across a site called Solo Signal. This site is basically a blog that relates the site development process in easy to understand terms to the average person that isn’t technically knowledgable about the process, but is interested in having a site created or learning more about the process.

The nice part about this site is it breaks down the information in easy to use terms for the “layperson” that isn’t wanting to know all of the in’s and out’s of site development, but is wanting to have more knowledge in order to make decisions about how things work and what is best for their business. This is critical for small to medium sized businesses where the budget strings are usually tight, and the owner wants the most bang for the buck.
Small businesses can benefit from having a site by utilizing web standards and search engine optimization techniques in order to drive business to them in this technological age. The internet has become a source of information, now even replacing the old “yellow pages” to facilitate people quickly looking for information about a product, service or technique.

To quote from the site’s author,

Welcome to Solo Signal! This website is for anyone looking to gain a better understanding of the website development process and the Web in general.

The web offers countless opportunities for anyone who is willing to learn how to use it properly. Too often, however, many non-technical people are easily overwhelmed by the amount of information involved in this task. Solo Signal helps people overcome these issues by breaking down the web development process into easily consumed articles. We hope to provide business-minded individuals with the information, tools and understanding needed to successfully leverage the Web for their benefit.

I hope Solo Signal helps you understand the process, and be sure to check back on it often as it will be updated frequently. It sure has helped me gain an understanding into the process better so that I can better explain it in more clear and easy to understand terms to friends and clients. Let me know what you think about it, and if you have any questions, don’t hesitate to leave a comment, or contact me.