Related Links:
House of Representatives Website
"Recipient of 1st Disabled Friendly Website Award single-handedly designed by Ms. Dollie Villacorte, our co-participant in Tagaytay City seminar"
We patterned our screen re-solutions from it.
De La Salle University Website
"Mr. Rey Mendoza, another co-participant in the Tagaytay City Seminar" was one of its designers.
There, we patterned our accesskeys or keyboard shortcuts and accessibility instructions in order to become a standard.
ATRIEV Website
"Recipient of the 2nd Disabled Friendly Website Award designed by a good friend of mine, Ms. Lourdes Borgonia, another co-participant in the Tagaytay City Seminar"
This is a website purely designed by a blind person. This is an example of a 100% accessible site.
CynthiaSays Website
"A great Accessibility Validator Tool"
Every time we finish designing a site, we go to this site for evaluation. If the smiley icon frowns, it means it is not accessible. We check out their recommen-dations and immediately made changes.
W3C Validator Website
"A Web Standard Validator Tool"
Since our doctype is xthml strict 1.0, we make it a point to have every website validated by it. Even the CSS files can be validated. Errors that are not detected by Dreamweaver can appear on this evaluation tool.
WorldEnable Website
"Site of Manila Accessible ICT Design Recommen-dations"
This is a great resource on web accessibility agreed upon during the seminar held in the Philippines in 2003.
Vision Office Website
"Website of Mr. Leo Valdes"
This is another great resource where you can find a lot of information on accessibility as per United Nations recommen-dations and is designed by our Webmaster's Guru, Sir Leo.
Guild of Accessible Web Designers Website
"International Organization of Webmasters and Designers"
I would highly recommend this site to you. It packs a ton of interesting features and links on how to make your site truly accessible and standards compliant.
How We Redesigned our Website
Excerpt from Mr. Jojo Esposa’s Lecture during Webmasters’ Interface Seminar,
May 18, 2006 at Mango Park Hotel, Cebu City
Backgrounder about the Deaf
A deaf person obviously cannot hear so they rely much on their eyesight. They use their eyes both to see and to listen. They are very visual. Have you heard of a visual noise? Also, deafness is a hidden disability so people presume that a deaf person does not look like a disabled person. Have you heard of the famous Ms. Helen Keller who was both deaf and blind? When she was asked what will she choose, being deaf or being blind? She said its better to be blind because you are only separated with objects but being deaf means you are separated to people.
As we learned from the seminar in Tagaytay about the five considerations in designing accessible websites; Content, Aesthetics, Accessibility, Usability and Sustainability, the deaf mostly consider the aesthetics side, how to make the site beautiful, flashy and with animation. So a "deaf-friendly" site is multi-colored, flash enabled and graphic intensive. We defended our site because ours is catered only to deaf so we stick to that. Why do we need to change? So that’s how our website looked like before. But when we attended Sir Leo’s seminar, our perspective slowly changed. However, you cannot just change the website of your company overnight. It should be gradual. By the way, if you want to know more about deaf, their culture, and deaf institutions in the Philippines, visit our site. We have an extensive resource about them.
Headaches to Consider
What we did was a total overhaul. I remember Sir Leo said that the first time a person sees your site, he/she will say wow, nice, great site. But when he comes back again and sees the same slow graphics, he won’t visit the site again. They won’t return to your site because they won’t be getting any new information from it. That’s the cost of being an aesthetic website. What are the use of those pictures if they are not related to the site? When Ervin and I assessed the extent of changes that we need to do, we were very much overwhelmed. Why?
- Our culture will change. Not much aesthetics, more on content. Also, we cater to PWDs. Why not make a website that is accessible to PWD?
- We are web designers, not coders. Imagine all pictures with equivalent alt text and we cannot stick to just this size or that size, this font or that font. There are many things to consider.
- We need to accommodate everyone. Well, almost.
Consider the following:
- Old PC Models - I read in one of the articles about Microsoft, they have created a very toned down version of Windows XP, one that will run on old Pentium I units and shipped to Africa. In that continent, more than 70% of their PCs are still on the Jurassic ages. How can they access your website if you will put a warning at the bottom, "Best viewed using Windows XP on a Pentium IV PC"? You will be segregating the whole Africa.
- People with Low Vision - How about those who cannot read small letters? How will they read it if a font size is strictly 10px or 12px? It should be allowed to adjust.
- All Types of Screen Sizes - We often see the statement at the bottom, "Best viewed on a 1024 x 768 resolution". How about those who still have 800 x 600 monitor? Are we going to discriminate them? My laptop uses 1280 x 800 resolution. I saw the difference. The table width must adjust depending on the resolution. We need to equate the width in percentage (width=“100%”) and not width=“800” because that is limiting.
- Printer Friendly Version - How about those who are only interested in the printed form of your site without those banners, different colors and the navigation bars? They need just plain content printed in black and white.
- Visually Impaired - How about those who cannot see the pictures? We need to have an alternative link to explain to them fully.
- Mobility Impaired - How about those who cannot use the mouse? You should have a provision for those who don’t need to rely on mouse. Keyboard shortcuts must be used or so called accesskeys so that it’s easy to navigate.
- Access Without the Need of Other Programs - How about those websites that need to download files in order to access it like pdf using Adobe Acrobat, Macromedia shockwave to open animations or Sun Microsystem’s Java to open a java file? They are very restricting. How about MS Excel files? You need to have that program installed in your PC before you can open it.
- Runs on Any Web Browsers - Your website must not only work on Internet Explorer. It should also be seen in Firefox, Netscape and Opera. 75% of web users access using IE while 20% now use FireFox.
- Small File Sizes - Also the files must be in a very compressed format because if it’s more than 100kb, downloading will take a long time, limiting for those using only 56kbps modem.
- Web Design Consistency - Your website must be consistent all throughout. People might get confused thinking that they are on another web site if they see a different style on your other pages.
- Accessibility Statement - Whoa, what is that? Sitemap is fine because it is important but accessibility statement?
Our Solution
But you know, it was really worth the change. Just like a car, the engine overhaul made it run smoother and better. The website is trimmer and more fluid. It’s easier to create inside pages if your format is already set in place. Here is what we did:
- FIRST: We clearly defined the parts of the website. - Be it the header, top navigation bar, side navigation bar, bottom navigation links and of course the content, everything must be defined. That includes those dates and copyrights at the bottom. We designed following the defined format.
- SECOND: We switched from Microsoft FrontPage to Macromedia Dreamweaver. - Dreamweaver follows the web standards and easier to use unlike FrontPage that creates too many subfolders and files that you did not know where it is being used. You will only know its purpose once you deleted them. Dreamweaver is very helpful for the errors you make like missing partner tags table /table or b /b and will warn you that the command you used will not work properly. When you insert a graphic, a dialog box automatically appears letting you enter the alt text. In Frontpage, it inserts too many alien codes. One more reason that convinced us to switch was during the international skills competition in Web Page Designing in New Delhi, India with Ervin. The gold medal was bagged by India while the silver medals were received by Taiwan and China. All three competitors used Dreamweaver. Only Ervin who won the bronze medal, used FrontPage. Had he used Dreamweaver, he might end up bagging the gold.
- THIRD: We used Cascading Style Sheets (CSS) extensively. - The MCCID website used CSS very much and removed the tables. The design itself is a concept of using CSS to define the navigation bars and links. We did away with buttons, instead text decoration and even designing the images. Dreamweaver helped us a lot in designing CSS. It offers commands that you can use if you want to define an object say font-family or font-align.
- FOURTH: We clearly defined our accesskeys or keyboard shortcut links. - We assigned keyboard shortcuts for frequently used parts of the website. We even placed a special accesskey on top of the site for people to go directly to the contents they want. We used alt - number or letter to go directly to the navigation bars.
- FIFTH: We used both IE and FireFox browsers at the same time. - While doing the webpages, we opened the popular yet bug-ridden IE and the web standard compliant FireFox. That way we know what it looks like on either browsers.
- LASTLY: We copied what others did. - We relied on many sample websites that are accessible and copied what they did. I believe they would not get angry and sue us because what they want is to further influence others to make their sites accessible. Visit the Related Links at the side to view what sites we visited and (sigh) copied.
For those of you who already started creating accessible websites, I hope that despite the difficulties we encountered and the discouraging scenario I mentioned, still you will be convinced to change your websites especially to those of government agencies. Your sites are extremely important for the Persons with Disabilities because vital government services can be learned from your sites. I also hope that these workshops will continue so that many people will become more aware. Thank you to Sir Leo Valdes and NCWDP for this opportunity. To Christ be the glory.
Other Feature Stories