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.
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.
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.
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.