aria-modal (property)

aria-modal is a new property introduced in ARIA 1.1. It indicates if an element is a modal when displayed.

Modal window  or simply modal is used only in specific situations where the entire work flow is blocked until the content in the overlay window gets attention. These are typically used to grab complete user attention and do not allow the user to interact with the parent page until an action is taken or the window is closed.

Before the aria-modal property is introduced in WAI ARIA 1.1, content authors depend on aria-hidden property to hide content for screen reader users on modal windows too. This means use of aria-modal property restricts the screen reader user interaction is limited to the modal window until it is closed or dismissed. To ensure that all the elements of the modal are exposed to screen readers the aria-modal property has to be set to the outer most container of the modal. In other words all the user interface components of the modal need to be the descendants of the container where aria-modal is set.

Aria-modal used in roles

It is used in the elements that acts as window and inherits into


Values of aria-modal

Aria-modal has two possible values true and false.

Value Description
Aria-modal=”false” The window is not a modal.
Aria-modal=”true” Window is a modal

Related links

HTML5 Contenteditable attribute

Contenteditable is a new attribute in HTML5. This is a global attribute. The properties of the elements such as <p>, <span>, <table> will be overwritten by the contenteditable attribute.

If the author specifies contenteditable attribute to true on a <p> element, the paragraph becomes editable text field. The property inherits to the child element if the contenteditable attribute is used on a parent element. This means, if this attribute is set to true on table element, the properties will also be applied to <th> and <td> elements of the table.

Using HTML5 Contenteditable property

Contenteditable is a global attribute. It has two possible values.


  • Contenteditable=”true”: Means the element and its children elements can be editable.
  • Contenteditable=”false”: This is equal to not having the attribute at all.

Browser / Screen Reader support for Contenteditable attribute

Latest JAWS and NVDA supports this attribute. NVDA on Mozilla FireFox an JAWS on Google Chrome seems to have best support.

These elements can also be pulled out from the forms option in NVDA elements list dialog box (NVDA + f7). These items are displayed as unlabeled elements except for those marked with <th>.
NVDA Forms List with Contenteditable elements

When JAWS forms list dialog box is pulled (JAWS + f5) only the <span> with contenteditable is displayed and that too on Google Chrome.


Below are few examples with contenteditable attribute set to true.

Contenteditable on a paragraph element

This paragraph can be edited by the user.

Content editable to true on a table element

Name 1 Name 2

Contenteditable to true on a span element.

This content is editable span element

Observe that the above elements can be navigated with tab key considering them as form elements, edit text command of NVDA “e” and can be pulled from elements list dialog under forms in NVDA.

Accessibility State Of Self-Service Kiosks

Self-service kiosks
Self-service kiosks are used widely than we thought few years back. In this article   I want to take you through the current accessibility state of the self-service kiosks. The benefits, accessibility problems and the currently available standards in this innovative area of business.

Except for the bank ATMs in India there are no much efforts in making accessibility for the self-service kiosks though the usage has been drastically increased. Though I was observing these machines for few years, no thought has popped-up in my mind until my recent travel.

India's_first_accessible_ATMLast month I have to travel from India to United States, California. This is a two week trip for attending the 33rd CSUN Assistive Technology Conference and a week at our San Francisco office. In this trip I have experienced good number of self-service kiosks. Undoubtedly these self-service kiosks  have lot of benefits. However their usage is extremely difficult in many cases impossible due to the accessibility barriers.

Let me give some examples where I have tough time using self-service kiosks so far in my day-to-day life.

  • In the mobile operator service stores, as we walk-in one need to take a token for getting on the queue for customer care executive. These machines are self-service. They do not have a voice out-put to aid customers with blindness. I doubt if a low vision person can use it comfortably during the day light.
  • Bar code scanners in movie theatres, self-check-in kiosks at the airports. Extremely difficult to point the barcode to get the scan either a m ticket or the physical boarding pass.
    • ATMs in India are made accessible to certain extent. I often observe physical barriers for a wheel-chair user to get on to the ATM but these are well advocated in the banking industry in India. XRCVC have developed this website Talking ATM, that helps the users to locate the nearest talking ATM. This reminds me the need of letting the users know that the machines have accessibility features exist and a manual to help them use it.
  • In the railway stations to get a platform ticket. Self-service kiosks are also installed for the passengers to find the train running information.
  • Coffee vending machines anywhere and everywhere.
  • I have not come across in India but retail stores such as Dominos have introduced self-service kiosks to help their customers conveniently book the pizza.

