Accessibility Review of the Web Site of the President of the Philippines

I was visiting the web site of the current president of the Philippines, www.president.gov.ph. Although I was impressed by the information presented in the site, I found that it had several major accessibility issues. So after much consideration, I thought of writing up an accessibility review of this web site.

My Goals in this Accessibility Review

I am writing this review so that the site’s developers would hopefully realize the needs of the visitors of their site that have disabilities. Through this review, I also aim to inform everyone about the accessibility issues that still exist in many web sites. I also include recommendations and suggestions to improve the site’s issues.

The points below are only my opinions of the issues I have found. Other persons in the field of accessibility may have additional input regarding this web site.

Assistive Technologies and Documents used

I used a screen reader in browsing the pages of the president’s web site. A screen reader is a software that speaks the highlighted textual information displayed on the screen. Screen readers are used primarily by blind and visually impaired individuals as well as other persons with disabilities.

I referred to the Web Accessibility Design Recommendation Checkpoints in identifying the accessibility issues in the site. This document was produced by the Philippine Web Accessibility Group. The Web Accessibility Design Recommendation Checkpoints consist of guidelines to help Filipino web developers in making their online content accessible to persons with disabilities.

Text Equivalents for Images

The first thing I noticed is that the site has images that have no text equivalents. I verified this by checking the source codes of the pages and finding that the alt attribute was not used in most of the image (img) tags.

This is what the Philippine guidelines state about text equivalents for images. MS stands for Maturity Stage. Maturity stages represent the level of accessibility provided by a web site.

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

Skip to Content Links

The pages of the web site currently do not contain skip to content links. This is a link that when activated, sends the user’s focus to the page’s main content.

Skip to content links are necessary since there are blocks of text and links appearing before the main content of the pages. Also, skip to content links enable screen reader users and persons who cannot use the mouse to quickly move to the main content of the pages.

This is what the Philippine guidelines say about skip to content links:

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

Labels for Input Forms

All pages in the site contain a search option consisting of an edit field (text box) and a graphic link to initialize searching. The edit field does not have a visible label. So when screen reader users tab to this edit field, the screen reader would speak that it is an edit field, but no other information is provided.

If the edit field had a label indicating that it is used for searching, screen reader users would quickly understand its purpose. This will also benefit persons who have cognitive disabilities.

This is what the Philippine guidelines say about labels for input forms:

MS 2-8 Provide a LABEL text and ALT text on the input elements of your forms.

Other Accessibility Issues

These issues are not included in the web accessibility recommendations, but I believe that improving them would greatly enhance the browsing experience of persons with disabilities who use the web site.

Descriptive Titles

When I loaded the site’s home page and made the screen reader read the page’s title, it said “Office of the President of the Philippines”. I believe that it is a reasonable title for the site’s home page.

However, when I moved to the other pages such as “Latest News” and “Contact Us”, the titles were the same as that of the home page. The screen reader read the title “Office of the President of the Philippines”.

The title of a web page should clearly describe the main contents of the page. Persons who are blind and who use screen readers rely on the information displayed in the page titles to verify their location in the web site. If all pages in the site have the same title, it would become difficult for these users to quickly know which page they are in.

Taking the previous examples, the Latest News page should have a title such as “Latest News – Office of the President of the Philippines”. And the Contact Us page should have a title such as “Contact Us – Office of the President of the Philippines”.

Use of Headings

I also found that the pages do not have properly marked up headings. Headings help screen reader users navigate quickly to the main section of the page as well as its subsections. In addition, headings also make the pages look more organized and improve the site’s overall usability.

Take for instance the page about the President’s cabinet. At the top of the main content, there is a heading “The President’s Cabinet”, but it hasn’t been marked up with the correct tag. Ideally, this should be marked with a heading level 1.

Once headings have been marked up properly, screen reader users can press shortcut keys to go directly to the headings and the main content under them.

Use of Color in Conveying Information

 

Finally, the Contact form of the web site has the following statement: 
  
“To contact the President or his staff, use the form below. Items in red are required.” 

Below this statement, there is a set of text boxes where the user can enter his or her information. A number of the text boxes are marked in red to indicate
that they are required fields. For blind persons who use screen readers and colorblind people, it can be very difficult to identify which text boxes are marked in red. 

The best way to solve this issue is to mark the required fields with an asterisk and include this information in the instructions. After marking the required
fields with an asterisk, the above statement can be changed to: 

“To contact the President or his staff, use the form below. Items that are in red and are marked with an asterisk are required.” 

