Twitter iOS app is beautiful and inspiring!

Recently updated Twitter app for iOS version 7.1 is beautiful and inspiring to use. This is well designed keeping universal design in mind. Here is what I found impressive:

Clear icons Very pixel perfect, smooth edges and easy to see. Enough color contrast between foreground and background.

Links are underlined – all links including hashtags, twitter handles are underlined. Though I would prefer twitter handles and hashtags not to be underlined as they do already have a symbol attached to it.

Dynamic contrast for back and compose buttons When background color is changed, for instances, when profile page is opened, automatically more contrast background colors are added to back and compose buttons so that they are visible.

Less cluttered buttom navigation now just have home, search, notifications and direct message tabs; many things have been moved to a side menu that can be invoked using left-to-right swipe.

Night mode Even when night mode is turned on, it was pretty easy to use all options and all elements are clearly visible.

Accessibility options Through this section, settings can be activated including increasing font size, enhanced contrast etc.,

Overall, great job Twitter’s Accessibility team! This is something I would urge all app developers to get inspired and build inclusive mobile applications.

Accessibility Review: Home page of Ministry of Social Justice and Empowerment

Noticed that Ministry of Social Justice and Empowerment, Government of India has re-designed its website and here are list of quick accessibility findings. Note that this is not a complete assessment report.

  • Slider images do not have appropriate alternate text. They are provided something like “Slider 1, Slider 2 etc.”
  • Page has about 11 color contrast issues
  • Main navigation menus are operable using keyboard; however, menus gets automatically expanded and user is forced to navigate through all menu items.
  • Under important links section, there are several menus but not operable using keyboard
  • Under “What’s new” section, role of “play” and “stop” elements are not defined.
  • Redundent information is provided for links under What’s new section. Information is provided as text as well as alternate text for PDF image and also provided using ti
  • “New” image does not have appropriate alternate text. also, it’s flashing.
  • Links provided at right side e.g. Prime minister’s relief fund, e-Gazette etc., exposes redundent information to screen readers due to use of title attribute.
  • Several images have additional alt text like Digital graphic
  • Logo has marked up as a heading but there are no headings defined on the page
  • Due to use of title attribute for several links with text “link” – redundant information is provided to screen readers

Related reading: Developer resources would be of help to resolve accessibility issues.

A quick accessibility review: Swiggy iOS App

Swiggy is an online portal using which one can order food from restaurants around and food will be delivered through their executive. When Madhu Singhal, Founder of Mitra Jyothi told me that she needs to use Swiggy but its app on iOS is not accessible using VoiceOver that prompted me do a quick accessibility review of Swiggy. Some of the observations are:

  • Bottom navigation tabs have no problem. works well with VoiceOver
  • Home button (at the top), area selector widget, favorites button do not have an accessible name
  • When swiping using gestures, offers widget is not accessible
  • Able to Select and open a restaurant
  • Able to read through the menu options
  • Buttons provided to add / remove an item from the menu list does not have label
  • Cart is completely inaccessible
  • Call button does not have accessible name

Though user is able to make a choice of options in mind, it just stops there and noway they can proceed with adding them to card and place an order.

Do refer to Mobile Accessibility Practices page to learn about building accessible mobile applications.

Accessibility Review: Paytm web interface

Paytm is one of the largest digital wallets being used today. Paytm is one thing that gets accepted almost everywhere including small businesses like grocery stores, vegetable vendors etc., Also, Paytm enable users to purchase wide range of merchandise, book tickets for bus, train, fight etc., make utility payments such as electricity, DTH, mobile, landline, water etc., In short, many financial transactions can be carried out using Paytm.

Such a powerful platform has to be usable and accessible to all users including people with disabilities. Here is a list of accessibility findings that I have put together. This is not a exhaustive assessment report but something to begin with.

  • Search box: Auto suggestions are not operable using keyboard and does not expose to screen readers
  • Form fields such as to enter prepaid mobile number, recharge amount does not have associated labels
  • Several sections such as Book on Paytm etc., appears and functions like tab panels but not marked up as one.
  • Strike-through information (original price) is not exposed to screen reader users
  • No visible focus indicator on any focusable elements.
  • Several elements do not meet sufficent color contrast ratio of 4.5:1
  • Drop down menus are not accessible using keyboard alone.
  • Available balance and Items bag is not accessible using keyboard alone.

