Wednesday, May 4, 2011

"Incompatible Browser" on FAFSA

I visited the FAFSA website recently (today, actually) and was greeted with the following message on Firefox:

"We have redesigned FAFSA on The Web with you in mind! All your FAFSA options can be accessed by clicking Start Here.

Click Close to continue.

We hope you enjoy the new look and features!"

Naturally, I clicked Close to continue, then clicked Start Here to access all my FAFSA options. Immediately I was greeted by an Incompatible Browser error (https://fafsa.ed.gov/FAFSA/app/errors?page=incompatibleBrowser) from the website. The error page does not actually take any action for a browser, it just prints out some information. In case that link dies, the gist of it is this:

Supported Mozilla Firefox Browsers:
Windows XP - Mozilla Firefox 3.5.x and 3.6.x
Windows Vista - Mozilla Firefox 3.5.x and 3.6.x
Windows 7 - Mozilla Firefox 3.5.x and 3.6.x
Macintosh Operating System 10.5 - Mozilla Firefox 3.5.x and 3.6.x
Macintosh Operating System 10.4 - Mozilla Firefox 3.6 


There's the problem: Firefox 3.6.16 on Linux is not supported. Supported by what, you might ask? One answer is that a script or application calling itself BrowserDetectService doesn't like it (from the same error page):

[Mozilla/5.0 (X11; U; Linux x86_64; en-US; rv:1.9.2.16) Gecko/20110322 Fedora/3.6.16-1.fc14 Firefox/3.6.16]
[BrowserDetectService:OS[UNKNOWN] browser[FIREFOX] browser version[FIREFOX3_6] AppName[FAFSA1112] detection status [BLOCKED]]

The first line is the User Agent (UA) string as sent by my browser. The second line is the output from this erroneous BrowserDetectService. I shudder to think that this may be an enterprise web service, making it accessible to Education Department applications other than just FAFSA. Not one to give up easily, I changed Firefox's UA string and logged on. Then, Just to be a smartass, I changed the UA on Seamonkey and successfully navigated the site with that. I went to the same error page and got the following:


[Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1)]
[BrowserDetectService:OS[WIN7] browser[IE] browser version[IE8] AppName[FAFSA1112] detection status [SUPPORTED]]


Note the detection status of "SUPPORTED" vs. "BLOCKED" in the BrowserDetectService line; the crucial difference is the operating system. So clearly it is supported by my browser, since I was able to use the site. However, I should not have to perform a hack like that to access a public government website. Artificial barriers like this one are deceptive and discourage the adoption of free/OSS software by creating a false perception of incompatibility.

At the end of the error page we see this little irony:

*Compliant Web Browser - Standard
For the past few years, every major Web browser released has been built around a set of open standards designated by the World Wide Web Consortium, a non-profit organization charged with overseeing the continuing development of the Web. What this means is that one piece of code now looks the same on every modern browser, whether it be Internet Explorer, Firefox, Safari, Opera, or others. The majority of our users are using these modern browsers, so we can present content which is optimized for them.


That's kind of the point, isn't it? Firefox is Firefox, regardless of the operating system. So are Opera, and Safari, and Chrome. Yes, there are slight rendering differences between platforms. A lot of these can probably be attributed to often incorrect assumptions made by many of us in the tech world. Installed fonts (I don't have a font named "Arial"), screen resolution, browser settings and many other factors can affect spacing, shift elements and break functionality of even the most carefully planned layout or application.

Let's talk standards then, since that is their defense. First let's check compliance with the W3C XHTML standard: http://validator.w3.org/check?verbose=1&uri=https%3A%2F%2Ffafsa.ed.gov%2F (11 errors in the markup). Next, the W3C CSS2 standard: http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=https%3A%2F%2Ffafsa.ed.gov%2F (18 errors in the stylesheets). Clearly, standards compliance is a flimsy excuse.

So I've described the problem; what about the solution? Don't use UA detection, for one thing. Correct browser detection boils down to coding with two simple principles in mind:

1. Target the standards and not particular browsers
2. Use feature oriented object detection

These recommendations are repeated all over the web, but probably most succinctly at https://developer.mozilla.org/en/Browser_Detection_and_Cross_Browser_Support. Many  methods exist to address these problems and gracefully degrade the application. Javascript libraries such as jQuery point the way by encouraging detection of general features which are necessary for proper application support.

In fairness, I must note that 11 markup errors and 18 CSS errors on the FAFSA site is actually an admirable level of compliance, as you will see if you check this very blog and many, many other sites. Nice job, Google!

See also: http://jeffhoogland.blogspot.com/2011/03/no-fafsa-for-foss-users.html

4 comments:

  1. FYI I wrote this up today.


    Department of Education
    Office of Educational Technology

    RE: FAFSA Website Affects Thousands of Americans

    Dear Mrs. Laura G. Johns;

    I am writing to express extreme concern with the state of The Free Application for Federal Student Aid (FAFSA) website. [www.fafsa.ed.gov/] The mission statement for FAFSA states “Welcome to the Federal Student Aid Gateway—the source for free information, guidance and tools for federal student assistance...” The website does nothing but aid in the stress of students who have to scramble to find a computer old enough to support the portal.

    The portal for filling for FAFSA assistance online is severely outdated. It is almost unusable for today’s internet browsers, on both Microsoft and Mac OS platforms. Once you click on the call to action which is supposed to take you through the portal, the website tells you your Browser is incompatible. This may not seem like a big deal, but let me give you an example of the browser support this website is requiring:

    For Mozilla Firefox (used by 39.7% of internet users [ http://www.w3schools.com/browsers/browsers_stats.asp ])
    FAFSA requires: Mozilla Firefox 3.6
    The last Browser release: Mozilla Firefox 7.0.1

    For Chrome (used by 30.5 % of internet users [ http://www.w3schools.com/browsers/browsers_stats.asp ])
    FAFSA requires: Chrome version 8.0.x Windows, and 6.0x for Macintosh
    The last Chrome Browser release: Both Mac and Windows 14.0

    You can find the same issues with Chrome, Safari, Opera, and AOL. You can find frantic students and parents all over the web searching for help in forums and blogs. I hope you can agree with me that something as important, stressful and time sensitive as filling for Federal Student Aid deserves a website that will work. At the end of this email, I have linked a few examples of frantic students and parents trying to file unsuccessfully via the FAFSA portal. I hope you will take action to update, revise and rework www.fafsa.ed.gov to become a helpful resource for the public rather than an additional burden to overcome in the quest of higher education.

    Sincerely,

    Lindsay J. Grow

    ReplyDelete
  2. Experiencing the same issues. Did you ever get a reply?

    ReplyDelete
  3. No replies as of yet. Maybe I'll find out who is in charge of the site, then contact their supervisor, and so on up the chain. Sometimes the only way to get a response from a bureaucracy is to piss off someone's boss.

    ReplyDelete
  4. As of 09/04/2012, the site no longer refuses access because of an "Incompatible Browser." However, they are still using the same idiotic detection method and are not even keeping things updated with the latest browser versions on Windows:


    [Mozilla/5.0 (Windows NT 6.1; WOW64; rv:14.0) Gecko/20100101 Firefox/14.0.1]
    [BrowserDetectService:OS[Windows NT 6.1] browser[Firefox] browser version[14.0.1] AppName[FAFSA1213] detection status [UNSUPPORTED]]

    ReplyDelete