WaveMaker Docs

WaveMaker Docs

  • Get started
  • Widgets
  • Mobile
  • How-to
  • Enterprise
  • Releases
  • Blog
  • Sign-in

›Layout and Styles

Getting started

  • Introduction
  • Walkthrough

Pages

  • Pages Overview
  • Creating a Page
  • Layout and Styles

    • Page Layout
    • Templates
    • Themes
    • Accessibility

    Page Configure

    • Page Artefacts
    • Page Cache
    • Partial Page
    • Page Parameters
    • Examples

    Page Actions

    • Navigation
    • Events

    Custom Development

    • Theme Editor
    • Manual Theme
    • Create Template

SSPA

  • Micro Frontend App

Databases

  • Database Services Overview
  • Database Tools
  • Database Designing

    • Working with Databases
    • Data Modelling
    • DataBase Schema Modes
    • Working with DB Schema
    • Database Views
    • Temporal Support

    Accessing Database

    • Accessing Database

    Queries and Procedures

    • Working with Queries
    • Working with Stored Procedures
    • Version Queries & Procedures
    • Blob Queries and Procedures
    • Queries & Procedures - Java Services

    Database Variables & API

    • Database CRUD
    • CRUD Event Listeners
    • Database APIs
    • Database Service APIs

REST & SOAP

  • Web Services Overview
  • Restful

    • REST Services
    • Secure Server-side Properties
    • REST Request Timeouts
    • REST Services using OAuth 2.0

    SOAP

    • Working with SOAP Services
    • Imported SOAP APIs

    Websocket

    • Working with WebSockets

    APIs

    • API Designer
    • Mocking APIs
    • Mocking REST API
    • Swagger Import

    Variables

    • CRUD Variable
    • Service Variable
    • WebSocket Variable

Java Services

  • Java Service
  • Java Services

    • Java Integration Services
    • DB Service Integration
    • API Composition
    • Variables for Invocation
    • Generated REST APIs (API Designer)

    Java Services Variables & API

    • Variable for Java Service
    • Java Service APIs

    Source Files

    • Resources and Third-party Libraries
    • Using 3rd party JavaScript files
    • Using 3rd party jar files

Variables & Actions

    Variables

    • Variables Overview
    • Model Variable
    • Device Variables

    Binding

    • Variable Binding
    • Custom Formatter

    Actions

    • Actions
    • Navigation Action
    • Login Action
    • Logout Action
    • Timer Action
    • Notification Action

    Events

    • Events
    • JavaScript Access

Security

    App Security

    • Overview
    • Authentication
    • Authorization
    • Access Levels & Permissions
    • Login Configuration
    • Session Persistence
    • SSL Encryption
    • XSS antisamy policy configuration
    • OWASP
    • XSS Prevention
    • Central Authentication System
    • Token Based Authentication
    • SAML Integration
    • Secure Connection for Deployed Apps
    • Concurrent Sessions
    • HostHeader Injection

    Security Variable and API

    • Security Variables
    • Remember Me
    • Variable for Security Service
    • Security Service APIs

Developer options

  • Test and Run (Preview) Apps
  • Chrome Extension: Devtool
  • Debugging
  • Inspection Framework
  • Build Options
  • WaveMaker Mobile Apps Automation
  • Developer Integration

    • Project User Management
    • Developer Collaboration
    • Extending the Application using IDEs
    • Import, Export & Update Apps
    • Project Shells

    Add-ons

    • Localization
    • Artifacts Repository

Deployment

  • Overview
  • Deployment Profile
  • One-click Deployment
  • WaveMaker CI/CD Pipeline

    • Overview
    • Configuration Profiles
    • Configuration Management
    • Pipelines and Phases

    Pipeline Configuration

    • Default Pipelines in WMO
    • Configure Pipeline in WME

    Deploy to Cloud Providers

    • AWS
    • Azure
    • Google Cloud
    • DigitalOcean

    Pipeline Configuration cont.

    • Phase configurations
    • Webhooks Integration
    • Tests Integration

    Manage Deployed Apps

    • Manage Deployed Apps

    Integrate with your CI/CD Providers

    • Push Code to External repo
    • Custom VCS Integration
    • Export WaveMaker Application
    • Building Project with Maven
    • Build with Docker
    • Jenkins Integration
    • Deploy using Docker Compose
    • Deployment to Heroku

    WaveMaker apps Interation with CDN

    • App Integration with AWS CDN
    • App Integration with Azure CDN

    Deployment to external web servers

    • Application Server Overview
    • Deploy to Tomcat
    • WebSphere
    • JBoss - WildFly
    • WebLogic Server

Connectors

  • Introduction
  • Architecture
  • Import Connectors
  • List of Connectors
  • Build a New Connector

Teams

  • Overview
  • Team Setup
  • Dashboard
  • Manage Users
  • Manage Projects
  • Manage Prefabs
  • Project Branches
  • Manage Roles
  • Code Repository
  • Import VCS Project
  • Team Profile
  • Manage Subscription
  • FAQs
Edit

Accessibility Support in WaveMaker


Accessibility is essential for individuals and organizations that want to create high-quality websites and applications. It enables people with disabilities to use different Assistive Technologies (AT) and Adaptive Strategies for the business benefits of Web Accessibility. WaveMaker also focuses on enabling their product with international standards for Web Accessibility from World Wide Web Consortium (W3C), including Web Content Accessibility Guidelines (WCAG) and Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA) as the first step in applying them.

