Web accessibility
This interactive is fully accessible to the hearing and visually impaired and other people with disabilities. Inaccessible Cities is one of the first interactive digital news experiences to accomplish this using the AA web accessibility guidelines. Watch the video to learn how we made it happen:
Narrator (00:00.000): Inaccessible Cities is the latest interactive by AJ Contrast, which is fully accessible to the hearing and visually impaired along with other people with disabilities. So what are the elements of an accessible web interactive?
(00:00:15.470): First, audio descriptions.
Audio description narrator (00:00:18.704): Footage of Rebecca with her back to the camera.
Narrator (00:00:21.337): All videos have recorded audio descriptions of the visuals in the footage. The descriptions include important information about the character and surroundings that are visible.
Audio description narrator (00:00:30.373): Nidhi using a white cane walks across a pedestrian bridge.
Narrator (00:00:33.840): Second, alternative text.
Screen reader (00:00:36.207): A busy, congested street in Lagos filled with yellow buses and a truck, as well as pedestrians and vendors.
Narrator (00:00:40.442): For all non-text content like photos, infographics, GIFs, games etc
Screen reader (00:00:46.010): Selected button, Rebecca walks upstairs using her cane.
Narrator (00:00:48.143): Non-text content is described through text and integrated into the web page’s HTML code. A user can use the alternative text read aloud by a text-to-speech synthesiser.
Screen reader (00:00:58.979): [The icon] stays at the intersection of 2nd Ave and E 81 St. A taxi icon approaches the person.
Narrator (00:01:03.547): Third, closed captions. All videos have subtitles that display the dialogue along with relevant sounds.
(00:01:16.316): Fourth, transcripts. Every video and audio snippet are presented in text format too.
(00:01:24.318): Fifth, keyboard navigation. Users are able to navigate the page using their keyboards only. They are able to hit the “Tab” key to maneuver the clickable options in every page.
(00:01:36.987): Sixth, contrasting colours. The colour of the text boxes and other website elements have strong contrast to the background images and tones in order to ensure easier readability and to provide a good user experience.
(00:01:51.290): Seventh, labelling buttons. All buttons have descriptions that give the user enough information about what the action of clicking on that element entails.
(00:02:02.059): Eighth, content heading. Each new section of the experience has a clear title to help users identify the content without straining their vision.
(00:02:12.795): You can find these and many more features in our fully accessible interactive Inaccessible Cities where you can explore New York City, Lagos and Mumbai and learn about the state of accessibility in these three cities through the lens of public transport and infrastructure. And meet three women living with disabilities and fighting for greater accessibility in their cities.
