John F Croston III

Access keys allow people to use the keyboard instead of the mouse to perform certain functions. Mostly to move from page to page or a different section of the current pages content. By using web standards you can improve peoples use of your website.

Example HTML Code

The code involved to adding access keys to your website is very simple, you just have to add one extra piece of code to the links as shown below.

<li id=“about”><a href=“about.shtml” ACCESSKEY=“1” tabindex=“300”>About</li>

Internet Explorer(IE), Firefox, Opera, and Safari each have their own way of using access keys. In most web browsers, the user uses the access key by pressing “ALT” (on PC) or “CTRL” (on MAC) simultaneously with the appropriate character on the keyboard.

The following are the different ways to use the access key function combinations broken by PC or MAC and then browser type.

PC

• IE - press the “ALT” key + access key and then press the “ENTER” key to active the action.
• Firefox 2.0 - “ALT” + “SHIFT” and access key.
• Firefox 3.0 - “ALT” + “SHIFT” + access key and the “ENTER” key are required. I finally personally tested Firefox 3.o on Vista Basic and sometimes you need to hit “ENTER” and other times you don’t. (UPDATED)
• Opera - the user presses “SHIFT” + “ESC” followed by the access key (without “ALT”). Doing this will display the list of access keys over the current web page.

MAC

• Firefox 2.0 - “CTRL” + access key.
• Firefox 3.0 - this has been changed so that the key combination only focuses on the link, “CTRL” + access key and an “ENTER” is required after the access key combo. I have not personally tested Firefox 3.o as of yet.
• Opera - “SHIFT” + “ESC” followed by the access key (without “ALT”). Doing this will display the list of access keys over the current web page.
• Safari - “CNTL” + access key.

Example Key Combinations

Here is an example of three access key combinations you can use for IE:

• “ALT” + “S” to change to small text
• “ALT” + “M” to change to medium text
• “ALT” + “L” to change to large text
• Finally you must click or press the “ Enter ” button.

These key combinations are for IE on the PC and are used to set the text sizes that you want. You can make the text larger or smaller based on your preferences. This is what we have set up on my work website.

From some of the reading I have done I noticed that people that are creating mobile websites and applications, when doing so they are using just the numbers to make it easier for their users to navigate the website and application.

Please give these a try on your websites. I have access keys set up on my website, so please try using them with different browsers. If you have any issues please leave a comment.

This blog post about PodCampDC (April 20, 2008) is way over do. I noticed it in my work in progress post list. I had started the post a long time ago and decided I would still post the few items I had listed. That I after making them into full thought and not just a short scribble of a few words.

Below are the main points I took away from the day.

When creating a podcast you should have consistent branding and highlight the program or product not the people in podcast. That way if you ever have to get new people for the show it will be less likely to die.

Justin Thorp said “You should make stuff sharable across communities”. Meaning that if you have content you need to let others be able to get at it no matter the way or where they are.

It is very important to make sure to use the same name across communities (MySpace, Facebook, Twitter, blog, Mixx, Digg, etc.) so people can easily find you. When new applications/websites start up make sure to get your use name and any other user names that you are know for so other can not grab them and then start bad mouthing you or your products.

I noticed during Aaron Brazell (Technosailor.com) and Geoff Livingston’s live podcast District of Corruption some people where getting hung up on names of websites and the like. Sometimes a website may start out as one thing and then morphed into what it is today. The real important piece is the content not the name.

There were a few things that I thought could have been better and they were? Not needing two locations, meaning that I saw no point in having to get to the Spectrum Theatre an hour early just to go over to the final location after about ten minutes of announcements. The other issue had to do with having multiple five plus rooms on three different floors and having to take the stairs to get to them.

Hope these points are useful even though they are like two months over do.

Skip navigation is a great thing to have on your website for a lot of reasons. Here is a list of just a few of them the greatest ones being the first two, that they make websites more accessible to all.

• People using screen readers are forced to listen to a long lists of navigation links, sub-lists of links, and other elements before arriving at the main content.
• Keyboard users are forced to tab through all of the top links in order to reach the main content.
• Main content is not usually the first thing on the page or in the source order.
• People using Blackberries, Treos, etc. have to scroll through a huge list of links.