What I would recommend is have a list of scenarios and priorities them; then start fixing accessibility issues for each of those scenarios. Some items could be:

  • Global navigation
  • Sign-up and sign-in
  • Adding money
  • Paying utility bills and recharge
  • Buy movie tickets
  • Buy bus tickets
  • Shop on Paytm

Visit Our resources page to find links related to standards, developer resources, testing tools and much more…

Looking forward to see Paytm more accessible soon!

Accessibility Review: Unique Disability Identity Card (UDID) Portal of Government of India

A while ago, Department of Empowerment of People with Disabilities has launched Swavlamban Card portal to provide disability certificate and Unique Disability ID to persons with disabilities. I have pleased to see there has been a lot of care taken towards ensuring accessibility of the portal. Some of the positive things done on this portal:

  • All elements have sufficient contrast between foreground and background
  • Alternate text is provided for all images
  • Lists are marked up correctly
  • Headings are marked up though they can be improved
  • Play / pause functionality is provided for carousal
  • Associated labels are provided for input fields (except a few)

Here are a few things that needs attention:

  • Combo box to select language does not have associated label; there is no apply button to select language; there is an auto apply provided but this would cause inconvenience to keyboard only users; User would not be able to navigate through available options as page keeps refreshing for every language and focus moves out of the combo box.
  • Search button does not have visible focus indicator
  • When “high contrast” theme is selected, it does not get applied to elements next to carousal (e.g. Apply for disability certificate and UDID card etc.,)
  • “previous, play/pause and next” elements appear and function like buttons but marked up as links
  • There are several links on carousal with screen name “Register now” and these links need to provide better context
  • Content under “Quick access keys” appear like a text content but marked up as links – need to remove hyperlinking.
  • Heading structure can be improved; structure went up to level 5; all level 5 headings can be marked up as level 2 and level 4 as well to level 2.
  • Department of Empowerment of People with Disabilities appears to have linked to a different URL – i.e. http://innovationclustersarchive.nic.in/content/index.php, Department of Empowerment of Persons

This is only a quick review of home page and not the complete assessment. Overall, I think there are some good steps taken and accessibility has kept in mind while building the portal.

Accessibility status of state government websites in India

Today, it’s heartening to see there is so much momentum going on to make India inclusive, I thought, it’s important that websites of all state governments are accessible. As I am a believer that inclusion happens when there is awareness created among the stakeholders. So I have done a quick accessibility test using aXe extension for Mozilla Firefox. This test was run only on Home pages of each state government website and below are the results both in the form of a chart and a table. Data is made available in the form of table as well to make sure that results are available in case chart is not accessible to assistive technologies.

Gujarat Government’s website is found hosted on .com domain instead of .gov.in and reason is unknown.

Results as a Chart

Results as a Table

State Accessibility Failures
Andhra Pradesh 41
Arunachal Pradesh 59
Assam 27
Bihar 2
Chattisgarh 1
Goa 37
Gujarat 23
Haryana 131
Himachal Pradesh 19
Jammu and Kashmir 27
Jharkhand 24
Karnataka 2
Kerala 26
Madhya Pradesh 8
Maharastra 6
Manipur 44
Meghalaya 1
Mizoram 14
Nagaland 43
Odisha 76
Punjab 35
Rajasthan 52
Sikkim 23
Tamil Nadu 7
Telangana 79
Tripura 23
Uttar Pradesh 37
Uttarakhand 12
West Bengal Unavailable

Website of West Bengal state did not get loaded.

Future posts may talk about frequently seen issues across these websites.

Accessibility Review: Jobs for People with Disabilities portal by Ministry of Social Justice and Empowerment, Government of India

