Archive for the ‘Screen Reader’ Category

Notes for Running an Accessibility Camp

Thursday, January 28th, 2010

The following is a gathering of my thought for putting on an Accessibility Camp (BarCamp style event) here in Washington, DC last fall. Some of the items listed here were do to the fact that we had individuals that were either blind or visually impaired, deaf or hard of hearing, or had some other disability.

The most important part after getting a few good helpers is to get yourself a location, location, location that is accessible to all first before worrying about a date. One of the hardest parts of putting on Accessibility Camp DC was finding a free location near the bus and the metro (subway).

I spent from about the beginning of May until the middle of August looking for a place to have the event. Then it was a few weeks to get all the approvals from the Martin Luther King library to have the event there. The library normally doesn’t allow people to have more than one room let alone a few for an entire day, it’s normally just a few hours. Luckily I had had someone that worked there and in the Adaptive Technology Center where part of the event took place.

They have a great deal of assistive technology for all the patrons that use the equipment on a daily basis. By having it a the library we had a whole other level of complexity, since they were sending notes out to all the people that attend their other monthly events. By doing so we needed to have CART (Communication Access Real-Time Translation) which is a device for people that are hard of hearing, Sign Language Interpreters (SLI), and the like.

The next thing to make sure you have at your location is some of the following that have to do with the facilities.

Facility requirements

  • screens and projectors
  • wifi
  • Ethernet connections for speakers at least
  • mirco-phones for speakers and ones to pass for questions (optional)
  • CART – Communication Access Real-Time Translation
  • Sign Language Interpreters (SLI)

Next thing to worry about is enough sponsors for the event. The more money you have the more people that can attend. We allowed a maximum donation of $250 so large companies could have try and have a say over the event. We also had a minimum amount of $50, so you did not lose a good chunk of your money to Paypal fees etc. We have found that some of the people/companies that gave the least expected the most from us. One even complained that they were not on the website list only a few hours after giving us the money. They forget that some of us have day jobs and can’t just get on the server from the office to update things.

If you have an over abundance of money you could get t-shirts with the events logo, date, location on front and list of sponsors on the back in alphabetical order so there are no issues. Also please don’t forget to put the people’s whose venue you are using on this list like we forgot last year for BarCamp DC.

You should create yourself a twitter account, purchase a domain, and figure out a short hashtag. We ended up using #AccessDC or was it #AccessCampDC, since #ACDC reminded meet to much of the band and would make it harder to search for on twitter search.

The next big item to start thinking about is food. We provided a small breakfast type stuff that we could use later in the day for snacks as well.

Breakfast

  • bagels
  • coffee
  • juice
  • OJ
  • doughnuts
  • breakfast bars

Lunch

  • pizza or sandwiches
  • chips
  • cookies
  • fruit (banana’s, apples, grapes, etc.)

Snacks

  • candy (chocolate seems to work best)
  • leftover breakfast bars
  • chips and the like
  • leftover fruit

Drinks

  • juice
  • coffee
  • soda
  • bottled water
  • coffee creamer or half and half

Miscellaneous Items

  • paper plates
  • napkins
  • silverware
  • cups
  • butter
  • jam
  • cream cheese

Create a nice accessible website, which we can link to from www.AccessibilityCamp.org once up I get it back up. We just used www.AccessibilityCampDC.org and placed a lot of information there. We had date, location, registration link, sponsors list on the home page at the bottom with links to their websites, a sponsors page, resources page for slides, links, etc. that came out of event.

Don’t forget to create an empty Google Excel type document the night before with talk times, room name or number, if it has a projector, and the like. This saves time and also allows you to create a www.bit.ly URL that will give us statistics on when and where people click on the link.

While still at the event we asked people if they would like to attend a monthly accessibility meeting to keep what you started going. People really wanted to keep it going so we just had our third monthly meeting and have speakers booked for the next two or three months already.

Registration

You will need to find a place/website to take registration for attendees and money from sponsors. We used www.eventbrite.com, which is not completely accessible (issues with e-mails for those using screen readers and other assistive technology), but allowed sponsors to pay with credit cards and put money in your or someone’s Paypal account. We have found it easier to get sponsors money once you have a firm date and location.

Do to the issues with attendee registration, sponsor money, and just admin for the worker’s, I have started wire-framing and gathering information to make my own conference registration web application. Hope to have it ready for our next big event sometime in the fall.

