Course - Video gallery and Videos

[flaviolima]

:warning: Wire-frames and live-demos are just for example purpose. They don't meet entirely this requirement.

:pencil2: Pencil icon marks specs that are waiting for definition

---

Live-Desmo using VideoJS that provides full compatibility with track (vtt files), including screen reader recognize of speak audio description track. Select Elephants Dream video to test accessibility

---

Table Of Content

1. Video alternatives
   1. Video-Only alternatives
2. Video provided by teachers
   1. General considerations
   2. Rendering single video
   3. Video Gallery

---

Video alternatives

In order to images be accessible it's necessary to be provided:

• [x] Captions #10

• [x] Audio description #11 #12 #13

• [x] Media alternative #14 #11

  • [x] Transcription content should be provided next to the player
  • [ ] Second audio track can be provided as an audio-description (complex implementation)

• [x] Sign Language #15

• [ ] webVTT: captions and audio descriptions files can be compatible with some players.

  • [ ] In this situation, the description read aloud by screen readers. .

• [x] :warning: Browser and Screen Readers compatibility We are following WCAG and HTLM5 specs, but adjustments to compatibility should be necessary.

Video-Only alternatives

In order to images be accessible it's necessary to be provided:

• [x] Audio description #11 #12 #13
• [x] and/or Media alternative #14 #11

Video provided by teachers

Videos from course creation should follow Video alternatives specification (above) additional to bellow requirements

General Considerations

