Facebook Accessibility
From Project:Possibility Wiki
Contents |
Team members
- Alvin Huynh
- Nima Rahnemoon
- Tim Hsieh
- Raymond Lim
- Rajiv Makhijani
- Carson Tang
Overview
The purpose of this project is to make the social network, Facebook, accessible to the visually impaired. Currently, screen readers have trouble reading the Facebook page because of it's complicated web 2.0 design and CSS style sheets; however, through the use of axsJax and other javascript libraries, screen readers can read the website in a manner that is comprehensible to a visually impaired person. The beauty of the "Facebook Accessibility" project is that the script can be injected from the user's browser through the use of Greasemonkey, so no server-side changes have to be made. The code is purposely written to be dynamic, so that if Facebook makes simple changes to their website, the script will still be able to find the correct data and read it to the user.
Technical Overview
How page detection works
Throughout the script it is imperative that the currently load page is always known, in order to perform the correct functionality. In order to accomplish this, all the different pages are given their own variable, all of which are children to a parent class. The parent class has a variable called currentPage, which is by default null. In order to initialize this variable every time a page is loaded, the parent class has its own function called pageOnLoad(), which looks at the window's current page title or the window's current page URL and sets the currentPage variable equal to the subsequent child class. After the currentPage variable is initialized, the child class's pageOnLoad function is called. The child class's pageOnLoad function then calls the appropriate functions, including eventHandlers, keyHandlers and other helper functions. In the main script there is a loop that checks to see if the url of the page has changed, and every time the url changes, the pageOnLoad function of the parent class is called.
Login
When the login pages is loaded, the user is welcomed to Facebook and then prompted whether or not they have registered yet or not. If they haven't registered, then the script redirects the user to the registration page and then the registration class prompts the user for the necessary information. If the user has already registered, then the pageOnLoad function calls the onFormEvent(evt) function which focuses on the username field and prompts the user to type his/her username and does the same for the password.
Registration
When the registration page is loaded, the pageOnLoad() function first checks to see if there are any errors being displayed on the page. If there are no errors, then it passes any input the user gives to the onFormEvent(evt) function. If there are errors, then the script reads the error and gives the user the option to retype all the information. If there are no errors, then inside the onFormEvent(evt) function, the script allows the user to begin typing in his/her information, by pressing space bar.
Home
When the home page is loaded, the pageOnLoad() function tells the user that they can press the control alt question mark combination to listen to all the shortcuts.
The shortcuts are as follows:
- Ctrl + alt + 'h' -> Go to home page
- Ctrl + alt + 'p' -> Go to profile page
- Ctrl + alt + 'f' -> Go to friend page
- Ctrl + alt + 'i' -> Go to info page
- Ctrl + alt + 'n' -> Reads all notices
- Ctrl + alt + 'l' -> Logs out
- Ctrl + alt + 'r' -> Goes to request page
- Ctrl + alt + '?' -> Says the help short cuts
The global keyHandler redirects the keyEvent to the corresponding page's keyHandler which acts accordingly in context.
Profile
The profile class deals with both a user's profile and a user's friend's profile. The profile page consists of a number of different tabs; however, the only two tabs that the script is focused on are the Wall tab and the Info tab. Each of these are a subclass of the profile class. Once the profile page is loaded, the profile pageOnLoad() function is called, which redirects to the subclasses pageOnLoad() function. That is, when the user goes to the wall page on the profile page, the browser redirects to the wall's pageOnLoad() function. The profile class also has a keyEventHandler so that the user can use shortcuts to jump between the wall and info pages.
Wall
Will do later...
Info
When the info class's pageOnLoad() function is called, the script begins reading all of the user's info. This is a special function, because it is extremely dynamic. The script only reads what is available on the user's information page. For example, if a user doesn't display his/her birthday, the script will simply skip that field, and proceed to the next available field.
Search
When the user reaches the search result page, the script will notify the user that he or she is at the search result page. The user can use the DOWN or 'n' key to move downward and UP or 'p' key to move upward. When the user reaches the end of the page, he can continue to use the DOWN key or 'n' key. The script will automatically move to the next search result on the next page.
Inbox
When the user goes to the inbox, the user can use the following shortcuts to toggle his/her messages:
- Esc + 'a' toggles up the inbox list
- Esc + 'u' toggles down the inbox list
Once a user has selected a message, he/she can select it using the "Enter" key. Once that message is selected, there are different shortcuts:
- Esc + 'r' reads the converation
- Esc + 'l' reads the last message
- Esc + 'c' composes a message
Request
Once the user reaches the request page, he/she can use the following hot keys:
- 'f' -> hear friends invitations
- 'g' -> hear group invitations
- 'e' -> hear event invitations
- 'UP' -> scroll to previous request
- 'DOWN' -> scroll to next request
If user has reached the end of the list of a certain type of request, pushing DOWN scrolls back to the first request.
Schedule
Saturday, January 31, 2009
8:30 - 9:00 Sign-in and Breakfast
9:00 - 9:30 Introductory presentation
9:30 - 11:00 Introduction to AxsJax/xPather/DOM/Javascript/Greasemonkey
11:00 - 12:00 Self experimentation on greasemonkey and javascript
12:00 - 12:30 Lunch
12:30 - 1:30 Work on jQuery and xPather
1:30 - 4:00 Self experimentation on javascript
4:00 - 4:30 Writing CNR files or working on jQuery
4:30 - 6:00 Learning javascript
6:00 - 6:30 Dinner
6:30 - 10:00 Write functions
Sunday, February 1, 2009
8:30 - 9:00 Breakfast
9:00 - 12:00 Write different features
12:00 - 12:30 Lunch
12:30 - 1:30 Documentation
1:30 - 3:30 Adding more features
3:30 - 5:00 Merging Code
5:00 - 6:00 Presentation/ finalization
6:00 - 6:30 Practicing presentation
