E-mail List Archives
Thread: information on the type of technology used for the effect in this web page
Number of posts in this thread: 9 (In chronological order)
From: Catherine Roy
Date: Sat, May 15 2021 9:17AM
Subject: information on the type of technology used for the effect in this web page
No previous message | Next message →
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://www.nytimes.com/interactive/2021/04/02/arts/design/shah-jahan-chitarman.html
Thanks!
Catherine
--
Catherine Roy
http://www.catherine-roy.net
From: Polling, Neil
Date: Sat, May 15 2021 9:29AM
Subject: Re: information on the type of technology used for the effect in this web page
← Previous message | Next message →
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 ADDRESS REMOVED = > on behalf of Catherine Roy < = EMAIL ADDRESS REMOVED = >
Sent: Saturday, May 15, 2021 10:17:42 AM
To: = EMAIL ADDRESS REMOVED = < = EMAIL ADDRESS 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$
Thanks!
Catherine
--
Catherine Roy
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.
From: Catherine Roy
Date: Sat, May 15 2021 11:32AM
Subject: Re: information on the type of technology used for the effect in this web page
← Previous message | Next message →
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
> On May 15, 2021, at 11:29 AM, Polling, Neil < = EMAIL ADDRESS 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 ADDRESS REMOVED = > on behalf of Catherine Roy < = EMAIL ADDRESS REMOVED = >
> Sent: Saturday, May 15, 2021 10:17:42 AM
> To: = EMAIL ADDRESS REMOVED = < = EMAIL ADDRESS 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$
>
> Thanks!
>
> Catherine
>
> --
>
> Catherine Roy
> 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.
> > > >
From: Jonathan Avila
Date: Sat, May 15 2021 4:22PM
Subject: Re: information on the type of technology used for the effect in this web page
← Previous message | Next message →
Wow, this page is dizzying and they hijack the browse zoom as well making difficult to comprehend what is going on without feeling ill. They need a step by step feature that doesn't' pan to the next item but just jumps there or says in one place.
Jonathan
From: Mallory
Date: Mon, May 17 2021 1:36AM
Subject: Re: information on the type of technology used for the effect in this web page
← Previous message | Next message →
Hi,
A step-by-step feature as the default (staying in place makes no sense, each visible comment is often specifically a comment on a small part of each painting. Adding an arrow to point would be pointing at something too small for many of us) and then checking if the user's got prefers-reduced-motion not on, allowing the swoop-zoom thing. Although without swoop-zoom, while that makes me queasy I would be lost as to where I was on the painting, because I'm always zoomed in quite a bit in my browser. But the motion/scrolling issue could be easily fixed.
I dunno what VoiceOver's problem is (or maybe it's Safari not exposing the content?) but checking with NVDA/FF/Chrome, I'm just Arrow-browsing the page and getting all the visible text. Which makes sense: the browsers seem to also be exposing the paragraphs in the acc-tree as paragraphs.
I agree with Neil's idea that first there should be alt text of the piece being discussed, and then probably a small invisible hint for each "shift" mentioning what part of the piece is being zoomed into. Since this is just a long article with a pile of text, this invisible text could simply be that: invisible (offscreen techniques for example) text, in the content order.
I think it would be fairly easy, code-wise, to increase the accessibility of this page. NYT has made some other, much more complicated visualisations (moving charts and graphs) where I've thought "there's no way this could be made sufficiently accessible to certain populations" due to those visualisations requiring all users have the ability to take in multiple streams of content at the same time (so if you were deafblind, since there's no such things as a timing-based multiple-exposure haptic device that I know of, you'd simply be forced to explore each bit of the visualisation individually and in sequence. Which means you'd miss some of the relationships). One of the ones I'm thinking of was a moving chart showing several (selectable by the user in a toolbar above!) human demographics as their marital status, race, age, and socio-economic levels changed over the course of 30 years. Like, it was wow. Or just the other month I saw a history of the shapes and positions of the earth's tectonic plates over the course of a billion years... also NYT I think, although the writer writes for Nat'l Geo.
Even this simpler moving chart linked below (where the x and y axes are changing over time), I can't imagine a way of making it accessible to the same level as it is to someone who can see sufficiently (although contrast with the yellow-on-white could certainly be improved): https://twitter.com/RitaPanahi/status/1072763227337977861 (it has sound but it's just music, so this is a visual-only chart).
The closest I could think of for this chart is a horse-race or baseball-game style speed announcer, who by their sequential nature MUST leave out the majority of information and focus only on the first few leaders, and only occasionally mention the numbers. Another solution would be to offer a whole other interactive version of the data set which allows all users to "step through" each year and then explore the various amounts of money and (new) order of countries the y-axis at their leisure, and probably a toolbar accompanied to allow people to skip to years or set orders-by-GDP (and then get the year as a result), something like that.
When professional developers say "accessibility is hard" and they're talking about making a hamburger work correctly, I scowl. But there are absolutely places where it cannot be anything but cost a lot of time, money and effort... which isn't bad. That should encourage us to make tools for content-providers so they can more easily make multiple versions of any throw-away, one-off type media (the biggest argument I get against investing a buttload of time and code into something... most inaccessible things aren't as grand and detailed as this NYT historical-painting thing, but just some quickie something an intern puked out, meant to be viewed that day or something). But then there's the things where you'd spend 6 months trying to build some kind of prototype and it would still be half-assed at best, because solutions haven't yet been found. Whenever I see those, I do say to myself: "accessibility IS hard."
cheers,
_mallory
On Sun, May 16, 2021, at 12:22 AM, Jonathan Avila wrote:
> Wow, this page is dizzying and they hijack the browse zoom as well
> making difficult to comprehend what is going on without feeling ill.
> They need a step by step feature that doesn't' pan to the next item but
> just jumps there or says in one place.
>
> Jonathan
>
>
From: Swift, Daniel P.
Date: Mon, May 17 2021 6:54AM
Subject: Re: information on the type of technology used for theeffect in this web page
← Previous message | Next message →
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 ADDRESS REMOVED = > On Behalf Of Catherine Roy
Sent: Saturday, May 15, 2021 1:33 PM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = <mailto: = EMAIL ADDRESS 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 ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >> on behalf of Catherine Roy < = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >>
> Sent: Saturday, May 15, 2021 10:17:42 AM
> To: = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = > < = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS 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.
> > > >
From: Peter Weil
Date: Mon, May 17 2021 8:03AM
Subject: Re: information on the type of technology used for the effect in this web page
← Previous message | Next message →
I have not checked on my iPhone, but VO/Safari on Mac OS reads out the (text) content just fine.
Peter
--
Peter Weil, Web Developer
University Marketing
University of WisconsinâMadison
= EMAIL ADDRESS REMOVED =
(m) 608-220-3089
On May 15, 2021, 12:33 PM -0500, Catherine Roy < = EMAIL ADDRESS REMOVED = >, wrote:
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
On May 15, 2021, at 11:29 AM, Polling, Neil < = EMAIL ADDRESS 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 ADDRESS REMOVED = > on behalf of Catherine Roy < = EMAIL ADDRESS REMOVED = >
Sent: Saturday, May 15, 2021 10:17:42 AM
To: = EMAIL ADDRESS REMOVED = < = EMAIL ADDRESS 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$
Thanks!
Catherine
--
Catherine Roy
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.
From: Catherine Roy
Date: Wed, May 19 2021 8:28AM
Subject: Re: information on the type of technology used for the effect in this web page
← Previous message | Next message →
Thanks everyone for your answers. They were very helpful.
Catherine
--
Catherine Roy
www.catherine-roy.net
> On May 17, 2021, at 10:03 AM, Peter Weil < = EMAIL ADDRESS REMOVED = > wrote:
>
> I have not checked on my iPhone, but VO/Safari on Mac OS reads out the (text) content just fine.
>
> Peter
>
> --
> Peter Weil, Web Developer
> University Marketing
> University of WisconsinâMadison
> = EMAIL ADDRESS REMOVED =
> (m) 608-220-3089
>
> On May 15, 2021, 12:33 PM -0500, Catherine Roy < = EMAIL ADDRESS REMOVED = >, wrote:
> 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
>
> On May 15, 2021, at 11:29 AM, Polling, Neil < = EMAIL ADDRESS 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 ADDRESS REMOVED = > on behalf of Catherine Roy < = EMAIL ADDRESS REMOVED = >
> Sent: Saturday, May 15, 2021 10:17:42 AM
> To: = EMAIL ADDRESS REMOVED = < = EMAIL ADDRESS 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$
>
> Thanks!
>
> Catherine
>
> --
>
> Catherine Roy
> 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.
> > > > > > > > > > > >
From: Geetha Shamanna
Date: Wed, May 19 2021 9:09AM
Subject: Re: information on the type of technology used for the effect in this web page
← Previous message | No next message
I was able to read the text as well using Jaws on my Windows laptop, and VoiceOver on the iPhone.
Had it not been pointed out here, I wouldn't have realised that the page had any accessibility issues.
Geetha