Accessible Emails for your business

Email marketing, the most prominent way of reaching to potential customers. Potential customers include customers who are older in age, those who have physical, cognitive and sensory disabilities. However these mailers are not reaching a large set of customers. This is because accessible emails are not part of your campaign.

Why is accessible emails relevant for you?

According to The Guardian every 1 in 5 pounds spend in the UK is from those who have age more than 65. This is 20% of the UKs total spending. This will be more or less similar in other developed countries too. The World Health Organization estimates 15% of world’s population lives with some form of disability. This is unrecognized by most of the email advertisements. So, most of the emails are not designed keeping this large population in mind. In addition your business is likely to face high legal risk, many countries have anti-discrimination laws that govern the rights of persons with disabilities, customer loyalty along with the competitive advantage.

What’s the problem?

It is very likely that most of the marketing emails we receive are deleted or moved to trash just by reading the sender or subject. The very few emails that are attractive or relevant for the customer will be attended. If these few emails that are attended by the customer are uncomfortable to read, aren’t you losing the potential customer?

When I say uncomfortable to read or interact means the content you shared have potential accessibility problems. People who have age old difficulties such as poor vision, trimmers in hands or disabilities such as blindness, cognitive, physical disabilities cannot access the content in the email. This means you are ignoring around 35% of the customers, than the customers ignoring the marketing emails.

How can you capture this large untapped market?

Create Accessible Emails

Creating accessible emails is not a charity work or business case, it is the right thing to do. Following are few basic things to consider.

Do not create any mailer that is purely an image. The text imbedded in the image can neither be read by screen readers used by blind users nor can be allowed to increase the text size for low vision users. So, use real text and present the visuals as images.

  1. Use colors wisely. Remember that approximately one in 12 men have color related problems. Users with low vision and age old people add to this count. Do not use colors that are tough to differentiate or those do not have enough color contrast. W3C WCAG 2.0 recommends to have a minimum contrast ratio of 4.5 : 1 between the text color and it’s background.
  2. Do not exclusively depend on sensory characteristics such as shape, size, visual location, orientation or color to convey some information. For instance, for the links available within a paragraph should have an additional identifier such as underline along with change in color. This allows low vision, color blind and users who have cognitive difficulties efficiently identify the link from the surrounding content.
  3. Provide enough clickable / touch target region when the mailers have actionable items such as links or buttons. People may be accessing the emails from phone, those who have trimmers, those who cannot point the mouse in small target region benefit from large clickable area.
  4. Images such as logos or important images that convey meaning must have alternate text description available. This will allow screen reader users to have the right information.
  5. Use HTML semantics for the content. Use h1 to h6 heading elements instead of increasing the font sizes and styles. Use HTML lists instead of design styles to show the list of items. Screen reader users can only understand the meaning supplied through the semantics not the styles.
  6. Actionable elements like links and buttons should clearly express what happens if the user interacts. This should be available visually as well as programmatically.
  7. Other email specific requirements such as clear subject line, getting straight to the point and additional ways of checking the content of the email should be the part of the content.

For more information on other web accessibility guidelines visit the WCAG check-list. Reach-out through our contact form should you have any questions.

 

Sensitization on Disability & Accessibility

This is an awareness attempt by Maxability to sensitize digital population on disability and accessibility. The third Thursday of May is celebrated as Global Accessibility Awareness Day. We hope this small questioner will start injecting the interest to learn more about accessibility and disability.
We believe that disability is more a socially created problem than the individual’s abilities. It is the stairs that create problem for a physically challenged person, not the wheel chair. This article will provide more insight into the lives of persons with disabilities and how they are connected with the mainstream society.
Note:
None of the questions are mandatory. Feel free to skip if you wish to while we encourage to answer all ‘]
The name and email address are collected to share information for any future surveys or webinars Maxability is planning. Feel free to say Don’t store my email address and Name.

Please enter your email:

1.

What is the percent of people with disabilities in the world as per World Health Organization

 
 
 
 

2.

This is the chart used by an ophthalmologist to estimate the visual acuity of a person.

 
 

3.

Can you guess what is the percent of men in the world who have color blindness?

 
 
 
 

4.

Which one of these days is observed as white cane safety day.

White cane is the universal symbol of blindness.

 
 
 
 

5.

Wheel chair is the assistive technology for mobility, Do you know what is the assistive technology for persons with blindness for using a mobile phone?

 
 
 

6.

Captions & subtitles are originally meant to be used by deaf and hard of hearing, have you ever used them because you don’t know the language of the video, you are watching the video in busy environment, at office or any other reason?

7.

Have you or anyone you know ever used one or more of the following features on the phone?

Remember these are the accessibility features on your device. (Select all that apply.

 

 
 
 
 
 

8.

Do you know communication in Deaf community is through sign language? The sign language is not universally one. What is your best guess for number of sign languages in the world?

 

 
 
 
 

9.

International Day of Persons with Disabilities is on?

 
 
 
 

10.

Global Accessibility Awareness Day is on?

 
 
 

11. Your Name*

(Used to send information regarding any future surveys or webinars. Select Yes to the question “Do not store my information” if you do not want to hear about our future communication.

12. Your Email *

(Used to send information regarding any future surveys or webinars. Select Yes to the question “Do not store my information” if you do not want to hear about our future communication.

13. Do you want us to store your name and email address?*

 
 

Global Accessibility Awareness Day GAAD 2018

The 7th edition of Global Accessibility Awareness Day GAAD 2018 is on May 17th. GAAD is marked on third Thursday in May every year. It’s interesting to see the world talking about accessibility and experiencing the problems arising due to inaccessible digital content, and software products. GAAD is also an opportunity for each one of us to understand the problems faced by persons with disabilities. Awareness towards accessibility and sensitivity towards disabilities are the primary objectives of global accessibility awareness day (GAAD). These are the primary objectives for Maxability too and hence we promote GAAD.

Attend a global accessibility awareness day GAAD 2018 in your city. Many companies plan to have an awareness campaigns internal to their organization. Reach-out to HR, Diversity & Inclusion or accessibility teams within your organizations to know more.

No GAAD 2018 events in your city? Your company is not aware of GAAD 2017? Don’t worry, We have some ideas for you. See below how to create awareness yourself and encourage teams around you. Do not forget to check the virtual events on May 17th.

Simple checks to observe GAAD 2018

  • Can a user with wheel chair comfortably reach your work station from the main entrance?
  • Write the sentence “Third Thursday of May every year  is Global Accessibility Awareness Day” on Facebook and post it to public. Wait!!! do this just with keyboard. Some computer users cannot use mouse.
  • Try calling a friend from your smart phone, the challenge is do it in sunlight. This is how low vision users experience the digital content
  • Watch video, just watch it, close your years, experience the difficulty faced by deaf or hard-of-hearing users.
  • If you own a website or a developer/ QA engineer do these simple checks on your websites. It just takes 10 minutes.

Global Accessibility Awareness Day GAAD 2018 events in India

Bangalore

Series of events are planned by Prakat Solutions with Mitra Jyothi, Chancery Pavillion, AWAKE Vishwa Seva Foundation. Visit gaad.in for more information.

Hyderabad

Deque Systems is hosting hackathon on this day. Register and understand more information on integrating aXe into the project life cycle to make websites and application accessible. Deque aXe hackathon for GAAD 2018.

More Information

More awareness information coming, stay tuned on Maxability by subscribing. Like us on Facebook and follow us on twitter.

 

 

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.

Example

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
ABC DEF

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.

Visual

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.

Audio

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.

Dexterity

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.