Now that I have listed some of the reasons for skip navigation here is the code that I use in my websites.

<body>
<div class=”hide”> <a href=”#MAINcontent”>Skip to Main Content</a> </div>

… navigation and other stuff goes here …

<a name=”maincontent”></a>
<p>This is the first paragraph</p>

Please notice that the HREF anchor has “MAINcontent” in the link part, by using “MAIN” in front of it you can still use “content” as an anchor somewhere else on the page for some odd reason. The other point to notice is that link text is “Skip to Main Content” because some screen readers or their voices might mis-pronounce the link text if it was “Skip to Content”. The screen readers have issues with the word content.

Below is the CSS that I use in my websites to not display the skip navigation link(s) accept for the first time you tab through it then after you use it it does not show up on the screen anymore. I changed the ID information from the ones used in the original article by WebAIM on how to implement skip navigation (thanks, Justin Thorp). The article uses the ID of “skip”, I figure you might want to use it hide other items or you might want to have more than one “skip” type link, so I changed it to be a “CLASS” instead of an “ID”. The reason I changed the “ID” to .HIDE from the article was so you could use the CLASSs for other things like visually hiding the word “Required” for web FORM LABELs.

Reminder please do not use “DISPLAY: NONE” in your CSS, since screen readers will not see it.

.hide a, .hide a:hover, .hide a:visited {
position: absolute;
left: 0px;
top: -500px;
width: 1px;
height: 1px;
overflow: hidden;
}

.hide a:active, .hide a:focus {
position: static;
width: auto;
height: auto;
}

As you can see the CSS positions the link absolutely with a position of “LEFT” zero pixels and a “TOP” negative 500 pixels. This will allow screen readers, Blackberries, Treos, etc. to see it but not browsers.

I hope this post is useful and further explains skip navigation from my Accessibility presentation “Is your Website Accessible?” at Refresh DC.

Over the next few weeks I will post in more detail different sections of my “Is Your Website Accessible” presentation.

Two of the topics I have already covered on my blog are:

1. Use of UL or OL in HTML Forms
2. CLiCk Speak Firefox Extension

The new ones I will be going over to an excessive degree (just kidding) are:

1. The “Fire Vox” Firefox extension is a FREE screen reader
2. Part of CSS3 “Say-Instead
3. Are You Using Skip Navigation?
4. How to Use Access Keys
5. You Need Color and Contrast
6. How to Create Web Standard Accessible Tables
7. How to Improve Your Search Function
8. How to Hide “Required” from Visual Users, but Make it Available for All Others
9. Advanced Forms Information

Please leave a comment if you would like me to explain other items covered in my talk at greater length or even something I did not cover that deals with accessibility.

Finally got around to finishing up my post about the actual two days at the An Event Apart conference in Chicago on August 27 - 28, 2007. I had  a great time both at the conferenc and at the different gatherings each evening. I learned as much if not more at the evening events as I did during the day at the conference.

Please download all my notes, below is just an overview of some of the things I learned. The following is a summary of what happened by day ad speaker.

DAY - 1

The first speaker of the conference was Eric Meyer and his topic of discussion was “Secrets of a CSS Jedi”. He showed that you could use tables and CSS to create pages that end up displaying graphs. I had seen his earlier article about this and had worked on creating forms to allow you to enter the amounts and then put out the graphs. It is now time to work on this again, since Eric has changed the graphs from being pixel based to now be EMs based.

The next presentor was Jeffrey Zeldman and he talkd about “Writing the User Interface”. His three big points were:

1. Content is King.
2. Design helps people read less.
3. When people read less every word counts.

Next to speak was Jason Santa Maria on the topic of “Designing Your Way Out of a Paper Bag”. His main topics were:

1. Branding.
2. Layout.
3. Hierarchy and focal Point.

Jason also recommended three different books during his talk.

1. “Thinking with Type” – Ellen Lupton
2. “Grid Systems (Raster Systeme)”
3. “Making and Breaking Grids” - Timothy Samara

