Search Menu
Language Menu
Mobile Menu
Webforall e-Bulletin Banner

21 June 2016

Article: Mr. Kent Tran, ICT Teacher of Holy Family Canossian College


Opportunities and Missions

Nowadays, people enjoy getting and sharing information on the Internet through the new media. The multimedia elements on the World Wide Web are fascinating and attractive to most users in the world. From the web designers’ perspectives, they would like to make the web sites look beautiful and attractive; from the engineers' point of views, they would like to make the web site up and running without down time; for the bosses' concerns, they want their web sites to be attention-seeking. All of the above people influence and drive the development of the World Wide Web, but they rarely pay attention to the authentic and real main purpose of development of the World Wide Web - "Delivery of Information to Audience All over the World".

A fancy web page can attract people to like; an always up web server can increase high availability of information; and an attention-seeking web site can gather potential customers, but so what? Would the potential customers become a customer without knowing the concrete information about the products? Could an uninterrupted web server push the information to readers proactively? Would there be any useful messages delivered through a fancy web site besides artistic appreciation? And finally, could the information be successfully reached ALL audience, including the groups of people who have difficulties in accessing the information?

A successful web site can deliver messages to as many people as it can. The most successful web site can deliver information to ALL people, despite of any disabilities.

The school's motto, "United in Love", reminds us to be inclusive. The Foundress of our school's sponsoring body, Saint Magdalene of Canossa, has had the vision of being the Servants of the Poor. With the light of faith in God's Love, we would like to create a Web for ALL, including the minorities who have difficulties in getting information, and therefore removing Digital Divide all over the world.

As an ICT teacher as well as a Canossian Educator, I would like to lead a group of students to learn the techniques of how to implement a Truly Accessible Web Site, without any expense on attractiveness to the majorities, while the information can be effectively delivered to Everyone. Through the Web Accessibility Recognition Scheme, students can finally experience hands on practice to build an accessible web site with all conceptual knowledge applied technically, which was likely impossible in the past.

Development Team

To gain more experience on building an accessible web site, we formed our team with about twenty Form 4 and two Form 5 students who are studying ICT on the “Web Development and Multimedia Production” stream. Through this project, I would like to let my students learn through experience and exploration.

In the early stage of the development, the team was divided into six groups and each group was responsible for a preliminary web site for a unique subject. Techniques like segregated formatting in linked Cascading Style Sheets (CSS) files and the use of the linked web fonts were taught and used for the “sub-problems”. Meanwhile, the interactively programmed dynamic web page on simple mathematics programs were taught and therefore the accessibility to an interactive interface was implemented too.

Since the preliminary developments might not be well-written to be publicised, all the under development web sites were put in the school’s private network until the final integration with one consistent appearance in the public web server.

In the past, students who studied ICT got the concept of Web Accessibility from the textbook only without any experience of implementation of a truly accessible web site. After hands-on practice, the current cohort of students studying ICT are much more motivated, confident and eager to build every web site accessible. In the past, girls made eye-catching web sites only. Now, they can make information accessible and eye-catching websites.

There is no easy way to build an accessible web site, as the technologies and standards are changing. In the past 15 years, Hypertext Markup Language (HTML) 4 dominated the entire web development market and nearly no reference books in relation to web development mentioned about web accessibility. Even ARIA were not supported in the most of the popular web browsers. Until CSS2/3 and HTML5 have become prevalent and been supported on the web browser giants in recent years, we started to learn all the new standard languages, including the new semantic tags in HTML5, and transfer the knowledge to students in order to guide them to learn efficiently in such a short period of time. To conclude, the results were very encouraging for teachers and students as well as the school.

  1. Learning tips
    1. Be patient and learn from scratch:
      • Visit Webforall portal –, which provides useful materials such as handbooks, illustration examples on web accessibility.
      • Explore the impact of accessibility for people with disabilities and the benefits for everyone through web accessibility perspectives videos -
    2. Be open-minded and adopt new standards.
    3. Be united and collaborate inclusively.
    4. Keep visit to W3C WCAG website -, which provides technical tips and examples, which help you to build up an accessible website
  2. Technical tricks to enhance web accessibility:
    1. Use of semantic elements in HTML5 to organise and maintain the information structures.
      (WCAG 2.0 reference:
    2. Use of CSS to segregate content and visual formats.
      (WCAG 2.0 reference:


      Typical view with CSS formats linked.

      The info-rich homepage view without formats.

      Typical view with CSS formats linked. The info-rich homepage view without formats.


    3. Adoption of responsive web design to make the web pages shown adaptively to ANY desktop, mobile and special designed devices of ANY screen sizes in different styles of operation.


      monitor view

      mobile view

      Presentation of responsive website will be adjusted accordingly on multiple devices.

    4. Develop a website that is accessible from a mobile device.
      (WCAG 2.0 reference: