WCAG 2.1 AA
Accessibility review
Assessment
- Perceivable
Information and user interface components must be presentable to users in ways they can perceive.
1.1 Non-text content A
All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below.
- Must explain at least the description. So for example for input controls, or time-based media, or a test based on audio where text would give it away – the description must at leat make this clear
Solutions include:
- Aria labels for objects and non-text content
- Text alternatives e.g. text for videos
- Flash setting the name property for a non-text object
- H tags to provide text alternatives for images, text etc.
- Text alternatives to images within PDFs
- Focusable image class for Silverlight
In practice we have…
- Aria labels on some images
- Alt text on some images
- Text input boxes which act as descriptions for the content. These are flexible enough to add in an alternative text
In practice we should have….
- Aria labels on all images
- Text options on all video – transcripts etc.
- Text options on all audio – transcripts etc.
- Space to input copy if needed
Actions:
- Scan the system
- Create tickets for errors on
- Aria labels
- Alt tags
- Revisit video player options:
- Auto-transcription
- Plan into sprint
Statement:
We have alt tags applied to certain elements across the system and are in the process of doing a systematic review to address any gaps.
All media options can add a ‘Description’. This field is fully flexible to allow for inputting formatted text etc. and could be used to provide a transcript or other by the user.
1.2 Time-based media
Audio only and video only pre-recorded (.1) A
For prerecorded audio-only and prerecorded video-only media, the following are true, except when the audio or video is a media alternative for text and is clearly labeled as such:
Captions pre-recorded (.2) A
Captions are provided for all prerecorded audio content in synchronized media, except when the media is a media alternative for text and is clearly labeled as such.
Audio description or media alternative (.3) A
An alternative for time-based media or audio description of the prerecorded video content is provided for synchronized media, except when the media is a media alternative for text and is clearly labeled as such.
Audio description or media alternative (.4) AA
Captions are provided for all live audio content in synchronised media
Audio description pre-recorded (.5) AA
Audio description is provided for all pre-recorded video content in synchronized media.
Solutions:
- Provide a space to input a script.
- Provide an auto-generated transcript.
- Provide a space to input an audio description
- Can Amazon AI provide audio description?
In practice we have…
- The ability to upload captions – though this is limited to one version
- Third party players such as YouTube which have out of the box options for auto-captions
- Description boxes which could be used to provide a transcript or other option.
In practice we should have…..
- Auto-transcription on videos (We have explored options but found them too costly to date)
- Auto-transcription on audio
- Potentially a clearer way to add transcriptions
Statement:
We have options available within our video player which allows the uploading of closed captions. On top of this users can use the ‘Description’ field to include transcripts or other pieces of text you would like to see.
We have done a thorough review of the media market and identified some options for transcriptions. We are still finalising a list of preferred options to explore.
1.3 Adaptable
Create content that can be presented in different ways (for example simpler layout) without losing information or structure.
Info and Relationships (.1) A
Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
Meaningful Sequence (.2) A
When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.
Sensory Characteristics (.3) A
Instructions provided for understanding and operating content do not rely solely on sensory characteristics of components such as shape, color, size, visual location, orientation, or sound.
Orientation (.4) 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.
Solutions:
- Using ‘Aria landmarks’ (e.g. calling a banner a banner, or labelling ‘Main’ as the main content in a doc)
- Semantic elements to mark-up structure and H formats for text
- Appropriate handling of ‘Left to right’ text and ‘Right to left’ text (e.g. putting the fullstop on the far left of a sentence in Arabic)
- In text mention the location of key actions e.g. ‘Go to the next page by clicking the button in the bottom right hand corner’
- Always test on different orientations
- Make clear what form inputs are.
Actions:
- Run scanner to test for compliance.
- Ask tech team to review the labels and see if they feel they are being compliant to these standards.
Statement:
All of our code is built to high coding standards and therefore is also considered ‘Adaptable’. The code is structured in a way that provides landmarks and structures for the users. We also have advanced translation rules that adhere to standards of language structure.
1.4 Distinguishable
Make it easier for users to see and hear content including separating foreground from background.
Use of colour (.1) A
Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
Audio control (.2) A
If any audio on a Web page plays automatically for more than 3 seconds, either a mechanism is available to pause or stop the audio, or a mechanism is available to control audio volume independently from the overall system volume level.
Contrast (minimum) (.3) AA
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:
Resize text (.4) 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.
Images of text (.5) 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:
Reflow (.10) AA
Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for:
Non-text contrast (.11) AA
The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):
Text spacing (.12) 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:
Content on hover or focus (.13) AA
Where receiving and then removing pointer hover or keyboard focus triggers additional content to become visible and then hidden, the following are true.
Solutions:
- Include numerical or text based information alongside colour items
- Use a contrast ratio of 3:1 for text and icons
- Providing additional visual cues on focus for links or controls where colour alone is used to identify them e.g. underline
- If any audio on a web page plays automatically for more than 3 seconds – ability to pause or stop audio
- Identify way for logo to be converted into text e.g. a toggle or CSS control
- Ensure that layout and text works:
- At 200% zoom
- With text space override
- Ensure no actions are based on hover only e.g. hover over and more shows – this must also be possible via keyboard
Actions:
- Review all locations where colour is used, e.g. the Comparison grid, tables etc.
- Run a tool to review contrast rations
- Underline all text links (or other method)
Statement
Where we use colour-based indicators across the site, we always ensure that these are paired with text-based indicators that can be read by screen readers etc.
Whilst we strive to have a good contrast ratio, we are aware there may be gaps and are planning a thorough review to address these. Likewise with underlining of links etc.
Audio and video players typically do not auto-play and where there are options the user can pause stop or play this as they wish.
- Operable
Make all functionality available from a keyboard.
2.1 Keyboard accessible
Make all functionality available from a keyboard.
Keyboard (.1) A
All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints.
No Keyboard trap (.2) A
If keyboard focus can be moved to a component of the page using a keyboard interface, then focus can be moved away from that component using only a keyboard interface, and, if it requires more than unmodified arrow or tab keys or other standard exit methods, the user is advised of the method for moving focus away.
Character key shortcuts (.4) A
If a keyboard shortcut is implemented in content using only letter (including upper- and lower-case letters), punctuation, number, or symbol characters, then at least one of the following is true:
Solutions:
- Keyboard tabbing between sections
- Keyboard tabbing to reflect reading order in e.g. PDF documents
- Ensure forms in PDF can be filled in via keyboard
- Make all elements selectable via a keyboard
- Do not use keyboard shortcuts and if we do – allow a way to turn them off / carry out action otherwise
Actions:
- Run user tests on the navigability of Learn Amp (Thomas?)
- Address any issues
Statement:
By design our platform is structured to be accessible by keyboard as well as point and click. We believe there may be some gaps in this that we are planning to review with further testing.
2.2 Enough time
Provide users enough time to read and use content.
Timing adjustable (.1) A
For each time limit that is set by the content, at least one of the following is true:
Pause, Stop, Hide (.2) A
For moving, blinking, scrolling, or auto-updating information, all of the following are true
Solutions:
- Anywhere there are timed elements, giving a checkbox for the user to ask for more time (Quizzes?)
- Provide a mechanism to allow users to display moving, scrolling or auto-updating text in a static window or area
Actions:
- Review the ‘Quizzes’ area re: time-limits– is this applicable? What would our options be?
- Consider anywhere in the site that text / visuals automatically move and a way to pause or stop these
Statement:
We have designed with consideration for UX standards for example we do not typically have any moving text or images that do not have associated controls. We need to review anywhere this may be the case and apply the correct tooling.
We do not have timers other than in examination conditions. We will explore options to give greater accessibility controls without undermining the integrity of exam conditions
2.3 Seizures and physical reactions
Do not design content in a way that is known to cause seizures or physical reactions.
Three flashed or Below Threshold (.1) A
Web pages do not contain anything that flashes more than three times in any one second period, or the flash is below the general flash and red flash thresholds.
Actions
- Audit assets on the site to see if any meet this standard – Use Trace Center Photosensitive Epilepsy Analysis Tool (PEAT)
- Consider adding in a tooltip or similar to get users to not upload flashing images
Statement:
We do not have any elements in the site owned by Learn Amp that automatically flash. Users may upload their own content which we have no control over, and this may trigger issues.
2.4 Navigable
Provide ways to help users navigate, find content, and determine where they are.
Bypass blocks (.1) A
A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.
Page titled (.2) A
Web pages have titles that describe topic or purpose.
Focus order (.3) A
If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability.
Link purpose – in context (.4) A
The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general.
Multiple ways (.5) 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.
Solutions
- Adding links to ‘Go to top’ or ‘Go to bottom’
- Including titles in pages and text options
- Content must be structured logically and hierarchically so that e.g. if there is an important piece of ‘context’ in the way content is structured, this is represented
- Link text must describe the purpose of the link.
- Create a sitemap
- Consider more ‘Breadcrumbs’
Actions:
- Review tabbing through the site with a keyboard to see if hierarchically it makes sense. Ensure this covers main navigation as well as content.
- Review content for skips ‘Go to top’ or ‘Go to bottom’.
- Review all buttons and text actions for including tooltips etc.
Statement:
By design we include clear titles and other text options to denote what content is. We also ensure that content is logically structured in the code so that users can navigate between sections and pages logically. We need to review all pages to ensure 100% adherence to these standards.
All buttons and text have been written in a way to be independently clear. We must review these with a view to adding more copy and tooltips.
2.5 Input Modalities
Make it easier for users to operate functionality through various inputs beyond keyboard.
Pointer gestures (.1) A
All functionality that uses multipoint or path-based gestures for operation can be operated with a single pointer without a path-based gesture, unless a multipoint or path-based gesture is essential.
Pointer cancellation (.2) A
For functionality that can be operated using a single pointer, at least one of the following is true:
Label in name (.3) A
For user interface components with labels that include text or images of text, the name contains the text that is presented visually.
Motion Actuation (.4) A
Functionality that can be operated by device motion or user motion can also be operated by user interface components and responding to the motion can be disabled to prevent accidental actuation, except when:
Solutions:
- Make it so that drag and drop can be cancelled.
- When a user initiates a button click they can cancel it by e.g. clicking out of the zone they’ve clicked
Actions:
- Review complexity of hitting e.g. escape when dragging and dropping a quiz element or re-order element
- Use descriptive code such as Aria labels so that more details can be read
- If you have controls such as ‘Shake to undo’ you should also have a conventional method to do so
Statement:
As our App is a business based SaaS app, we do not have complex gestures. Given this, it means that many of these standards are not relevant for our current state.
We only have limited spaces where drag and drop is applied, and it is possible to cancel the action in all. However this includes either deleting the whole process e.g. if I’m re-ordering, deleting all re-ordering and starting again, or deleting an element after the false move has happened, or moving them back into place
- Understandable
Information and the operation of the user interface must be understandable.
3.1 Readable
Make text content readable and understandable.
Language of page (.1) A
The default human language of each Web page can be programmatically determined.
Language of parts (.2) 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.
Actions:
- Ensure all pages use HTML language and /lang entry in the document catalog of a PDF document etc.
Statement:
Our system is built to high standards to ensure that the default human language of each web page can be programmatically determined
3.2 Predictable
Make Web pages appear and operate in predictable ways.
On focus (.1) A
When any user interface component receives focus, it does not initiate a change of context.
On input (.2) A
Changing the setting of any user interface component does not automatically cause a change of context unless the user has been advised of the behavior before using the component.
On input (.3) AA
Changing the setting of any user interface component does not automatically cause a change of context unless the user has been advised of the behavior before using the component.
Solutions:
- Do not move to another page just because you hover over it or select it in state, only when the button is pressed should the page change
- Provide a submit button in all states
- Making clear what will happen when a button is pressed
Statement:
We design with usability in mind. Given this we do not change state just because a button is hovered over or a state is changed. Instead we make clear to the user what the action they are about to take will do and have a clear button to do so. We even include prompts such as ‘Are you sure’ for key actions such as destructive actions
3.3 Input assistance
Help users avoid and correct mistakes.
Error identification (.1) A
If an input error is automatically detected, the item that is in error is identified and the error is described to the user in text.
Labels or Instructions (.2) A
Labels or instructions are provided when content requires user input.
Error suggestion (.3) 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.
Error Prevention (Legal, Financial, Data) (.4) 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:
Solutions:
- Reporting of field errors through validation messages e.g. this field does not have a numerical field in
- Use ‘Aria-invalid’ on required fields
- Labelling a form field correctly
- Have confirmations for deletions
Summary:
As standard we ensure that all fields are clearly labelled and have clear validation messages. This is not only the case for ‘standard’ fields, but we build validations into complex processes such as importers and updaters allowing users to correct errors and re-import.
- Robust
Content must be robust enough that it can be interpreted by a wide variety of user agents, including assistive technologies.
4.1 Maximize compatibility with current and future user agents, including assistive technologies.
Parsing (.1) A
In content implemented using markup languages, elements have complete start and end tags, elements are nested according to their specifications, elements do not contain duplicate attributes, and any IDs are unique, except where the specifications allow these features.
Name, Role, Value (.2) A
For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.
Status messages (.3) 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.
Solutions:
- Using proper structure of code with beginning and end tags, lack of duplication etc.
- Using Aria tags and HTML
Actions:
- Ensure Aria tags coverage
Statement:
Our developers adhere to rigorous coding standards and this means that information is correctly parsed to ensure that it is compliant. Elements can be programmatically detected.
--
Accessibility scan:
- Nav:
- Errors:
- A link contains no text:
- Account switcher
- Search
- Missing alt text
- Profile image
- Text too small:
- Notifications bell e.g. 228
- A heading displays no content
- ‘Description’ field appears to be showing blank if empty rather than being turned off
- Broken Aria reference
- Each of the content tiles
- Low contrast
- Title
- Sub-labels e.g. ‘Video’ ‘Blog/article’ and ‘5.00 from 1 rating’
- Footer items
- Dashboard:
- Summary:
- 118 errors
- 45 Missing Alt text
- 34 Broken Aria Reference
- 9 Empty links
- 57 alerts
- 16 contrast errors
- 2 Features
- 209 Structural elements
- 551 Aria tags
- Errors:
- A link contains no text:
- 3 pips to edit dash
- Missing alt text
- Profile image
- Text too small:
- Notifications
- A heading displays no content
- ‘Description’ field appears to be showing blank if empty rather than being turned off
- Broken Aria reference
- Each of the content tiles
- Low contrast
- Title
- Sub-labels e.g. ‘Video’ ‘Blog/article’ and ‘5.00 from 1 rating’
- Footer items
- Item page
- Summary:
- 47 errors
- 15 missing form label
- 3 empty heading
- 12 x empty link
- 9 x Broken Aria Menu
- 12 contrast errors
- 8 alerts
- 10 features
- 39 strucutral elements
- 62 Aria tags
- Errors:
- Low contrast:
- Live view / Editor view
- Task ‘Set by Matthew Jeffries’
- Key details: Free / Article / Blog etc.
- Mark as complete
- Label for ‘Reviews’ and ‘Discussion’
- Search reviews
- Image alt-text not provided
- Item logo e.g. ‘Ted Talks’
- Link contains no text:
- Edit pencil icon
- Eye icon
- Learnlist
- Errors:
- Low contrast:
- Side bar time and progress
- Additional recommended content
- Unordered list
- Learnlist content is considered an unordered list
- Empty heading
- Sub-sections that are blank still show, as blank, rather than be removed
- Channel:
- Errors:
- Link contains no text
- 3 pips
- Close Channel preview
- Low contrast
- 3 Learnlist, 3 items etc.
- ‘Your CSV file is ready’
- ‘Download now’
- Showing ’20 of 200’
- Visibility e.g. Hidden, Entire company etc.
- Empty table header
- Manage Channels page
- Empty form label
- ‘Select all’ checkbox
Try Learn Amp yourself
Take the first step to a new learning system your employees will love.