1. • [x] Separating information and structure from presentation to enable different presentations (meet #76)
2. • [ ] meet #135
3. • [ ] meet #97
4. • [ ] contrast ratio for boundaries ≥ 3:1 (meets #98 )
5. • [x] font color with at least minimum contrast (#92)
6. • [ ] Text can be resized to 200% ( meets #93)
7. Text Spacing (meet #99)
   1. • [x] Line height (line spacing) to at least 1.5 times the font size;
   2. • [x] Spacing following paragraphs to at least 2 times the font size;
   3. • [x] Letter spacing (tracking) to at least 0.12 times the font size;
   4. • [x] Word spacing to at least 0.16 times the font size.
8. on focus and hoover
   1. • [ ] provide a visible indicator (meet #116 minimum)
        1. • [ ] meet #90 (multiple visual cues) Suggestion: combine colors (e.g. font-color, border-color) and shapes (e.g font-weight , border-line)
        2. • [x] meet enhanced scenario of #116 by setting focus indicator minimum area, contrast and thickness

Rendering single video

Fields from Authoring Tool

• shortDescription (text)
• Transcription (text)
• Caption (vtt file)
• AudioDescription (vtt file or audio file)
• HasSignLanguage (bool)
• HasAudioDescription (bool)
• HasCaption (bool)
• HasRisk (bool)
• TranscriptionPosition

1. • [ ] aria-label="shortDescription or aria-label="title" (if short description is not provided)
2. • [ ] aria-describedby=Transcription`
3. • [ ] warning about seizure risk, if HasRisk==true
   • video player could load inactive, and user must confirm that he is aware of the risk, clicking in a checkbox

Pure HTML5 example *live-demo uses videojs instead

<figure id="id_video_box">
   <h3>VIDEO TITLE</h3>
   <p id="id_short_desc"><!-- SHORT DESCRIPTION --></p>
   <video id=video poster="poster.png" autoplay="false" aria-label="id_short_desc" aria-describedby="id_long_desc">
       <source id='mp4' src="trailer.mp4" type='video/mp4'/>
       <!-- Track to be used for CAPTIONS -->
       <track kind="captions" label="English[cc]" src="captions_en.vtt" srclang="en" default></track>
       <!-- Track to be used for AUDIO-DESCRIPTION as .vtt -->
       <track kind="descriptions" label="English[desc]" src="audiodesc_de.vtt" srclang="en"></track>
       <p>Your user agent does not support the HTML5 Video element.</p>
   </video>
</figure>
<figcaption id="id_long_desc"><!-- TRANSCRIPTIONS --</figcaption>

Video Gallery

Video widget is composed by

• image's thumbnails
• fullwidth preview

1. • [ ] #136 Design Pattern: must follows WAI-ARIA Practices for grid
     1. • [x] aria-label and visibel label "Image gallery" ( meet #136 #16 )
     2. • [x] role=grid

2. 101 keyboard navigation

   1. • [x] tab and Shift + tab: Navigate to/away gallery
   2. • [x] left and right arrow: Navigate through gallery's images
   3. • [x] Enter and Space: Open fullwidth preview
3. • [x] Responsive design
     1. large viewport presents 8 thumbnails in one row
     2. medium viewport presents 3-7 thumbnails by row
     3. small viewport presents 2 thumbnails by row
     4. smallest viewport 1 thumbnail by row
4. • [ ] warning about seizure risk, if HasRisk==true . When user select to open fullwidth preview, open an alertdialog
     1. To open the full width preview, User must check the checkbox confirming that he is aware of the risk and then click in CONTINUE button.
     2. To not open the full width preview, user must use CANCEL button

Thumbnails

1. • [x] Focus indication
2. • [ ] Hover indication
3. • [x] Each thumbnail is a <figure> tag
     1. • [ ] alt attribute of will be the "short description" configured by teacher
     2. • [ ] alt attribute of will be the "title" if no short description was set by teacher.
     3. • [x] figcaption will be the "title".

          <figure role="group">
          <img src={poster} alt={shortDescription} />
          <figcaption>{title}</figcaption>
          </figure>

Full width Preview

1. • [ ] Fullwidth dialog (layout design consistency #51)
2. • [ ] Design Pattern: must follows WAI-ARIA Practices for modal (meet #136)
     1. • [ ] role="dialog"
     2. • [ ] keyboard navigation (meet #101 )
     3. • [ ] aria-modal=true
     4. • [x] aria-describedby=
     5. • [ ] First focus
     6. • [ ] Focus after dialog is closed
3. Button Controls
   1. • [ ] provide a label that identifies the purpose of the buttons (meet #16 #76 #136)
   2. • [ ] #119 Accessible name should be the function the button serves

Wire-Frames

State indicators (focus and hoover)

Fullwidth preview

• responsive player
• responsive containers

small screen

medium screen

large screen

[github-actions[bot]]

This Feature is ready to be implemented.

[ecureuill]

Not complying with specification

Please, move to CODED only when this feature is fully implemented: bugs reported in comments and requirements in OP If you want that we test some partial solution, add a comment here with our @

[github-actions[bot]]

This feature have been implemented and is ready for Funcional Test. Please, test the feature.

[rebeccamello]

• [ ] There are still tasks in the requirement to be done

---

• [ ] Seizure warning modal is not showing before opening a video

---

• [x] When main video starts buffering the sign language video doesn't stop, making it desync

---

• [x] Screen reader and keyboard nav doesn't reach Sign Language, Short and Long Description

---

• [ ] aria-describedby and aria-labelledby are getting the wrong id (ie: screenshot, where the short description id is "video_0.60246...172_shortDescr" and the aria-labelledby is "video_undefined_shortDescr"

[juantenesaca]

Hello @rebeccamello,

Youtube videos are not accessible, but we still give the opportunity to the tutor to create content with it, I think maybe, we have to block the options of accessibility when a tutor decides to insert this type of content in the courses (There is no requirement for this for now). Please use another sources for this test. When you are adding the video link the systems tells you in green, but if not the message is in yellow.

[caroltaus]

• [x] When hoovering there should a visible indicator

---

• [ ] User is never warned about content that could cause seizures (in gallery and in single video rendering)

---

• [x] Modal about no accessibilty is showing even when user uploads from library

Steps to reproduce:

1- create a video content 2- go to the upload from url tab 3- go to upload from library tab 4- upload a video from library 5- save the content 6- the "This content has no accessibilty. Do you want to proceed?" modal is shown

[EduKobaiashi]

• [ ] There is still no seizure warning, only a modal that appears when opening any video. This modal should only appear to videos that have HasRisk == True, with a message like "The video you selected could provoke photosensitive seizures, are you sure you want to open the fullwidth preview?"

---

• [ ] There is no seizure warning for single video rendering, video player could load inactive, and user must confirm that he is aware of the risk, clicking in a checkbox

---

• [ ] Screen reader is reading the following screenshot as 10 minutes and not 10 seconds:

[juantenesaca]

Hello @EduKobaiashi,

For the moment it does not exist any HasRisk field to select in the tutor side, or any attribute created to store this boolean in the database. No wireframe or anything, for example, when it has to be selected or the place that it should go. So we are not going to do any more for this.

Warning for seizure of a single video does not not work in tutor side, because the preview is showed in a dialog. But in the student side works very well. You can review it again.

[EduKobaiashi]

Hello @juantenesaca , I think the HasRisk field that is specified is this one in the screenshot, when the tutor selects if the content could provoke photosensitive seizures.

Fields from authoring tool (As in this issue specification):

About the single video, I just tested as a student and the checkbox only appears when the user goes to fullscreen, but the video can still be played without being in fullscreen. According to Camilla's specification, the user shouldn't be able to play the video until the checkbox is checked.

[juantenesaca]

@EduKobaiashi ok, thank you very much for this value information. I was miss understanding that part. I will be committing this changes.