Demos and Things I’ve Learned

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

Since it's been a few years and these weren't built with responsive design in mind they will need to be made responsive and maybe even CSS Grid too.

• The first example is one way to create an accessible table that uses ID and HEADERS. The table example page contains an accessible table, 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 but needs to be updated to tell the user with ARIA the column that is sorted along with if it's now in ascending or descending order.
• The next one shows you 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 depending on the way the user reads 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 an example of an accessible FORM with the word “Required” hidden off-screen. The sample page also shows how to make the field formatting a part of the LABEL and have it inside the FORM field too — updated the page recently to add the new WAI-ARIA (aria-required=“true”) way of denoting a “Required” field. Here is the example code to be adding to the INPUT field - aria-required=“true”.
• More recently (5+ years ago), I created basic wireframes for an add record function to seven web applications I was thinking of creating so people could help me chose which one to do. Below is the list of possible web applications:
  • Online URL/bookmark storage, which allows the user to store URLs/bookmarks online.
  • Store individuals personal contact information because I’m always looking for an address or phone number when at someone else’s house or the office and would like to have it be web-based.
  • Next, is an online wine inventory that would be hosted by me with some type of ads included on the page to help pay for things instead of charging a monthly/annual to start.
  • 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 the website while charging a monthly fee to the store per customer or flat rate by the amount of storage and bandwidth used in tiers.
  • Mini ad hoc conference information service, which would help groups like Accessibility DC create a main information page about the event and later add an online event 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, the first “X” amount of the content, or only display records that contained certain words or phrases.
  • The ability to store multiple locations weather 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 cities weather.
  • Technology Skills or Skill Swap repository, which would allow members to put in their different tech skills and then have the rights to search for others for help with questions or projects they need people to perform for them. The application would have the ability to make personal information private so as not to get spammed or be a security risk.
• Another accessible example that I created a few years ago was attempting to build a metro train schedule in data TABLE form that contained Microformats per station and time. Need to improve this to be responsive and use the DC metro's API to fill in the information at some point dynamically.
• Finally, I created an sexample 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 screen reader NVDA or VoiceOver on your Apple products.