kiw.uber.space Open in urlscan Pro
2a00:d0c0:200:0:2c59:dcff:fedd:131b  Public Scan

Form analysis
0 forms found in the DOM

Text Content

ACCESSIBILITY KIWI

All categories Audio Color Content Function Heading Icon Image Label Layout
Responsive Text Video


SENSORY CHARACTERISTICS

Level A Criterion 1.3.3

Use sensory characteristics, but always offer text alternatives, because not
every person can perceive them.

 * Audio
 * Color
 * Content
 * Function
 * Heading
 * Icon
 * Image
 * Label
 * Layout
 * Responsive
 * Text
 * Video


DESIGN

CONTENT AND FUNCTIONS

 * Use sensory characteristics.
 * Don’t rely solely on sensory characteristics.
 * Always add text alternatives.

CHARACTERISTICS

 * Shape
 * Color
 * Size
 * Visual location
 * Orientation
 * Sound

SHAPE

Shape

PROBLEM

 * Shapes don’t help screen readers identifying the meaning.
 * Some shapes can be difficult to distinguish.
 * Shapes can convey different meanings.

ALTERNATIVES

 * Words can be identified by screen readers.
 * Simple words support the meaning of the shape, for example “Previous” or
   “CANCEL” would have different meanings.
 * Words also work without shapes – use them, but make sure the content or
   functions benefit from shapes!

COLOR

Color

PROBLEM

 * Colors don’t help screen readers identifying the status.
 * Different individuals and different cultures may perceive colors differently,
   leading to varied interpretations.

ALTERNATIVE

 * Words can be identified by screen readers.
 * Text clarifies the meaning.
 * Words also work without colors – use them, but make sure the content or
   functions benefit from colors!

SIZE

Size

PROBLEM

 * Sizes don’t help screen readers identifying the purpose.
 * Cookie banners keep misusing sizes – we shouldn’t sink so low, especially not
   in the EU.

ALTERNATIVE

 * Words can be identified by screen readers.
 * Keeping sizes on a fair level helps every user.
 * Words also work without sizes – use them, but make sure the content or
   functions benefit from sizes!

VISUAL LOCATION

Visual location

PROBLEM

 * Visual locations don’t help screen readers identifying the function.
 * Connecting instructions with visual locations is an exhausting riddle.

ALTERNATIVES

 * Words can be identified by screen readers.
 * Text on buttons clearly defines their functions.
 * Visual locations of the buttons support their functions.
 * Words also work without visual locations – use them, but make sure the
   content or function benefit from visual locations!

INSTAGRAM LINKS

Visual location

Platforms with longer texts usually upload a preview to Instagram and include
the instruction to click the link in their bio. This link opens an internal
browser to a page with a list of all uploads on Instagram.

 * Moving from the post to the link in the bio is a very exhausting process and
   difficult to handle.
 * The link in the bio opens the instagram browser on first click. This browser
   can’t be configured and doesn’t offer any tools.
 * Finding a post in the list relies on remembering the first picture of the
   post and identifying it in the list. This is difficult for everyone.
 * If the link is added to the description, Instagram doesn’t make it clickable.

ORIENTATION

Orientation

Content and functions should be available with every screen orientation. See
1.3.4 Orientation for more details.

SOUND

Sound

PROBLEM

 * Sounds can’t be perceived by everyone, for example not by deaf people.
 * Sounds can’t be perceived all the time, for example when volume is turned
   off.

ALTERNATIVE

 * Words can be identified by screen readers.
 * Words can be visible.
 * Words also work without sounds – make sure the content or functions benefit
   from sounds!

USERS

 * You and me
 * People with technology, for example screen readers
 * People with disabilities, for example color blindness
 * People with congnitive limitations, who benefit from visuals
 * People with visual perception

RELATIONS

 * 1.3.4 Orientation (AA) clearly requires the screen orientation.
 * 1.4.1 Use of color (A) focusses on color.


DESCRIPTION

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.


USE OF COLOR

Level A Criterion 1.4.1

Use colors, but never rely solely on colors, as some people might not be able to
distinguish them.

 * Color
 * Content
 * Function
 * Icon
 * Image
 * Text


DESIGN

CONTENT AND FUNCTIONS

 * Use colors.
 * Don’t rely solely on colors.
 * Always add visible alternatives.
 * This criterion focuses on people with visual impairments without assistive
   technology.

VISIBLE ALTERNATIVES

 * Icon
 * Typography
 * Symbol
 * Pattern
 * Contrast
 * Text

EXAMPLES

Colors are used in a wide variety. These examples are very basic.

FORM VERIFICATION

Form verification

PROBLEM

 * Some people have difficulty distinguishing between the neutral and red
   borders.
 * Problems can’t be identified and no help is offered.

