Things I’ve Learned

There are many things I have learned over the last few years in web design and development. Here are some example pages that I created over the past few years.

  • The first example is one way to create an accessible table that uses ID and HEADERS. The table example page contains an accessible table with Microformatted hCard, and a JavaScript function that I found that will allow you to sort and re-sort table information without going back to the server.
  • The next one is to show that you can use an UL or OL list for grouping FORM INPUT fields together, so a screen reader will state that there is X number of inputs in a given FORM or section (fieldset) of the FORM.
  • A few years ago, I built a FORM that lets screen readers hear the word “Required”, but not show it visually to a browser. Here is the example of an accessible FORM with the word “Required” hidden off screen. It also shows how to make the field formatting a part of the LABEL and have it inside the FORM field. Updated page recently to add the new WAI-ARIA (xxx) way of denoting a “Required” field. Here is the example code to be adding to the INPUT field - aria-required="true".
  • More recently, I created basic wireframes for an add record page to seven web applications I was thinking of creating so people could help me chose which one to do. Here is the list of possible web applications below:
    • Online URL/bookmark storage which allows the user to store URLs/bookmarks stored online.
    • Store individuals personal contact information because I'm 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.
    • Online wine inventory - personal use that is hosted by me with some type of ads included on the page.
    • Online wine inventory - for wine stores to allow their customers to store their wine collection information online and then place the wine store's ads on a website (charge monthly fee to store per customer or flat rate by the amount of storage and bandwidth used).
    • Mini ad hoc conference information service, which would help groups like BarCamp create main information pages about the event and later at event add an online schedule of talks including the addition of rooms, topics, speakers, etc.).
    • RSS/XML Feed reader, which either would be created to pull in feeds and either display all records contained in RSS/XML, first X amount, or only display records that contained certain words or phrases.
    • 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 cities, or families weather.
    • Technology Skills or Skill Swap repository, which would allow members to put in their different skills and then have the rights to search for others for help with questions or projects. Would have the ability to make personal information private so as not to get spammed.
  • Another accessible example that I created a few years ago was attempting to build a metro train schedule in TABLE form that contained Microformats.
  • Finally, I created an example of the new CSS3 property called “say-instead, which is used to allow screen readers to pronounce words or phrases correctly. You will need a screen reader to listen to this page. I recommend using the FREE Fire Vox” extension for Firefox.