Accessibility on the Web

Introduction

Why is the web so popular? Well, anyone connected to the web has access to all kinds of information in a relatively short time. Most information is available to everyone and anyone willing to search for it. Now imagine if you are searching for a piece of information and the information is inaccessible due to the document being styled and structured incorrectly. For example having certain colors assigned to the font and background may result in the content being unreadable for some people, people who suffer from color blindness. People who go through such an event will experience frustration and rightly so.


Being a web designer for several years I was quite aware of web accessibility and always tried to use appropriate colors and structure, but during the presentation I got a renewed perspective on what some people go through when browsing the web. Later in this post we will go through some techniques used to make a web site more accessible.


A correct definition of web accessibility would be the design and development of a web site were all users have equal access to information and functionality. 

Different disabilities affected by web accessibility

When talking about accessibility we must put into perspective the different types of disabilities that affect web accessibility when designing a web site. Trying to categories different disabilities is not that simple as different people might have multiple disabilities and the severity of might vary for example with age which all affect web accessibility. This is a generic list of some disabilities accompanied with some examples of each.

• Visual
• blindness
• color blindness
• low vision
• Hearing impairment
• deafness
• hard of hearing
• hearing impairment
• Motor / Mobility
• tremors
• muscle slowness
• loss of fine muscle control
• Seizures
• Photo epileptic
• Cognitive / Intellectual
• learning disabilities
• development disabilities

Technologies assistive in web accessibility

By having a greater understanding of the tools and technology used by people with disabilities, we can then understand how to design web content as to make it easier to be interpreted by these tools. Assistive technologies are tools which facilitate tasks for people with disabilities, tasks which otherwise cannot be executed or be done with difficulty. These technologies range from web browser plugins to specially designed keyboards or buttons. This is a list of some of the assistive technologies used :

• Keyboards and other input alternatives
  This technology mimics a function produced by a keystroke. These specially designed keyboards vary from the conventional keyboard by having larger keys and key guards which only allow for one key pressing at a time. This type of assistive technology is used by people with dexterity and physical impairment issues.

A Typical Switch

• Braille and refreshable braille
  Braille is a system which uses dots to represent characters. An 8-Dot ASCII version of the braille was created. This type of assistive technology is used by people with visual related disabilities.

Refreshable braille

• Scanning Software
  A screen reader highlights the choices available in a given web page. This enables people with cognitive or physical disabilities to navigate through the content by pressing on a switch like the one shown above.
  
• Screen Readers
  This type of assistive technology reads the content to the user by using speech synthesis for audio output. On the web screen readers use the document structure as an input for the software. This tool highlights the importance of well structured content in an HTML document since a badly constructed document will be result in the screen reader outputting confusing information. This type of software is used by people who are blind or dyslexic. An example of a screen reader is JAWS.
  

Designing an accessible web site

Now that we have a general idea of what web accessibility means and the types of disabilities that are affected by web accessibility we can go through some guidelines which help improve our site to be more accessible. Each disability or group of disabilities required a set of guidelines, guidelines which often overlap with each other due to similar characteristics. 

• Browsing technologies
  People suffering from some kind of disability tend to stick to a browser that works well for them. The version of the browser might not even be the latest version or even text based like Lynx. When designing a web site one must also keep in mind to check that the web site works the same not only on different browsers but also on different versions of the browser. This can be often achieved by using alternative methods that can be captured by older versions of these browsers. For example :
• Include ALT text with every image that is displayed. The text has to be meaningful and descriptive in such a way that people using screen readers can picture the image you are displaying.
• Use the
• Provide an HTML equivalent for any flash embedded on the page. Even though there are screen readers that attach and synthesize flash one should make sure to provide the alternative.

• Form design
  Well designed forms is key in web accessibility. If fields are incorrectly positioned or validation prompts are displayed at the top or bottom of a screen then people have a harder time filling out the form.
  
• Page Content
  When going through a page we don't generally read the whole page as that would take a lot of time to get to find specific information. The common trend is to skim through a page and read the section or paragraph which we are searching for. Non-Keyboard or visually impaired users do the same by using a screen reader which highlights headings an bold text. If the content is not properly marked then the impaired user would have to listen to the whole content to find a piece of information.
  
• Page Structure
  The page structure must be organised and easy to navigate. Also must maintain its integrity when the text size is enlarged due to people with low vision.
  

Conclusion

To conclude I must say that this presentation was very informative and as already mentioned gave me a totally new perspective on how to approach web design. One must also keep in mind that when publishing content on the web that content can be read by a wide variety of people, people who have the right to read your content whatever disability they might have. Accessibility has been gathering a lot of momentum in recent years and a lot of regulations and legislation have been implemented all around the world to make sure that people with disabilities have the same opportunities as able people.

