GithubHelp home page GithubHelp logo

Comments (6)

nitedog avatar nitedog commented on June 15, 2024

It seems to me that the uses on the overview and individual pages may be somewhat different:

  • On the overview pages, most people are looking for information about the resources, and will likely be helped with directly embedded videos that are fully expanded by default (like in option 2b)
  • On the individual pages, most first-time users will want to view the video but then probably not after they are used to the resource. Using collapsed approach is probably better (like in option 2a)

Note that the "multiple videos issue" with AblePlayer only applies to the overview page. This issue probably needs to be addressed in a similar way regardless of expand/collapse or modal dialog boxes (all instances of the player need to be fully removed when another is initiated through expanding or opening a modal dialog box). Following that, trying to come up with a modal dialog approach as in option 1 does not seem realistic before CSUN.

I think this leaves us with two aspects to further explore:

  1. Define what we mean by "sufficiently accessible" player. We would likely only use that player on the overview page, and could link to the second instance of the same video on the individual/specific page, which will be using AblePlayer. I guess it is sufficient if the player does not cause interference (eg. keyboard trap) as defined by WCAG?
  2. If we cannot find a player that meets this minimum requirement of non-interference, then we will probably have to use the expand/collapse approach for now. @hidde is exploring the coding feasibility/effort required to accomplish that.

from wai-eval-overview.

yatil avatar yatil commented on June 15, 2024

Of course I defer to the WAI Design team for a specific recommendation, these are just my two cents and my personal view, out of my personal experience:

  • I’m still strongly preferring unlabelled Option 0 (separate pages) as the con (clicking the back button several times) is not a big burden, especially as it would make the overview page load faster and be less sluggish due to the removed JS. A video player is a huge resource and adding five videos that are all preloaded and initialized to a page adds significant to the time to interaction with the page.

    It also gives us a neat video overview page that people can share and allows people to share individual videos.

    Last, but far from least, it is consistent with what we do with other videos. Consistency is important, especially for people with cognitive disabilities, but it makes it also easier for screen reader users and a separate page makes using the keyboard interaction simpler, as there are not multiple play buttons, for example.

  • I strongly feel that we must not use modals at all cost. They are a bad user experience – especially on mobile, are hard to implement and fragile, only work properly for screen reader users if both, browser and assistive tech has ARIA support for them, which is not a given. As UX Researchers Nielsen Norman put it: “modal dialogs become problematic when used for noncritical activities”.

    A modal in this case gives you all the disadvantages of a new page (user out of the flow, not having the overview page on the screen, having to navigate back and forth between the video and the page) without the standard behavior that comes with a page change: A consistent back button, clear purpose of the page, inability to accidentally close the modal when pressing ESC, more space on mobile as there’s no need for a mobile “chrome”.

    I have assessed many modals in the last three years and I have never seen a good implementation. I have seen different levels of mediocre implementations but I cannot say that it made the page easier to use.

from wai-eval-overview.

hidde avatar hidde commented on June 15, 2024

With my developer hat on:

  • there are plenty of ways to do accessible modal dialogs, but there are also a number of not entirely solved/agreed upon accessibility and usability problems (this gets worse if we do modals in modals (but as @slhenry we could turn AblePlayer's modal off)). We will not solve these problems in this project, so they will always be partly problematic :-) In addition, adding a new element like that to the WAI design components would require some back and forth (i.e time)
  • I have to balance this with my other pre-CSUN commitments; implementation of a modal with videos or multiple AblePlayers on one WAI page does not fit in my work schedule.
  • I would be able to implement 2b with YouTube players (we could also upload the captions in YouTube and have them available in that player)

With my EOWG participant hat on:

  • I like the right aligned players on overview page as in @slhenry's example 2b
  • I like linking to individual pages that contain an AblePlayer with the same video + text transcript + captions.

from wai-eval-overview.

shawna-slh avatar shawna-slh commented on June 15, 2024

Proposal:

After more discussion among editor, coder, WAI site design owner, and EOWG Chairs, we propose the following for now before CSUN. We also plan to further consider other options for another iteration in the near future.

Note: The prototypes have other videos for now, not the actual evaluation videos and thumbnails.

Evaluation Overview page

rough prototype of layout (ignore the float clear bugs)

  1. The videos will be always shown. (no expand-collapse for the videos overall)
  2. The videos will be float-right.
  3. The first video will be in AblePlayer. The descriptive transcript will be under an expand-collapse below the video, default collapsed.
  4. The other videos will be in either HTML5video that uses browser player or YouTube player. (More on that is in a separate issue: video player & embed options.) Right under the video will be a link to an accessible version with AblePlayer. That will link to the video in the specific page, e.g., Easy Checks.

Specific pages

(Easy Checks, Selecting Tools, WCAG-EM Overview, Involving Users)

rough prototype on WCAG-EM Overview

  1. The video will be in AblePlayer under the first main heading on the page, with expand-collapse. By default it is collapsed. The descriptive transcript will be under an expand-collapse below the video, default collapsed.
  2. The heading with thumbnail will appear as the first item under "Page contents". Note that if you click that in the page contents, it goes down to the video with the section expanded.

from wai-eval-overview.

shawna-slh avatar shawna-slh commented on June 15, 2024

(A thought so I don't lose it: Maybe for future iteration, the videos are not shown by default and there is a big, clear button to show them? That is, they are not loaded at all unless the user asks for them. This would decrease page load, yet add more UI and user interaction...)

from wai-eval-overview.

shawna-slh avatar shawna-slh commented on June 15, 2024

more details in wiki page

from wai-eval-overview.

Related Issues (15)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.