ALTERNATIVE

 * Symbols are hints without relying on color.
 * Text is a clear definition without relying on color. It supports clarifying
   the problem and helps solving it. Moreover, text is a part of 3.3.1 Error
   identification.
 * The text color needs enough contrast.

DISABLED ELEMENTS

This criterion doesn’t mention disabled elements. Even though disabled input
fields shouldn’t be used at all, they would need more than just a lighter color.

Inactive components are also mentioned in 1.4.3 Contrast (minimum), increasing
the recommendation of avoiding disabled elements.

LINKS WITHIN TEXT

Links within text

PROBLEMS

 * Limiting the difference between text and links to a hover effect basically
   makes links invisible. They can only be found by hovering with the assumption
   it might be a link.
 * Changing the color of links without sufficient contrast may make them
   difficult to identify for some users.

ALTERNATIVES

 * The common way of visualizing links is setting an underline which is always
   visible.
 * If the design would like to focus on a different color, the color needs to
   have a contrast of 3:1 to the text color and 5:1 to the background color.
   Since it relies on contrast, only two states are possible, for example
   “normal text” and “link”. More details are in Technique G183.
 * typographic options, for example bold, italic or a clearly visible
   alternative font
 * symbols aligned with the link, for example an arrow

LINKS OUTSIDE TEXT

This example doesn’t include links outside text. They don’t necessarily adhere
to these alternatives, as they can be identified based on their page context,
for example header or navigation.

MAP

Map

PROBLEM

 * The map of a transportation system only displays each route in a different
   color.
 * Each stop is marked with a circle.

ALTERNATIVE

 * Each route has a color and a symbol.
 * Each stop is marked with the symbol of the route.

CHART

Chart

PROBLEM

 * A chart with four areas differentiates them solely based on colors
 * The labels of the charts are associated only with the colors.

ALTERNATIVE

 * Each bar is filled with a unique pattern.
 * The labels of the charts are associated with the patterns.

USERS

 * people who can’t distinguish colors and don’t use assistive technology
 * people with limited technology, for example monochromic displays
 * people who benefit from colors
 * Around 8 % of men are colorblind – this should convince the old white men in
   the boardrooms to invest into accessibility.

TOOLS

Accessibility settings
 * Settings, for example on a Mac
 * WebAIM contrast checker
 * WhoCanUse color checker

RELATION

 * 1.3.3 Sensory characteristics (A) includes color, however, it always relies
   on text alternatives.


DESCRIPTION

Color is not used as the only visual means of conveying information, indicating
an action, prompting a response, or distinguishing a visual element.


CONTRAST (MINIMUM)

Level AA Criterion 1.4.3

Text needs to have high contrast (4.5:1 or 3:1), because it has to be readable
for everyone everywhere.

 * Color
 * Content
 * Image
 * Text


DESIGN

SIZES

 * “Normal” text with 16 pt normal needs a contrast ratio of at least 4.5:1.
 * “Large” text with 18 pt normal or 14 pt bold needs a contrast ratio of at
   least 3:1.
 * Sizings have evolved – the values in pt are just a guideline.
 * The contrast can be higher than these requirements!

Sizes and contrasts
 * Individual design, like an outline (at least 1 px), can support the contrast.
 * Fonts are designed differently. Usually the sizes fit the requirements. If
   the font is smaller or thinner than average, the sizes for calculation should
   be adjusted.
 * These definitions don’t forbid using smaller sizes. However, text should be
   resizable.

TEXT TYPES

The contrast criterion only applies to neccessary text. If the text is
important, it needs to be accessible. Imagine sitting outside and the sun is
shining on your screen – what would you like to see?

Sunglasses

INCLUDED

 * Free text
 * Important text on images
 * Placeholder text
 * Hover text

EXCLUDED

 * Logos
 * Unimportant decorative text

INACTIVE

No guideline exists for inactive components. A disabled button doesn’t need to
meet the contrast ratio. However, my recommendation is enough contrast on every
component. If a disabled button doesn’t need to be identified by people with low
vision – do we need this button at all?

Disabled elements are also mentioned in 1.4.1 Use of color, increasing the
recommendation of avoiding inactive components.

COLORS

The calculation of contrast verifies the color of the text on the background.
While colors with enough contrast are important, functions and information
shouldn‘t rely on color anyway.

Don‘t block the process of defining a color system by trying to find the
contrast between the colors but rather between the colors and their backgrounds.

TOOLS

 * WebAIM contrast checker
 * WhoCanUse color checker
 * w3.org offers a collection of tools

RELATIONS

 * 1.4.6 Contrast (enhanced) (AAA) raises “Normal” to 7:1 and “Large” to 4.5:1.
 * 1.4.4 Resize text (AA) reveals, that font sizes are not absolute.

