WCAG-AA Summary

Perceivable

Time-based Media

• 1.2.4 Captions (Live) (level AA):

  Captions are provided for all live audio content in synchronized media.

• 1.2.5 Audio Description (Prerecorded) (level AA):

  Audio description is provided for all prerecorded video content in synchronized media.

The interfaces examined don’t use any live media or prerecorded video, so there is nothing to require captions or audio description.

Adaptable

• 1.3.4 Orientation (level AA):

  Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential.

All pages work equally well in either mobile orientation, except the “Results” page, which is inaccessible on certain mobile screen sizes (tested using iPhone Simulator) in portrait (notably, the smartphones available for testing were all bigger than this size).

• 1.3.5 Identify Input Purpose (level AA):

  The purpose of each input field collecting information about the user can be programmatically determined when:

  • The input field serves a purpose identified in the Input Purposes for User Interface Components section; and:
  • The content is implemented using technologies with support for identifying the expected meaning for form input data.:

No forms have autocorrect attributes. This complies with the requirements except for;

• Login - local user login should explicitly identify the username and password to enable assistive technology to autofill the fields.
• Profile - the language field may benefit from identification.

Further to this, it may be worth considering adding autocomplete="off" to questionnaire forms, where accidental submission consumes available submissions from a limited pool.

Distinguishable

• 1.4.3 Contrast (Minimum) (level AA):

  The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:

  • Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
  • Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
  • Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.

There are many elements with too low colour contrast. The footer, which is visible on every page is one of these, as well as many of the badges, buttons and alerts.

Most of these are unstyled Bootstrap components, so it may make sense to re-assess this once there is a new Bootstrap theme in place, to find which need addressing once the theme colours are eliminated.

• 1.4.4 Resize text (level AA):

  Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.

Adjusting the text size independently of the page zoom does not work.

• 1.4.5 Images of Text (level AA):

  If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text except for the following:

  • Customizable: The image of text can be visually customized to the user's requirements;
  • Essential: A particular presentation of text is essential to the information being conveyed.

No images of text could be found.

• 1.4.10 Reflow (level AA):

  Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for:

  • Vertical scrolling content at a width equivalent to 320 CSS pixels;:
  • Horizontal scrolling content at a height equivalent to 256 CSS pixels.:
  • Except for parts of the content which require two-dimensional layout for usage or meaning.:

The responsive design means that reflow works as intended up to 400% (also tested at 500%). The only exception is the table on the course results page, which overflows horizontally.

• 1.4.11 Non-text Contrast (level AA):

  The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):

  • User Interface Components: Visual information required to identify user interface components and states, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author;
  • Graphical Objects: Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.

Most pages met the “non-text contrast” requirement. The elements that did not were;

• input text fields, which have too low a border colour (this can likely be addressed with the Bootstrap theme)
• Classes .badge and .label do not always have sufficient contrast against their background.

• 1.4.12 Text Spacing (level AA):

  In content implemented using markup languages that support the following text style properties, no loss of content or functionality occurs by setting all of the following and by changing no other style property:

  • Line height (line spacing) to at least 1.5 times the font size;:
  • Spacing following paragraphs to at least 2 times the font size;:
  • Letter spacing (tracking) to at least 0.12 times the font size;:
  • Word spacing to at least 0.16 times the font size.:
  • Exception: Human languages and scripts that do not make use of one or more of these text style properties in written text can conform using only the properties that exist for that combination of language and script.:

Adjusting text spacing works corretly (this was tested using the text spacing bookmarklet). The only exception was the <dl> at the top of course content pages (tested using course-template), which caused some horizontal overflow.

This was also tested with the front page from the current master branch - note that the previous implementation failed.

• 1.4.13 Content on Hover or Focus (level AA):

  Where receiving and then removing pointer hover or keyboard focus triggers additional content to become visible and then hidden, the following are true:

  • Dismissable: A mechanism is available to dismiss the additional content without moving pointer hover or keyboard focus, unless the additional content communicates an input error or does not obscure or replace other content;
  • Hoverable: If pointer hover can trigger the additional content, then the pointer can be moved over the additional content without the additional content disappearing;
  • Persistent: The additional content remains visible until the hover or focus trigger is removed, the user dismisses it, or its information is no longer valid.
  • Exception: The visual presentation of the additional content is controlled by the user agent and is not modified by the author.:

Very few cases of content (like tooltips) appearing on hover were found in the pages sampled. Those that were found always had an element of reduncancy, although they did not meet these requirements (usually as they were not hoverable).

Operable

Navigable

• 2.4.5 Multiple Ways (level AA):

  More than one way is available to locate a Web page within a set of Web pages except where the Web Page is the result of, or a step in, a process.

Generally, if we consider courses to be “subsites”, these criteria are basically met. It’s possible to navigate course pages either;

• From a “contents” list of chapters and pages
• From a list of point-bearing exercises, grouped by page
• Using “back” and “next” links within the pages.

It’s always possible to reach the front page and other key pages, and the menu of the user’s own courses provides quick links to the pages the user is most likely to want to access.

Navigation within courses, and jumping from one course to another is provided in at least two ways.

• 2.4.6 Headings and Labels (level AA):

  Headings and labels describe topic or purpose.

Throughout all pages, except “log out” and the front page, there are mismatched heading levels. These can be examined most easily in WAVE, and should create a logical, nexted tree structure.

Understandable

Readable

• 3.1.2 Language of Parts (level AA):

  The human language of each passage or phrase in the content can be programmatically determined except for proper names, technical terms, words of indeterminate language, and words or phrases that have become part of the vernacular of the immediately surrounding text.

The version of the front page on master is the only part where the language of parts is correctly identified. The same technique should be applied to the course archive page. Additionally, the language names are present in the profile page.

No other pages use multiple languages which are visible simeltaneously (some courses do, but specific courses were out of scope for this review).

Predictable

• 3.2.3 Consistent Navigation (level AA):

  Navigational mechanisms that are repeated on multiple Web pages within a set of Web pages occur in the same relative order each time they are repeated, unless a change is initiated by the user.

The navigation is present in the same location on every page.

The only element which is unpredictable is the menu which allows users to choose a group to submit with, as it is related to the course, but appears in the main navigation area, and may appear differently in different courses.

• 3.2.4 Consistent Identification (level AA):

  Components that have the same functionality within a set of Web pages are identified consistently.

Most elements can be identified consistently. Issues have been identified in the previous audit about the use of Links and Buttons .

An important note here is that teachers are free to override the CSS within courses. This allows individual courses to use inconsistent identification for elements, and is outside of the scope of this audit. It may be worth producing documentation for teachers covering the importance of not overriding some of the default styles, or to consider limiting the effect of teacher styles to only the content area.

Input Assistance

• 3.3.3 Error Suggestion (level AA):

  If an input error is automatically detected and suggestions for correction are known, then the suggestions are provided to the user, unless it would jeopardize the security or purpose of the content.

Forms don’t always show error messages when fields are missed or in the incorrect format. Those that do may have unclear error messages.

• 3.3.4 Error Prevention (Legal, Financial, Data) (level AA):

  For Web pages that cause legal commitments or financial transactions for the user to occur, that modify or delete user-controllable data in data storage systems, or that submit user test responses, at least one of the following is true:

  • Reversible: Submissions are reversible.
  • Checked: Data entered by the user is checked for input errors and the user is provided an opportunity to correct them.
  • Confirmed: A mechanism is available for reviewing, confirming, and correcting information before finalizing the submission.

No pages cause legal or financial consequences, however since submissions are finite and contribute to university grades, they may meet the definition of “testing”.

Submissions are not reversible. No mechanism to check values before submission are provided. No confirmation step is used. Any of these would meet the criteria. This has already been discussed earlier in GitHub issue #508 and MOOC-grader issue #56.

Robust

Compatible

• 4.1.3 Status Messages (level AA):

  In content implemented using markup languages, status messages can be programmatically determined through role or properties such that they can be presented to the user by assistive technologies without receiving focus.

The majority of sampled pages do not contain “live” status messages.

The status messages shown, when submitting an exercise, are not marked up appropriately or highlighted to assistive technology.