Note: To collect evidence related to this checklist use the Excel file: Evidence collection from the Checklist “10 critical aspects of functional accessibility” (xlsx, 139KB)
The checklist "10 critical aspects of functional accessibility" is the checklist referred to in article 9(1)(b) of Decree-Law no. 83/2018 and must be used accordingly with the methodology referenced in the diploma:
- "1. For websites, the entities referred to in Article 2 shall adopt the following monitoring procedures:
- (...)
- b) Simplified manual procedure, corresponding to an expert manual assessment of a sample of pages that allows responding to the diversity of elements contained in the checklist for websites published on the website www.acessibilidade.gov.pt;"
In this list are the 10 critical aspects of functional accessibility found in the various studies on the websites of the Portuguese Public Administration prepared by the ACESSO Unit team - which currently integrates the AMA Digital Experience Team - during the last 20 years. This list is also based on the W3C Easy Checks - A First Review of Web Accessibility.
Requirements to be met:
In order to be well interpreted by assistive technologies, the menus and submenus must be structured with native elements, of the type <ul>, or with the semantics and state of the elements identified with techniques in ARIA.
It should be possible to scroll through the navigation structure either with a pointing device or the keyboard.
The correctly subtitled images allow them to be interpreted as text, making all navigation options accessible.
The main header of each page, which summarizes its content, should be identified as the first level of the headers (h1). No more than one element of this type should be used.
The headers are used in a hierarchical way to better structure the contents, from the most general to the most particular information. They should be used consistently by the whole website.
Identifying the headings of a table helps to better identify the axes that characterize the information in each cell.
All tables should contain a descriptive caption of their content, including the sources of the information, if necessary.
In order to make the selection of small fields easier, the label should be associated to the respective field with the element <label>, because in this way its clickable area is increased. For screen reader users (blind people), the association of the label with the editing field is also fundamental.
Mandatory fields should preferably be grouped in the initial part of a form and clearly identified as such. If this is not possible, each field must be identified either as Required or Optional. Not only symbols or colours should be used as identifying elements.
Errors identified during the completion of a form should preferably be listed in condensed form, directing each element of the list to its respective field. Each field must associate the error message with itself. Error messages should be brief and clear.
The non-decorative images should have a short description associated, namely by using the <ALT> attribute. This caption should faithfully describe the purpose of the image in the context in which it is found.
Graphs resulting from data analysis should be accompanied by the data table that gave rise to it, in order to preserve access to complete information.
Hyperlinks consisting of one image only require the image to have an alternative text equivalent which faithfully represent the destination of the link.
It should be ensured in the body of the document that the contrast ratio between text colour and background colour is at least 4.5:1 to ensure readability for users with impaired vision.
Texts larger than 18 points, or texts larger than 14 points but in bold, should ensure a minimum contrast ratio of 3:1 between the colour of the text and the background colour.
Media players should not automatically start playing the elements and must be operable using only a mouse or using only a keyboard.
The use of closed subtitles is mainly intended for deaf people. It is recommended for the production of these technical translation subtitles that are well known for this purpose as the enrichment of the sound subtitles which message is not visually perceptible (e.g. the ringing of a doorbell).
For videos with eminently visual messages (e.g. a video with background music that passes a set of messages only perceptible to vision), they must have an alternative equivalent version with audio description production. Audio description is fundamental for blind or short-sighted people to perceive the message conveyed.
When all visual styles are disabled, the content of the page is shown left aligned and is displayed from linear shape.
Since the positioning of elements in the code may not reflect the visual order of reading, the correct order of the content should be ensured when deactivating visual styles.
The elements that structure the content must be semantically well structured, using the appropriate HTML elements for each type of content, such as header, paragraphs, lists, ...
All visible information should remain on the page in textual form when visual styles are disabled.
The graphical composition structure of the page is not made using table elements but a greater diversity of semantic (e.g. <main>) and generic (e.g. <div>) elements, which allow visual rearrangement for different screen types and dimensions.
If the modal overlaps the browser window, the browser focus must be moved to an element that is contained within the modal.
When a modal dialog is open, all elements outside the modal must be inactive. Interactive elements, such as links, buttons or editing fields that appear outside the modal, must not be focused with the mouse or keyboard as well. If a screen reader announced content outside the modal, it means something is wrong.
The modal must have a way for the user to close it. This could be a button labeled “Close” and the keyboard shortcut “ESC”.
When the modal is closed, it's useful for the user to return to the element that invoked it. A modal is an intermediate window that overlays the primary window. After interaction with the modal, the user must return to the same point from which they left.
PDF files must have their full text extractable so that its contents can be processed in a word processor without loss of information.