WCAG 2.0 A and AA Requirements
Name of Product Sherpath Date Last Updated 10 February, 2020 Completed by Jay Nemchik (Digital Accessibility Team, Dayton)
Document Description This document rates Sherpath according to the W3C WCAG 2.0 A and AA requirements.
Contact for More Ted Gies Information Principal User Experience Specialist [email protected] [email protected] Testing Tools and Methods Hands-on keyboard operation Firebug/Code inspection Firefox Web Developer Toolbar (removing style sheets) JAWS 18 on Mozilla Firefox 63 and MS IE 11 on Windows 10 NVDA screen reader v2018.2.1 Wave Extension Color Contrast Analyzer W3C WAI Pages Elsevier Accessibility Checklist: http://romeo.elsevier.com/accessibility_checklist/ Document Sections The review document below includes all WCAG 2 A and AA checkpoints and is organized into 6 logical sections: • Visuals • Keyboard • Headings and Structure • Labeling • Multimedia • Usability Pages Covered Dashboard Homepage, Course Planner, Case Study, Lesson Content, Quiz Content, Lesson Assessment Performance, Performance Page, Assessment Configuration, Add Quiz, Simulations. Product Accessibility https://service.elsevier.com/app/answers/detail/a_id/11544/supporthub/evolve/kw/508/ Statement Note from W3C on https://www.w3.org/TR/UNDERSTANDING-WCAG20/conformance.html Conformance “If there is no content to which a success criterion applies, the success criterion is satisfied.” Notes/Terminology “AT” stands for Assistive Technology such as screen readers, voice input, etc.
Page 1
WCAG 2.0 Success Criterion Level Evaluation 1.1.1: Non-text Content A Partially supports 1.2.1: Audio-only and Video-only (Prerecorded) A Supports (N/A) 1.2.2: Captions (Prerecorded) A Supports 1.2.3: Audio Description or Full Text Alternative A Partially supports 1.2.4: Captions (Live) AA Supports (N/A) 1.2.5: Audio Description AA Does not support 1.3.1: Info and Relationships A Partially supports 1.3.2: Meaningful Sequence A Supports 1.3.3: Sensory Characteristics A Supports 1.4.1: Use of Color A Supports 1.4.2: Audio Control A Supports (N/A) 1.4.3: Contrast (Minimum) AA Partially supports 1.4.4: Resize text AA Supports 1.4.5: Images of Text AA Supports 2.1.1: Keyboard A Partially supports 2.1.2: No Keyboard Trap A Supports 2.2.1: Timing Adjustable A Supports 2.2.2: Pause, Stop, Hide A Supports (N/A) 2.3.1: Three Flashes or Below Threshold A Supports (N/A) 2.4.1: Bypass Blocks A Supports 2.4.2: Page Titled A Supports 2.4.3: Focus Order A Partially supports 2.4.4: Link Purpose (In Context) A Supports 2.4.5: Multiple Ways AA Supports 2.4.6: Headings and Labels AA Supports 2.4.7: Focus Visible AA Supports 3.1.1: Language of Page A Supports 3.1.2: Language of Parts AA Supports (N/A) 3.2.1: On Focus A Supports 3.2.2: On Input A Supports 3.2.3: Consistent Navigation AA Supports 3.2.4: Consistent Identification AA Supports 3.3.1: Error Identification A Supports (N/A) 3.3.2: Labels or Instructions A Partially supports 3.3.3: Error Suggestion AA Supports (N/A) 3.3.4: Error Prevention (Legal, Financial, Data) AA Supports (N/A) 4.1.1: Parsing A Supports 4.1.2: Name, Role, Value A Partially supports
Page 2
Visuals WCAG 2.0 Supporting Remarks Checkpoint Features 1.1.1: Non-Text Partially supports Most images and icons include text equivalents. Content (A) Provide text Exceptions: alternatives for non- All Pages: The hamburger button in responsive view needs actual button text content (e.g. text. images) Lesson Content: Some images used in the lesson content has a lot of information in it or has information present that is not directly communicated in plain text (these would need proper long descriptions).
Add Quiz: The Pendo images do not have alt text. The "Types of Questions" tooltip elements do not have any alt text.
Quiz Content: Images are sometimes used in the quizzes that are essential to answering the question. Alt text is needed for these images to allow screen reader users to properly answer the question.
Simulations: There is plenty of visual content in the simulations which does not have any form of alternative text. 1.3.3: Sensory Supports Content does not rely on sensory characteristics. Characteristics (A) Do not rely on sensory characteristics of components such as shape, size, visual location, orientation, or sound 1.4.1: Use of Color (A) Supports Color is not used as the only means of conveying information for content. Color is not used as the only visual means of conveying info 1.4.3: Color Contrast Partially supports Most text has enough contrast with its corresponding background. (Minimum) (AA) Text has enough Exceptions: contrast with the All Pages: All instances of orange text on white or gray background do not background (4.5:1 for have enough contrast. small text and 3:1 for large text) Homepage, Course Plan: The table header text does not have enough contrast.
Quiz Content: The "Not Sure" and "Confident" buttons do not have enough contrast.
Lesson Assessment Performance: The green "Lesson Completed" text on gray background does not have enough contrast.
Assessment Configuration: Orange on gray heading text does not have enough contrast. The white "Add Question" and "Done" button text on Page 3
orange background does not have enough contrast.
Simulations: There are several instances of white text on orange background, or orange text on white/gray background that do not have enough contrast. 1.4.4: Resize Text (AA) Supports Text can be enlarged to 200% and content remains functional. Text can be enlarged up to 200% without loss of functionality. 1.4.5: Images of Text Supports No images of text are used other than for Logos or essential presentation. (AA) Text is used rather than images of text, except where the presentation of text is essential, such as logos 2.3.1: Three Flashes or Supports (N/A) No flashing content exists. Below Threshold (A) No more than three flashes in a 1-second period, or the flashes are below the defined thresholds Keyboard WCAG 2.0 Supporting Remarks Checkpoint Features 1.3.2: Meaningful Supports The correct reading sequence is logical with the DOM order matching the Sequence (A) visual order. The correct reading sequence can be programmatically determined 2.1.1: Keyboard (A) Partially supports Most content is keyboard operable. All functionality is available from a Exceptions: keyboard, except for All Pages: The Done/Back button cannot be reached by keyboard. tasks such as drawing Navigation: The content within the Training and Resources popup cannot be reached with the keyboard.
Course Plan: The Calendar widget used in certain snap-drawers is not keyboard accessible.
Add Quiz: The Calendar popup cannot be reached by keyboard. The Types of Questions and Bloom's Levels tooltips cannot be displayed with keyboard.
Lesson Content: Users cannot reach the Term Definition buttons with the keyboard. Users cannot operate image slideshows with the keyboard (cannot reach prev/next image buttons or image dots). Users also cannot reach the flow chart buttons with the keyboard. Users cannot activate Page 4
image map dots with the keyboard.
Quiz Content: Drag and drop question types cannot be completed with keyboard. The Case Study Details button can be reached, but not activated by keyboard.
Performance: Subtopics are not keyboard accessible. The "Back to Subtopics" button is not keyboard accessible.
Assessment Configuration: The Question Type and Bloom's Level radio buttons cannot be navigated between using arrow keys (the name attributes must be the same).
Simulations: All of the controls and options within the simulations cannot be used with the keyboard. 2.1.2: No Keyboard Supports No keyboard traps exist on any page. Trap (A) The user can use the keyboard to move through page elements and is not trapped on a particular element 2.4.3: Focus Order (A) Partially supports Tab order is logical on the site for the most part. Users can tab through the elements of a page Exceptions: in a logical order All pages: After activating the hamburger button in responsive view, focus should be placed within the navigation and restricted to the navigation until it is closed.
Navigation: The "Training & Resources" popup should either move focus into the popup upon activation or be placed immediately after the activating button in the DOM.
Homepage: The tiles have two tab-stops but should only have one. Ebook links also have two tab-stops.
Course Plan: The Add Resource dialog box does not restrict focus. Focus should be restricted to the fly-out panels until they are closed. After closing a dialog box or fly-out panel, focus should be placed on the element which activated the drawer.
Add Quiz: The Calendar button should move focus to the calendar popup after activation.
Lesson Content: For expanding images, only one tabstop is needed, as currently three are used. The accordion menus use tabindex values that are greater than 0, they should all be changed to tabindex="0".
Quiz Content: In the micro-quizzes, when users are directed to the quiz assistance lesson text, focus should be placed on the relevant text. 2.4.7: Focus Visible (AA) Supports All elements use a high contrast visible focus.
Page 5
The page element with the current keyboard Note: In the Lesson Content, the focus indicator for image hotspots are focus has a visible focus very faint, but cannot be changed in Firefox. indicator 3.2.1: On Focus (A) Supports Focusable elements do not cause unexpected actions when receiving When a UI component focus. receives focus, this does not trigger unexpected actions. Headers and Structure WCAG 2.0 Supporting Remarks Checkpoint Features 1.3.1: Information and Partially supports Good use of headings to appropriately structure content for the most Relationships (A) part. HTML5 tags and roles are used in several areas to create landmarks. Info, structure, and relationships can be Exceptions: programmatically Homepage: Only one Banner landmark (
Course Plan: Only one Banner landmark (
Case Study: Each question should be a list item in a large unordered list. When multiple choice answers are shown, they should each be list items in an unordered list that encompasses all of the possible answers; additionally, the "correct" text should be included in the corresponding list item.
Lesson Content: Some complex data tables are missing table headers. Row headers need to be used for certain tables.
Quiz Content: In the micro-quizzes, the question feedback for multiple choice should be in an unordered list.
Lesson Assessment Performance: The text given to the right of the bar graph does not have any context. If the data cannot be contained within a table, then make both the checkbox and the data and text to the right of each one into a list item within an unordered list. For the feedback given about sequencing tasks, the list element should encompass both the answer and label.
Performance Page: The Course Name header should be an h2 instead of an h1. Category/Simulation name heading should be h3s. Divs are used instead of tables, and divs do not provide context to surrounding elements and headings like tables do. If these cannot be recast into tables, each div containing a table row of information should be a list element in an unordered list. And appropriate ARIA would need to be applied to convey headings (column information).
Page 6
Assessment Configuration: Only one Banner landmark (
Note: There are other general HTML validation errors outside the scope of this criterion. Labeling WCAG 2.0 Supporting Notes Checkpoint Features 2.4.2: Page Titled (A) Supports Titles change dynamically based on the current page and are descriptive The page has a title for the most part. describing its topic or purpose 2.4.4: Link Purpose (In Supports All links used have an identifiable purpose from the link text or Context) (A) surrounding context. The purpose of each link can be determined from the link text or surrounding context. 3.2.4: Consistent Supports Most UI components are consistent across the site. Identification (AA) UI components used across the web site are identified consistently on every page. 3.3.1: Error Supports (N/A) The only kinds of possible input errors are through lesson quizzes, which Identification (A) give proper feedback, but do not fall into the error identification that this Page 7
Input errors are clearly criterion describes. marked and described to the user. 3.3.2: Labels and Partially supports Most input areas have clear labels which are programmatically assigned. Instructions (A) Items requiring user Exceptions: input are clearly Add Quiz: The "Name" text input does not have a label. The "Grading labeled or have clear Options" text should be wrapped in a