Guiding Blocks

The layout of this site is divided into five areas: top portion area (header), bottom portion area (footer), left portion area, right portion area and the body content area. There is a guiding block in front of each area consists of two columns of three dots. The guiding blocks have also been merged into the layout design of the site to improve the look and feel of the site. This design provides the site with easy access and to set focus on each guiding block at the front of each area when viewed by a smaller resolution or screen access software.

Access Keys

This site contains two types of access keys to help people with disability access our site easily. The access key helps user quickly go to a specific section on the page. The shortcut linking key allows user to jump to a frequently use page or to complete a specific task.

Skip Large Content Area

All sites and pages contain menus, lists, forms, and tables with content, we have set up links and stopping point at each content area for users to read the headers quickly. User can stop at any time at a certain area to browse through information and reduce the time wasting on browsing through all content.

Removed Table Layout Design

Removing table layout design is the hardest part of building a web accessible site. The cost of making a site accessible is extremely high without using tables or div tags to control the layout in order to comply with different browser standards and layout resize ability. This is the main reason why there is no site to be found in Taiwan that completed with extremely high standard of web accessibility. This site has completely removed table layout design and all code can be read correctly without any errors.

High Compatibility with Different Browsers

Every browser decodes HTML and CSS code differently with various results in displaying a site. This site was tested in five different browsers as a basic requirement for Web Accessibility design and similar results were displayed in each browser. The five browsers we used for testing are Opera, Firefox, Mozilla, Netscape 6+, and IE 5+. The displaying results were not only shown similar in each browser but also the printing results were nearly perfect and we have successfully completed these on our site.

Layout Resize Ability

Window resize issue is one of the biggest problems in web design. Background image cannot be cut off; image needs to be resized automatically within the limited layout area; properly divide layout image for automatically overlapping when necessary; automatically adjust layout in case of shorter or longer sentences and lists to keep the layout clean with better visual display.

Visual and Non-Visual Form Design

Forms with proper preset values inserted in fields not only can provide user with guidance on entering data but can also cause faulty data submission to the server if user did not enter any data and preset values were not cleared before submission. If programs were not modified on the server side, the result will be incorrect. Preset values on forms on our site are cleared automatically before submission to avoid sending preset values to the server and also to avoid modifying and maintaining code on the server. Proper label tags are used in form fields to provide guidance to user in entering information.

Layout Design for Printing and Maintaining

The use of div tag to complete an accessible web brings out many technical problems but we have resolve every layout design issue for printing and site maintaining for users and programmers to retrieve information as required by displaying the perfect layout and resolve any disordered layout. There are two options for printing where one is to print after removing page layout and this is the default printing which is also what most users need and it saves 30% of paper usage. Another printing option is to print with page layout including page header, footer, left and right menu area and only a few people use this printing option. We have removed the obstacle for printing.

Target Media: Screen, Print and Aural

The Media Accessibility target of this site is focusing on screen, print and aural, not others. Screen must have the resolution of 800 pixels in width for automatically adjustment in HTML code on page layout and avoid content on the right showing on the bottom left area due to adjustment. Although this is one limitation of the site, the automatically layout adjustment can be used on handheld devices and other media in the future. This feature also complies with W3C's standard on HTML, CSS and WCAG and is an advantage over other websites that use table tags. Same reason applies to printing where it requires a minimum of A4 papers. Requirements for browsing with screen reader system have also been taken into consideration when building this site. Information hidden in the codes that are not visible to user is used to help user read and operate by using the screen reader system.