ALTERNATIVE

 * Technique G174: If the contrast can’t be reached, a control or an alternative
   page with sufficent contrast could be offered.


DESCRIPTION

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 contrast requirement.


RESIZE TEXT

Level AA Criterion 1.4.4

Individual text zoom sizes are included in responsive design.

 * Content
 * Image
 * Responsive
 * Text


DESIGN

SIZES

The minimal required zoom size of text is 200 %. If a website is responsive, the
possibility of completely zooming in and out is already included.

Video of this website with zooming in to 500 % and zooming out to 33 % as an
example of a responsive website. Zoom

TEXT TYPES

> Users may benefit from scaling all content on the Web page, but text is most
> critical.
> 
> (w3.org)

INCLUDED

 * Free text

EXCLUDED

 * Captions
 * Images of text

While this criterion focuses on text, having a completely responsive website
wouldn’t hurt.

USERS

Prejudices imply the requirement of zooming in, however, people with, for
example, tunnel vision also need to zoom out. People are different; a friend of
mine has a lot of small text on his development screen, while a businesswoman in
Vienna enlarges the entire text on her smartphone.

Different users

ALTERNATIVE

 * Technique G178: A website could include controlled buttons for zooming in and
   out.


DESCRIPTION

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


CONTRAST (ENHANCED)

Level AAA Criterion 1.4.6

Text needs to have higher contrast (7:1 or 4.5:1), because it has to be readable
for everyone everywhere.

 * Color
 * Content
 * Image
 * Text


DESIGN

SIZES

In addition to 1.4.3 Contrast (minimum) (AA), this criterion raises the values.

 * “Normal” text with 16 pt normal should have a contrast ratio of at least 7:1.
 * “Large” text with 18 pt normal or 14 pt bold should have a contrast ratio of
   at least 4.5:1.
 * Sizings have evolved – the values in pt are just a guideline.
 * The contrast could be higher than these requirements!

Sizes and contrasts

USAGE

> The 7:1 level therefore generally provides compensation for the loss in
> contrast sensitivity experienced by users with low vision who do not use
> assistive technology and provides contrast enhancement for color deficiency as
> well.
> 
> (w3.org)

Matching this criterion would be great, it can very difficult when creating a
design system, though. AA should definitely be fulfilled, AAA should be
considered.

RELATION

 * 1.4.3 Contrast (minimum) (AA) is based on 3:1 for “Large” and 4.5:1 for
   “Normal”. The documentation contains all details of this topic.


DESCRIPTION

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

LARGE TEXT

Large-scale text and images of large-scale text have a contrast ratio of at
least 4.5: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 contrast requirement.


HEADINGS AND LABELS

Level AA Criterion 2.4.6

Section headings and labels have to be clear and descriptive for providing a
better navigation.

 * Content
 * Heading
 * Label
 * Text


DESIGN

WORDING

 * Clear structure for easy understanding.
 * Clarified purpose of the content or the component.
 * Start with the most important (descriptive) information.
 * #Unique headings are beneficial.
 * Clarity out of context is beneficial.
 * One word or a single character may suffice.

USERS

People with screen readers as well as people with visual perception usually
navigate by grasping the first words when jumping from heading to heading.

HEADINGS

<!-- Recommended -->
<h1>Kiwi preparation</h1>
<h2>Hatching</h2>
<h2>Growing</h2>

<!-- Not Recommended -->
<h1>Preparation for Kiwi</h1>
<h2>Preparation for Hatching</h2>
<h2>Preparation for Growing</h2>

<!-- Not Recommended -->
<h1>Preparation</h1>
<h2>Preparation</h2>
<h2>Preparation</h2>

LABELS

> Form input controls with labels that clearly describe the content that is
> expected to be entered helps users know how to successfully complete the form.
> 
> (w3.org)

Labels

RECOMMENDED

 * “First Name” and “Last Name” clearly define the input. Starting with “First”
   and “Last” makes navigation faster in the “Name” group.

NOT RECOMMENDED

 * Starting with “Name” for “First” and “Last”, because the input fields are in
   the “Name” group and don’t need this definition every time.
 * Using the same label more than once in a group without clear differentiation,
   which part of the name is required.
 * No label. They are not neccessarily required for this criterion, however,
   they should be included for better accessibility and fulfilling other
   criteria, for example 3.3.2: Labels or instructions.

RELATIONS

 * 1.3.1: Info and relationships (A) for programmatical determination.
 * 2.4.4: Page titled (A) for navigation through pages and tabs.
 * 3.3.2: Labels or instructions (A) as more detailed requirement for labels.
 * 4.1.2: Name, role, value (A) for programmatical determination.


DESCRIPTION

Headings and labels describe topic or purpose.

 * About
 * Instagram
 * Input