Tutorial For Performing Manual Checks of Accessibility

A very practical tool used for evaluation of Websites, is a web browser called Opera.
Opera is a text browser that can be used to check whether your site contains certain accessibility features.


You can check whether or not the website you are evaluating has:
  • skip navigation link (which is a link that will bring you to the main content of the page)
  • alt-text for all images
  • data tables header tags
  • javascript
  • problems with colors (something is difficult to read, low contrast)
  • graphics that flicker (tha is preaty obvious)
  • alternative text only page
  • time response on a page (usually this is used on forms
  • does the page works without a style sheet.

    • Download and Open Opera

    1) Opera text browser could be downloaded at: http://www.opera.com/
    2) Open Opera by going to Start> Programs> Opera > Opera
    3) Type the address (URL) of your website and click on the “Go” button next to it. The webpage that you are evaluating should be displayed on the screen as it is shown in the the image example below. (figure 1)

    Screen shot of main page of Opera described in figure 1 below
    Figure 1: Screen shot of Opera site indicating in a circle the area where a URL should be included for evaluation.

    Now you can start doing manual checks of some accessibility features of a site.

    To check for a skip navigation link:

    1) Download and open Opera,
    2) Visually look for a skip navigation link. Either it will be visible or else they might be using an invisible image file (with extension gif). If link is not visual,
    3) Click once on the camera icon (as indicated with a circle in the image below, figure 2). A skip navigation link will be obvious to see if is there and if is labeled correctly as in the example below. But be aware that most Web sites will fail this check.


    Screen shot of main page of Opera described in figure 2 below
    Figure 2: Screenshot of a page looked in Opera, the second icon on the top left (e.g. a camera icon) is circled.

    4) By clicking on the camera icon, the page will change showing the invisible skip navigation link text and content behind images (e.g. alt-text) on the page, as is shown in figure 3 below. Usually, skip navigation link is the first item on a page so look for it near the top of the page. In figure 3 below, you can see the skip navigation link indicated with an arrow. To go back to normal view, double click in the camera icon.



    Figure 3: Screen shot of a webpage as viewed by Opera browser after clicking on the camera icon. An arrow identify a "Skip navigation link" while in view mode. More description in figure 3 in text.
    Figure 3: Screen shot of a webpage as viewed by Opera browser after clicking on the camera icon. An arrow identify a "Skip navigation link" while a circle identify alt-text of images on the page.

    To check if a page has alt-text for all images:

    1) Download and open Opera,
    2) Click on the camera icon and look for text in small boxes on the page. If there is alt-text associated with an image you will see that text in a box. If there is no alt-text at all, the word “image” will be displayed. Images with “image” as an alt-text are the ones that are not accessible. If the image is only for decoration the alt-text is set up as “” and will not be displayed in Opera. A circle on figure 3 above, shows one accessible image with an alt-text as “School or Aq” (note: the entire text is not displayed) and two inaccessible images with no alt-text which are identified in this page with the word “image” instead of alt-text. To go back to normal view, double click in the camera icon.

    To check for data tables header tags:

    1) Download and open Opera,
    2) Click on the first icon to the right of the URL bar as shown in figure 4 below and choose from the pull down menu the option User mode

    Screenshot of the first pull down menu to the left of the URL section as view in Opera. More details in figure 4 in text.
    Figure 4: Screenshot of the first pull down menu to the left of the URL section. Under that menu "User Mode" is shown in a circle

    3) When in User Mode, from the same pull down menu click on “Show structural elements” as is shown in figure 5 below.

    Screenshot of the user mode pull down menu in Opera. More detail in description of figure 5 below.
    Figure 5: Screenshot of the user mode pull down menu, with a circle around the option of "show structural elements"

    4) Now you will be able to observe on your screen the tags written in the code for the html page that you are evaluating. Look at information and tags between <table> and </table> tags to see whether tables have header tags such as <h1, h2, h3, h4, etc). For an example, look at figure 6. Note be aware that tables could also be used for giving format to the page, in which case header tags will not be available nor needed.

    Screen shot of a webpage looked on Opera under user mode. More details in description of figure 6 below.
    Figure 6: Screen shot of a webpage looked on Opera browser. Under the user mode and selected the option of structural elements, whether a table contains headers is easy to evaluate. The table show in the red square does not include tags and is used for format only so that is correct. The table on the orange elipse shows a data table with proper headers attached to it.


    To check for proper headers on the page:

    1) Download and open Opera,
    2) In Opera, click on the first icon of the left of the URL area. Click on the user mode (the little person icon as shown in figure 4 above)
    2) Click again in the pull down list and click on the “structural elements”. (shown in figure 5)
    3) Look at page and observe whether you see tags such as h1, h2, h3, h4, etc, that correspond to title, subtitle, sections, subsections of the information, as is shown in figure 7 below.
    4)Also observe that bullet points are in a list with <ul> tags.


    Screenshot of a page looked by Opera in which header tags are identified.
    Figure 7: Screenshot of a page looked by Opera in which header tags are identified with circles

    To check for javascript of a webpage:

    1) Look for pulldown menus. Some pages have rollovers (e.g. when you place the mouse over a specific section, another image with words somewhere else on the page changes. That's bad. )

    To check for low contrast colors (e.g. something is difficult to read, low contrast):

    1) Are the colors bad? If something jumps out at you as being hard to read then has a low contrast and could be a potential problem for other people.

    To check for flickering:

    1) Do Graphics Flicker? It's pretty obvious to see a flickering graphic.

    To check for Alternative Text only Page

    1) Visually, try to find a link on the page that is bringing you to a text only version of the same webpage. To have a text only version is not a good accessibility feature because it is common to forget to update this version, then providing different information to different users (e.g graphical vs text only version). Almost always you can make a graphical webpage accessible so go for it.

    To check whether there is a time response in a page:

    1) This is hard to find. You will usually find this in forms. You could also find this in Active Server Pages (ASP) that are remembering information about users as they go from page to page. ASP pages end with .asp instaed of .htm or .html. If you find a page with time response, you need to ensure that the user is alert about the time remainded and asked user if more time is needed to complete the task.

    To check whether your page works with out a style sheet

    1) Download and open Opera,
    2) Click on the first icon on the left of the URL area.
    3) Click on the user mode (the little person icon) to make sure things look orderly structured without a style sheet. If things look all over the place or information is presented in a mixed order, then there is a problem with the style sheet.
    4) Observe the format and structure of the page. All of the text should be a the same font and very basic. Note if you see some other fonts or diffent font sizes. Problems could pop up on pages that use a Javascript menu or else use Cascading Style Sheets instead of layout tables to arrange things on a page.