Fail

Shame on you EPSN!

Ordered Lists with Forms for Accessibility?

I just came across some HTML this morning that had  FORM FIELDS inside of an Ordered List.

i.e.
<form action=”” method=”post”>
<ol>
     <li>
          <label for=”firstName”>First Name</label> <input id=”firstName” type=”text” />
    </li>

I have never seen this done and I wanted to see if anyone understood the methodology or if it served a true purpose towards Accessibility?

Is it compliant? 
Does it break any guidelines or priorities? 
Is it symantec? 
Is it Screen Reader Clutter?

P.s. I  know HTML and CSS junkies like this for formatting.

Do not disable outline!

Imagine having restricted or limited motor control and you need to use the keyboard to navigate your way around internet.  Now image that every web developer out there disabled the nice little outline feature that shows you what object you are focused on.  Links, Forms, Etc…

Outline Example

If you can’t see where you are on the page how you going to know where you are going?

Accessibility = Good SEO

I was reading a great post on www.seo-news.com and they had one paragraph that simply puts some truth to how Accessibility could be good for an ROI.

[Quote]

Accessibility And Standards
Site accessibility is an integral part of good website design, but it should also be considered an important factor in any SEO strategy. Using standards based code for your website will help to ensure that anybody that wishes to access and view your website will be able to do so. It will also mean that the spiders used by search engines will be able to access and index your pages effectively ensuring that you get the full credit for your site.

[Quote]

Read the whole thing at www.seo-news.com!

So many variables to consider with Accessibility

So with out getting into a huge post I just wanted to point out that having a website that works for people that use the mouse and or people that can only use the keyboard doesn’t mean it is accessible.  Keep in mind, for it to be truly accessible it needs to be perceivable, operable and understandable for visual, motor/mobility, auditory, and cognitive disabilities.

iPhone, G1 and Blackberry Dev = Good Accessibility

Most people are aware that the iPhone has pioneered the first true web browser that acts like the real deal.  JavaScript, CSS, Ajax, DHTML are no problem on the iPhone.  The other good news is that the G1 (Android) also has a web browser that is built off the same platform as Safari (WebKit) so all the goodies work  as well.

The Blackberry is another story.  A large present of Blackberry’s first of all come with StyleSheets, JavaScript and Background Images disabled.  So unless you are a geek like myself you are aware of this and you can mess around with the default settings.  Now I am no expert at Blackberry mobile web development but I have spent a good portion of this week trying to learn the in and outs of what you can and can’t do so make sure you do your homework.

The other day I mentioned that Hijax is the way to go when thinking about rich Internet experiences while considering  accessibility.  Well this is no different when developing for mobile phones.  The mobile prototype I built uses the very basic of HTML and CSS, most Blackberry’s do not support object oriented JavaScript so it made perfect sense to build the page in the most simplistic form and then adding heavy JavaScript and CSS to it after the DOM is loaded has allowed for a single page to degrade nicely for the Blackberry and then get significantly enhanced for more sophisticated phones.

What does this have to do with Accessibility.  Well two things.  The first thing is it really helps you think about the way you design and develop your website with all audiences in mind while minimizing the duplication of content and code.  The second thing is that most older screen readers and adaptive devices do not use the higher level of JavaScript.  So if you are considering building a site and you want to check if it is remotely accessible try it out on a Blackberry.

Happy coding :-)

Higher level of accessibility!

In my first post I mentioned that it was important for website professional to start thinking at a higher level and here is a perfect example.  I was following my twitter (http://www.twitter.com/chitownaccess) and a ton of the people that I follow posted this link to: View the slides “5 layers of web #accessibility” http://cli.gs/5layers.  After watching the first few slides I was starting to think that doesn’t anyone have anything that isn’t obvious to point out.  HTML, CSS, JavaScript, Display: none, etc… we all get it!  It wasn’t until 3/4 of the way through when I finally found a take away. HIJACK or as some front end folks refer to as Hijax!  Now that is the ticket.  Since Gmail reinvented and brought Ajax technology to the mainstream a few years back every company and front end developer is starting to use tool kits to increase the interaction, animation and lack of page refresh through Ajax technologies.  We all know that some of the older Screen Readers don’t use JavaScript and not everyone can afford the hefty price tags associated with upgrading so it is even more important to think about accessibility from the ground up rather than an after thought.  If you can build a site that is 100% accessible using the foundational element of HTML and then increase the level of creativity and interaction through CSS and JavaScript you will hit a home run for all audiences.  You may be asking yourself what is this Hijax?  Spend a few minutes reading this great presentation (http://domscripting.com/presentations/xtech2006/)  and you will fully understand that if you plan and do the implementation correctly your presentation layer will work for all audiences.  Trust me the extra time you put into using Hijax as your development methodology the more accessible, search engine friendly and just flat out awesome your site will be.

Follow

Get every new post delivered to your Inbox.