TheAccessPond.com

Testing Style Sheets is the easy part, figuring how to do it can take a little more time.  I’ll do my best with this blog to keep things simple so you can help make your web based product accessible and show you how you can test it.  Cascading Style Sheets or CSS is a very common technique used in web page development.  With a single CSS, fonts, colors, layout, etc… can be defined saving time and energy in web page creation.  The purpose of our blog is to focus on accessibility issues for users ranging from mom and dad at home to the developers themselves.  Testing Style Sheets is probably less relevant to mom and dad and more focused on a web developer and the test staff to verify that by using CSS the web page is still accessible to those with disabilities.  

Fortune 500 companies and the kids at home that all create web pages do it differently, but there is no authority to make them do it right.  The closest we can get are regulations such as the federal governments Section 508 Subpart B, more specifically 1194.22 that regulate web-based intranet and internet information and applications, in use by the federal government.    

1194.22(d) is the Section 508 subpart that deals with Style Sheets and to summarize, it basically states that pages must be readable without requiring an associated style sheet.  To make it simpler it means that the same content and functionality must be present with style sheet support disabled in the web browser. 

For a web developer or tester what can be done to verify this?  This is somewhat dependent on the browser and version being used.  Internet Explorer and Firefox are probably the most common web browsers so I’ll address how to disable CSS in them.   

Disable CSS in Firefox

1. Select “View”
2. Choose “Page Style”
3. Select “No Style” 

Disable CSS in IE (IE 3.x and older)

1. Select “Edit”
2. Select “Preferences”
3. Choose “Web Browser”
4. Choose “Web Content”
5. Deselect “Show Style Sheets”
6. Select “OK” 

Disable CSS in IE (IE 5.x and newer)  ***This will be most cases***A quick snippet on this is that IE removed the ability to disable CSS in these versions.  The only option to disable this would be to do a simple registry edit that can be seen at http://support.microsoft.com/kb/183717. 

Having now disabled CSS in your browser you can see by opening a web page that it may appear very differently.  However for persons that cannot see the screen, its appearance is irrelevant and the page needs to function the same.  This also allows the use of screen readers such as JAWS to essentially read the page to the user properly, www.google.com is a very good and simple example of this. 

Sample Test Case:

1. Disable style sheet support in your browser.
2. Inspect web page visually and with an AT (Assistive Technology such as a screen reader) to be sure all relevant content is still available and functional.

Pass/Fail Criteria for Sample Test Case:

Pass:

1. All information on the webpage is readable both visually and with AT, and no content or functionality is lost when the style sheet support is unavailable. 

Fail:

1. Any content on the webpage is missing or unreadable via AT when the style sheet is turned off.

 The best and quickest way to test this page now is to try using a screen reader and/or keyboard only functionality to verify that all links, buttons, text fields, etc. still function properly as described above in the Sample Test Case section.

Accessibility is something that really should be built in to every web page and application being created.  It is simple to do and markets a company to a larger audience.  As a computer user, web surfer, IT professional, etc… I believe its one thing to tell people they should be doing something, it’s another to show them how to do it.

No Comments »