Noticed that Department of Disability Affairs, Ministry of Social Justice and Empowerment, Government of India has launched Job Portal for people with disabilities; which would aim to become a great portal for job seekers with disabilities, employers and training institutes. This is certainly a great initiative although I personally prefer to embed people with disabilities with mainstream job portal but this initiative certainly helps.

As an accessibility enthusiast, I wanted to look up the portal from accessibility prospective and below are my findings. Though I’m disturbed to see claim that this website is complied with Web Content Accessibility Guidelines (WCAG) 2.0 Level AA; while it’s actually not. That said, I hope department will work with their developers and get the issues fixed.

Disclaimer:

  1. This post is not to criticize the Government but to help ministry and developer know the problem and help them fix issues thus to make portal fully accessible.
  2. This is not a complete accessibility report; this review can be used only as a reference
  3. If visitors of this website notice any other issues related to accessibility or usability may please add them in the comments section or write directly to the ministry

Accessibility Assessment Findigns

  1. Page title is inappropriate. Home page has “Index” as page title
  2. Buttons provided for “small text, medium text and large text” does not convey it’s purpose
  3. Color scheme buttons does not have accessibel name; also visual indication is not clear to identify expected color scheme.
  4. When navigating through color schemes, screen reader reads for one tab stop as “www.disabilityjobs.gov.in “> and next next tab stop says “button link”
  5. Login button does not have an accessible name
  6. Login button does not have visible focus indicator
  7. Placeholder text is provided as labels for “Enter email ID to register” and “Type password”; it’s not recommended to use placeholder as label for form elements.
  8. Full “I agree to the terms and conditions” needs to be associated with check box.
  9. Check box “I agree to the terms and conditions” does not have visible focus indicator.
  10. Register button does not have accessible name
  11. Register button does not have visible focus indicator
  12. All form fields in Search jobs widget have placeholder as form labels and thus label goes away when user inserts data.
  13. Search button does not have accessible name
  14. Deprecated mark-up of marque is used for “No Payment to be made by applicant to any agency or employee.If someone ask for registration fee or any other cost please immediately bring to NHFDC notice”
  15. Tab panel for Search jobs, Recruiter and Training institutes is not operable using keyboard
  16. Location field (in all tabs) brings up a list of locations with checkboxes but not notified to screen reader and operable only after using a tab key from location field; futher there is no mechanism to dismiss this list before navigating through all location options. Notice Andaman and Nicobar has given as two seperate states!
  17. Image link “Accessible India Campaign” (located between Create a job account and Join our employer” is not accessible using keyboard.
  18. There is a button available to show / hide social media links (Facebook and Twitter) and same does not have an accessible name.
  19. Photo gallery is not accessible using keyboard
  20. There is no mechanism to pause / stop news scrolling.

For any further questions or clarifications of this post, please write to me at srinivasu.c(at)sgaccessibility(dot)com

Accessibility Review: HDFC NetBanking – Adding new Beneficiary

Today, let’s look at Add Beneficiary section of HDFC Bank.

Please note that this test has been carried out using Mozilla Firefox and NVDA a Free and Open Source Screen reader

On Home page, combo box that has NetBanking, Prepaid / Forex Card, Verified by Visa, Credit Cards, Forgot password, Register options does not get focused in tab order but available when using up arrow from Login graphic link.

Once “Login” is activated, a new window gets opened which actually handle rest of the transactions. It would be useful to inform user that “Login” link opens in a new window.

Below are list of issues identified through Add beneficiary page:

WCAG Check Point Issue Recommendation
1.3.1 Info and Relationships Label for Edit field to enter Customer ID is not programmatically associated with its visible label Associate input field with its visible using <for> and <id> attributes
1.1.1 Non-text elements (Active images) Retrieve customer ID image link has an empty alt value thus ignored by screen reader Replace empty alt value with appropriate alt text such as “Retrieve Customer ID” etc.,
1.3.1 Info and relationships Table mark up is used to control the layout; this render unnecessary layout information to screen reader users Use CSS to control layout. It’s easy from portal maintenance prospective too
1.3.1 Info and Relationships (forms) Screen that appears after providing customer ID has following form related issues:

  • Labels for “Customer ID”, “IPIN” edit boxes do not have programmatic association
  • Labels for “virtual keyboard” and “confirm Security access icon and message” check boxes do not have programmatic association.
Associate input elements with respective labels using <for> and <id> attributes
1.3.1 Info and relationships When user is logged in, default focus moves to Account summary; while this is acceptable for portal of this kind where user needs to know the account summary, it would be worth to add heading structure to prior navigation items such as main navigation and side bar navigation or marking up with ARIA roles would be helpful Either provide appropriate headings or use ARIA roles
2.4.7 Focus visible There is no visible focus indicator across the portal; thus users especially those with low vision or cognitive would not know where they are navigating through on the page Either provide a visible focus indicator or ensure browser’s default focus indicator is not override
4.1.2 Name, Role and Value Side navigation contents such as Accounts, Transact, Enquire etc., appears and functions like menus but marked up as links Add menu roles and also ensure state of menus viz. expanded / collapsed is exposed to assistive technologies
1.3.1 Info and Relationships (forms) None of the input fields have associated form labels Associated labels with respective input fields using <for> and <id> attributes
3.3.2 Error identification When form is submitted with no data, user has shown usual process information and not error validation result Show usual process information only when all required fields are filled in

This is not a complete review of the flow but should help HDFC as a first step to make their digital experience accessible.

This post is part of series of reviews to mark Global Accessibility Awareness Day

Accessibility Review: State Bank Secure OTP iOS App

Receiving One Time Password (OTP) via SMS is easy but causes huge inconvenience when user’s registered phone is unavailable or traveling abroad. To solve this problem, State Bank of India has introduced SB Secure OTP application and we did a quick review of SB Secure OTP app for iOS with VoiceOver. Here are some findings:

  • Login Screen is easy including focus management for “Forgot PIN” dialog”
  • It was easy to enter PIN and login
  • Using VoiceOver, focus does not get to Back button, Logout, Help and Settings
  • It was easy to access dialog when user enters wrong PIN

About VoiceOver
VoiceOver is a screen reader on iOS and OS X that reads the screen aloud. To turn ON VoiceOver on iOS, go to Settings -> General -> Accessibility -> VoiceOver -> Toggle

This brief review is series of accessibility reviews to mark Global Accessibility Awareness Day which will be marked on 19th May, 2016 and 3rd Thursday of May every year!

iOS app Accessibility review – State Bank of India’s Freedom Plus

State Bank of India (@TheOfficialSBI) is one of the popular nationalized bank in India and recently released SBI Freedom Plus app and we decided to help them by reviewing app for accessibility.

We have tested the app using VoiceOver, an in-built screen reader on iOS devices.

To turn ON the VoiceOver, Go to: Settings -> General -> Accessibility -> VoiceOver -> Toggle ON

Below are some of our findings:

  • As the app loaded VoiceOver was able to read “Welcome to SBI Freedom Plus Internet banking on the mobile” and then there are two form fields to fill in Internet User and password. However, VoiceOver failed to detect logo information and three available buttons 1. Locate Us, 2. Offers and 3. FAQs
  • Unable to activate “Login” button using VoiceOver
  • When app is authenticating user, visually screen has curtained, however, VoiceOver is reading background information such as user name, password etc.,
  • When accounts page is loaded, labels for each account is reading as a separate lines by VoiceOver. i.e. when swiping right, it reads as

    transaction – next swipe deposit next swipe accounts – next swipe accounts – next swipe savings, next swipe deposit etc.,

    ; This needs to be read as a single item each like Transaction accounts Savings, Deposit account Accounts FD etc.,

  • App requires appropriate headings
  • Good part is that VoiceOver is able read all form fields, dialogs correctly.
  • Color contrast in most part is good; however it requires improvement for text displayed for account information such as balance etc.,

Overall, the app is good and it will be great with a few improvements.