We started our registration with tickets for only a third or a quarter of the total number of people our location could hold. We notified people by twitter and word of month of the date event tickets would go on sale, this way people don’t grab tickets a month or two in advance and never show. We started with having 50 tickets available and said we were pacing them out over a few weeks up until 150 tickets as long as we got enough money. Plus, we wanted to make sure we had enough money to feed everyone. The following weeks we would let like 25 or 50 more tickets go at a time.

Make sure to ask the attendees at registration if people will need assistance (for individuals that are blind, need CART, SLI, Braille version of schedule, etc). We also asked for t-shirt sizes just in case we got them, this way we would not have all the wrong sizes and it would make ordering easier. We also stated that we might have them if enough money was not collected in time or at all, which is what happened with the slow economy.

Make sure the week before to send a note reminding people of the event etc. plus listing the sponsors. We also asked them to give up their ticket if they knew they were not going to be able to make it to the event.

We had 125 people register and the last week about 10 - 15 canceled, since ours was held over Columbus Day weekend. Day of the event we had a few volunteers to the MLK library keep track of who came and signed in. We ended up with 80+ people that we could verify. This is a huge percentage of people that actually showed, since at our three BarCamp DC events we get from 50% - 60% of the people registered to show up.

Amounts of Food and Drink

I also have a whole bunch of information about amounts of food to order from doing Accessibility Camp DC and three BarCamp DC events now if you would like as well.

It is really cool to see if you can donate the leftover food, drinks, etc. from the event to a shelter or somewhere that could use it. First year we did that we found that some places would not take leftover pizza even if it wasn’t missing any slice from the box. This year we left all the snack and drinks at the library for other events that they have.

Other Important Items

A few other things we did was spend twenty minutes having everyone there introduce themselves with name, job, three words that describe themselves. Also have them tell everyone the name of the talk they want to give and a short description, this way you can build the schedule while people get to know who is there and you can make sure all the design talks or whatever are not at the same time.

You might want to plan some sort of JAWS screen reader demo during lunch so people that never have seen one get a chance to do so. A lot of people in DC that watched one for the first time were just amazed at how much goes into getting around the internet with a screen reader.

Another thing would be to plan the talks to be about 45 minutes with questions so people have time to hang out and get to the next talk easily. You also might have people available to help individuals that need help (visual issue or the like) get from one room to the next, since they are in a strange place.

I know BarCamp’s are supposed to be an un-conference with nothing planned, but not knowing how many people were going to come to talk we made sure we had at least enough talks to fill one room for the entire day. We ended up with about 13 talks for the day in three different locations.

Finally you might need a location for after party, which should also be accessible. This allows you to use up any leftover money from sponsors, since BarCamp type events are not meant to make money, but share knowledge and make new friends.

My Cell Number

Hopefully this is what you were looking for and I did not miss anything. If you have any questions you can give me a call at 703-587-2458, anytime normally between 8 AM and 11 PM eastern standard time.

A few other groups have showed interest in me sending this to them so could you give me your opinion of anything I might have missed or over stated.

Project 52 Plans

Thursday, January 14th, 2010

I’m still working on my plan of how to complete Project 52, but I first want to thank Anton Peck for coming up with the idea to get himself and others to blog at least once a week for a year. Anton at first thought that maybe 25 or at most 50 of his friends would participate and ended up with over 700 last time I checked the list.

When Anton first came up with the idea on his blog I was all for participating, because I didn’t do a whole lot of blogging last. Instead I attended a few web conferences, ran a few (Accessibility Camp DC and BarCamp DC) with help from others, along with starting a monthly accessibility meet-up here in Washington, DC.

Donate to Charity

In the comments of Anton’s blog post about Project 52 I even talked about why not try and do some good out of all this by donating $10 to charity for ever week I miss blogging, creating code examples, making a “How To” videos of either accessibility related items or whatever. So each quarter I will donate $10 per week of missed blogging to a local charity like Martha’s Table or to Kiva.

Blog Post Ideas

Some of the things I plan on blogging abut this year are listed below:

  • Accessibility related issues and best practices
  • SXSWi - spring-break for geeks in Austin, Texas
  • Access U - accessibility conference in Austin, Texas, put on by Knowility
  • Accessibility Camp DC
  • BarCamp DC
  • Accessibility DC monthly meet-up
  • Food and wine
  • An Event Apart DC - great web standards conference put on by Jeffrey Zeldman and Eric Meyer
  • creating my web application (more to following in a future post)
  • lessons learned from things I have done or from others (friends and experts)
  • book reviews - mostly technology
  • spending more time with friends
  • more writing

So those are some of my ideas for blog posts and plans for the next 50 weeks. Might have to write a few accessibility best practices or code examples posts in advance for times like when I’m at SXSWI for a week and won’t have much time to blog. I already have six or eight subjects with titles and a short outline started from ideas from last year, now to just do the writing and coding required.