XML Practice

Introduction


The term XML stands for eXtensible Markup language but this three letter acronym fails to reveal the real potential behind XML. Those people having a good grasp on what XML is know of the importance and potential of XML but on the other hand XML can be quite confusing to people just starting out since XML is a subject that is hard to pin down due to the large number of technologies and specifications involved. For starters XML is used in a multitude of technological areas and web development is one of them. For example XML can be used from configuration files for an application  to facilitating distributed computing over the internet (Microsoft .NET Remoting). 


It's a common misconception to consider XML as a markup language this is due to the fact that  XML defines or specfies a markup language such as XHTML ,XSLT ,XPATH, SOAP and RSS. All the aforementioned markup languages were defined using XML and inherit all the properties of an XML markup language such as that of being well formed ,structured and correct. XML has an important role in interconnecting applications especially applications working on different platforms. Most of the large software corporations such as Microsoft and Sun have adopted and incorporated XML in their systems and retail software due to XML's usefulness in interconnecting applications and to XML's independence from the medium.  


XML's syntax is quite easy to understand and the most basic of XML documents has to have the following terms:

• XML declaration <?xml version="1.0" ?>
• open root element  e.g. <student>
• close root element e.g.  </student>

An XML document is composed of a number of nested elements each of which can have one or more attributes. Attributes are optional and since an attribute is written on the same line as the element declaration the parsed xml stream is slightly smaller in size. XML must be well formed which means that the syntax forming the document must conform to a number of basic rules. 

• An element always has to be closed and if that element neither contains an element or data then that element needs to be closed in the opening tag such as :

• <br />
• <input type="text" id="btnSubmit" />
• <student />

• An element can never be nested in a different nesting level.

Apart from these  rules which are part of every XML document there are other ways in which rules can be added  to an XML document, primarily this validates the document against the schema e.g. XHTML. The schema defines the following constructs in an XML type document.

• Define which elements may appear
• Element Attributes
• Constraint (Optional or Required)

The schema can be created using DTD (Data Type Definition) Schema or XML (XSD) Schema. Later in this post we will go through the creation and application of schema on an XML document.

Task Overview

The exercise for this week relate to XML are these were the tasks assigned to get better acquainted with the subject:

• Create an XML file to keep the following data about a student project:
• student name, student ID, project title, project category, abstract, date submitted
• Use element and attributes to define the student project
• Validate the XML using a W3C Validator
• Create a DTD Schema for the XML file and validate the XML against the schema using W3C DTD Validator

Create and validate XML file using both elements and attributes

There are a lot of xml editors out there which can help with the development of XML since writing an XML document is a daunting task prone to errors. I find that Altova XMLSpy to be one of my personal favorite for a number of reasons like the XML grid with shows a tabular structure of the XML and the validate and well-formedness function. 

Altova XML Spy Grid View

The first element in the file represents the root node of the document which in this case is <projects>. The decision to make projects as the root node as opposed to students is to allow for multiple students working on the same project and the same student working on more than one project (many to many relationship).  In the projects node a number of projects can be found which are denoted by the <project> element. The project element is assigned the project title attribute. In each project a student node is set which will contain the students pertaining to the project using the student element. The student elements in the student parent node contain the student ID attribute and the student name element. The elements remaining are the project category, abstract and date submitted which are all placed within the project element. The final markup without any data will look like this in an XML editor:

XML Representing Student Project

Validating the xml document at this stage will involve checking the well-formedness and correctness of the document. The character data will not be checked unless the data is placed outside the element.

Validating XML Document

Create a DTD Schema for the XML file and validate against the DTD Schema


 A DTD schema is primarily a list of elements and attributes that define the document using the schema. A DTD can be written inside the XML document or referenced externally.

Referencing an external DTD from an XML document

The elements defined are the elements making up the XML document such as projects which in turn contain multiple of the project element. The element is denoted by the !ELEMENT and to denote multiple project element the + syntax is used. 

Any element which contain one or more elements nested inside them are all listed within brackets. If only text is required to be listed in an element #PCDATA is stated. Defining an attribute is slightly different and if the attribute is required #REQUIRED is stated.

DTD for the Student Project XML document

Validating the XML document with the DTD triggers a validation procedure in which the document being validated is matched against the rules set in the schema.  Essentially the validator is an XML parser which on encountering an error will access the parseError object to send the appropriate message. 

Validating XML against DTD

Conclusion