After Jason finished talking we had like an hour and a half  lunch break. The food was great and I ate way to much.

This made the first afternoon talk by Lou Rosenfeld (“Search Analytics for Fun and Profit”) a bit uncomfortable because I ate a great deal. Lou talked a lot about making sure you review your website search information to see what people are looking for and where they go once they have searched. You might be able to make a few changes to your website that will greatly improve peoples ability to find certain information. Here are a list of his points:

Querying you Queries – Getting Started

1. Most frequent unique queries.
2. Frequent queries retrieving quality results.
3. Click through rates.
4. Most frequently clicked results/query.
5. Frequent queries with zero results.
6. What are referrer pages for frequent queries.

You should look for what type of meta data people are looking for in thier searches.

By typing &ldqou;site:jfciii.com&rdqou; into Goolge’s search box will give you search results from the website you put after the “site:”.

Next, Liz Danzico talked about “The Seven Lies of Information Architecture”

1. Navigation should be consistent between pages on a website give or take a little bit.
2. Allow users may need to get to any part of the website at any given time or place.
3. User experience must be seamless.
4. Shorter is better.

Dan Cederholm - “Interface Design Juggling”

He suggests starting with colors and use two colors or less. Meaning stay in the same color range just use different tones and hues. He sometimes just goes to Photoshop and starts dumping paint using the paint can.

Two add texture use noice filter.

Make sure you read “Web Design is 95% Typography”.

Get on mailing lists for type foundries.

1. Hoefler & Frere-Jones
2. myfonts.com
3. veer.com

Dan was the final speaker for day 1.

DAY - 2

Jermey Keith - Adactio.com and ClearLeft.com

Presentation slides

Be Pure with how you write your code and do your work.

You need

1. content
2. structure
3. presentation
4. behavior
5. HTML
6. CSS

Be Vigilant and try not to put in extra stuff to your code or content.

To build an AJAX website first build a plain website and once working correctly then add in the AJAX.

Show where things were changed or updated when using AJAX. Look at 37 signals “Yellow Fade”.

Test early and test often.

Luke Wroblewski - “Best Practices for Form Design” - Yahoo

Why Forms Matter?

1. They make money.
2. Give access to communities.

Label Alignment depends on what you are doing.

1. Top alignment is better for familiar data.
2. Right alignment is better for more difficult data. It makes you think before answering the questions.
3. Left alignment is better for unfamilar information.

Matteo Pemzo has a great article on “Eye Tracking Data”.

Group data on forms of like kinds together using fieldsets.

Take data user gives you and format it yourself. Only give error if completly incorrect.

Derek Featherstone - “Accessibility Lost in Translation” - Box of Chocolates and FutureAhead

Presentation slides

Create an accessible user experience.

Remember to use keyboard and mouse interaction.

Require fewer page refreshes.

Screen readers need “alt text” if there is none, it reads source attribute which can be very weird.

Size forms and everything in EMs to make it scale for even borders, padding, etc. this makes it better and does not break pages easily.

Submit button should be last in code order.

Eric Meyer - “The State of CSS in an IE7 World”

He talked about IE7 adding the followig items.

• min-width, max-width, min-height, and max-height
• Attribute selections
• Child selector
• :first child
• Alpha channelin PNG images
• they fixed FIXED  

and  a whole lot of other things.

Jeffrey Zeldman- “Selling Design”

Jeffrey mentioned that you should have a process. Be calm and  methodical.

Remind client each time you see them of what you talked about at the last meeting, phone call, or last week.

Learn to translate what they said into something you and they understand.

Sell design not pixels.

Last but not least was …

Jim Coudal - “Dealing With the Both of You” - coudal.com

He talked about

• You need a cool flash of insperation for your projects or websites.
• Learn quickly and be curious.
• Value taste over everything else.
• Work with others and have adult conversations.

He also showed three movies that he and his cmpany made.

1. Copy Goes Here
2. Regrets I Have a Few - Hobbies
3. Subway - Ad Agency video

Please download all my notes, below is just an overview of some of the things I learned. Hopefully they are helpful to you and anyone else yu pass them on to.