Accessibility is a very vital aspect that need to be in mind while providing web content for large audience. Times of India being the major market share holder in spreading news in the sub-continent, it is very much important to keep 50 million plus people with disabilities and large number of people with age old difficulties in mind. I am a regular reader of news in Times of India IOS application. Being an accessibility consultant I am disappointed when I observe some significant accessibility issues in the app. Have a look at the accessibility challenges listed below.
Accessibility Concerns
The first element on the page is “Side Navigation bar†read out by voiceover. An average user does not understand what does a “Side navigation bar “mean. It is better to provide an accessibility label as “Select News Sections†as it provides the option to select the interested news sections such as “Top Newsâ€, Cities, Business, World, Sports, Movie reviews etc.
Side Navigation bar page
On opening the Side navigation bar news sections are available. The element and its trait (role) are not associated together while reading with voiceover. Eg: Voiceover is reading “Top News†in one swipe and in the next swipe it’s reading the trait as button. The element and the trait should be associated so that the voiceover will read together as “Top news buttonâ€. Unfortunately double tapping on either the element or trait the action of activating that page is happening.
Few buttons in this page are announced as “ABTableNextButtonPressed†by voiceover. This label does not make any meaning to a voiceover user. Providing more accurate accessibility label help more users.
The Side Navigation bar page contains a Search text field. I have put a search word as “Car accident†and hit the search button. Some results have appeared on the page. Also a clear button and cancel button are appeared near the search field. The Cancel button is announced for voiceover user as “Cancel dimmed button†which means the button is disabled. Even this dimmed/disabled button is actionable with voiceover.
Setting Page
In the home page I have found a Setting button. This could be “Settings button†instead of setting button. Of course it is not an accessibility violation.
No element in the page has a trait associated with them. Without an accessibility trait voiceover user will not be able to distinguish between a static text and actionable element. Since favorites, Text size, About us, Terms of use and Grievance Redressal etc are actionable elements, accessibility trait such as a link suits them better.
Main page
In the main news articles page each article is read just as any other static text. Voiceover users consider them as normal text and end up without activating them. Provide an accessibility trait such as link so that the users will identify them as actionable elements.
At the bottom of the page Voiceover read “2751320.gifâ€, when I double tap on it the Vodafone website is opened. Providing an accessibility label for this image let the voiceover user know where does the element take along with the accessibility trait to let the users know that it’s an actionable element.
Detailed article Page
Voiceover reads “3 of 24â€. Information conveyed is not clear to the voiceover user. Making it to “3 of 24 articles†bring more clarity.
The previous and Next articles are read as “ArrowLeft†and “ArrowRightâ€. Providing an appropriate accessibility label as “Previous article with article name and Next article with article name will bring more clarity for the voiceover user.
The heading of the page and the content is getting read in a single swipe. Ensure that the heading and the content are read in separate swipes and the content itself should be in different lines for the voiceover user. Currently voiceover is reading both the heading and the entire article as a lengthy line which confuses the voiceover user.
The labels of the other elements in the page such as “Favorite, font are also not clear. Provide appropriate accessibility label for them.
Accessibility Features in the application
While pointing the accessibility issues it is worth mentioning few accessibility implementations in the application.
- Every page has an appropriate back button. Users can navigate previous page using the first button on the screen.
- Under setting Text size option is provided. This text resizing option helps the low vision users who uses the application.
- Headings are used appropriately in setting page and few other pages.
The review of this app is done using Voiceover an inbuilt screen reader of IOS7 on iPhone 5. To know how to activate voiceover on IOS read voiceover and rotor
To know how to fix accessibility issues on IOS read quick tips for IOS app accessibility.