TABLE II. Sect. Type Qty Problems Error 1 Linked image missing an alternative text. Error 2 Missing form label. Alert Alert Structura l elements Contrast error Person al page What does it mean? An image without alternative text results in an empty link. A form control does not have a corresponding label. Link to PDF document. A link to a PDF document is present. Accesskey. An access key attribute is present. 2 Tab index. A positive tab index value is present 1 Heading level 1. 1 Login Alert ACCESSIBILITY PROBLEMS OF THE EVALUATED VIRTUAL CAMPUS 2 4 Very low contrast. Error 1 Missing alternative text. Alert 1 No heading structure. Alert 1 Devide dependent event handler. Structura l elements 1 Unordered list. Structura l elements 6 Inline frame. HTML5 and ARIA 1 HTML5: Header. HTML5 and ARIA 1 HTML5: Navigation. A first level heading (

) element) is present. Very low contrast between foreground and background colors. Image alternative text is not present. The page has no headings. An event handler is present that may not be accessible. An unordered (bulleted) list (
element) is present. An inline frame () is present. A <header> element or banner landmark is present. A <nav> element or navigation landmark is present. Why it matters? How to fix it? Images that are the only thing within a link must have alternative descriptive text. If an image is within a link that contains no text and that image does not provide alternative text, a screen reader has no content to present to the user regarding the function of the link. Add appropriate alternative text that presents the content of the image and/or the function of the link. If a form control does not have a properly associated text label, the function or purpose of that form control may not be presented to screen reader users. If a text label for a form control is visible, use the <label> element to associate it with its respective form control. Unless authored with accessibility in mind, PDF documents often have accessibility issues. Additionally, PDF documents are typically viewed using a separate application or plugin, and can thus cause confusion and navigation difficulties. Ensure the PDF document is natively accessible. Additionally, inform the user that the link will open a PDF document, because PDF documents may have limitations in accessibility (particularly for complex content) and require a separate program. Access key provides a way to define shortcuts key for web page elements. Access key often conflicts with user or assistive technology shortcut keys and should be avoided or implemented with care. Tab index values of 1 or higher specify an exact tab/navigation order for page elements, because it modifies the default tab order, causes confusion, and result in decreased keyboard accessibility. It should be avoided. Headings facilitate page navigation for users of assistive technologies. They also provide semantic, visual meaning and structure to the document. First level headings must contain the most important heading(s) on the page. Adequate contrast is necessary for all users, especially users with low vision. Each image must have an alt attribute. Without alternative text, the content of an image will not be available to screen reader users or when the image is unavailable. Headings (<h1>-<h6>) provide important document structure, outlines, and navigation functionality to assistive technology users. The JavaScript events in use do not appear to be accessible to both mouse and keyboard users. To be fully accessible, critical JavaScript interaction should be device independent. Ordered lists present a group of related, parallel items. Users of many assistive technologies can navigate by and within lists. The content of an inline frame is read as if it was part of the page that contains it. The content of the iframe must be accessible. Remove the access key or be aware that the access key may conflict with user shortcut keys. If the natural tab order is already logical, remove the tab index. Otherwise, consider restructuring the page in a way in which the tab index is not required. Ensure that the text in question is truly a heading and that it is structured correctly in the page outline. Increase the contrast between the foreground (text) color and background color. Large text (larger than 18 points or 14 points bold) does not require as much contrast as smaller text. Add an alt attribute to the image. The attribute value should be accurately present the content and function of the image. Provide a clear, consistent heading structure, generally one <h1> and sub-headings as appropriate. Ensure that critical functionality and content is accessible by using a device independent event handler (which responds to both keyboard and mouse). Ensure that an unordered (bulleted) list is appropriate for the context. If list items are sequential or numbered, an ordered list (<ol>) is likely more appropriate. Ensure that the content within the iframe is accessible. Optionally, a title attribute value can be added to provide a brief, advisory description of the iframe. Headers identify page introduction or navigation. They typically surrounds the site or page name, logo, top navigation, or other header content. Headers facilitate page semantics and navigation. Ensure the header surrounds and defines page header content. The navigation identifies a section of navigation links and can facilitate page semantics and navigation. Ensure the element defines page navigation. Multiple navigation elements on one page can be differentiated with ARIA labels. 29</article></body></html>

IX Jornadas Internacionales de Campus Virtuales