Throughout this post we focused on the creation of an XML document, it's rules and the use of a DTD schemas to apply new rules. There are a vast number of XML based technologies which can be used for example XSL standing for eXtensible stylesheet languages which consists of 
XSLT, XPath and XSL-FO. Using these XML markup languages with what we discussed can create a segregated document in terms of Structure, style and data.

More Javascript - Animation

Introduction

Last week we discussed Javascript in some detail were we covered some basics, history, pros and cons, applicability on the web, frameworks etc. This week we will still be dealing and discussing Javascript but as opposed to last week were we covered a range of topics, we will be talking about a specific niche of Javascript which is Animation.

Backing up a few years animation on the web mainly involved roll-over effects, animated GIFs and image maps, these techniques are nowadays being replaced by almost entirely by CSS e.g using a:hover to style an anchor tag on hover. DHTML standing for Dynamic HTML is a term that groups a number of technologies mainly HTML, Javascript, CSS and DOM (Document Object Model), these technologies together enable developers to create animations among other things. Different browsers throughout the years have created proprietary syntax to facilitate animation like filter and revealTrans, most of this syntax is getting obsolete due to the lack of syntactical and technological compatibility between browsers.

Up until recently Javascript wasn’t that popular for animating web sites. Instead proprietary software such as Adobe (back then Macromedia) Flash and Swish were used. There are several reasons why such technology was used and mostly it all boils down to practicality (it is very difficult to create complex animations and maintaining them using Javascript).

Animation development using Javacript nowadays is becoming more popular with emerging frameworks such as jQuery. These frameworks facilitate animations, tweens, transitions and allow the developer to focus on the animation by using functions such as animate() without going into the nuts and bolts of animation.

The concept behind Javascript animation is relatively simple; the manipulation of elements and their attributes e.g.  Position and width over a period of time.

This is achieved at the lowest level by using either one of these functions;

• setTimeout()
• setInterval()

It’s good to know that setTimeout was introduced with Javascript 1.0 by Netscape which means that the ability to create animations using javascript has been with us for quite some time.  The difference between setTimeout and setInterval is that setTimeout only calls the function once while setInterval calls the function parameterised after the time set passes. 

Differentiate between setTimeout and setInterval

Task Overview

The task assigned for this week deals with the creation of an animation using Javascript. The task is further subdivided into sub tasks each of which incrementing on the latter sub task.

•          Implement animation using images.
•          Allow the user to speed up or slow down the animation.
•          Allow the user to “throw” an obstacle at the runner
•          Adding a custom feature

Before I dove in and starting working on the tasks I tried to create a mental image of the animation I wanted to create keeping in mind the tasks mentioned above. After contemplating on what to do I decided on the actor which in my case is a stick man running with a moving forest background and a wolf moving the opposite direction as an obstacle. This scenario involves three image animations all having separate timelines.

Implementation

Implement animation using images

Each of the image based animations described in the sub task were wrapped in a container using a div tag. This allows for better management and also the creation of more than one of the same actor by using DOM’s createElement function

The Actor

The images chosen to represent the actor animation were placed in a folder and each image was named using this format actor{0}.png. {0} is an integer reflecting the sequence of the frame within the animation. This technique facilitates caching of images when the web page is loading by looping up until a specific number. In this case the number of frames making up the animation is 5 so starting from 0 to 5. By caching images into an array that array can be accessed and manipulated throughout the web page.  This technique is used for the other image based animations throughout the tasks.

Filling array with images

Once the images are stacked in memory the algorithm responsible for changing the image source over a period of time is implemented. In this function I used setTimeout and passed a global variable representing the interval. With each recursive call the image source is changed to the indexed image within the loaded array by accessing the image element using DOM’s getElementById function.

Setting image element source to indexed array

The Background

To animate the background I searched for a static image of a forest. To create the effect of the actor running through the forest I created a number of png images whereby the image was shifted to the left by 10px with each image created. Since the image chosen was pretty large in size I decided to change the quality to reduce the file size to approx. 200 kb in size. Having large sized images in an animation degrades the performance of the animation.  A separate global variable was created to handle the interval for the background. This will allow for more granular control on the animation if need be.

The Obstacle

For an obstacle as already mentioned I chose to have a wolf running opposite to the actor’s animated movement. The same techniques for caching and animation were used and a separate global variable was created to handle the time interval between each frame.

Obstacle and actor image animations

Allow the user to speed up or slow down the animation

In the previous section it was mentioned that a separate global variable was set to handle the interval of each object. Changing the global interval variable changes the refresh rate of each animation taking place and two events triggered by buttons in the control panel were created. Within the event an argument with the amount of time to be either subtracted or added to the existing intervals was specified.