And the list goes on.
Dominos self-service kiosks

Benefits of self-service kiosks

Though I am talking only about my barriers, these self-service kiosks are extremely helpful in many cases. Of course  that’s the reason the use of them has increased.

  • People with speech and hearing difficulty can easily utilize the self-service kiosks.
  • People who finds difficult to pronounce certain products can select from the catalog without much difficulty.
  • Self-service kiosks can display options in multiple languages which will be difficult for a human to handle.
  • The process will be accurate, fast and easy.

Accessibility barriers with self-service kiosks

While undoubtedly many problems can be solved with the self-service kiosks, significant barriers are imposed on users with disabilities with these new technologies.

  • Not having audio out-put denying users with blindness operate them.
  • Not having braille or embossed on physical buttons for users with blindness to provide input to the machines.
  • Not providing enough space for wheel-chair users to access the machine sitting in their wheel chair.
  • Reasonable height for every one including the wheel-chair users to access all the features of the machine.
  • Not having enough contrast of the text from background or font-resize options making it difficult to low vision and age old users.
  • Difficulties for users with blindness using the passport reader or card reader features of the machines.
  • Not having enough guidance or instructions for users with cognitive difficulties to perform the functions on the machine.

The list might be more. I might not be aware of many of the problems in real time.
IBMs T & T self-service kiosks

The standards for self-service kiosks

The US Department Of Transportation (DOT) in the Air Carrier Accessibility Act (ACAA) proposed some standards for the self-service kiosks (PDF). The WCAG 2.0 standards can also be applied for the self-service kiosks as these standards are not technology specific and widely talks about the digital content.

Other than these two, there are no specific accessibility standards in the space of self-service kiosks.

Related Links


All the links below navigate to external websites.



Access Board considers ADA guidelines for self-service kiosks

NVDA 2018.1 is released, Download and What’s new

NVDA the free Windows screen reader by NVAccess released the first version for 2018 i.e NVDA 2018.1. The release include few new features, bug fixes and developer enhancements.


What’s new in NVDA 2018.1


  • Support for charts in Microsoft Word and PowerPoint.
  • Support for new language Kyrgyz.
  • Added support for VitalSource Bookshelf.
  • New touch interaction setting in NVDA preferences

And many more bug fixes and feature enhancements. Read the complete NVDA 2018.1 updates.


Download or update to NVDA 2018.1

Visit the NVDA download page for NVDA 2018.1. If already have an older version update to 2018.1.


updating to NVDA 2018.1


  1. Press NVDA + n to open NVDA settings.
  2. Navigate to Help by pressing down arrow until you hear Help.
  3. Press right arrow to move into the help menu.
  4. Press down arrow until you hear Check for updates.
  5. Press enter Check for updates and follow the onscreen instructions.

NVDA is an open source and free screen reading solution for Windows operating system. Support the cause by donating to the NVDA project.



aria-keyshortcuts (property)

The aria-keyshortcuts property informs the screen reader user the shortcuts developer implemented to activate or focus an element on the web page or an application. Aria-keyshortcuts is an ARIA 1.1 property. Developers use the accesskey attribute to assign a shortcut for an element on the web page. It is a great idea to implement a shortcut key for few controls on applications and web pages. However content developers should carefully consider the shortcut key they are going to assign.


The same shortcut key or accesskey assigned for a function or command should be the same as the property of aria-keyshortcut too. Following are some common practices to consider while implementing aria-keyshortcuts property.

Considerations for aria-keyshortcuts property

  1. Provide one or more modifier keys. Eg: Alt, control, shift etc.
  2. Provide exactly one non-modifier key. Eg: a – z, 0 – 9, special characters such as escape, tab, f1 etc.
  3. The sequence must be one or more modifier keys followed by a non-modifier key. Eg: Alt + f is the right key not the F + alt.
  4. The value of keys must be what the user hits on the keyboard not the keys that are the result of. Eg: The command will be Shift + 5 not %.
  5. The upper case and lower case letters are consider same. Eg: letter x and X are same.


