Accessibility Camp DC – October 9, 2010

For those that were wondering when the next Accessibility Camp DC is, it will be on Saturday October 9 , 2010, at the Martin Luther King Jr. Memorial Library from 9:30 AM to 5:30 PM in Washington, DC. This year we plan on getting more people out if we possibly can and there is already a nice sized group of out of towners coming as well.

For those that have never attended a BarCamp style event, which this is, the speakers and subjects for the event are decided the day of the event by everyone in attendance. Also in true BarCamp fashion the attendees can register for the event for FREE.

Some of the subjects we are hoping people can and will talk about are the following:

  • Section 508 Compliance or WCAG 2.0
  • Practical Ways to Make Your Website Accessible
  • Accessible PDF’s
  • Making Flash Accessible
  • What is WAI-ARIA – (Web Accessibility Initiative – Accessible Rich Internet Applications)
  • Accessible Video and Transcription
  • Panel Discussion on “Issues Effecting Individuals with Disabilities on the Web”
  • Captioning
  • Screen Reader Demos – JAWS and NVDA
  • Mobile software accessibility

Please pass this information on to others so we can have as many people as possible to learn and make needed connections about accessibility.

Hope to see you all there.

Missed Two Weeks of Project 52 Blog Posts

In case you have been keeping track, yes, I did miss two of the last three weeks of Project 52 blog posts. Between working from home because of the back to back snow storms here in Washington, DC and the 11+ hours of shoveling a few weeks ago and just busy with a bunch of after work activities. Like planning the next Accessibility DC event and this falls Accessibility Camp DC event, I missed a few posts.

It was about 11:45 PM on Thursday night that I realized I had all of 15 minutes to get a quick blog post out, so made my preordained promise to write a blog post a week for a year. I figured it was not worth it to me to just throw together a quick few lines or paragraphs just to fill my quota.

As you might know this means,  I now owe $20 to one of two charities, because I had decided donate money to charities like Martha’s Table or Kiva if I missed a week. I figured this would give me an incentive to make sure to write each week and help out those in need if and when I failed to write in a given week.

I have heard that Project 52 is doing a bit of a reboot starting on March 17, 2010, since a lot of others seem to have miss post as well.

Good luck to you if you decide to take up the challenge of attempting to blog every week for a year. I plan on being more focused once I get back from SXSW.

DC Monthly Accessibility Meet-up

After last years successful Accessibility Camp DC event I wanted to keep the momentum going and decided to have a monthly accessibility meet-up. I first talked with Patrick and a few others about having a monthly meeting if we got enough interest while at the big event in October.

Event Details

The monthly accessibility meet-ups in Washington, DC, take place every third Tuesday of the month to try and further the knowledge in the area of accessibility. The events are held at the Martin Luther King Library at 901 G St. NW, beginning at 6:30 PM and ending at 8:30 PM. Further information can be found at the Accessibility DC website.

Ideas of what it should be

Everyone liked the idea and we have now had three meetings starting in November, 2009. The first meeting was mostly to see what the other people had in mind for what the meetings should be and what I had been thinking about for a good amount of time.

What I had in mind was a place for designers and developers to learn from each other, along with getting input, advice, and first hand information from those that might use adaptive technology to view websites on a regular basis. So the long and the short of it was to be a place for people to learn from each other and make new friends. That seemed to be what everyone for the most part thought it should be as well. The audience for the events seems to be about a third designer and developers, another third business professionals that use assistive technology to work, and the rest are those that use assistive technology for everyday life.

November 17, 2009

The first meeting went well with everyone introducing themselves so we all got an idea who was at the event and what they did. After that was done, we had Eric Wright (@ewaccess) do a short demo of Dragon Naturally speaking, which was on how to set it up, along with demoing a few of the basic commands, functions, and showing it’s abilities.

December 15, 2009

