Holiday Reminder: Keep your Web Best Practices sharp!

As we near the end of the year and bump up next to all the hustle and bustle of holiday shopping, professional golfer scandals, dealing with those crazy family members, and over-eating, we find ourselves being a little less focused at work.  This is a universal truth no matter how much you or your manager don’t want to admit it. 

I wanted to take an evening to remind you of all those great web principles that we tend to lose sight of as we get pre-occupied with our daily lives.  So who cares, right?  Well, a lot of people that you never met and likely will never meet.  The web is something that I’ve found many developers take for granted.  We forget how the fancy IDEs and RAD development tools can lead us towards lazy and often inconsiderate programming, no matter how unintentional it is.

If I can be allowed to stereotype based on my experiences, the typical web developer is focused on three things…

1. Does the site functionally meet the requirements?
   
2. Is it visually attractive? (or what I refer to it as the “good enough” approach)
   
3. Was it completed on time?

The BIG picture

We need to care about the people that utilize our web applications and resources.  As a human being, its hard to think about but everyday there are people who are born with or develop physical challenges that require us, as web developers, to provide accessible ways for them to utilize the web.  I can’t express to you how often I hear the statement, “It doesn’t matter, this screen is only accessed by our internal staff.”.   Believe it or not, internal staff is no different than external users in that regard and therefore everyone should be given the same considerations.  We shouldn’t have to be told to support this segment of our user base.  We should want to!

What is the right approach?

1. Be knowledgeable about accessible development (we will talk about some of these techniques down below)
   
2. Don’t forget the following rule… It takes longer to do things right than it does to do things wrong.  Include the extra time in your estimates and make sure your efforts are known and understood.  The typical user will likely not know the effort you put into this unless you inform them. 
   
3. Develop an implementation strategy and ensure your development team is on the same page.
   
4. Introduce accessibility test into your code reviews and QA testing
   
5. Maintain it.  As development staff changes and subsequent phases of the project are implemented, processes either become stronger and more disciplined or they break down.  Make sure you aren’t allowing it to break down.

Accessible Development Principles

1. Write well-formed markup.  Sloppy markup such as opening tags without closing tags may render fine in Internet Explorer but some screen reading software may not be as flexible preventing certain users from using your site.
   
   
2. Markup was designed with a purpose.  Use (X)HTML tags in they way they were specified.  This is especially important when developing HTML forms but should be applied to the entire page.  This is an example that I see a lot… 
   
   DO THIS
   <label for=”firstName”>First Name</label>
   <input type=”text” id=”firstName” name=”firstName” />
   
   NOT THIS
   <span>First Name</span>
   <input type=”text” id=”firstName” name=”firstName” />
   
   Another example …
   
   DO THIS (note: in real-world apps, don’t use inline styles when not necessary)
   <h1 style=”text-indent: –9999px; display: block; height: 100px; width: 200px; background: transparent url(logo.png) top left”>My Cool Website Title</h1>
   
   NOT THIS
   <img src=”logo.png” height=”100” width=”200” />
   
   There are many examples of misused markup usage beyond these two.  If you write HTML then know HTML.  Secondly, don’t focus on using tags because they render a certain way.  That is what CSS is for.  Remember, HTML is for structure and content definition and CSS is for presentation.  Keep them separate.
   
   
3. Take a stance against table based layouts.  This goes very closely with the second development principle listed but I think this is such a huge problem that it deserves its own bullet point.  Tables are meant to be used for tabular data not site presentation.  When used to layout a web page, it creates confusion among accessibility software and makes pages less functional across media types such as print, braille, and screen.
   
   
4. Provide tags such as caption or title and attributes such as alt and title when appropriate with verbose text.
   
   
5. Avoid using elements and text which assume visual context to understand.  This can be something such as a link that says “click here”.  When accessibility screen readers parse and read the contents of your page back to the user, it becomes quite obvious that there is no clear understanding of where “here” is.
   
   
6. Create pages that gracefully degrade without JavaScript enabled or provide alternate views that don’t contain client side programming.  Some accessibility tools aren’t able to process JavaScript thus making your application not usable.  This is a very good practice regardless of accessibility.
   
   
7. No surprises.  When users have partial vision related impairments, it isn’t easy to recognize things that may be hiding/showing or changing in subtle ways such as normal to italic font.  Also create common user interface elements for navigation menus, headings, links, and buttons.
   
   
8. Keep your designs minimalistic if possible.  This is very much a web 2.0 trend from a design perspective but it helps users identify content quickly and use the site much more effectively than one filled with excessive graphics or flashy content.
   
   
9. Use CSS rules for appropriate media types.  Did you know that there is a media type of “braille” for tactile output devices?  Print versions of your site are important as well.  Make sure your site is very easy to read and consistent in its printed form.
   
   
10. Describe your page and provide keywords about it.  Not only does this help with SEO to some degree but it also helps clarify the pages content to screens.
    
    
11. Make sure you use HTTP GET and POST appropriately.  Certain web technologies like ASP.NET are extremely POST heavy when not being disciplined about the intentions of actions on your site.  Choosing the wrong method could present usability challenges when trying to navigate back and forth.  We’ve all received the “Page has Expired” message before when trying to go back after a POST.  This is an important feature but also can be extremely frustrating when your POST action didn’t really do anything POST-worthy.  (note: If you aren’t familiar with when do use which method, do a quick Google search as there is a slew of material on the subject)

Wrapping Up

I really hope I helped put some perspective around developing web software with accessibility in mind.  It is something most developers and business stakeholders don’t fully appreciate until it directly affects them.  The point of this post is to really emphasize that it doesn’t have to directly affect you to make a difference.  It is really important to me as I enter this holiday season thinking about ways to help out my fellow man and as a developer, this is one way I know I can make people’s lives and the web a better place. 

I would love to hear other people’s techniques on accessibility and help make this post a great resource for people looking to improve their development techniques.  Happy Holidays!