Additional considerations for assigning aria-keyshortcuts

  1. The value of aria-keyshortcut must not conflict with browser, assistive technology or operating system key commands.
  2. The functionality or the script for invoking or focusing the element should be taken care by the developer. Aria-keyshortcuts property just informs the screen reader users about the existance of the shortcut.
  3. Consider the device and keyboard the users might be using to invoke the functionality. Users may use keyboards of different languages.
  4. Shortcut keys should be made available to wider set of users. Aria-keyshortcuts property can only be made available to screen reader users. Using a tooltip or any other mechanisms the assigned shortcut key must be intimated to all other users.
  5. Ensure that aria-keyshortcuts property is not available for disabled elements.

The shortcut keys not only help screen reader users or keyboard only users but power users highly depend on shortcut keys to make the task faster.

Aria-keyshortcuts used in roles

Can be assigned to any element of the base markup.

Values of aria-keyshortcuts

A string value that defines the shortcut key.


Related Links

HTML5 accesskey Maxability

Accesskey Web AIM

Accesskey HTML MDN


Mobile apps accessibility! Is it impossible?

Mobile apps accessibility is something always make me upset. I am a full time IOS user and often play with my Samsung tab with Android OS in it. I am also a screen reader user so I heavily depend on VoiceOver and TalkBack.

My Apple iPhone acts as a personal assistant to me. Beginning with the alarm to wake me up in the morning until the reminder to bed in the night the apps in the phone help me plan my day perfect. Few other apps help me in making the financial management, some help in reading the news, get live update of cricket score, some for travel etc. However most of these mobile apps frustrate me a lot due to their inaccessible user interface. Let me outline few common problems which I observe often.


Problems with mobile app accessibility

Missing labels for interactive elements.

The back, font resize and bookmark buttons in Times Of India IOS app reads as follows. BackChervlon Icon 0, FontSelecter icon 0 and Bookmark Icon 0. Who knows that they are back, font resizer and bookmark buttons.


Grouping and splitting User interface elements

In one of the famous mobile app that provides mobile wallet, online shopping and travel booking the UI elements are completely inaccessible with VoiceOver. I am talking about you Paytm. The flight booking screen is a perfect example of 100% inaccessible mobile screen. The labels From and To are read out in a single swipe and in the next swipe the two buttons are read at once. In no way the VoiceOver user can activate these buttons. Rest of the elements in the booking process are no better. It looks to me that Paytm don’t want their blind customers to make travel booking from the mobile app.

After demonetization in India the mobile apps such as paytm have healed the situation to certain extent. However inaccessible mobile user interface make the situation no better for persons with disabilities.

No role or state announced

In many apps the tabs are not announced as tabs and do not say which is currently selected. Users who can see can easily outline which tab is currently selected with the change in color but the same is not apparent for users who rely on VoiceOver or Talkback. The FoodPanda IOS app is a perfect example of this. Restaurants, Orders, Basket, Deals and more are the tabs a voiceover user can reach at the end of the FoodPanda IOS screen. These UI elements do neither say that they are tabs nor do they say which of them is currently selected. Of course the app contains a lot of unlabeled buttons setting examples to let people know how something should not be coded.


Why are these mobile apps not accessible?


Do you think the mobile app developing technology is not matured enough to create accessible user interface? Do you think the same OS providers who work hard to make robust screen readers like VoiceOver and TalkBack have not thought about accessibility in their respective development kits? Do you think there are no set standards that drive mobile app accessibility?

Apple IOS and Google Android are putting lot of effort in creating platforms that enable developers to develop accessible apps. They have also provided a lot of great documentation allowing the designers and developers to make best use of the technology. I will share the resources later in the article to learn this new skill. Talking about the standards, the W3C’s WCAG 2.0 standards are not technology specific. They can be applied to any digital technology including mobile app accessibility.


Primarily the businesses especially in India are either not aware of accessibility or they do not think about the experiences of persons with disabilities and age old people. No much focus is on accessibility both in academics or in the job for designers and developers to enhance the skill of mobile app accessibility. In a way they are losing a large market share. Taking my example, I use Tapzo instead of similar apps such as Paytm or FoodPanda, Uber instead of Ola cabs, Tez instead of HDFC bank etc.

It is the responsibility of the designers and developers to do the right thing. Making the mobile app accessible is not an additional effort or not a favor to certain user groups. It is the right thing to do. Enhancing your skills to ensure that the app you develop is reaching large number of users will open up new ideas to innovate inclusive features and products.

The following resources should help you get started to make your next mobile app, feature or screen accessible. If you need more assistance reach out to us through the contact page.