Attaching modifySpeed function to the onClick events

The function called will add or subtract the value passed to the global variables holding the interval time for each animation, resulting in a faster or slower animation. Since not all animations have the same number of frames, speed is relative to the number of images making up the animation.

Speed adjustment algorithm for the actor interval

Allow the user to throw an obstacle to the runner

To achieve this effect the following tasks had to be developed, some of which we already discussed and implemented.

•        Animated running actor
•        Animated running obstacle
•        Actor motion tween
•        Obstacle motion tween
•        Collision detection when the two objects meet

The first two items in this list were already in place as discussed in previous sections.  The term tween signifies the creation of movement between two points.

To achieve the actor motion tween a function was created which incrementally moves the actor container until the specified relative position is reached. The function makes use of the setTimeout function as to make the actor movement visible. Each event triggered by the user moves the actor by 50px and this distance is moved incrementally by 10px at the specified interval for a smoother transition. To achieve both left and right movement a variable specifing the direction was added as an argument and according to this value the movement was either negated when the user clicks left and set as positive when moved right.

Actor movement to the left

The left and right movement events were attached to two buttons and to the left and right arrow keys by using this snippet : document.onkeydown = actorMoveKeys. The actorMoveKeys event gets the event object by determining which event object is available (depends on the browser being used to view the web page). The event object contains information on the key that is being pressed by the user. The respective function is triggered (actorMove(“LEFT”), actorMove(“RIGHT”)). We will talk about the jump function later.

Actor Controls

The obstacle uses the same logic with the difference of being set to visibility:hidden up until the canvas area is reached. Also the obstacle only moves from right to left.

Changing obstacle visibility when entering canvas area

 Now we will be going through the collision detection algorithm Part 1. For the purpose of this section we will only be taking into consideration the x-axis collisions since for the time being the actor has no upward motion. The function checking for collisions is triggered whenever an obstacle animation is initiated. The algorithm has its separate global interval variable which allows for faster collision detection if need be.

The algorithm subtracts the actor offset width divided by two from the actor offset left to get the far left edge of the actor container. To get the actor far right edge the actor offset width is divided by two and added instead of subtracted. The same calculation is done on the obstacle and when that is done the far edges are compared to see if one of the edges is within the range of the edges of the other object. 

X-Axis collision detection

Actor and obstacle left and right offsets

When a collision occurs the function is stopped as only one collision is registered. Whenever a collision occurs points are reduced from a global variable and displayed in a div on top of the animation.

A typical x-axis collision decrementing points on collision

Adding a custom feature

As described in the previous section the collision algorithm only checks for x-axis collisions since the actor can only do left and right movements. So to include y-axis collisions the actor has to be able to do some upward movements like jump. The jump function can be triggered either by the jump button on the form or by the up arrow key. When the function is called the actor is moved upwards by incrementing pixels to the bottom attribute over a period of time until the allocated coordinate is reached. Once the y coordinate is reached the same function handles the subtraction of pixels from the bottom attribute until 

the actor reaches the ground.

Demonstration of the actor jump function

Once on top the actor image animation is stopped as to show the actor jumping. With this added functionality now we can check for y-axis collisions. To check for y-axis collisions the top offset of the actor is added to the width offset to get the bottom edge of the actor container. If the bottom edge is greater than the obstacle top edge then a y-axis collision is registered.

y-axis collision detection

Final result

When the actor jumps the obstacle and no x or y collision take place one point is added to the variable holding the points.

Conclusion

This web page can be found at the following URL http://www.gregdevelopment.com

Javascript Practice

Introduction

In the early Internet years web pages were lifeless and static. The implementation of Javascript in browsers in early 1996 gave the initial spark that would give life and dynamism to the internet web page. Today Javascript is ubiquitous in web pages thus knowledge of Javascript is imperative amongst web developers.  Javascript also known as ECMA Script was created by Netscape early 1996 and has been gathering momentum and popularity among web developers since.

Programming has been my passion for quite some time now. Throughout my academic studies and work experience I encountered a variety of programming / scripting languages but as a programmer I always preferred a programming language whose syntax resembled that of C or Java and since Javascript resembled that style I eagerly adopted the syntax.  From my experience as a Javascript developer I enjoyed the flexibility of having a weakly typed scripting language but also paid the price for it. Being an interpreted language Javascript inherits some advantages all interpreted languages get like portability and faster development. Throughout the years I managed to find a balance between both pros and cons of this scripting language.

