HERA 2.1 Beta

Testing Accessibility with Style

HERA help

[ HERA | Help | Info | Code | Contact ]

Once you have given the address of the page to revise, HERA shows a summary of the information from the automatic analysis and a result for each checkpoint.Results summary screenshot.

When the analysis detects that the page certainly meets the requirements for the checkpoint.
Needs checking
When the analysis cannot confirm with complete certainty that the checkpoint is met. In this case HERA provides appropriate options for a manual revision.
When the analysis detects that the page does not meet, either partially or totally, the checkpoint.
When the checkpoint is relevant to features not present in this page.

At this stage there are always a certain number of checkpoints that must be tested by a user. Once a person has tested a particular checkpoint they can use the form to record or edit the results of the test. The form offers two possible options in addition to those given.Result summary view including user reviews.

When the checkpoint is not completely met, but is partially so.
Cannot tell
When the tester cannot confirm whether or not the checkpoint is met.

Manual revision

Each checkpoint can require checking one or several things, each of which can have their own result. If the results of several tests for the same checkpoint are not the same, the overall result for the checkpoint is that of the worst result. For example if one of the items is "failed" the checkpoint has been failed, whatever the results of other tests.

Checkpoint Review Form.

HERA offers various options to help the tester revise each item. When it is possible, the elements that need revision are indicated. Following this text are three icons for the help deocumentation.

Instructions. Show or hide the instructions for performing the revision

Page. Shows the page in a seperate window with the elements that have to be testede highlighted with colours and icons, and generally shows the relevant code fragment for each part. Because these elements, added to the original page, can disturb the layout to make it unreadable, there is an option to deactivate the original styling of the page.

Code. Show the source code of the page in a window, highlighting the items which shuld be checked.

In this way, using both views of the page to help, the tester can identify important parts of the page, verify their use, and decide the appropriate result for each item of the checkpoint.

Two icons, next to the URI of the page being revised, allow you to open the original page, or see its source code - in both cases with none of the previous options applied.

Original page. Open the page in a new window.

Source code of the page. Open a new window to show the source code of the page.

Icon bar

Summary. Return to the summary page, where you can choose the navigation by checkpoints mode.

Help. Show or hide the help text for each checkpoint.

Form. Show or hide the form to record / edit the results for each checkpoint.

Reports. Leads to a form which requests general information about the revision. The report can be presented in various formats (XHTML, RDF/EARL and PDF).

Work styles

The full review can be done by navigating through the results table or by guidelines numbering.

Navigate by Guidelines

Guidelines navigation details.

In Summary page you can access the guidelines navigation (presented by means of buttons at the end). Once this option has been chosen, the checkpoints of the selected guideline will appear in order to be reviewed. To facilitate the navigation through guidelines, in the top of the review page are buttons with the number of each one.

Results navigation

Results navigation details.

Navigation by results is accessed from the Results summary. This form of navigation can make the task more efficient because the points that are solved are clearer, especially when the reviewer is working on his own site and can fix any failures. In the upper part of the revision page is the table that shows the results with the modifications indicated by the reviewer.

Generate report

When pressing on the icon to ask for the report a form will appear in which the reviewer can give a name, e-mail address, the title for the report, and a field to add general comments.

The types of results (untested, correct, incorrect, nonapplicable, partial, unknown) to include in the report can then be selected.

Once you have done this, you can choose the type or the types of report to generate.

HTML Report

Screenshot of the HTML report.In the form there is a button to see the report in HTML format, that will open a new window of the browser with the report in that format. It can be printed directly from there, using the button, or via the menu option to print in your browser.

Also there is a special button to download the report in HTML format. This way you can keep the title, to publish it on the Web or on paper. The reviewer can then, if desired, create a special style sheet for printing, so that letterhead and so on adjusts to the paper, and add it to the downloaded files.

RDF report.

Screenshot of an RDF report with report viewer.HERA also generates the report in the format RDF, to take advantage of the possibilities a semantically richer Web offers.

The "RDF report" button, will open a new window of the browser with the content of the report in EARL language in the RDF format. It is possible that some user cannot see directly in his browser the report, for example if using an old application unable to support XML. This is not necessarily a problem, because this information is not meant to be read directly by people, but by machines. There is a tool for visualization of EARL/RDF information, and you can use this o publish EARL/RDF results on your own website so that they are legible and attractive for people and consistent with the general style of your own Web site.

The "download report in RDF" button allows, as its name indicates, to download the generated report file, to keep it and to publish it where and as desired. The reviewer or review team can choose to use the script before mentioned, or to directly publish the RDF files linked from each one of the pages that have been reviewed. You can even generate a visual graph of the results, using tools such as the W3C RDF validator.

PDF Report.

Screenshot of the <acronym title=PDF report." />One more option consists of generating the report in PDF format. This one is a draft version, so you can download it and make the opportune annotations, structure, and modifications to publish it with the layout design that you prefer. (Please, do not forget to structure the document before publishing it, so that it is as accessible as possible).

Declare HERA review.