Mobile app accessibility resources


How To Meet the Needs of Older Internet Users

People who were in in their 40s during the internet boom of the late 90s will now be coming into retirement, suggesting a new wave of tech savvy seniors. There are increasing numbers of tech startups aimed at the elderly, but those aged 55+ are still only 3% of total internet users. In a world increasingly dependent upon the internet, we need to consider how we can keep so-called silver surfers connected. In order to help get seniors online, we must look beyond accessibility for disabled users and also consider the needs of older internet users.


Baby boomers will have been young enough to enjoy the excitement of the internet’s original web domainsExternal Website. They’ve come a long way since then, but they are still generally designed by young tech wizards, who may not have considered the difficulties that come with ageing. One of the main problems is with eyesight.

Modern websites which aim to be inclusive should use large, bright text and images where possible. There should also be an easily accessible button to adjust text size for those with visual impairments. By stripping out clutter and creating a clean looking website, we can ensure that all ages can enjoy surfing the web.


Another common symptom of ageing is hearing loss. This is particularly common at higher frequencies.External Website Web developers should therefore consider the pitch of any noises on their site and lower this so that it can be easily heard by the young and old alike. Most websites deal in text alone, but videos are becoming an increasingly common aspect of social media.

The best way to ensure accessibility of videos is to use accurate and easy to read subtitles. Introducing these can bring new information to seniors that they otherwise wouldn’t have had access to. As with visual design, audio should be clean and clutter free. That means removing distracting background music. For video guides, the speaker should talk loudly, slowly and clearly, with the hearing impaired in mind.


The third biggest problem that seniors face online concerns their movement. It can be difficult to navigate fiddly on screen icons if dealing with arthritis pain.External Website It is therefore a good idea to ensure all buttons are big and easy to click on. Modern touch screen technology on smartphones, tablets and laptops are making navigation easier for everybody, but website developers can do more to help.
Those with poor fine motor control will appreciate a website with large icons, which are clearly separated from each other. This can perhaps be done using different colors. The most important buttons should be in highly visible places to reduce the need to search around for a long time.

Seniors are perhaps more interested in using the internet than you intuitively believe. This will be increasingly the case in coming years. However, visual, auditory and motor deterioration will always occur. Website developers should therefore design their sites with the elderly in mind and work to create pages accessible to all ages.

Contributed by

This article is contributed by Jackie Edwards. Thank you for a wonderful work.

Toast! Is it accessible?

What is a toast

A toast is a non modal that appears on the screen for few seconds and auto expires. The toast shares an alert containing a message to the user. For example: In an email client, once you hit the send button the toast can display a message that says “Sending message” and disappears once it is sent. This message pops only for few seconds and does not require user interaction.


The toast accessibility problems


  • Enough time: The toast displays the message only for few seconds. This in many cases will not be enough for the users to read the message before it disappears. As I do the research on Android the maximum length for displaying a toast is 3.5 seconds. Author can set toast.LENGTH_SHORT and toast.LENGTH_LONG for the duration attribute.
  • Reading the message: For users who depend on screen reading technologies, the toast messages must be read out as they appear. If they are not read out the important message shared through the toast will not be conveyed to them. Of course they don’t even know that the toast message has displayed and disappeared.
  • On page load: If the toast messages are displayed on page load it might be disorienting for certain users.
  • Consistent identification: As the Android developer guide a toast message can be  displayed on any place on the screen. Top, bottom, left, right or even at a certain position on the screen. If toast messages available on different screen appears on different positions it causes difficulty for the users to locate it.
  • Automatic time out: The toasts as said in the definition disappears without user interaction. People who want to read it for longer time and who want to dismiss the toast by themselves may not able to do it accurately.