Are you planning on doing more blogging this year or just more reading and other work?

Please tell me what you are doing or suggestions for me to do in the comments.

Wish me luck.

Need Help Deciding which Web Application to Build

Tuesday, July 14th, 2009

Now that the house issues have been mostly settled I can get started on building one of the many small web applications that I have been tossing around. Some of these ideas I have been thinking about for what seems like years and others just a few months.  I have a good 7 or 8 different web applications that I want to build and I’m looking for some help in determining which one(s) I should build first.

Reasons Why

I need to get other peoples opinions on which will be useful them and more importantly the general public and might in the long run I would be able to charge enough to cover my hosting costs with ads or annual fees. I know that probably all of these have been done many times over, but there are a few reasons why I want to build them and they are:

  • Learn PHP and MySQL
  • Use the newest accessibility implementations of WAI-ARIA and possibly HTML 5
  • Use microformats were applicable
  • Test newest features in screen readers - JAWS, NonVisual Desktop Access (NVDA), etc. and web based browsers (Firefox 3.5, IE8, etc.)
  • Use Web Standards
  • Test abilities for user interface design (UI or UX)
  • Create 508 compliant and usable examples for others to learn from for accessibility presentations.

But most importantly to create web applications that I would like to use personally.

Important Part

Now comes the important part, which from the following list of web applications should I build? I added a short description of what they do along with different ways I could help pay the hosting cost. I even created one page prototypes just so you could see what types of information is stored in each one. The style (CSS) and layout (UI/UX) will be changing. I just took some old CSS and put these together.

  1. Online URL/bookmark storage which allow user to have X URLs/bookmarks stored online for free, charge per X items stored, set up annual fee, or show ads of some type. I started this one a while ago and stopped for some odd reason. I’m tired of having bookmarks on two home computers (MAC and PC), along with on work one. Yes, I have heard of delicious.com and ma.gnolia.com.
  2. Store individuals personal contact information and either have X individuals for free, charge per X customers, annual fee, or show ads of some type. Always looking for an address or phone number when at someone else’s house or office and would like to have it be web based.
  3. Online wine inventory - personal use hosted by me with ads for up to X entries or small annual fee for limited number, bigger ones for people with 1000s of bottles of wine. Yes, I know corkd.com is around. I started mine about the same time they (Dan Cederholm and Dan Benjamin) did, just did not have enough get up and go to get past midway with it. Once Cork’d came out I stopped for the most part. So this one is a good way completed using ASP and Microsoft Access, which only needs to be converted to PHP and MySQL.
  4. Online wine inventory - for wine stores to allow their customers to store their wine collection information and then place their (wine store) ads on website (charge monthly fee to store per customer or flat rate by amount of storage and bandwidth used).
  5. Mini adhoc conference information service (no prototype just yet), which would help groups like BarCamp create main information page about event and later at event add an online schedule of talks (allow addition of rooms, topics, speakers, etc.). Place AdSense and/or links of event sponsors on pages. I created similar conference room scheduling web application for old job so have the general idea for it already in my head of what it would need. Not sure if this one exists, but I assume it does somewhere and have not really looked if it does.
  6. RSS/XML Feed reader, which either would have X feeds free, charge per X feeds over free amount, annual fee, or show ads of some type. Created one to pull in a feeds and either display all records contained in RSS/XML, first X amount, or only display records that contained certain words or phrases. There are way to many of them around.
  7. Store multiple weather location information, which would allow you to save multiple zip codes or city/state/country combinations to keep track of home, vacation location, other friends, or families weather. Same idea for covering hosting costs as previous ideas.
  8. Technology Skills or Skill Swap repository, which would allow members to put in there different skills and then have the rights to search for others for help with questions or for projects.  Would have ability to make personal information private so as not to get spammed. Could charge fee for those just looking to find people for work or projects, charge for recruiting type ads, or just place AdSense on pages.

Conclusion

So please do me a great favor and list the top three applications in order you think I should build them so I can get an idea of what others are thinking.

Thanks, greatly in advance for your time and effort for helping me learn new things and decide which web application to build first. I will post findings in a few weeks along with the order in which I will build them in, since a few could be bundled together to make an over arching suite of applications.

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

Wednesday, August 27th, 2008

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: 0px;
top: -500px;
width: 1px;
height: 1px;
overflow: hidden;
}

As you can see the CSS positions the link absolutely with a position of “LEFT” zero pixels and a “TOP” position of negative 500 pixels. 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.

dont’ 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.