WCAG 2.0 A and AA Requirements

Transcription

1 WCAG 2.0 A and AA Requirements Name of Product Engineering Village URL Date Last Updated 28 November, 2018 Completed by Document Description Contact for More Information Testing Tools and Methods Document Sections Pages Covered Product Accessibility Statement Note from W3C on Conformance Notes/Terminology Jay Nemchik (Elsevier Labs, Dayton) This document rates Engineering Village according to the W3C WCAG 2.0 A and AA requirements. Ted Gies Principal User Experience Specialist ted.gies@elsevier.com accessibility@elsevier.com 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 v Wave Extension Color Contrast Analyzer W3C WAI Pages Elsevier Accessibility Checklist: 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 Header, Footer, Quick Search, Search Results, Record Page, Search History, Alerts, Selected Records, Thesaurus Search, Engineering School Profile. If there is no content to which a success criterion applies, the success criterion is satisfied. AT stands for Assistive Technology such as screen readers, voice input, etc. Page 1

2 WCAG 2.0 Success Criterion Level Evaluation 1.1.1: Non-text Content A 1.2.1: Audio-only and Video-only (Prerecorded) A (N/A) 1.2.2: Captions (Prerecorded) A (N/A) 1.2.3: Audio Description or Full Text Alternative A (N/A) 1.2.4: Captions (Live) AA (N/A) 1.2.5: Audio Description AA (N/A) 1.3.1: Info and Relationships A 1.3.2: Meaningful Sequence A 1.3.3: Sensory Characteristics A 1.4.1: Use of Color A 1.4.2: Audio Control A (N/A) 1.4.3: Contrast (Minimum) AA 1.4.4: Resize text AA 1.4.5: Images of Text AA 2.1.1: Keyboard A 2.1.2: No Keyboard Trap A 2.2.1: Timing Adjustable A 2.2.2: Pause, Stop, Hide A (N/A) 2.3.1: Three Flashes or Below Threshold A (N/A) 2.4.1: Bypass Blocks A 2.4.2: Page Titled A 2.4.3: Focus Order A 2.4.4: Link Purpose (In Context) A 2.4.5: Multiple Ways AA 2.4.6: Headings and Labels AA 2.4.7: Focus Visible AA 3.1.1: Language of Page A 3.1.2: Language of Parts AA (N/A) 3.2.1: On Focus A 3.2.2: On Input A 3.2.3: Consistent Navigation AA 3.2.4: Consistent Identification AA 3.3.1: Error Identification A 3.3.2: Labels or Instructions A 3.3.3: Error Suggestion AA 3.3.4: Error Prevention (Legal, Financial, Data) AA (N/A) 4.1.1: Parsing A 4.1.2: Name, Role, Value A Page 2

