Re: Adapt example: distracting sign-up form

Hi again all,

I've refined the example somewhat. It now supports both prefers-reduced-motion and limited versions of the @distraction and @simplification attributes, for demo purposes. Thanks to Lionel for pointers to the public domain logo images.

There is also a details/summary control panel widget that can be used to adjust the presentation of the page in line with the Adapt spec. It's a little rough and ready, but I think it will provide a suitable starting point for discussions with CSSWG tomorrow.

For now, at least, you can find it at http://matatk.agrip.org.uk/personalization-semantics-explorations/distracting-sign-up-form.html


Best regards,


Matthew
-- 
Matthew Tylee Atkinson (he/him)
--
Principal Accessibility Engineer
TPG Interactive
https://www.tpgi.com

A Vispero Company
https://www.vispero.com

--
This message is intended to be confidential and may be legally privileged. It is intended solely for the addressee. If you are not the intended recipient, please delete this message from your system and notify us immediately.
Any disclosure, copying, distribution or action taken or omitted to be taken by an unintended recipient in reliance on this message is prohibited and may be unlawful.

On 29/08/2022, 04:59, "Matthew Atkinson" <matkinson@tpgi.com> wrote:

    CAUTION: This email originated outside Vispero. Do not click links, open attachments or forward unless you recognize the sender.


    Hi all,

    I'm working on an example page to show people what Adapt can do—via the power of element-level semantics—at TPAC and beyond. The example is a sign-up form that has multiple distractions on it. The idea is to show how our attributes allow for a more fine-grained adaptations than are available via other means e.g. CSS.

    I will show you what I have on the call (I've attached the HTML file, but only the HTML file, so you can't see the animated bitmap in there). So far I have got the basics of the page itself. In order to show how it will be adaptable with our spec, I'll have to add in some code, based on my previous stuff, to implement that. However, I noticed a couple of things and need some feedback on the direction of the example.

    The distractions in the example include:

    * Animated bitmap.
    * Countdown timer (actually important). It both counts down and changes colour over time.
    * Simulated stock ticker.

    The tool most would reach for in this area is the CSS media query prefers-reduced-motion. This may be surprising to some (it was a bit to me) but this media query could actually be used to cover all of the cases I have so far (albeit it's specific to distractions caused by motion, and not just an overwhelming volume of content), thus:

    * The animated bitmap can be rendered still by way of a <picture> element with media query embedded [1].
    * The countdown could be kept active purposely, as it's important.
    * The stock ticker could be hidden via CSS when that media query is matched.

    I intend to flesh out the form and add more content, which could be simplified using our attributes. If it turns out to be possible to add something visually striking (even in motion) on the page that _couldn't_ be dealt with via prefers-reduced-motion, then that would be good (maybe something like an advert in an iframe, which the page's CSS couldn't touch?)

    Looking forward to discussing with you soon.

    Best regards,


    Matthew

    [1] https://css-tricks.com/gifs-and-prefers-reduced-motion/

    --
    Matthew Tylee Atkinson (he/him)
    --
    Principal Accessibility Engineer
    TPG Interactive
    https://www.tpgi.com

    A Vispero Company
    https://www.vispero.com

    --
    This message is intended to be confidential and may be legally privileged. It is intended solely for the addressee. If you are not the intended recipient, please delete this message from your system and notify us immediately.
    Any disclosure, copying, distribution or action taken or omitted to be taken by an unintended recipient in reliance on this message is prohibited and may be unlawful.

Received on Wednesday, 14 September 2022 17:30:13 UTC