Advertisements

Tags: , , , , ,

16 Responses to “Accessibility Review of the Web Site of the President of the Philippines”

  1. Julius Charles Says:

    Before writing and publishing this blog post, I have sent a message to the President via the contact form in the web site. As of this moment, a response has yet to be received.

  2. Jojo Esposa Jr. Says:

    Wow! Thank you very much for the very informative and detailed evaluation of the president’s website. I just hope the site’s web developers would take heed of our call to “Information for All”!

    • Julius Charles Says:

      Mr. Jojo,

      Thanks for your comment. I will personally take action so that the site’s developers, and quite possibly, the president himself, would recognize our right to accessible information.

  3. Office of the President of the Philippines Website, Accessibility Unfriendly. « Unwritten Thoughts Says:

    […] Read Julius Charles blog entry regarding OP accessibility issues. 14.601033 120.976160 […]

  4. Arielle Says:

    Good review, especially on the contextual/semantic structure of the page(s). I have come across, and have partaken, in a few web accessibility-related discussions; but most of them make no mention of proper use of the title and heading elements.

    I’m curious though. If screen readers allow users to navigate through a page by the page’s headings, then wouldn’t “skip to” links be redundant? I mean, instead of having “skip to content”, “skip to navigation”, wouldn’t it be better to just use the same level headings for both the main article and the site navigation links?

    • Julius Charles Says:

      Arielle,

      Excellent question. Skip navigation links also benefit persons with motor disabilities who cannot use the mouse, as well as screen reader users. Headings are mainly beneficial to screen reader users, and headings also enhance the understandability of web content – helpful to persons with cognitive disabilities. So I think the use of these two elements (skip navigation links and headings) is ideal.

      • Arielle Says:

        Motor disabilities– that’s one thing I never thought could be helped by “skip to” links. Let’s see…

        On one hand, if the skip links are implemented as they normally are– on top of the page and allowed to scroll with the rest of the content– then perhaps, the links will not be as useful since the person will need to scroll up just like everybody else in order to use the links.

        On the other hand, if the skip links are set to not scroll with the rest of the page– i.e., via position:fixed– then maybe they will be useful to the person who has motor disabilities. But then, probably the same effort will be required of the person to reach the skip links if there are other focusable elements on the page, like more links and form controls.

        Perhaps motor disabilities can be more effectively addressed by better hardware than coding techniques?

  5. Tom Says:

    Great evaluation. Please keep us posted when you receive a response.

    • Julius Charles Says:

      Thanks Mr. Tom,
      I’ve written to them twice already. I have yet to receive any response from them.
      I’ll definitely keep everyone posted.

  6. Julius Charles Says:

    Arielle,
    skip to content links help persons with motor disabilities in terms of the repeating content of a web site. Generally, skip to content links are there to minimize the number of actions required in a page. Nevertheless, some actions such as scrolling will still be required.

  7. foobarph Says:

    hi julius! thanks for this post!

  8. What Did the Office of the President of the Philippines Say About My Accessibility Review? « The Accessibility Ally Says:

    […] Say About My Accessibility Review? By Julius Charles Around two weeks ago, I did an accessibility review of the web site of the president of the Philippines, http://www.president.gov.ph. From that time up to this day, I have written to the Office of the President […]

  9. Jay Jaboneta Says:

    Hi Julius,

    Thank you for this wonderful review. We will surely take note of this for the next phases of the President’s website. Be sure to check it out from time to time.

    We want to convey our apologies for not being able to put into consideration accessibility issues at the outset and I hope this will not prevent you from participating in the President and our government’s programs.

    Maraming salamat po.

    Jay Jaboneta

    • Julius Charles Says:

      Mr. Jay Jaboneta,

      Thank you so much for your response. We truly appreciate that you would consider the points we raised in the next phases of the President’s web site. We will certainly look forward to the accessibility-related changes your office would provide in the site.

      I and our other friends in the Philippine Web Accessibility Group (www.pwag.org) are ready, willing, and able to help you in any matters focused on the accessibility of the President’s web site. Once we have seen the changes, rest assured that we will be the first to promote the web site and your office’s efforts to support accessible information for all Filipinos.

      Maraming salamat po.

      Julius Charles Serrano

  10. Thanks and Cheers to the Office of the President of the Philippines « The Accessibility Ally Says:

    […] to the Office of the President of the Philippines By Julius Charles Last August, I wrote an accessibility review of the web site of the president of the Philippines. And yesterday I told you what the Office of the President said about my accessibility […]

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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: