Category Archives: Accessibility

How to Set Up and Use Access Keys

Posted on by

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.html” 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:

Text sizing buttons with Small (S), Medium (M), and Large (L) options.

  • “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.

It’s Been a Month and a Half

Posted on by

I can’t believe life has been so busy that I have not blogged in over a month and a half. Okay, some it was procrastinating on getting things done.

First it was work being busy trying to get a bunch of stuff done and into production, then it was preparing slides for the 2008 DC PHP Conference. After that it was helping get ready for my friends 28th annual pig roast in Cabin John the same week that I was speaking at the DC PHP conference.

I worked Saturday (May 31) doing yard work for pig roast, then Sunday was getting a few things done around the house before meeting about a dozen DC PHP conference goers out for drinks and food Sunday night. Monday, Tuesday (day of my talk), and Wednesday I was at the conference and then the after conference gatherings. You would think not being in the office would be less tiring.

While at the DC PHP conference I talked about tips, tricks, and practical ways to make your website more accessible. I met a bunch of really cool people such as Tony Bibbs, Mike Tutty, Eli White, Ben Ramsey, and many others.

Thursday was my one day back at the office to catch up on e-mail and anything that needed being done. Friday I was off doing more work for the pig roast.Saturday was the big day at pig roast and it felt like a million degrees that day. That was probably do to the fact that even though I was at the party, a few of us including myself still had to work by picking up trash bag etc. during the day.

One of the hardest parts of pig roast is getting myself and others back to friends early Sunday morning (to beat heat and get it over with) to do all clean-up and putting away of all the stuff needed to put on a party for 500 -600 (only 300 – 400 this year because of the extreme heat).

It took a few days to recover from the heat and work related to the pig roast. Now it’s time to get back on track and work on finishing up my couple of web applications in ASP (current language I know to prototype in), start learning PHP so I can convert them into something my web host allows.

It’s off to do house cleaning, laundry, sorting and dumping (Goodwill and trash) and then yard work once it gets cooler, sometime around dinner time. This might take a few days to get done, but it needs to be completed.

Hope to do more blogging, since I have about a dozen different posts started, in need of just a bit of editing, or just titles listed for subjects I want to talk about.

Is it just me or are others blogging less, since using twitter? I feel by using twitter I can get my points across on some subjects but others require a full post to explain all the technical stuff required.

Are You Using Skip Navigation?

Posted on by

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.

“Say-Instead” Part of CSS3

Posted on by

Again while in Austin, Texas, I was talking with Charles L. Chen about his CLiCk Speak Firefox extension and he showed me that by using the new CSS3 property called “say-instead“, which is used to allow screen readers to pronounce words or phrases correctly. Listed below is a few examples of phrases you might use in your posts, which a screen reader would pronounce incorrectly.

The first part of the line is the way you typed it and the second is the way it should be spoken.

  • Dr. Kapp versus Dr. Cop
  • Homepage versus Home Page
  • Pope John Paul II versus Pope John Paul the Second
  • Rocky II versus Rocky 2
  • Godfather II versus The Godfather Part 2

If the say-instead property were officially part of CSS3 and available to use in browsers you would have to add to your CSS file the different classes for each set of words or sets of words you want to have said properly. A few examples of this would be as follows:

.sayinstead_drkapp { say-instead: “doctor cop”;}

.sayinstead_homepage { say-instead: “home page”;}

.sayinstead_popejp2 { say-instead: “Pope John Paul the Second”;}

.sayinstead_rocky2 { say-instead: “Rocky Two”;}

.sayinstead_godfather2 { say-instead: “The Godfather Part Two”;}

 

The way you need to get these to work is put a <SPAN> tag around each set of words that needs to have the “say-instead” text read out loud. Below is the example of the code:

  • Dr. Kapp versus <span class=”sayinstead_drkapp”>Dr. Kapp</span>
  • Homepage versus <span class=”sayinstead_homepage”>Homepage</span>
  • Pope John Paul II versus <span class=”sayinstead_popejp2″>Pope John Paul II</span>
  • Rocky II versus <span class=”sayinstead_rocky2″>Rocky II</span>
  • Godfather II versus <span class=”sayinstead_godfather2″>The Godfather II</span>

 

I’m spent a bunch of time trying to get this to work in this post and was having trouble, I think part of the problem is that I’m trying to do this inside of WordPress. I created an example on my website to use as the test example for the “say-instead” CSS3 property.

Here is the example created by Charles L. Chen on his website for the “say-instead” CSS3 property. Please give the example page a try by using a screen reader such as JAWS, Window-Eyes, or the Firefox extension Fire Vox created by Charles L. Chen. See my post for more details about Fire Vox.

I hope this information is helpful while building your websites and trying to make them as accessible as possible.

The “Fire Vox” Firefox extension is a FREE screen reader

Posted on by

Over a month ago I downloaded the Fire Vox Free screen reader extension for Firefox that acts like a screen reader and was created by Charles L. Chen.

I found that it was of great use and I assume it simulates most of the major functions that screen readers like JAWS or Window-Eyes can do, since I have never used either one of those.

Here is a little more information about the two screen readers I mentioned earlier and information about there cost.

  • JAWS – free trial (shuts off machine every 40 minutes) and $900 – $1100 to purchase a full version .
  • Window-Eyes – 60 day trail $39 or $900 to purchase a full version.

Fire Vox does not have all the bells and whistles that the other two have. I have not been able to find how to increase or decrease the speed of the speaking voice.

Some uses for the Fire Vox Firefox screen reader extension.

  • To see how your website will be to someone that uses a regular screen reader for someone with visual issues.
  • Now close your eyes and listen to your website to see if you can navigate and find information. You should be able to, since you created the website.

After awhile of using Fire Vox you might want to turn off the auto speaking function. All of the commands for Fire Vox on at least a PC are done with CTRL + SHIFT + some default key. To get to the list of functions you have to use CTRL +SHIFT + M to get the pop-up menu and un-click the “Speak Events” and “Echo Keys” checkboxes. This will then only allow the screen reader to be activated when you use the following key strokes CTRL +SHIFT + A or when a pop-up window occurs. This allows someone that needs these functions to still be able to get them to work.

For a full explanation please read the post on the Accessify Forum on how to turn off speaking all the time. To get Fire Vox to stop reading/speaking you can hit any key on the keyboard.

Here are some of the functions that Fire Vox does have are their default settings.

  • Auto Read – CTRL + SHIFT + A
  • Read Previous – CTRL + SHIFT + D
  • Read Next – CTRL + SHIFT + F
  • Repeat – CTRL + SHIFT + E
  • Say Selected Text – CTRL + SHIFT + O
  • Spell Out – CTRL + SHIFT + S
  • List of Headings – CTRL + SHIFT + H

There are a great bunch of Fire Vox tutorials on their website that will explain a lot more. There is no point of repeating all that information here.

Here is the links to the exercises from the Fire Vox tutorial page.

  1. Reading Text and Navigating Web Pages
  2. Getting Additional Information
  3. Working With Forms
  4. Working With Live Regions

So please download the Fire Vox free screen reader extension for Firefox and try it out. Tell me what you think.