Once you have completed your revision (and any modifications to reach the desired level of conformance), it is useful to declare it. For this you can use one of the following icons and link it with the report in format RDF generated by HERA. This way robots will be able to index pages which fulfill certain requirements of accessibility. You can also link the icon to the WAI conformance page.

You can choose one of the following icons of "classic" style according to the conformance level achieved:

Conforms to WCAG 1.0 level A - Tested with HERA. Conforms to WCAG 1.0 level AA - Tested with HERA. Conforms to WCAG 1.0 level AAA - Tested with HERA.

Or to choose the appropriate icon of modern style:

Conforms to WCAG 1.0 level A - Tested with HERA. Conforms to WCAG 1.0 level AA - Tested with HERA. Conforms to WCAG 1.0 level AAA - Tested with HERA.

Or create one of these buttons using only stylesheets:

The styles used in these buttons are defined in botonhera.css.

Integrate HERA to your browser

Developers and consultants may find it useful to launch HERA directyl from teh interface of their browser. We ofer various options for this:
Extensions for the Mozilla family browsers: Users of the Mozilla family browsers (Firefox, Flock, Netscape, etc.) can install the HERA-Extension, that allows you to initiate page or frame revision, with a single click. The extension installs a bar and a button in the state bar of the browser.


Bookmarklets are small fragments of JavaScript in the form of a link, included as a bookmark to add functionality to your browser.

To function they require JavaScript support in the browser. Most bookmarklets work well in Internet Explorer 5.0 or higher, Mozilla family browsers (such as Netscape and Firefox), and Opera and Safari browsers.

These bookmarklets have been tested in Internet Explorer 6.0, Mozilla 1.7.7, Mozilla 1.8a6, Netscape 7.2, Firefox 1.0.4, Opera 7.50 and Opera 8.0.

For direct access to HERA from your browser, add one or more of the following linksas a bookmark. It will create a button or link to revise the current page in Hera.

HERA: Revise current page
Calls HERA to revise the current page, in the tab / window.
HERA: Revise current page in a new window
Calls HERA to revise the current page, in a new tab or window.
Check a page with HERA
Opens a dialog in which you can say which page you want to check, and then opens HERA to test that page in the current window.
Check a page HERA in a new window
Opens a dialog where you can enter a page to check, and then opens a new tab or window with HERA, to check that page.

These Bookmarklets were created by Emmanuelle Gutiérrez y Restrepo, with the help of Vincent Tabard and Opera Software.

Add HERA to the "Web Developer Extension"

Los desarrolladores que utilizan Mozilla o Firefox suelen usar una extensión creada por Chris Pederick llamada "Web Developer Extension" y que añade un menú y una barra de herramientas con una serie de funcionalidades útiles para comprobar determinados aspectos de una página Web.

La extensión ofrece acceso directo a una serie de revisores y es muy sencillo agregar una opción para revisar con HERA:

Una vez que se tiene instalada la extensión, pulsando con el botón derecho del ratón sobre cualquier página abierta, seleccione "Web Developer" >> "Options" >> "Options." (Si ha instalado la versión en español las opciones serán "Opciones" >> "Opciones..".

Detalle del menú contextual con las opciones del Web Developer

En el cuadro de diálogo que se abre, seleccione "Tools" y pulse el botón "Add" (En español: "Herramientas" >> "Añadir").

Detalle del cuadro de diálogo de opciones del Web Developer

Se abrirá un cuadro de diálogo en el que se debe indicar el nombre de la herramienta (en este caso, HERA) y un campo para la URL en la que hay que poner: "http://www.sidar.org/hera/?url=", también se puede indicar un atajo de teclado para activar la revisión con HERA.

Detalle del cuadro de diálogo para añadir herramientas al Web Developer

Y ya está. A partir de entonces, bastará con pulsar con el botón derecho del ratón sobre la página que se esté visitando y seleccionar: Web Developer >> Tools >> HERA, o pulsar la combinación de teclas indicadas para el atajo antes definido, y se iniciará la revisión.

Detalle del menú contextual Web Developer con HERA integrada

(Las imágenes que ilustran este proceso han sido cedidas por Daniel Torres Burriel.)

Add HERA to the Opera W3-Dev Menu

Toby Inkster has created a menu for developers using Opera. The Opera W3-Dev Menu offers direct access to development tools and documentation for standards, usability, and accessibility.

Detail of the W3-Dev menu for Opera with HERA integrated.The menu can be installed direct from the download page, and it is easy to add HERA. To do so, once it is installed edit the file "v3dev-1.99.ini" which is in the "menu" directory of the "profile" directory for Opera. (Since the location of this varies according to configuration of your Operating System, the easiest way to find it is with the search function of your Operating system).

Once you have found the file, open it in any text editor (while Opera is not running) and at line 55 paste the following line:
Item, "HERA" = Go to page, "http://www.sidar.org/hera/?url=%u"
. If your editor does not show line numbers, find the text
[Actions Menu] and paste the line after the text
"----1". Save and close the file, then start Opera. The menu will now include the item "HERA" which allows you to revise the current page.

If you have any questions about how to perform tests, or suggestions on how to improve this tool, please send them to: hera@sidar.org.


Sidar home page.

Copyright © Sidar 2003-2005
Development: Carlos Benavídez