3 WCAG : Non-Text Content (A) Provide text alternatives for nontext content (e.g. images) 1.3.3: Sensory 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) Color is not used as the only visual means of conveying info 1.4.3: Color Contrast (Minimum) (AA) Text has enough contrast with the background (4.5:1 for small text and 3:1 for large text) 1.4.4: Resize Text (AA) Text can be enlarged up to 200% without loss of functionality : Images of Text (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 Below Threshold (A) Page 3 Supporting Features (N/A) Remarks Visuals Most icons and non-text content include text equivalents. Quick Search: The Suggested Terms '?' icon does not have any alternative text. Search Results: The Remove Duplicates and Numeric Filter '?' icons do not have any alternative text. Engineering School Profile: The Institutions and Groups '?' icon does not have any alternative text. Content does not rely on sensory characteristics. Color is not used as the only means of conveying information for most content. Most text has enough contrast with its corresponding background. Search Results: The highlighted orange text in the results and the controlled vocabulary do not have enough contrast at 2.49:1 and 2.28:1 respectively. Record Page: The Reference titles' gray text on white background does not have enough contrast at 1.96:1. Engineering School Profile: The blue dropdown text on light green background does not have enough contrast at 4.25:1. Users can resize browser text to 200% without loss of functionality. There is no responsive design to the site, but there is adaptive design. Almost no images of text are used other than for Logos or essential presentation. Record Page: The "Check Local Full-text" image is an image of text. No flashing content exists.

4 No more than three flashes in a 1-second period, or the flashes are below the defined thresholds WCAG : Meaningful Sequence (A) The correct reading sequence can be programmatically determined 2.1.1: Keyboard (A) All functionality is available from a keyboard, except for tasks such as drawing 2.1.2: No Keyboard Trap (A) The user can use the keyboard to move through page elements and is not trapped on a Page 4 Supporting Features Remarks Keyboard The correct reading sequence is logical with the DOM order matching the visual order in most areas. The Pendo icons should be placed properly in the DOM so they are encountered in a logical fashion by screen readers. Record Page: The color picker dropdown should be right after the activating element in the DOM. Thesaurus Search: It makes sense visually that the "And/Or" radio buttons would come before the Reset form button. Most content is keyboard operable. Header: Users should be able to open/close the profile dropdown with the enter key. Using the spacebar to open dropdowns causes them to quickly open and close (seem to be activating on key down and key up. Only activate these elements on key up). Users should be able to use the Esc key to close the navigation spine. Quick Search: Users cannot reach the Suggested Terms '?' icon with the keyboard. Search Results: Users cannot reach the Remove Duplicates or Numeric Filter '?' icons with the keyboard. Users cannot re-order the filter categories with the keyboard. If the icon buttons within the chart dialogs are to be a tablist, they need to work with arrow key navigation. Record Page: The Color picker widget and its dropdown cannot be reached with the keyboard. The Related Documents accordions cannot be reached by keyboard. Engineering School Profile: The Pie/Bar switch button cannot be reached by keyboard. Users cannot reach the Institutions and Groups '?' icon with the keyboard. No keyboard traps exist on any page.

5 particular element 2.4.3: Focus Order (A) Users can tab through the elements of a page in a logical order 2.4.7: Focus Visible (AA) The page element with the current keyboard focus has a visible focus indicator 3.2.1: On Focus (A) When a UI component receives focus, this does not trigger unexpected actions. WCAG : Information and Relationships (A) Info, structure, and relationships can be programmatically determined Page 5 Supporting Features Tab order is logical on the site in most areas. Header: Focus should be placed into the navigation spine after activating the hamburger, preferably on the Toggle button. As the spine dims out the rest of the page, it should restrict focus until it is closed. Quick Search: When submitting a search, user's focus should be moved to the number of records headings after the search is complete. Search Results: The Download Records modal window should return focus to the activating element after it is closed. The Show/Hide preview button should retain focus after it's activated. Record Page: The color picker dropdown should be right after the activating element in the DOM. Thesaurus Search: It makes sense visually that the "And/Or" radio buttons would come before the Reset form button. All elements use a custom-styled visible focus. Focusable elements do not cause unexpected actions when receiving focus. Headers and Structure Remarks Headings are used on most pages. Some pages make use of more than one h1. Unordered lists are typically used to group related content. Landmarks are used in several places (role of main, navigation, regions with labels, etc.). Footer: The headings in the footer should not be within the unordered list structure. Search History: Recommend having each search query be a list item in an unordered list. Record Page: Consider marking up the rest of the heading content as HTML headings (e.g. Source, Author Affiliations, Abstract, etc. as h3s). Groups of related elements such as the Authors, Controlled Terms, and Uncontrolled Terms should be within unordered lists. Selected Records: The list of records should be in an unordered list if

6 2.4.1: Bypass Blocks (A) Users can bypass repeated blocks of content : Headings and Labels (AA) Headings and labels are clear and consistent : Language of Page (A) The language of the page is specified 3.1.2: Language of Parts (AA) Specify the language of text passages that are in a different language than the default language of the page : Parsing (A) Use valid, error-free HTML WCAG : Page Titled (A) The page has a title describing its topic or purpose 2.4.4: Link Purpose (In Context) (A) The purpose of each link can be determined from the link text or surrounding context. (N/A) Pass/Fail possible. Headings exist, allowing screen reader users to skip repetitive content. There's also a visible "skip" link. Headings are clear and descriptive. The language is defined as lang="en-us" on all pages. None of the site-wide UI or functionality uses a different language than the default. HTML and CSS passes concerning these 4 specific criteria: (i) elements have complete start and end tags, (ii) elements are nested according to their specifications (iii) elements do not contain duplicate attributes (iv) any IDs are unique, except where the specifications allow these features. Notes Labeling The title changes accordingly for each page and is typically descriptive. Note: On the Record Page, some indication of the title of the abstract/record would be useful in the title. Some links used have an identifiable purpose from the link text or surrounding context. Search Results: The Close Refine Results button needs more appropriate text (aria-label). The icon buttons in the chart dialogs need more specific labelling than a title attribute. The View chart button states that it opens in a new window, when it only opens a dialog. Search History: The , Print, and Download buttons should be labelled differently (e.g. Search History). The Combined Search Options button should have an actual aria-label, as a title alone is not sufficient. AT should not read out the icon names (e.g. Bell, Floppy Disc, Checkmark) when reading their labels. After setting an alert or saving a search, the original label is not removed. Additionally, the Remove Alert and Remove Saved Search needs proper screen reader text, as an aria-label on a <span> will not be read out by AT. Page 6

7 3.2.4: Consistent Identification (AA) UI components used across the web site are identified consistently on every page : Error Identification (A) Input errors are clearly marked and described to the user : Labels and Instructions (A) Items requiring user input are clearly labeled or have clear instructions : Error Suggestion (AA) When the user makes an input error, give suggestions for valid input : Name, Role, Value (A) For all UI components, the name, value, and role can be programmatically determined. Page 7 Engineering School Profile: As a title alone is not sufficient enough to be an accessible name, an aria-label should be used for the Search button. UI components are consistent across the site. Errors are given and described well. Most input areas have clear labels which are programmatically assigned. Comboboxes should be using an actual label, instead of using one of the select options as a label. Quick Search: The labels for the dropdowns and text inputs are not very clear and could be improved to be less verbose. Also, each text input field uses "Input search terms field 1" as its label. Search History: Applying an aria-label to a <label> element does not work when being read out by AT, it should be a plain text label, or the aria-label should be applied to the input element. Thesaurus Search: The labels for the could still be improved to be clearer. Engineering School Profile: The Select Subject Area dropdown has an inaccurate title attribute. The Institution search input needs a proper label (preferably a visible text label). The error text given is sufficient for error suggestions. Most UI components do not communicate their state programmatically. Header: No UI elements in the header should have aria-haspopup="true". The Results button should not have role="menu". Interactive icons should have aria-label="help/institution" and give the SVG aria-hidden="true". Items within the search dropdown change the page URL, so they should be links. The aria-expanded attribute does not change its value for dropdowns (The div that contains the button currently changes, but the aria-expanded on the button itself should be the one to change). The items in the Help dropdown should not have role="menuitem". Because users tab to the <button> Sign In element, that is what should receive the

8 WCAG : Audio-only or Video-only (Prerecorded) (A) Provide alternatives for pre-recorded audioonly or video-only content : Captions (Prerecorded) (A) Provide captions for pre-recorded audio 1.2.3: Audio Description or Media Alternative (Prerecorded) (A) Provide alternatives for pre-recorded synchronized audio/video 1.2.4: Captions (Live) (AA) Provide captions for live audio in synchronized audio/video : Audio Description (Prerecorded) (AA) Page 8 Supporting Features (N/A) (N/A) (N/A) (N/A) (N/A) aria-expanded attribute. Search Results: The ARIA attributes are placed on the containing elements for most expandable content instead of on the activating content (Remove Duplicates, Numeric Filter, Show/Hide Preview, Open Refinement Tab). Dialog boxes should be given proper labels (aria-label or aria-labelledby). The Close refine results button should be given ariaexpanded="true/false". The icon buttons within the chart dialog should not be a tablist. Search History: The expandable combined search button and the Details button should be button elements or have role="button". They also should not have aria-haspopup="true". Edit This Search button acts as a link, so it should not have role="button". Record Page: The dialog boxes should be given role="dialog" with a proper aria-label. Alerts: The Edit Recipients button should be given aria-disabled="true" when it is inactive. Remarks Multimedia No pre-recorded audio-only or video-only content was reviewed. There is no pre-recorded audio on the site. There is no pre-recorded synchronized audio/video on the site. There is no live audio in synchronized audio/video. There is no pre-recorded video on the site.

9 Provide an audio description of prerecorded video : Audio Control (A) Audio can be paused and stopped, or the audio volume can be changed : Pause, Stop, Hide (A) Users can stop, pause, or hide moving, blinking, scrolling, or auto-updating information. WCAG : Timing Adjustable (A) Users are warned of time limits shorter than 20 hours and time limits can be turned off or extended 2.4.5: Multiple Ways (AA) More than one way is available to navigate to other web pages : On Input (A) Changing the setting of a checkbox, radio button, or other UI component does not trigger unexpected changes in context : Consistent Navigation (AA) Navigation menus are in the same location and order on every web page : Error Prevention (Legal, Financial, Data) (AA) For web pages with Page 9 (N/A) (N/A) Supporting Features (N/A) There is no audio content on the site. There is no moving, scrolling, or auto-updating information. Remarks Usability There is a time limit of 8 hours for logged in users and 30 minutes for users not logged in, but a warning pops up and warns the user about the session timeout. An option is given to extend the current session. Users can reach most pages in the system using the global navigation. Content pages can be reached through the global nav or homepage. Recommend using a Site Map to cover all bases. Users can only reach certain pages through the More menu (Bulletins, Folders). Different search types can only be reached through the Search menu in the Header. User inputs do not cause unexpected actions for most content. Footer: The Careers dropdown causes a new window to open when switching dropdown options, even before one is actually chosen. Navigation menus are consistently in the same place and in same order. There are no submissions which require legal or financial commitments.

10 legal or financial commitments, input can be reviewed and corrected before final submission, and submissions can be reverted. Page 10