note

For more information, see the blog post about Accessibility in WaveMaker.

How it Works

To make components accessible, all the text on the web page must be unique, along with its captions and roles. To make it possible, we have introduced aria-labels attributes for all the wm-widgets which are configurable and certain Role to identify every component as per their standard behavior. This ARIA "roles" and "attributes" will benefit the group of people using Assistive Technology Readers (ATR) to read the text and the purpose of the widget aloud to the users.

WaveMaker Accessibility enhancements will cover Web Content Accessibility Guidelines (WCAG) "A" and "AA" compliance for all non-text content, including the following.

Name Role & Value, Info & Relationships, Meaning Sequence, Sensory Characteristics, Identify Input Purpose, Non-Text Contrast, Page Titled, Headings and Labels, Label in Name, Language of Page, Status Messages, Error Prevention.

Steps to Follow

Labels

  • On every drag and drop of a widget, check for the Accessibility section.
  • Copy or Bind the captions of the label widgets to the Hint property from the properties tab below the Accessibility section.

Accessibility Section

note

All labels and texts will have a default hint value specified as "Label text", which you can edit.

  • Manipulating the Hint will result in a "tooltip text" on-hover and "aria-label" attribute visible in the browser preview URL that only AT screen readers can understand.
  • The "aria-label" attribute will be added to all widgets wherever text is bound from the Hint property.

Images

  • Add proper description for the images used on a page under the Hint parameter.
  • Modifying hint property with meaningful caption will add aria-label to make it accessible.

Other widgets are taken care of to make them accessible easier and faster with "aria-labels" like, Page layouts, Dialogs, Form Fields, Anchors, and Live Forms, etc.


Predefined ARIA Attributes

ComponentsAria LabelsRole
App logoaria-label="Image"
Headeraria-label="Page header"banner
Pagearia-label="Main page content"
Mobile Navbararia-label="Title"link
Mobile Tabbararia-label="Home"link
Headingaria-label="Label text"heading
aria-level="1"
Login Inputaria-label="Text field"
Login buttonaria-label="Login"
Validation Errorsaria-label="error message"alert
aria-hidden="true"
aria-live="polite"
Anchorsaria-label="Link"
Buttonaria-label="Button"
Checkboxaria-label="Checkbox"checkbox
aria-checked="false"
Toggle switcharia-label="Toggle"
aria-checked="false"
Ratingaria-label="1 out of 5 ratings"radio
aria-checked="true"
aria-multiselectable="true"
Currencyaria-label="country currency"
Datetimearia-label="Date and time field"
Time inputaria-label="Time field"timer
aria-atomic="true"
Paginationaria-label="Page 1"
Calendar Viewaria-label="Month view"
Search inputaria-label="search field"
Slideraria-label="slider"slider
aria-orientation="Vertical/horizontal"
Selectboxaria-label="Select options"listbox
aria-expanded="false"
aria-hashpop="true"
Selectbox optionsoption
Accordion tabsaria-expanded="true/false"tab
Listlist, listitem
Datatabletable
Panelaria-label="panel"
aria-label="panel-header"
aria-label="panel-content"
aria-label="panel-footer"
Chartsaria-label="pie chart"
Left panelaria-label="Left navigation"navigation
Right panelaria-label="Right navigation"complementary
Top navaria-label="Second level navigation"navigation
Footeraria-label="Page footer"contentinfo
Partialscomplementary
Spinneraria-label="Loading..."alert
aria-live="assertive
aria-busy="true"
Picturearia-label="Placeholder Image"
Iconaria-label="user icon"
Popoveraria-label="user icon"menubar
Dialogaria-modal="true"dialog
Audioapplication

Appropriate Use of Headings

To make good use of headings on a page, add CSS class name from the Style properties tab, for example .h1, .h2, .h3, etc. Using any of the above headings class name, an attribute "aria-level" will be assigned to the HTML structure to make the screen readers understand the text specificity while scanning a page. You can copy the heading caption to the hint property to make it ARIA accessible.

note

Classname with .h1 will set the aria-level="1", and .h2 will set aria-level="2" attribute following the rest.

Keyboard Navigation

To navigate well within a form, use the Tab Index property from the Properties tab.

Tab Index property

warning

For form inputs in a live form, the hint text will not only add an aria-label attribute but also a Help Text below the input field.

Good Practices

Effective use of color contrast is also an important aspect of making your app accessible.

  • WCAG 2.0 level "AA" requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
  • WCAG 2.1 requires a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders).
  • WCAG Level "AAA" requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text. [

For more information about the color contrast ratio before designing or developing any application, see Contrast Checker.

Last updated on 9/6/2021 by Swetha Kundaram
← ThemesPage Artefacts →
  • How it Works
    • Steps to Follow
    • Predefined ARIA Attributes
    • Appropriate Use of Headings
    • Keyboard Navigation
    • Good Practices
WaveMaker
  • PRICING
  • PARTNERS
  • CUSTOMERS
  • ABOUT US
  • CONTACT US
Terms of Use | Copyright © 2013-2023 WaveMaker, Inc. All rights reserved.