Usability Test

Title

MySports Rewards App

App Store

https://apps.apple.com/de/app/mysports-rewards/id6444156598

Google Play

https://play.google.com/store/apps/details?id=com.mysports.teams&hl=en&pli=1

Result

⚪️5   🟠7    🔴8    🟣 8    🔵31    🟢62 

Legende

🔴 Not OK    🟢 OK   🟠 Maybe not ok or AAA criteria not met

🔵 Not applicable   🟣 To be tested   ⚪️ Not necessary

1.1

Text-Alternatives

1.1.1

A

Non-text Content

Images, image buttons, and image map hot spots have appropriate, equivalent, alternative text

🔴

1.1.1

A

Non-text Content

Images that do not convey content, are decorative, or contain content that is already conveyed in text are given empty
alternative text (alt="") or implemented as CSS backgrounds. All linked images have descriptive alternative text.

🔴

1.1.1

A

Non-text Content

Equivalent alternatives to complex images are provided in context or on a separate linked page.

🔵

1.1.1

A

Non-text Content

Form buttons have a descriptive value.

🟢

1.1.1

A

Non-text Content

Inputs have appropriate accessible names

🔴

1.1.1

A

Non-text Content

Embedded multimedia is identified via accessible text.

🔵

1.1.1

A

Non-text Content

Frames and iframes are appropriately titled

🟠

1.2

Time-based Media

1.2.1

A

Audio-only and Video-only

A descriptive transcript of relevant content is provided for non-live audio-only (audio podcasts, MP3 files, etc.).

🔵

A

Audio-only and Video-only

A descriptive transcript or audio description of relevant content is provided for non-live video-only, unless the video
is decorative.

🔵

1.2.2

A

Captions (Prerecorded)

Synchronized captions are provided for non-live video (YouTube videos, etc.).

🟢

1.2.3

A

Audio Description or Media Alternative (Prerecorded)

A descriptive transcript or audio description is provided for non-live video.
NOTE: Only required if there is relevant visual content that is not presented in the audio.

🔵

1.2.4

AA

Captions (Live)

Synchronized captions are provided for live media that contains audio (audio-only broadcasts, web casts, video
conferences, etc.)

🔵

1.2.5

AA

Audio Description (Prerecorded)

Audio descriptions are provided for non-live video.
NOTE: Only required if there is relevant visual content that is not presented in the audio.

🔵

1.2.5

AA

Audio Description (Prerecorded)

While not required at Level AA, for optimal accessibility WebAIM recommends descriptive transcripts in addition to
audio descriptions.

🔵

1.2.6

AAA

Sign Language (Prerecorded)

A sign language video is provided for media that contains audio.

🔵

1.2.7

AAA

Extended Audio Description

When audio description cannot be added to video due to insufficient pauses in the audio, an alternative version of the
video with pauses that allow audio descriptions is provided.

🔵

1.2.8

AAA

Media Alternative

A descriptive transcript is provided for pre-recorded media that has a video track. For optimal accessibility, WebAIM
strongly recommends transcripts for all multimedia.

🔵

1.2.9

AAA

Audio-only (Live)

A descriptive text transcript (e.g., the script of the live audio) is provided for live content that has audio.

🔵

1.3

Adaptable

1.3.1

A

Info and Rerlationships

Semantic markup is appropriately used to designate headings, regions/landmarks, lists, emphasized or special text, etc.

🟣

1.3.1

A

Info and Rerlationships

Tables are used for tabular data and data cells are associated with their headers. Data table captions, if present, are
associated to data tables

🟢

1.3.1

A

Info and Rerlationships

Text labels are associated with form inputs. Related form controls are grouped with fieldset/legend. ARIA labelling
may be used when standard HTML is insufficient.

🟢

1.3.2

A

Meaningful Sequence

The reading and navigation order (determined by code order) is logical and intuitive.

🟢

1.3.3

A

Sensory Characteristics

