WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: information on the type of technology used for theeffect in this web page

for

From: Swift, Daniel P.
Date: May 17, 2021 6:54AM

Catherine:

"What kind of technology is being used to create this affect? Is it simply JavaScript or is there something else?"

I didn't look specifically at the ‘technology' which they are using, but this can be accomplished using a combination of JS and CSS. If I were going to achieve this effect, I'd use JS to determine what is in view. If the desired section of text were in view, I'd use CSS positioning, scaling, and transition on the image to achieve a similar effect. This is probably how they are doing it.

Daniel Swift, MBA
Senior Web Specialist
University Communications and Marketing
West Chester University
610.738.0589

From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Catherine Roy
Sent: Saturday, May 15, 2021 1:33 PM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] information on the type of technology used for the effect in this web page

Wow, thank you Neil for your response. So it's worse than I thought. I am kind of surprised that the New York Times would produce something so inaccessible.

What kind of technology is being used to create this affect? Is it simply JavaScript or is there something else?

Thanks!

Catherine

--
Catherine Roy
www.catherine-roy.net<;http://www.catherine-roy.net>;

> On May 15, 2021, at 11:29 AM, Polling, Neil < <EMAIL REMOVED> <mailto: <EMAIL REMOVED> >> wrote:
>
> Hi Catherine,
> I took a look at it on my iPhone using VoiceOver and it's completely inaccessible. According to VO it's essentially over 100 pages of nothing. The text intended to refer to various portions of the image aren't being read and there's no verbal indication that anything is there at all.
> It's a cool effect visually, but there would need to be reading an overall alt text for the full image at the beginning, then as the use moves to each text section combining a reading of the displayed text along with a more detailed alt text description for that section of the image
>
> > From: WebAIM-Forum < <EMAIL REMOVED> <mailto: <EMAIL REMOVED> >> on behalf of Catherine Roy < <EMAIL REMOVED> <mailto: <EMAIL REMOVED> >>
> Sent: Saturday, May 15, 2021 10:17:42 AM
> To: <EMAIL REMOVED> <mailto: <EMAIL REMOVED> > < <EMAIL REMOVED> <mailto: <EMAIL REMOVED> >>
> Subject: [WebAIM] information on the type of technology used for the effect in this web page
>
> EXTERNAL EMAIL
>
> Hi all,
>
> Could someone please explain how the effect in this web page from new
> york times works? And how accessible or not it may be to disabled users,
> especially users of assisted tech or users with visual or other impairments?
>
> https://urldefense.com/v3/__https://www.nytimes.com/interactive/2021/04/02/arts/design/shah-jahan-chitarman.html__;!!Ebr-cpPeAnfNniQ8HSAI-g_K5b7VKg!dhX_rD4R9BM_E1LXmqnj2KJAKcgNcwyqoOuyidbfRciJkSPlsYNEsuV3A4tkbuNmLMK3sQ$<https://urldefense.com/v3/__https://www.nytimes.com/interactive/2021/04/02/arts/design/shah-jahan-chitarman.html__;!!Ebr-cpPeAnfNniQ8HSAI-g_K5b7VKg!dhX_rD4R9BM_E1LXmqnj2KJAKcgNcwyqoOuyidbfRciJkSPlsYNEsuV3A4tkbuNmLMK3sQ$>
>
> Thanks!
>
> Catherine
>
> --
>
> Catherine Roy
> https://urldefense.com/v3/__http://www.catherine-roy.net__;!!Ebr-cpPeAnfNniQ8HSAI-g_K5b7VKg!dhX_rD4R9BM_E1LXmqnj2KJAKcgNcwyqoOuyidbfRciJkSPlsYNEsuV3A4tkbuPsT-sXTA$<https://urldefense.com/v3/__http://www.catherine-roy.net__;!!Ebr-cpPeAnfNniQ8HSAI-g_K5b7VKg!dhX_rD4R9BM_E1LXmqnj2KJAKcgNcwyqoOuyidbfRciJkSPlsYNEsuV3A4tkbuPsT-sXTA$>
>
> > > > >
> This message and any attachments are intended only for the use of the addressee and may contain information that is privileged and confidential. If the reader of the message is not the intended recipient or an authorized representative of the intended recipient, you are hereby notified that any dissemination of this communication is strictly prohibited. If you have received this communication in error, please notify us immediately by e-mail and delete the message and any attachments from your system.
> > > >