Javascript like most web based technologies using the DOM implementation suffers from cross-browser incompatibilities; this is partly because at some point there was no DOM specification which engraved the rules for html elements manipulation

e.g.  window.addEventListener for browsers supporting DOM and window.attachEvent for IE.

The application area for Javascript is growing each day; this is all thanks to the libraries, APIs and frameworks like jQuery which are available to web developers. These libraries have empowered web developers and in my opinion made web development more exciting than ever before.

I am used to working on Javascript using “Textpad “ but nowadays various IDEs exist like Dreamweaver and  NetBeans which include mentioned frameworks and cut the effort needed to build a project. Other IDEs are also made available on the web like jsfiddle.net which has some very good features like “TidyUp” which reformats the code to be more readable and “JSLint” which check the code for syntactical errors.

Task Overview

This task assigned this week is a Loan Calculator. We were given html with Javascript and CSS code which gave us the functionality and presentation of the Loan Calculator, next I will be giving a summary of the tasks assigned this week. The objective of this task is to practice and make use of Javascript in the underlined tasks.

• Modify HTML and CSS to make the table element more presentable
• Modify the project to display the following information:
• Total number of payments
• Loan end date (assuming the loan starts today)
• Add a checkbox which reduces the interest rate by 10%
• Add new custom feature

Implementation

Starting off the first thing that came to my mind was to segregate html, css and javascript to separate files and link the files from the HTML via the <link> and <script> tag respectively, this way code is organised and cleaner.  

Modify HTML and CSS for better presentation

For better presentation I used CSS and restructured some of the HTML. I created two classes that target the table rows, one for the row header and one for the other rows.

Table Row Styling

 The button used to compute was also given a style one for when the button is hovered over and one for the remaining states of the button.

Mouse different state styles

After applying a style to header of the page, this was the end result.

HTML after styling

Modify the project to display the following information:

• Total number of payments
•  Loan end date (assuming loan starts today)

First I went through the Javascript code to analyse how the code works. Mainly events are attached with each element which received a user input like “Amount of Loan”. The event handling the calculate() function is onChange which is only triggered when the user changes the value in the control. To include the information above I went through the calculate() function and found that the payments were already being extrapolated and so I created a new row in the information section of the payment information and by using the Document Object Model function getElementById() I accessed the respective span inside the row and used innerHTML to fill the span with the payments variable. For completeness sake I also concatenated the “Payments” literal to give metric to the value.

Total number of payments logic

Getting the Loan end date required a little more thought so for better code management I created a function called GetLastPaymentDate() which given two arguments pStartDate and pMonth the function gives the last payment date by making use of the Javascript Date object. The value is then filled into the span the same way as the total number of payments.

Get Last Payment Date function

This is the end result of this task

Total number of payment / Loan End Date

Add a checkbox which reduces the interest rate by 10%

To include this functionality first the checkbox named discountChk was created and a function attached to the onChange event handler was added named ShowHideIntRateAfterDiscount().This sole purpose of this function was to either hide or display the row showing information about the interest rate after the discount has been applied. A second function validate() was added which did the actual calculation.

Discount checkbox and onChange functions

To calculate the discount first a conditional statement was inserted to ascertain the value of the discount after which the value is then subtracted from the interest value. By using a post conditional statement I always found that code is more elegant, but one must also be cautious when doing complex post conditional statements as they are often harder to debug.

Postconditional statement to set discount value

Since the discount is subtracted from the interest the monthly payment is changed accordingly through the remainder of the function.

Discount function in effect

This image shows the Payment Information line 7 showing the interest rate after the discount

Add new custom feature

Information number reordering

Since I added the remaining interest as a row inside the information section of the table when discount checkbox was unchecked the row was hidden and thus the numbers indexing the information were not contiguous.

Showing duplicate index when checking discount check box

To resolve this issue I created a new function which is called every time the discount checkbox is checked. This function goes through all the table rows using the DOM function getElementsByTagName , check class the name of the row and since I set the class name of the rows in the payment information section as “TableRow 2” the row will still inherit the style from “Table Row” but differentiate from the rows having “TableRow” as a class name thus selecting only rows from the payment information section. To complete the function the index number which I placed in a span is re arranged to be contiguous. This can be viewed in the image placed in the previous section.

Validators

To better guide the user in using the loan calculator I created a two small function for validation. A span was placed next to each control needing validation messages and gave the span a “validator” class name. Whenever the user triggers the calculate function the validation function checks for errors like required and invalid number. If an error is found then the second function goes through each control and from the control I get the adjacent span and fill it with the notification message

Validators in effect