Instructions do not rely upon shape, size, or visual location (e.g., "Click the square icon to continue" or "Instructions
are in the right-hand column").

🟢

1.3.3

A

Sensory Characteristics

Instructions do not rely upon sound (e.g., "A beeping sound indicates you may continue.").

🟢

1.3.4

AA

Orientation

Orientation of web content is not restricted to only portrait or landscape, unless a specific orientation is necessary.

🔵

1.3.5

AA

Identify Input Purpose

Input fields that collect certain types of user information have an appropriate autocomplete attribute defined.

🔴

1.3.6

AAA

Identify Purpose

ARIA is used, where appropriate, to enhance HTML semantics to better identify the pur

🔵

1.3.6

AAA

Identify Purpose

ARIA is used, where appropriate, to enhance HTML semantics to better identify the pur

🔵

1.4

Distinguishable

1.4.1

A

Use of Color

Color is not used as the sole method of conveying content or distinguishing visual elements.

🟢

1.4.1

A

Use of Color

Color alone is not used to distinguish links from surrounding text unless the contrast ratio between the link and the
surrounding text is at least 3:1 and an additional distinction (e.g., it becomes underlined) is provided when the link is
hovered over and receives keyboard focus.

🟢

1.4.2

A

Audio Control

A mechanism is provided to stop, pause, mute, or adjust volume for audio that automatically plays on a page for more
than 3 seconds.

🔵

1.4.3

AA

Contrast (Minimum)

Text and images of text have a contrast ratio of at least 4.5:1.

🔴

1.4.3

AA

Contrast (Minimum)

Large text - at least 18 point (typically 24px) or 14 point (typically 18.66px) and bold - has a contrast ratio of at least
3:1.

🟢

1.4.4

AA

Resize Text

The page is readable and functional when the page is zoomed to 200%.
NOTE: 1.4.10 (below) introduces additional requirements for zoomed content.

🔴

1.4.5

AA

Images of Text

If the same visual presentation can be made using text alone, an image is not used to present that text.

🟢

1.4.6

AAA

Contrast (Enhanced)

Text and images of text have a contrast ratio of at least 7:1.

🟠

1.4.6

AAA

Contrast (Enhanced)

Large text - at least 18 point (typically 24px) or 14 point (typically 18.66px) and bold - has a contrast ratio of at least 4.5:1.

🟠

1.4.7

AAA

Low or No Background Audio

Audio with speech has no or very low background noise so the speech is easily distinguished.

🔵

1.4.8

AAA

Visual Presentation

Blocks of text over one sentence in length:
Are no more than 80 characters wide.

🟢

1.4.8

AAA

Visual Presentation

Are NOT fully justified (aligned to both the left and the right margins).

🟢

1.4.8

AAA

Visual Presentation

Have adequate line spacing (at least 1/2 the height of the text) and paragraph spacing (1.5 times line spacing).

🟢

1.4.8

AAA

Visual Presentation

Have defined or inherited foreground and background colors.

🟢

1.4.8

AAA

Visual Presentation

Do NOT require horizontal scrolling when the text size is doubled.

🟢

1.4.9

AAA

Images of Text

Text is used within an image only for decoration (the image does not convey content) OR when the information
cannot be presented with text alone.

🟢

1.4.10

AA

Reflow

No loss of content or functionality occurs, and horizontal scrolling is avoided when content is presented at a width of
320 pixels.

🟠

1.4.10

AA

Reflow

This requires responsive design for most web sites. This is best tested by setting the browser window to 1280
pixels wide and then zooming the page content to 400%.

🔴

1.4.10

AA

Reflow

Content that requires horizontal scrolling, such as data tables, complex images (such as maps and charts), toolbars, etc. are exempted.

🟢

1.4.11

AA

Non-text Contrast

A contrast ratio of at least 3:1 is present for differentiating graphical objects (such as icons and components of charts or graphs) and author-customized interface components (such as buttons, form controls, and focus indicators/outlines).

🔴

1.4.11

AA

Non-text Contrast

At least 3:1 contrast is maintained in the various states (focus, hover, active, etc.) of author-customized interactive
components.

⚪️

1.4.12

AA

Text Spacing

No loss of content or functionality occurs when the user adapts paragraph spacing to 2 times the font size, text line height/spacing to 1.5 times the font size, word spacing to .16 times the font size, and letter spacing to .12 times the
font size.

🟠

1.4.12

AA

This is best supported by avoiding pixel height definitions for elements that contain text.

🟢

1.4.13

AA

Content on Hover or Focus

When additional content is presented on hover or keyboard focus:

The newly revealed content can be dismissed (generally via the Esc key) without moving the pointer or keyboard
focus, unless the content presents an input error or does not obscure or interfere with other page content.

⚪️

1.4.13

AA

The pointer can be moved to the new content without the content disappearing.

🟢

1.4.13

AA

The new content must remain visible until the pointer or keyboard focus is moved away from the triggering control, the new content is dismissed, or the new content is no longer relevant.

🟢

2.1

Keyboard-Accessible

2.1.1

A

Keyboard

All page functionality is available using the keyboard, unless the functionality cannot be accomplished in any known
way using a keyboard (e.g., free hand drawing).

🟢

2.1.1

A

Keyboard

Page-specified shortcut keys and accesskeys (accesskey should typically be avoided) do not conflict with existing
browser and screen reader shortcuts.

🔵

2.1.2

A

No Keyboard Trap

Keyboard focus is never locked or trapped at one particular page element. The user can navigate to and from all navigable page elements using only a keyboard.

🟢

2.1.3

AAA

Keyboard No Exception

All page functionality is available using the keyboard.

⚪️

2.1.4

A

Charakter Shortcuts

If a keyboard shortcut uses printable character keys, then the user must be able to disable the key command, change the defined key to a non-printable key (Ctrl, Alt, etc.), or only activate the shortcut when an associated interface
component or button is focused.

⚪️

2.2

Enough Time

2.2.1

A

Timing Adjustable

If a page or application has a time limit, the user is given options to turn off, adjust, or extend that time limit. This is
not a requirement for real-time events (e.g., an auction), where the time limit is absolutely required, or if the time
limit is longer than 20 hours.

🔵

2.2.2

A

Pause, Stop, Hide

Automatically moving, blinking, or scrolling content (such as carousels, marquees, or animations) that lasts longer
than 5 seconds can be paused, stopped, or hidden by the user.

🔵

2.2.2

A

Pause, Stop, Hide

Automatically updating content (e.g., a dynamically-updating news ticker, chat messages, etc.) can be paused,
stopped, or hidden by the user or the user can manually control the timing of the updates.

🔵

2.2.3

AAA

No Timing

The content and functionality have no time limits or constraints.

🔵

2.2.4

AAA

Interruptions

Interruptions (alerts, page updates, etc.) can be postponed or suppressed by the user.

🔵

2.2.5

AAA

Re-authenticating

If an authentication session expires, the user can re-authenticate and continue the activity without losing any data
from the current page.

🟢

2.2.6

AAA

Timeouts

Users must be warned of any timeout that could result in data loss, unless the data is preserved for longer than 20
hours of user inactivity.

🔵

2.3

Seizures

2.3.1

A

Three Flashes or Below Treshold

No page content flashes more than 3 times per second unless that flashing content is sufficiently small and the
flashes are of low contrast and do not contain too much red.

🟢

2.3.2

AAA

Three Flashes

No page content flashes more than 3 times per second.

🟢

2.3.3

AAA

Animation from Interactions

Users can disable non-essential animation and movement that is triggered by user interaction.

🟠

2.4

Navigable

2.4.1

A

Bypass Blocks

A link is provided to skip navigation and other page elements that are repeated across web pages.

🔵

2.4.1

A

Bypass Blocks

While proper use of headings or regions/landmarks is sufficient to meet this success criterion, because keyboard
navigation by headings or regions is not supported in most browsers, WebAIM recommends a "skip" link in addition
to headings and regions.

🔵

2.4.2

A

Page Titled

The web page has a descriptive and informative page title

🟢

2.4.3

A

Focus Order

The navigation order of links, form controls, etc. is logical and intuitive.

🟢

2.4.4

A

Link Purpose

The purpose of each link (or image button or image map hotspot) can be determined from the link text alone, or from the link text and its context (e.g., surrounding text, list item, previous heading, or table headers).

🟢

2..4.4

A

Link Purpose (In Context)

Links with the same text that go to different locations are readily distinguishable.

🟢

2.4.5

AA

Multiple Ways

Multiple ways are available to find other web pages on the site - at least two of: a list of related pages, table of
contents, site map, site search, or list of all available web pages.

🔵

2.4.6

AA

Headings & Labels

Page headings and labels for form and interactive controls are informative. Avoid duplicating heading and label text
unless the structure provides adequate differentiation between them.

🟢

2.4.7

AA

Focus Visible

There is a visible indicator for page elements when they receive keyboard focus.

🟢

2.4.8

AAA

Location

If a web page is part of a sequence of pages or within a complex site structure, an indication of the current page
location is provided, for example, through breadcrumbs or specifying the current step in a sequence (e.g., "Step 2 of 5
- Shipping Address").

🟣

2.4.9

AAA

Link Purpose (Link Only)

The purpose of each link (or image button or image map hotspot) can be determined from the link text alone.

🟢

2.4.9

AAA

Link Purpose (Link Only)

There are no links with the same text that go to different locations.

🟣

2.4.10

AAA

Section Headings

Beyond providing an overall document structure, individual sections of content are designated using headings, where
appropriate.

🟢

2.4.11

AA

Focus Not Obscured (Minimum)

When elements have keyboard focus, they are not entirely covered or hidden by page content.

🟢

2.4.12

AAA

Focus Not Obscured (Enhanced)

When elements have keyboard focus, they are entirely visible.

🟢

2.4.13

AAA

Focus Appearance

If a custom focus indicator or background color is in place, the focus indicator pixels must:

have at least 3:1 contrast between focused/unfocused states

❓

2.4.13

AAA

Focus Appearance

be at least as large as the area of a 2 pixel thick perimeter surrounding the element. The formula (width × 4) + (height × 4) = focus indicator area can be used for rectangular components.

🟢

2.5

Input Modalities

2.5.1

A

Pointer Gestures

If multipoint or path-based gestures (such as pinching, swiping, or dragging across the screen) are not essential to the functionality, then the functionality can also be performed with a single point activation (such as activating a
button).

🟢

2.5.2

A

Pointer Cancellation

To help avoid inadvertent activation of controls, avoid non-essential down-event (e.g., onmousedown) activation when clicking, tapping, or long pressing the screen. Use onclick, onmouseup, or similar instead. If onmouseup (or
similar) is used, you must provide a mechanism to abort or undo the action performed.

🟢

2.5.3

A

Label In Name

If an interface component (link, button, etc.) presents text (or images of text), the accessible name (label, alternative
text, aria-label, etc.) for that component must include the visible text.

🟣

2.5.4

A

Motion Actuation

Functionality that is triggered by moving the device (such as shaking or panning a mobile device) or by user
movement (such as waving to a camera) can be disabled and equivalent functionality is provided via standard
controls like buttons.

🔵

2.5.5

AAA

Target Size

Clickable targets are at least 44 by 44 pixels in size unless an alternative target of that size is provided, the target is inline (such as a link within a sentence), the target is not author-modified (such as a default checkbox), or the small
target size is essential to the functionality.

🟠

2.5.6

AAA

Concurrent Input Mechanisms

Content does not require a specific input type, such as touch-only or keyboard-only, but must support alternative inputs (such as using a keyboard on a mobile device).

❓

2.5.7

AA

Dragging Movements

Functionality that uses pointer dragging can also be achieved using a single pointer without dragging (unless
dragging is essential).

🔵

2.5.8

AA

Target Size Minimum

Pointer input target sizes are at least 24 by 24 pixels unless:A 24 pixel diameter circle centered on the target element does not intersect with any other target or a 24 pixel circle centered on an adjacent target.

🟢

2.5.8

AA

Target Size Minimum

The functionality can be achieved in some other conformant manner.

🟢

2.5.8

AA

Target Size Minimum

The target is in a sentence or list.

🟢

2.5.8

AA

Target Size Minimum

The target size can't be modified or is essential to the functionality.

🟢

3.1

Understandable

3.1.1

A

Language of Page

The language of the page is identified using the lang attribute (e.g., <html lang="en">).

🟣

3.1.2

AA

Language of Parts

The language of page content that is in a different language is identified using the lang attribute (e.g., <blockquote lang="es">).

🟣

3.1.3

AAA

Unusual Words

Words that may be ambiguous, unfamiliar, or used in a very specific way are defined through adjacent text, a
definition list, a glossary, or other suitable method.

🟢

3.1.4

AAA

Abbreviations

The meaning of an unfamiliar abbreviation is provided by expanding it the first time it is used, using the <abbr> element, or linking to a definition or glossary.

🟢

3.1.5

AAA

Reading Level

A more understandable alternative is provided for content that is more advanced than can be reasonably read by a person with roughly 9 years of primary education.

🟢

3.1.6

AAA

Pronunciation

If the pronunciation of a word is vital to understanding that word, its pronunciation is provided immediately
following the word or via a link or glossary.

🔵

3.2

Predictable

3.2.1

A

On Focus

When a page element receives focus, it does not result in a substantial change to the page, the spawning of a pop-up
window, an additional change of keyboard focus, or any other change that could confuse or disorient the user.

🟢

3.2.2

A

On Input

When a user inputs information or interacts with a control, it does not result in a substantial change to the page, the
spawning of a pop-up window, an additional change of keyboard focus, or any other change that could confuse or
disorient the user unless the user is informed of the change ahead of time.

🟢

3.2.3

AA

Consistent Navigation

Navigation links that are repeated on web pages do not change order when navigating through the site.

🟢

3.2.4

AA

Consistent Identification

Elements that have the same functionality across multiple web pages are consistently identified. For example, a
search box at the top of the site should always be labeled the same way.

🟢

3.2.5

AAA

Change on Request

Substantial changes to the page, the spawning of pop-up windows, uncontrolled changes of keyboard focus, or any other change that could confuse or disorient the user must be initiated by the user. Alternatively, the user is provided
an option to disable such changes.

🟢

3.2.6

A

Consistent Help

Contact and self-help details or functionality are presented consistently when present on multiple web pages.

🟢

3.3

Input Assistance

3.3.1

A

Error Identification

Required inputs or inputs that require a specific format, value, or length provide this information within the
element's label.

🟢

3.3.1

A

Error Identification

Form validation errors are efficient, intuitive, and accessible. The error is clearly identified, quick access to the problematic element is provided, and the user can easily fix the error and resubmit the form.

🟢

3.3.2

AA

Labels or Instructions

Sufficient labels, cues, and instructions for required interactive elements are provided via instructions, examples, properly positioned input labels, or fieldsets/legends.

🟢

3.3.3

AA

Error Suggestion

If an input error is detected (via client-side or server-side validation), suggestions are provided for fixing the input in
a timely and accessible manner.

🟢

3.3.4

AA

Error Prevention (Legal, Financial, Data)

If the user can change or delete legal, financial, or test data, the changes/deletions can be reversed, verified, or confirmed.

🟢

3.3.5

AAA

Help

Instructions and cues are provided in context to help in form completion and submission.

🟢

3.3.6

AAA

Error Prevention (All)

If the user can submit information, the submission is reversible, verified, or confirmed.

🟣

3.3.7

A

Redundant Entry

Information that a user must re-enter to complete a single-session process must be auto-populated or available for
the user to select, unless re-entering the information is essential to the functionality, the information poses security issues, or the previously-entered information is no longer valid.

🟢

3.3.8

AA

Accessible Authentication (Minimum)

A cognitive function test (such as remembering a password or solving a puzzle) is not required for any step in an
authentication process unless the cognitive function test can be bypassed in some way, can be completed with
assistance by some other mechanism, uses object recognition (such as "click on the photo of a flower"), or uses identification of non-text content provided by the user (such as a user-provided image).

🟢

3.3.9

AAA

Accessible Authentication (Enhanced)

A cognitive function test (such as remembering a password or solving a puzzle) is not required for any step in an
authentication process unless the cognitive function test can be bypassed in some way or can be completed with
assistance by some other mechanism.

🟢

4.0

Robust

4.1.1

A

Parsing (Obsolete and remobed)

NOTE: This success criterion is no longer useful and as of 2023 has been removed from WCAG. It previously required
that significant HTML validation/parsing errors be avoided.

⚪️

4.1.2

A

Name, Role, Value

Markup is used in a way that facilitates accessibility. This includes following the HTML specifications and using
forms, input labels, frame titles, etc. appropriately.

🟢

A

Name, Role, Value

ARIA is used appropriately to enhance accessibility when HTML is not sufficient.

🔵

4.1.3

AA

Status Messages

If an important status message is presented and focus is not set to that message, the message must be announced to screen reader users, typically via an ARIA alert or live region.

🟢