Suggestions to make toast accessible

  • Extend the time limit: Extend the display time limit of the toast messages. Depending on the length of the message the time should be extended. Since the toast.LENGTH_SHORT and toast.LENGTH_LONG are defined by a flag they cannot be changed directly. However, I found few alternates that in extending the duration by making it reappear immediately after it disappears even without user notice. Here is a sample implementation on cindypotvin’s blog that shows the toast message until the count down set by the author completes.
  • Reading the toast message: Using ARIA techniques such as role alert and aria-live the toast messages can be made available for screen reading technologies as soon as they are displayed.
  • Consistent Identification: By default on Android the toast messages are displayed on the bottom of the screen. Authors can set the same to appear on any specific position on the screen. Read Android development guide to know how to do it. Instead of the default behavior if the content author want to display the toast message at a specific position take care that it is displayed at same position on each screen every time it is displayed.
  • Automatic time out: The default behavior of the toast is to time out after a specific duration i.e. 3.5 seconds maximum. Unless the author explicitly provides additional time as discussed in the first point. Automatic time out is not a good practice as far as accessibility is concerned, but the Android developer guide recommends to use notification instead if user interaction is required to dismiss the non modal.
  • Other suggestions: For different types of messages use different ways of identification. Eg: It might not be a good practice to have the same appearance for error message and the help message.  Contrasting colors for the message and background, not only sensory characteristics to convey the messages,  focus indicators etc.

Reference links (External websites)

How to show a Toast for a specific duration in Android

How to Make Business Events Accessible to People with Disabilities

Business events are effective strategies to showcase products, discuss strategies, attract investments or get together with employees and fellow corporations. However, one of the biggest challenges of holding corporate events is to ensure that they are accessible to all attendees including those with disabilities. Accessibility goes beyond providing ramps for wheelchair users encompassing all types of impairment from hearing and vision loss to cognitive and physical conditions. In India, the Rights of Persons with Disabilities Act of 2016 (PDF) is the legislation that recognizes and protects the rights of people with disabilities.  Here are simple tips to make sure that your events are reachable to all target audience and participants.

Assign an Accessibility Planner

Hosting an event requires extensive planning involving several players. If you are to ensure that the event is accessible to participants with disabilities, assigning a person to take charge of all arrangements makes sense. The coordinator will be touch base with other planners to ensure that accessibility requirements are met.

Site Selection is Critical

The most challenging barrier to accessibility is the site of the event. Older buildings, for example, may not have accessible routes and facilities for those with disabilities. The selected site can be evaluated and modified to include installing ramps, assigning parking areas, rearranging tables, chairs & display racks, installing flash alarm lights and others practical adjustments.
Accommodating Different Types of Disabilities

Inside venues, there are several ways to include the needs of those who have disabilities. Beforehand, utilization of a disability-friendly online events ticket software can make it seamless for everyone to get their passes. At the event, individuals with poor vision or who are blind may need special things such as larger fonts in print materials, Braille or audio information & instructions. Slideshows can incorporate visuals and graphics to improve impact while a member of staff can direct those who need assistance in locating activities or amenities during events and conferences.
Deaf or hearing-impaired visitors and participants may receive captioned media, sign language interpreters, and assistive learning devices to make it easy to participate in events. In addition to welcoming participants with service animals, you must also provide service areas with bowls of water for these helpers as well as an area to walk or exercise.
Lights are important for visibility but do remember that bright lights are a problem for epileptics. Dim lights make it difficult for people with vision impairment to read and see things or for people with hearing disability to lip read. A reasonable compromise is to provide adequate lights and keep an area reasonably dimmed with the help of blinds or curtains.
With careful planning, making business events inclusive and accessible does not cost a fortune involving slight modifications to the site or facility. Above all, these alterations help those with disabilities interact and engage comfortably ensuring the success of a business event.


This article is contributed by Jackie Edwards. Thank you for a wonderful work.

HTML5 Autoplay Attribute

HTML5 autoplay is a new attribute. to support the multimedia content. This attribute is used for <video> and <audio> elements. Along with other HTML5 audio and video attributes such as controls, HTML5 autoplay is also a boolean attribute. When this attribute is used the audio or video on the page plays when the page loads. User is not expected to activate the play button manually.

Using HTML5 autoplay is not a good practice as per WCAG 2.0 standards. As per 1.4.2 Audio controls, no audio should be played automatically for more than 3 seconds. This is also a major disadvantage for screen reader users. As the audio plays automatically when the page loads the screen reader users will not be able to hear what the screen reader is reading making the entire web page inaccessible.

Using HTML5 autoplay

Provide the autoplay attribute along with other attributes such as controls, src etc in the <video> or <audio> elements. sample code below.

<br /> <video controls autoplay><source src="movie.mp4" type="video/mp4"/><source src="movie.ogg" type="video/ogg"/>Your browser does not support the video tag.</video><br />
Remember that as per accessibility standards and usability for screen reader users do not use HTML5 autoplay attribute.