Accessibility Overview

We want our products to be fully experienced by the widest number of users including disabled users.

We take accessibility pretty seriously and spent a couple of iterations on it. By adhering to standards like WAI-ARIA, and Section 508 we create accessible products that can be used well together with an assistive technology, like a screen reader.

Since the technology has evolved, nowadays not only basic text-driven experiences have to be made accessible, but also other features.

Section 508

Section 1194.21 Software applications and operating systems

The following table shows the level of support that Mobiscroll provides for the Section 1194.21

Section 1194.22 Web-based intranet and Internet information and applications

The following table shows the level of support that Mobiscroll provides for the Section 1194.21

WAI-ARIA Support

WAI-ARIA is a World Wide Web Consortium specification that was designed to be a framework for web developers. This can be used in developing applications that leverage Ajax, scripting and other so called “rich application" techniques. This framework has clear specifications about steps that developers can use in order to make their applications more accessible to assistive technologies.

WAI-ARIA’s role is to fill the gap between rich applications and disabled users by using additional metadata with the help of HTML element attributes that screen readers can use to reason about a control or DOM element. These attributes, like role, aria-haspopup, aria-selected and others provide vital information to screen readers, which can then be used to provide a richer level of interaction with applications and websites.

Here is the complete list of WAI-ARIA attributes used by Mobiscroll:

• role="dialog" for popups and pickers
• role="grid" for calendar view
• role="row" for calendar view rows
• role="gridcell" for calendar views cells
• role="listbox" for scroller wheels
• role="option" for scroller wheel items
• role="button" for button controls
• aria-live for announcements
• aria-hidden for elements which are not visible and should not be read by screen readers
• aria-label for controls without text or icon buttons
• aria-selected for indicating selected value on wheels and calendar days
• aria-multiselectable for multiple select
• aria-disabled for disabled items (wheel items, buttons, calendar days)

Keyboard Support

Mobiscroll ensures that your users can access the full capabilities of widgets using just the keyboard.

The following keyboard bindings are used by Mobiscroll:

• Popup, pickers: Space or Enter to open the popup, Esc to cancel, Enter to set, focus trap (focus is not allowed to leave the modal popup, elements outside the popup cannot be focused).
• Datepicker: Tab, Shift + Tab to navigate between month and year change buttons, month days, date selection wheels. In case of date selection wheels use the Up and Down arrows to change the value on the focused wheel control. In case of calendar view, use the Up, Down, Left, Right arrows to change the focused day, Space to select the focused day.
• Select: Tab, Shift + Tab to navigate between wheels and buttons, Up and Down arrows to change values, Space to activate buttons.
• Forms: Tab, Shift + Tab to navigate between form elements, Space to press buttons, Up, Down, Left, Right arrows to change the selected segmented item.

Support Right-To-Left (RTL) Languages

Only a few languages in the world use RTL text direction, but these languages cover over a billion people.

Beside it’s internationalization characteristic RTL is about making user experiences more accessible for users working in Right-to-left languages like, so we are considering this as an accessibility feature as well.

Mobiscroll supports RTL for every component, which can be activated with the rtl: true setting.