WCAG 2.0 a and AA Requirements

WCAG 2.0 A and AA Requirements

Name of Product / HealthAdvance Journals (including Cell.com, TheLancet.com)
For a full list of Health Advance journals visit
Date Last Updated / 20 March 2017
Completed by / Ted Gies, Jay Nemchik (Elsevier Labs)
Document Description / This document rates JBS according to the W3C WCAG 2.0 A and AA requirements.
Contact for More Information / Ted Gies
Principal User Experience Specialist


Product Version Number
Product Release Date
Testing Tools and Methods / Hands-on keyboard operation
Firebug/Code inspection
JAWS 16 on Mozilla Firefox 38 and MS IE 9 on Windows 7
NVDA screen reader
Open Ajax Alliance (OAA) side bar
ColorZilla
Wave toolbar
Color Contrast Analyzer
W3C WAI Pages
W3C Markup Validation Service
Elsevier 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 / Homepages, Journal Homepages, Table of Contents, Article Pages, Search Results, Advanced Search, List of Issues, Articles in Press, Subscribe, Shopping Cart, My Account
WCAG 2.0 Success Criterion / Level / Evaluation
1.1.1: Non-text Content / A / Pass with exceptions
1.2.1: Audio-only and Video-only (Prerecorded) / A / Fail
1.2.2: Captions (Prerecorded) / A / Fail
1.2.3: Audio Description or Full Text Alternative / A / Fail
1.2.4: Captions (Live) / AA / N/A
1.2.5: Audio Description / AA / Fail
1.3.1: Info and Relationships / A / Pass with exceptions
1.3.2: Meaningful Sequence / A / Pass with exceptions
1.3.3: Sensory Characteristics / A / Pass
1.4.1: Use of Color / A / Pass with exceptions
1.4.2: Audio Control / A / Pass with exceptions
1.4.3: Contrast (Minimum) / AA / Pass with exceptions
1.4.4: Resize text / AA / Pass
1.4.5: Images of Text / AA / Pass
2.1.1: Keyboard / A / Pass with exceptions
2.1.2: No Keyboard Trap / A / Pass
2.2.1: Timing Adjustable / A / N/A
2.2.2: Pause, Stop, Hide / A / Pass with exceptions
2.3.1: Three Flashes or Below Threshold / A / N/A
2.4.1: Bypass Blocks / A / Pass
2.4.2: Page Titled / A / Pass
2.4.3: Focus Order / A / Pass with exceptions
2.4.4: Link Purpose (In Context) / A / Pass with exceptions
2.4.5: Multiple Ways / AA / Pass
2.4.6: Headings and Labels / AA / Pass
2.4.7: Focus Visible / AA / Pass with exceptions
3.1.1: Language of Page / A / Pass with exceptions
3.1.2: Language of Parts / AA / Pass
3.2.1: On Focus / A / Pass with exceptions
3.2.2: On Input / A / Pass
3.2.3: Consistent Navigation / AA / Pass
3.2.4: Consistent Identification / AA / Pass
3.3.1: Error Identification / A / Pass with exceptions
3.3.2: Labels or Instructions / A / Pass with exceptions
3.3.3: Error Suggestion / AA / Pass
3.3.4: Error Prevention (Legal, Financial, Data) / AA / Pass
4.1.1: Parsing / A / Pass
4.1.2: Name, Role, Value / A / Pass with exceptions
Visuals
WCAG 2.0
Checkpoint / Pass/Fail / Notes
1.1.1: Non-Text Content(A)
Provide text alternatives for non-text content (e.g. images) / Pass
with exceptions / Most images and icons include text equivalents.
Exceptions:
All Pages: advertisement images do not have appropriate alt text. In some cases they have alt=”” or no alt text.
TheLancet.comHomepage: The images used in the "Recent Lancet Series" require alt text indicative of the link's destination, instead of the content of the image.
TheLancet.com Article Page: The CrossMark image needs alt text that says the same text that appears in the popup. The alt text for the non-HTML tables (after opening) should be null (alt="") .
Cell.com Homepage: The social media icons rquire alt text indicative of the link's destination. Images used as headers, but also act as links require alt text indicative of the link's destination.
Cell.com Journal Homepage: Some images are missing alt text entirely (social media icons, Free Featured Article image, Events images, Libraries images, some Collections: Landmark Cell Reviews images, Cell Career Network images).
Cell.com Article Page: The CrossMark image needs alt text saying the same text that appears in the popup.
Health Advance Homepages: The Mobile Icon should have alt text indicative of the link's destination. The Webinar image should have an alt attribute indicative of the link's destination.
Health Advance Table of Contents: The AJKD blog image needs alt text; additionally, the alt text for the RSS icon should be alt="RSS feed" or similar.
Health Advance Article Pages: The CrossMark image needs alt text that says the same text that appears in the popup.
Health Advance Article Pages: Tables are just provided as images and need to have a properly marked up HTML table version.
Math equations – provide alt=”Math eq”, but not MathML.
1.3.3: Sensory Characteristics(A)
Do not rely on sensory characteristics of components such as shape, size, visual location, orientation, or sound / Pass / No content relies on sensory characteristics.
1.4.1: Use of Color(A)
Color is not used as the only visual means of conveying info / Pass
with exceptions / Color is usually not used as the onlymeans of conveying information.
Exceptions:
Cell.com Homepage: Links across the page can use either blue or black as the link text;colour should be standardized.
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) / Pass
with exceptions / Most text has enough contrast with its corresponding background.
Exceptions:
AllTheLancet.com Pages: All content in the footer is of a gray text on a white background that is not high enough contrast.
Cell.com Homepage: The gray publication text on white background does not have a high enough contrast. The white selected tab text on light gray background does not have enough contrast.
Cell.com Enter Card Details: The gray text on white background fails.
1.4.4: Resize Text (AA)
Text can be enlarged up to 200% without loss of functionality. / Pass / Text can be enlarged to 200% without loss of functionality.
1.4.5: Images of Text (AA)
Text is used rather than images of text, except where the presentation of text is essential, such as logos / Pass / No images of text are used other than for Logos or essential presentation.
2.3.1: Three Flashes or Below Threshold (A)
No more than three flashes in a 1-second period, or the flashes are below the defined thresholds / N/A / No flashing content exists.
Keyboard
WCAG 2
Checkpoint / Pass/Fail / Notes
1.3.2: Meaningful Sequence (A)
The correct reading sequence can be programmatically determined / Pass
with exceptions / The correct reading sequence is logical with the DOM order matching the visual order in most areas.
Exceptions:
TheLancet.com Table of Contents: The Quick Links are read out before the Date, Volume number, etc. even though the Quick Links visually come after.
TheLancet.com Article Page: The "More" sharing dropdown should come immediately after the "More" image in the DOM.
Cell.com Article Page: The "More" sharing dropdown should come immediately after the "More" image in the DOM.
2.1.1: Keyboard(A)
All functionality is available from a keyboard, except for tasks such as drawing / Pass
with exceptions / Most content is keyboard operable.
Exceptions:
All Pages: Audio and Media content has issues working properly with keyboard alone. This is attributable to the JW Player not offering keyboard support.
Search Results (Cell, Lancet, HA): Pagination links/buttons do not work with KB because of tabindex=-1 bug.
TheLancet.com Article Page: The CrossMark popup image does not appear when receiving keyboard focus.
Cell.com Homepage: The Explore menu does not stay open when using a screen reader.
Cell.com Article Page: The CrossMark popup balloon does not appear when receiving keyboard focus. The Expand All, Collapse All, and Hide Pane links are not keyboard operable. Users cannot collapse or expand the Article Headings with a keyboard. The CrossMark popup accordion links to not accept keyboard focus.
Health Advance Article Page: The CrossMark popup image does not appear when receiving keyboard focus.
2.1.2: No Keyboard Trap (A)
The user can use the keyboard to move through page elements and is not trapped on a particular element / Pass / No keyboard traps exist on any page.
2.4.3: Focus Order (A)
Users can tab through the elements of a page in a logical order / Pass
with exceptions / Tab order is logical on the site for the most part.
Exceptions:
TheLancet.com Article Page: The "Online First" link should come in between the Previous Article and Next Article links, instead of after. The "More" sharing dropdown should come immediately after the "More" image in the DOM. When activating the "View Large Image" for figures such as Graphs, focus must be moved inside the dialog box. Activating the "Jump to Section" content adds a tabindex="1" to almost all interactive content, which should not happen.
Cell.com Homepage: There is an unnecessary tab stop before the Events (new and upcoming) section. The off-screen Latest Issues should not be in the tab order (remove with display: none; for example).
Cell.com Article Page: The "More" sharing dropdown should come immediately after the "More" image in the DOM. Additionally, the dropdown should not open automatically, as focus resets and move to the top of the page when the dropdown opens. The Volume and Issue # link should come in between the Previous and Next article links. "Switch to Standard View" should come after the Article Info. When activating the "View Large Image" for various figures, focus must be moved inside the dialog box. The CrossMark dialog does not manage/trap keyboard focus.
Health Advance Homepage: The "Mobile" link should arrive after the RSS Feeds link.
Health Advance Article Page: The Volume # should come in between the Previous and Next article links. When activating the "View Large Image" for various figures, focus must be moved inside the dialog box.
All Search Results: When activating the link to save a search, focus should be moved into the dialog box automatically.
Carousel component, e.g. Lancet home page: selecting a button, e.g. ‘show slide 9’ should set focus to the new content in the carousel.
TheLancet.com Table of Contents: Quick Links visually anchor down but do not set focus to the actual headings which causes a jump back up to the Quick Links when using KB.
2.4.7: Focus Visible (AA)
The page element with the current keyboard focus has a visible focus indicator / Pass
with exceptions / Most elements that are navigable by keyboard have a form of keyboard focus.
Exceptions:
TheLancet.com Homepage: The '<', '>', and Pause/Play buttons for the Slider do not have a visible focus.
TheLancet.com Table of Contents: The 'X' close button for Search Within this Issue does not receive a visible focus.
TheLancet.com Article Page: The options within the "More" sharing dropdown do not receive a visible focus.
Cell.com Homepage: The "Download Audio" link under Cell Press needs a focus visible that encompasses the link text.
Cell.com Article Page: The options within the "More" sharing dropdown do not receive a visible focus.
Cell.com: The dark blue button style, e.g. Checkout, Enter Card Details need a visible focus state.
3.2.1: On Focus (A)
When a UI component receives focus, this does not trigger unexpected actions. / Pass / Focusable elements do not cause unexpected actions when receiving focus.
Headers and Structure
WCAG 2.0
Checkpoint / Pass/Fail / Notes
1.3.1: Information and Relationships (A)
Info, structure, and relationships can be programmatically determined / Pass
with exceptions / Good use of headings to appropriately structure content for the most part. Roles are used to designate some areas of content such as "navigation".
Exceptions:
All Pages: The page uses role="navigation" for every dropdown in the nav, when it should just be applied to the whole unordered list once.
Cell.com Journal Homepage: The content within the Events section should be ordered by row in the DOM instead of by column.
Cell.com Article Page: The References section looks like a table but is coded just as an unordered list.
All My Accounts: The forms for each section are in an ordered list, where an unordered list is required. Each section header text should be a heading (Change Password, Update Profile, Email Settings all h3s). In the Saved Searches, the top row of cells should all be table headers with a scope="col"; additionally, the leftmost column (starting from the 2nd row down) should be row headers.
2.4.1: Bypass Blocks (A)
Users can bypass repeated blocks of content. / Pass / Headingsexist, which allow users using Assistive Technology to jump to the different areas of content quickly. A visible "skip to main content" link is included.
2.4.6: Headings and Labels (AA)
Headings and labels are clear and consistent. / Pass / Headings and labels used are clear and descriptive.
3.1.1: Language of Page (A)
The language of the page is specified / Pass / The language is defined as lang="en" on all pages.
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. / Pass / None of the site-wide UI or functionality uses a different language than the default.
4.1.1: Parsing (A)
Use valid, error-free HTML / Pass / 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.
Note: There are other general HTML validation errors outside the scope of this criterion.
Labeling
WCAG 2.0
Checkpoint / Pass/Fail / Notes
2.4.2: Page Titled (A)
The page has a title describing its topic or purpose / Pass / All pages have descriptive titles.
2.4.4: Link Purpose (In Context) (A)
The purpose of each link can be determined from the link text or surrounding context. / Pass
with exceptions / Most links used have an identifiable purpose from the link text or surrounding context.
Exceptions:
TheLancet.comHomepage: In the Lancet Audio section, the Categories, Collections, and Subscribe links have no context, and should be associated with their respective category.
TheLancet.com Issue List: In the Lancet Audio section, the Categories, Collections, and Subscribe links have no context, and should be associated with their respective category.
TheLancet.com Article in Press: In the Lancet Audio section, the Categories, Collections, and Subscribe links have no context, and should be associated with their respective category.
Cell.com Homepage: The social media icons should have alt text indicative of the link's destination.
3.2.4: Consistent Identification (AA)
UI components used across the web site are identified consistently on every page. / Pass / Most UI components are consistent across the site.
3.3.1: Error Identification (A)
Input errors are clearly marked and described to the user. / Pass / Input errors are clearly marked and described.
On pages such as Cell > Subscribe checkout errors are identified using a heading with anchor links to correct specific errors
NOTE: When anchoring down to a field with an error it would be better to set focus into the actual input field rather than the field label as is now.
3.3.2: Labels and Instructions (A)
Items requiring user input are clearly labeled or have clear instructions. / Pass
with exceptions / Most input areas have clear labels which are programmatically assigned.
Exceptions:
TheLancet.com Advanced Search: Any search terms coming after an "And/or/not" dropdown should use "Search Term" as a label.
Cell.com Advanced Search: Any search terms coming after an "And/or/not" dropdown should use "Search Term" as a label.
Health Advance Advanced Search: Any search terms coming after an "And/or/not" dropdown should use "Search Term" as a label. Article Type checkboxes are missing <label> markup.
Health Advance Table of Contents: Consider using "Browse By Issue" as a legend and wrapping the label and the subsequent three dropdowns in a fieldset.
All Search Results: The "Saved Search Name" and "Email Alert Frequency" text should each be a label for their respective inputs.
Cell.com Shopping Cart: Promotional code needs <label>
3.3.3: Error Suggestion (AA)
When the user makes an input error, give suggestions for valid input. / Pass / The error identifications that appear are sufficient suggestions for valid input.For example on My Account > Change Password users see an instruction that password and confirm password entries do not match.
4.1.2: Name, Role, Value (A)
For all UI components, the name, value, and role can be programmatically determined. / Pass
with exceptions / Most UI components communicate their state programmatically.
Exceptions:
TheLancet.com Article Page: The "Article Info" expandable content uses aria-expanded, but it does not change to false when collapsing (the attribute seems to change upon mouse hover for some reason).