How We Can Improve the Accessibility of the Department of Science and Technology Website

When I was a kid, I used to watch this TV program called Sineskwela. It was a show focused on explaining the basic concepts of science to young viewers. I must admit I had a hell of a time watching that show. In between each segment of Sineskwela were ads that aim to raise the young viewers’ interest in science and technology.

I remember those ads were produced by our country’s Department of Science and Technology (DOST). Looking back, it was good to have seen how DOST makes an effort to promote science and technology to the future leaders of the Philippines.

Growing up, I learned much more about the department’s responsibilities and activities. And as such, I found it necessary to look at the accessibility of one of DOST’s main tools for promoting science and technology and advocating its vision—its official website.

Let us take a look at the accessibility of the website of the Philippines’ Department of Science and Technology,

Titles Describe the Page’s Main Content

This is the first commendable accessibility feature of the site. Descriptive titles are very important in making web pages accessible to persons with disabilities who use adaptive technology.

Here is an example. When I entered on the “Downloads” link, the site will display the “Downloads” page. Appropriately, the title of this page is “Downloads”. This helps users of adaptive technologies in quickly confirming that they are indeed in the Downloads page.

Although this concept is not included in the Philippine web accessibility recommendation checkpoints, I believe that all web developers should be encouraged to practice it. Furthermore, the importance of descriptive titles is discussed in the Web Content Accessibility Guidelines 2.0 (WCAG 2.0).

Here is what WCAG 2.0 states about page titles:

2.4.2: Page Titled (Level A)
Web pages have titles that describe topic or purpose. (Level A)

Certain Images have Text Equivalents

When images have text equivalents, persons who cannot see the images would be able to still perceive the purpose and content of the images. Text equivalents for images are generally provided in the source codes of the pages.

Here is an example. On the site’s homepage, there is an image link containing the OSIST logo. Although I wasn’t able to see the logo, I was able to know that it was indeed the OSIST logo, because the site’s developer took the time to provide a text equivalent for the said image.

The Philippine web accessibility checkpoints state the following about text equivalents for images:

Maturity Stage 1-3 Attach ALT (alternative) text to graphic images so that assistive computer technology such as screen readers can reach the content.

The “Home” Link is Present in All the Site’s Pages

This is clearly demonstrated by the DOST website. When all pages contain a link to the homepage, users can simply navigate to the site’s main page regardless of where they are in the site.

Here is what the Philippine web accessibility checkpoints say about the use of the “home” link:

Maturity Stage 2-3 All pages must provide a link back to the home page.

Certain Headings are Properly Marked Up

Blind persons normally use screen readers to access web pages. Screen readers provide shortcut keys to help users navigate from one element to another. Headings are a common example of these elements.

On the site’s homepage, there are several headings including “Announcements”, “Other Links”, and “Other Sections”. Since these headings were properly marked up, screen reader users can use the provided shortcut key to easily move from one heading to another.

I explain this concept in detail in my previous post “Accessible Metal”.

Certain Headings Still Need to be Properly Marked Up

Looking at the other pages, I saw that although the homepage has properly marked up headings, other areas of the site still have headings that weren’t correctly marked up.

Take the “Services” page, for instance. On the page’s main content, there is a heading that reads “Services”. Under this heading there are subheadings which include “ Domain Delegation”, “eLib”, and “eTRC-elibrary”. All of these headings were simply bolded to make them appear like headings. This in effect makes the page difficult to navigate for screen reader users.

Instead of making the text bold, the correct heading tags should be used in order to make the pages more accessible.

Pages Need a Mechanism to Bypass Repetitive Blocks of Content

All of the site’s pages have blocks of content which appear before the main content. These include links such as “home”, “links”, “Contact Us”, and “FAQs”. For persons who cannot use the mouse, it can become time-consuming to pass through this block of content everytime they go to a page just to reach the main contents.

To solve this problem, the pages need to have a mechanism to bypass repetitive blocks of content. The best mechanism for this is the “skip to main content” link. When the user activates this link, the focus will be taken directly to the page’s main content. This eliminates the need to pass through the blocks of content at the top of each page.

Here is what the Philippine accessibility checkpoints say about skip to main content links:

Maturity Stage 2-5 Provide a “Skip to Content” link in every page.

Text Links Need to be More Descriptive

On the site’s homepage, I noticed a “read more” link. The purpose of this link may be vague to persons who cannot see the page. One may even ask “Read more of what?”.

To make this link more understandable, additional information should be added to it. If the “read more” link is used to display the remaining paragraphs of an article, I believe it would be better to tell the user what article or post he would be reading more of, once he clicks on the said link.

Here is what the Philippine accessibility checkpoints say about text links:

Maturity Stage 1-2 Avoid using words such as “This” or “Click Here” in creating links. Use descriptive hyperlinks to support text browsers.

Issues in the Contact Us Form

Here are the things I did to test the accessibility of the site’s Contact Us form:

On my first attempt, I filled out all the fields except the email field. I Intentionally left the email field blank and Tried hitting the send button. Nothing happened. The page displayed no information to inform me about the possible error I’ve made.

On my second attempt, I filled out all the fields and hit the Send button. The page simply reloaded, and all fields were cleared. The Contact Us page doesn’t provide any obvious notification as to whether the message was sent or not.

In order to make the Contact Us form more accessible and understandable, the page should provide clear information about the errors made by the user, if there were any. Also, the page should clearly tell the user whether his message was successfully sent or not.

This important concept is not included in the Philippine accessibility checkpoints. It is, however, mentioned in WCAG 2.0:

3.3.1: Error Identification (Level A)
If an input error is automatically detected, the item that is in error is identified and the error is described to the user in text. (Level A)

Last Minor Correction

One final point to end this review. When we enter on the “links” link, we’ll land on the Executive Offices page. Here we’ll find links to the websites of other offices of the Philippine government.

The link to go to the DOST site reads “Department of Science of Technology [ DOST ]”. This link caused me to have a small amount of chuckles, but kidding aside, correcting this minor error can definitely add to the site’s understandability and overall accessibility.


Tags: , , , , ,

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: