Introduction

Accessibility refers to designing and developing digital products—such as websites, web apps, and mobile applications—so that people with disabilities (including those with visual, auditory, motor, or cognitive impairments) can use them without barriers.

Accessibility guidelines help app builders create experiences that are inclusive, user-friendly, and compliant with global standards.

Cogniss-powered apps and features are designed to align with WCAG 2.1 AA standards, ensuring a strong foundation for accessibility. However, app builders play a crucial role in maintaining and enhancing accessibility within their apps. Certain elements, such as content creation, custom UI components, and media alternatives, require proactive implementation by app builders to fully meet accessibility standards

For more information on WCAG 2.1, click here.

To ensure your app meets accessibility guidelines, it is important to understand these four principles:

Perceivable – Content must be visible and understandable.
Operable – Users must be able to interact with the app using various input methods.
Understandable – Navigation and information must be clear and predictable.
Robust – The app must be compatible with assistive technologies.

Now, let's learn how to apply these principles correctly in Cogniss apps.

1. Perceivable (Content is easily noticeable)

Content should be easy for all app users to see and understand. This means:

Adding text descriptions for images.
Using flexible layouts that adjust to different screens.
Making sure text is clear and easy to read.

1.1 Provide alternative text on images and icons (alt text)

Alt text (alternative text) is a short description of an image that helps visually impaired users understand what it shows. Screen readers read it aloud, and it also appears if the image doesn’t load.

To add alt text:

Open the media library.
Select the image or icon.
Enter a clear, descriptive text.
Save your changes before inserting the image.

To test with your devices, use a screen reader -

Screen reader: Voice Over for iOS devices
Screen reader: Talk Back for Android devices

1.2 Use high contrast colours

Cogniss Styles provides an easy way to customize your app using various color components, helping to maintain a consistent look and feel. With the help of Cogniss Styles, you can achieve a visual contrast in your app that meets standards.

When choosing color combinations for primary and secondary colors, you can use a contrast-checking tool to ensure that primary and secondary colors. Minimum 4.5:1 ratio for text and 3:1 for large text. (Use this Contrast Checker to review). This helps keep buttons, text, and other interface elements visible against their backgrounds, improving readability and usability.

a. Primary and Secondary colors. Dark and Light font colors.

Ensure primary and secondary colours adhere to the accessibility standard.

Example:

b. How do these colors affect the User interface of the app?

Primary: The main color for key elements like buttons and links. It should be a darker shade of the brand color and will be used widely in the app’s interface.
- Buttons
- Navigation menu
Secondary: A lighter color that complements the primary color, used for highlights and accents. Make sure it has enough contrast with the primary color to maintain readability.
Dark: A deep, dark shade used for text and contrast elements. Keeping it dark ensures good readability and accessibility.
- Text colour
Light: A very light shade used for light text and elements. If it’s too dark, it can reduce contrast and affect accessibility.

c. App background

Select background colors that provide sufficient contrast with widgets, particularly on dashboards or interactive screens.
Avoid placing light-colored text on light backgrounds or dark text on dark backgrounds without sufficient contrast.
Featured Activity Thumbnail should stand out clearly from the background.
Use contrasting colors or overlays to ensure that featured elements remain visually distinct.

d. App icons

Icons should have clear, distinguishable colors and shapes. Contrast isn't just about color, it also ensures the icon's graphics are easily recognizable. High-contrast icons improve accessibility, making them easier to identify, especially for people with visual impairments.

e. Text contrast and hierarchy

Use distinct text styles (e.g., bold, larger font sizes, or different weights) to differentiate headings, subheadings, and body text.
Ensure that the text contrasts well against its background.

1.3 Provide transcripts and captions for audio and video content

A collapsible content block can be used to provide a supported video transcript for an upload.

2. Operable (Interface allows diverse interactions)

Users must be able to navigate and interact with the interface (e.g., keyboard navigation, no time-based restrictions).

2.1 Use clear, consistent navigation with logical page structures

Keep navigation simple and structured so users can easily find what they need. Use clear labels, a consistent layout, and logical structures to improve the user experience.

2.2 Allow Sufficient Time for Users to Complete Tasks (e.g. survey, quizzes)

Cogniss doesn’t use time limits by default, which supports accessibility by giving users enough time to complete forms, quizzes, and surveys at their own pace.

3. Understandable (Navigation is clear and predictable)

Information and UI elements must be clear and predictable (e.g., consistent navigation, readable text, input assistance).

3.1 Write clear and simple language to improve readability

Content is in a language understandable to the target user
Jargon is avoided
Technical terms are explained
Acronyms are spelled out in full in the first instance, with the acronym in brackets next to it.

3.2 Use Descriptive Labels for Forms and Buttons

a. How to Write Descriptive Labels for Forms

Best Practice examples:

Be Clear and Specific: Instead of "Name," use "Full Name (First and Last)"
Use Action-Oriented Labels: Instead of "Submit," use "Create Account"
Provide Context: Instead of "Enter Email," use "Enter your email to receive updates"
Indicate Format When Needed: For Example: Instead of "Phone," use "Phone Number (e.g., +61 400 123 456)"

b. Navigation Buttons

When designing navigation buttons, it's essential to use clear and predictable labels so users always know what to expect when they click. Keeping labels short—ideally one or two words—ensures readability and avoids confusion. Consistency is also key; using the same terminology throughout your app creates a seamless experience. Additionally, action-oriented words like "Next," "Continue," or "Submit" help guide users effectively and encourage engagement.

Confusing, Redundant, or Unclear	Clear, Consistent, and User-Friendly
Go NEXT (Repetitive and unnatural)	Next page → Moves the user to the next step
Continue to forward (Awkward phrasing)	Save & Proceed (for multi-step processes)
Proceed Further (Vague and unnecessary)	Submit and finish (for final actions like form submissions)
Next (too broad and generic)	Return to Home (clear and precise action)
Finalize (Lacks clarity on what will happen)	Finish Survey (for completing a process)

4. Robust (Compatible with assistive technologies)

Make sure your app works well with assistive technologies like screen readers, which are essential for users with visual impairments.

This includes:

Testing text readability to ensure all on-screen text is clearly read out.

Adding meaningful alt text to images so screen readers can describe visual content properly.

You can test this using the built-in screen readers on mobile devices:

Screen reader: Voice Over for iOS devices
Screen reader: Talk Back for Android devices

By following these guidelines, you can ensure your app meets accessibility standards while providing an improved user experience for everyone. If you have questions or need further assistance, reach out to our support team.