The Newslaundry website and app are now accessible

Screen reader compatibility, voice search, transcripts, colour contrast settings, dyslexia mode and a lot more.

WrittenBy:Chitranshu Tewari
Date:
Article image

Product experts have long cited empathy as the secret sauce behind successful products. Until you truly understand the needs, usage, and perspective of the user you serve, you won’t be able to build meaningful products. 

Empathy is also at the heart of all storytelling in journalism. Journalists take risks to speak truth to power because they empathise with the subjects in their stories. 

Yet this empathy is largely absent when it comes to product decisions regarding news websites and apps. Most of us in the news know how excruciatingly painful it is for a disabled person to access a news website or simply think they are not our ‘target audience’. This translates to products that are inaccessible and discriminate against millions of users with disabilities. 

At Newslaundry, we are changing that.

Last year at The Media Rumble, our annual media conference, we previewed a set of features and system overhauls that would make our website and app accessible to people with disabilities. A string of structural changes that would make our website and app compatible with screen readers used by blind users and features that disabled users rely on to access the internet and computers. 

We’re stoked to announce that these changes are now live! It’s been a long road to get here, given that we started working on overhauling our front-end code and putting in the systems for accessibility last year. But before I get to the details, here are quick highlights of the changes: 

Screen reader compatibility 

Users with visual impairments rely on screen reader software to navigate apps. These set of features make our website app compatible with screen readers present in iOS, Windows, MacOS, and Android, as well as leading screen reader software such as JAWS and NVDA. We also have semantic HTML and ARIA labels, hints and roles that help visually disabled users with additional context.

A user using iOS voiceover with the Newslaundry app.

Colour filters and contrast themes        

Our app now offers colour themes for those with visual impairments alongside dark and light modes. Users can choose between high-contrast and low-contrast designs to tweak the contrast between text and background for better readability.

Accessibily page on the app that lists contrast themes for users with colour blindness.

If you already use accessible settings in your operating  system, we also have a Sync With System option where we will sync your contrast settings for the app to the settings on your device.

Comparison of different themes in the app for users with colour blindness.

Dyslexia font and motion control

Dyslexia font to make text more readable for dyslexic users, and motion control to help users with ADHD.

Interactive: Drag the bar in the middle to see the difference default screen and one with dyslexia-friendly font.

Are accessible designs only for disabled users?

One of the biggest myths about accessibility is that it is only for users with disabilities. The truth is that an accessible product and design improves the overall user experience, helping users across the board. The benefits of an accessible product extend to everyone. It’s about ensuring everyone can access the product, without any barriers. 

Here are the features that best demonstrate this. 

Transcripts and subtitles

An in-built, one-click transcript for all Newslaundry podcasts, and read-aloud functionality for all text stories. Plus, closed captions for all videos.

Example of the transcript that will be added for every English podcast published on Newslaundry.

Voice search 

Search by speaking with just a tap, with filters for authors, sections and tags.

A user using voice search to search for stories.

Reader mode

At Newslaundry, we have always tried to create a clean, no-distraction design. It helps that we don’t have any ads. After all, we all hate pop-ups, banners and ads in the middle of a story page. 

We are now taking this further with a reader mode on the app.  Enhance the reader experience by eliminating all distractions in the form of sidebars and banners, presenting stories in a clean format optimised for reading.

Interactive: Drag the bar in the middle to see the reader mode on a story page.

Our journey to accessibility

We first stumbled upon accessibility as a problem when one of our young subscribers wrote to us about the website being inaccessible. That led to speaking with more users and accessibility experts and researching web accessibility. We learned early on that deploying quick fixes just to claim an accessible tag wouldn’t help us serve disabled users. There are countless examples of how fixes in the form of widgets and accessibility overlays often end up making it worse for disabled users. 

This meant revisiting systems and processes that had been in place for over a decade. Accessibility is among the most basic product requirements and is relatively easy to deliver if considered from the start. On the other hand, implementing it on a decade-old tech stack and a mix of third-party products was a nightmare. 

Our small team of developers worked tirelessly to go back to the code, make systemic changes, and then build on the features. It didn’t help that as a news publisher, you tend to work with a host of third-party products that you have zero influence on. As a result, we had to circumvent the products we rely on for our day-to-day publishing operations. 

It took us over six months to put this together. But given that there are hardly any Indian news websites and apps that are accessible, we wanted to ship responsibility instead of resorting to a bandaid, overlay approach. 

Like any product cycle, we will continue making improvements to get better. Accessibility should be a default approach baked into the user experience. We have also changed how we write and present our stories to make them more accessible, ranging from alternate text for images to better colour choices for new products.

A round of thanks

It has really taken a village to make this possible. First up, we are indebted to Shakul Sonker, Vineet Saraiwala, Prashant Ranjan Verma, Shashank Pandey and Shubhanku Kochar. All of them helped us understand the right approach to accessible products and challenges faced by disabled users in accessing the internet. 

I am immensely proud of our small engineering team, which made this a reality. Rishabh, Aditya, Danish, and Dhananjai didn’t let the many, many challenges deter them and executed the work that we set out for ourselves. Also, my colleagues who contributed immensely to the project before they moved on from Newslaundry: Yatharth, Prachi, Rishabh, and Akshat. This is a reality because each of them punched way above their weight and understood we were onto something big. 

A big thank you to Google. We knew revamping our website and app to make them accessible would take time, resources, and skilled engineers—often a rarity in the newsroom. We pitched accessibility as an idea and its need to Google News Initiative Innovation Challenge, a global programme to empower news organisations that pioneer new-age thinking in online journalism. Folks at Google backed the idea, helping us fund much of our engineering effort. 

Massive shoutout to our subscriber Himanshu, who helped us with UI-UX. Design often becomes an afterthought for a resource-crunched newsroom. He helped us with many user screens through the app. Plus, Gobindh, our in-house designer, made the artwork. 

We also partnered with the students at the University of Michigan School of Information. Tiara, Kexuan, Qiyue, and Harrison tested the product with multiple users and carried out a heuristic evaluation of our app and website. Shoutout to Joyojeet Pal, who made the partnership happen. 

Last but not least, our subscribers who power everything we do at Newslaundry. We are blessed to have them.

What’s next

This is not a we-are-ready-to-move-on product update. There are still a lot of things that we can improve upon. We have prioritised engineering over design, so there’s a lot of room for improvement in design and UI-UX. Write to chitranshutewari@newslaundry.com for feedback, suggestions and bugs. If you’re a disabled user or use accessibility settings, we would love to hear from you.

More importantly, we hope this nudges other publishers to take up accessibility. We are also working on an accessibility resource guide for newsrooms. More on that later.

Click here to download the app. You can access all accessibility settings by clicking on the accessibility icon in the bottom navigation bar. On the website, simply hit the settings icon at the top right of the homepage.

Also see
article imageTMR 2023: Why newsrooms should view accessibility as a default setting, not an add-on

Comments

We take comments from subscribers only!  Subscribe now to post comments! 
Already a subscriber?  Login


You may also like