The next meeting is when I presented my “Is Your Website Accessible? If Not Practical Ways to Make Them So.” talk, which I have done a bunch of times at other events. The really cool thing that happened before this meeting got going was that about a dozen different students with visual and others disabilities stopped in to talk with us. We talked about what we did and what they wanted to do when they grew up. There were a few very interesting sets of mini talks and questions asked by the students and people who attended.

January 19, 2010

Just the other day Leslie Bobbitt (@Dreamweaver78) did a wonderful talk and demo on JAWS. She talked about what the product was, how you can use it to do many things on a computer from WORD, browse the internet, and a lot more. She talked about Freedom Scientific’s Surf’s Up tutorials, along with going over different pages examples that I created. There were two types of pages those that were less accessible and then pages that were much more accessible. Here is the link to the accessible test pages.

Future Plans

The next big obstacle is trying to get more people to come and learn from each other. We are currently getting about 15 – 20 people per meeting. I would like to add some more people to get us closer to about 35 – 40 or thereabouts. If we get anymore we will not have enough room in the space we are using now.

Now comes the fun part were we are looking for talk ideas, along with people to do those talks. So if you have ideas for talks or want to present an idea now is your time to speak up by adding your ideas to the comments below.

How to Hide “Required” from Visual Users, but Make it Available for All Others

How do most people usually designate that a field is “Required” in a web FORM? I would think that it is with an asterisk (*) after the actual INPUT field and it is sometimes made “bold” and “RED”. There are other ways to do this that are simple, use web standards, good design principles, and are 508 compliant.

When creating a FORM you should not make all fields required. By doing that nothing stands out to the person filling in your very important FORM. If most fields are required you should state at the top of the FORM or in the directions the fields that are NOT required.

Instead of just placing an asterisks after either the LABEL or the INPUT field in a FORM for a required field as most people do. You can actually place the word “Required” within the LABEL. Of course your using LABELs for your FORMS, along with FIELDSETs and LEGENDs.

Here is how to accomplish this for a web FORM and it can be easily accomplished by using a little CSS to hide the text that a field is “Required” to be filled in. The way to do this, that I use is to make it part your input fields LABEL. Here is an example of a few lines of code on how the code might look.

<label for=“username”><em>Required<em>User Name</label>

To hide the word“Required” you will be able to use the same CSS used for hiding “SKIP NAVIGATION” by adding a new class or stating that LABELs with an “EM“ in them will be displayed.hidden off the page.

Reminder please do not use “DISPLAY: NONE” in your CSS, since screen readers will not see it. Below is the CSS to visually hide the word “Required” from browsers.

.skip a, .skip a:hover, .skip a:visited, label em {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}

As you can see the CSS positions the link absolutely with a position of “LEFT” minus 10,000 pixels and a “TOP” position of auto. This will allow screen readers, Blackberries, Treos, etc. to see it but not browsers. That is as long as their CSS in turned on.

You can also place extra notes or instructions for a field inside the INPUT field with lighter text that is that will not go away once you start typing in the field. This can be done by using more CSS. Below is the XHTML code to accomplish this.

<label for=“username”><em>Required<em>User Name<strong>must not contain spaces<strong></label>

<input type=“text” name=“username” id=“username” size=“25” maxlength=“50” value=“”/>

The CSS to do this is fairly simple and follows below.

label strong {
color: #aaa;
font-size: .85em;
font-style: normal;
position: absolute;
top: 0;
right: -275px;}

Here is what the CSS is doing for the extra notes and instructions. It is first taking any STRONG elements within the LABEL and making it light gray color, the FONT-SIZE smaller and normal weight. After that it is absolutely positioned at the top left of the INPUT FORM field, as long as the LABEL is left or right justified to it and finally placing the information negative 275 pixels from the right of the beginning of the INPUT field.

Don’t forget to listen to your FORMs by using the Firefox extension Fire Vox. Here is an example how placing extra notes or instructions would look in a FORM, along with some “Required” field examples.

I hope this post is useful and further explains how to hide visual the word “Required” from my Accessibility presentation “Is your Website Accessible?”, please look for the most current presentation closer to the top of the list.

How to Set Up and Use Access Keys

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.