Are You Using Skip Navigation?

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.

CSS below was updated on January 29, 2014.

.hide a, .hide a:hover, .hide a:visited {
display: block;
position: absolute;
left: -10000px;
top: auto;
width: 100%;
height: 3em;
font-weight: bold;
text-align: center;
}

.hide a:active, .hide a:focus {
background: #fff; /* change to whatever your color scheme is */
color: #3d3d3d; /* dark gray */
position: static;
width: auto;
height: auto;
padding: 1em;
margin: 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.

More General Information about the OLPC

There are a few things that I have noticed over the course of the day using the OLPC, the XO Laptop, or the $100 Laptop. One of the big ones is that if you take it to a coffee shop people will look at you and then the laptop and look at the laptop some more.

I had a lot of people come up to me and ask if it really worked. I said “Yes, it does and you can get one for yourself even” and went into how they can order the OLPC themselves from OLPCs Give 1 Get 1 website.

I had a lot of people ask “Is that one of those green laptops”, or “Is that one of those $100 laptop”.  I got the most questions from older people asking “Isn’t that the laptop we saw them talking about one CBS”? I assume they saw the “60 Minutes” piece on the OLPC. Each time I would stop reading about the laptop and offered them a chance to use it.

One lady I guess was going to order one for someone or she already had, so she wanted to see it and touch it. She had a young girl who was eleven if I remember correctly use it. The young girl said it was easy for her to type on. Of course she tried to go to one of the Disney websites, which asked for the latest Flash plug-in to see most of the website, not that accessible of a website. A Disney website is probably not the first place someone from third world country would go or at least it shouldn’t be.

Another gentleman asked what kind of software you could put on it, since someone he knew or he was going to a third world country and wanted get a few to let people there use it if it could do a bunch of activities.

One women I know asked if you could look up porn on the laptop. I told I figured you could, since I had not heard that they had software to stop it. Really wanted to know if kids could look up porn. So when she got hold of the OLPC she went to the Playboy website and started laughing when she got to their home page. I grab the OLPC back from her to get rid of it, since we were sitting the middle of the coffee shop with a lot of little kids and older adults.

I did get some reading done about the OLPC on how to get started, how it works, and what activities the OLPC has on it. They even have a wiki, which contains information about hardware, software, content, testing, educators, developers, and a whole lot more. They have some cool rollovers explaining what certain parts of the machine are for. One of the ones I just found was the page that has information on what the keyboard does. They also have a page that shows which features the OLPC has.

With all the question and people playing with it I did not get to do as much as I wanted today on learning about the activities on the OLPC. It was like three different “Tam Tam” activities. They are:

  • Tam Tam mini” – an application that allows for people to perform music and play instruments.
  • “Tam Tam Edit” – an application allows you to generate music using a colorful and intuitive graphical interface.
  • “TamTam Jam” – the music performance activity. Sounds are played by striking individual keys on the keyboard. This is designed more for younger children.

Other activities that the OLPC has are: (this information was mostly taken from the activities webpage)

  • Chat“ -simple environment for discussion, whether it is between two individuals or an entire classroom.
  • Memorize“ – is the classic memory game of finding and matching pairs with a twist: a pair can consist of any multimedia object, such as images, sounds,and text.
  • Record” – provides a simple way for children to take pictures, view slideshows, and record video and audio all content that can be shared via the mesh network.
  • Journal“ – is an automated diary of everything a child does with his or her laptop.
  • Draw“ – provides a canvas for a child or a group of children to express themselves creatively.
  • Pippy“ – a simple and fun introduction to programming in Python, the dynamic programming language underlying much of the software on the laptop.
  • and a whole lot more

The final cool thing on the activities page is the last item, which  is the part about downloads for the OLPC. The download page has like 50+ items to download and use like (some is games others is source code):

  • Domino“ – classic space game
  • Image Quiz“ – a simple concept: one question, one image, one click
  • 3D Pong“ – three dimensional wireframe arcade game
  • SimCity“ – construct and maintain your own city
  • Block Party“ – Tetris-inspired game
  • and a whole bunch of other things

The woman across the table from me at Murky Coffee in Arlington said, “I should bring the OLPC out with me, it might actually be better than having a puppy or a baby with me for getting people to stop and talk to me”.

Hopefully this blog post is usefully for those that do not have their OLPCs yet, are waiting until Christmas to open with their kids, want to read up on what it has, what is being developed, or what you can do with it.

Finally My Notes from An Event Apart Chicago 2007

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 conference 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 presenter was Jeffrey Zeldman and he talk3d 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 and 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 their searches.

By typing “site:jfciii.com” into Google’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 noise 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.

Hola Neighbor Makes Washington Post

Last weekend (10/26/ – 10/28) I participated with about 50+ other people to make a web application called Hola Neighbor. We came up with an idea on Friday night and worked on it until midnight Sunday into Monday.

We had a photographer and writer from the Washington Post come down to take pictures and interview people.

The article will came out in the papers Business section on Monday morning. I happened look and see if the electronic version was available yet and it was. Please read the Washington Post article about Startup Weekend and the building of Hola Neighbor.

More to come later about my personal experience.

DC PHP Developers Meeting

Last evening I went to the DC PHP Developers meeting. I had originally gone to the DC Tech Events website which is run by Ross M Karchner to check what time Thursday night the The DC Technology Network book group was meeting to go over “The Tipping Point” by Malcolm Gladwell.

I stayed at work late looking over general information about PHP, since I have not yet used the language. It is on my list of languages to learn along with Ruby on Rails.

The DC PHP Developers meeting was about jQuery and was presented by Joseph L. LeBlanc. It was held at the headquarters of Green Peace USA, in Chinatown. Joseph talked about using jQuery to do animations, by using the following effects:

  • fadeIn()
  • fadeOut()
  • hide()
  • show()
  • slideDown()
  • slideUp()
  • toggle()
  • slideToggle()
  • fadeTo()
  • animate()

He showed us a routine to check that the DOM was ready.

$(document).ready(function() {

// start code

});

or something like that. I might have missed something. Joseph has now put his jQuery presentation online and I while link to it when it’s available.

He recommended two different books about jQuery both by Karl Swedberg and Jonathan Chaffer:

He also listed a few website as references:

  1. http://docs.jquery.com
  2. http://visualjquery.com
  3. http://15daysofjquery.com
  4. http://ui.jquery.com

Once his talk was over people started asking general questions to him and to the rest of the group. One set of guys was looking for information about hosting and someone said they had used BlueHosting (for like $7.00 per month) and Simple Storage Service (S3) by Amazon for some of his client stuff. After that we talked about a bunch of things.

I even asked if people had been to either Refresh DC or BarCamp DC, the only person that had heard of either was Joesph and he had been to the BarCamp DC and not yet made a Refresh meeting. Since that was the case I made sure to explain what the events were and where to find them. Finally I talked about the new DC Technology Network and Ross’s DC Tech Events website.

Now it’s time to look over “The Tipping Point” tomorrow evenings meeting.