Course - Audio

[ecureuill]

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

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

---

Index

1. Audio alternatives
2. Audio provided by teachers
   1. General
   2. How to render

---

Audio alternatives

In order to audio content be accessible it's necessary:

• [x] Short description #66
• [x] Transcription of the audio #61

General

1. • [x] Separating information and structure from presentation to enable different presentations (meet #76)
2. • [x] meet #135
3. • [x] meet #97 1. - [] contrast ratio for boundaries ≥ 3:1 (meets #98 )
4. • [x] font color with at least minimum contrast (#92)
5. • [x] Text can be resized to 200% ( meets #93)
6. 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.
7. on focus and hoover
   1. • [x] provide a visible indicator (meet #116 minimum)
        1. • [x] meet #90 (multiple visual cues) Suggestion: combine colors (e.g. font-color, border-color) and shapes (e.g font-weight , border-line) 1. - [ ] meet enhanced scenario of #116 by setting focus indicator minimum area, contrast and thickness

Rendering single video

Fields from Authoring Tool

• title (text)
• shortDescription (text)
• Transcription (text)

1. • [ ] aria-label="shortDescription or aria-label="title" (if short description is not provided)
2. • [ ] aria-describedby=Transcription`
3. • [x] if no transcription is provided, do not render the transcription area

<div id={"audio_box_" + index}>
    <h3>{audio.title}</h3>
    <p id={"audio_" + index + "_shortDescr"}>{audio.shortDescr}</p>
    <audio
        id={"audio_" + index}
        controls
        aria-describedby={"audio_" + index + "_transcriptText"}
        aria-labelledby={"audio_" + index + "_shortDescr"}
        src={audio.src}
        type="audio/mpeg"
    >
        <p>
            O seu navegador não suporta o elemento <code>audio</code>
        </p>
    </audio>
    <details>
        <summary
            aria-controls={"audio_" + index + "_transcriptBox"}
            aria-expanded={expanded}
            id={"audio_" + index + "_transcriptBox_showhide"}
            onClick={() => setExpanded(!expanded)}
        >
            {expanded? "Hide" : "Show"}  Transcript
        </summary>
        <div
            id={"audio_" + index + "_transcriptBox"}
            aria-expanded={expanded}
        />
        <pre
            id={"audio_" + index + "_transcriptText"}
            className={classes.transcriptionText}
        >
            {audio.longDescr}
        </pre>
    </details>
</div>

Wire Frame

[github-actions[bot]]

This Feature is ready to be implemented.

[github-actions[bot]]

This Feature is ready to be implemented.

[juantenesaca]

@ecureuill What is the situation of the transcription of the audio. I think that @CAndresH told me that it will not go.

[ecureuill]

@ecureuill What is the situation of the transcription of the audio. I think that @CAndresH told me that it will not go.

@juantenesaca I'm not sure if I understood what you mean.

When you said that @CAndresH told you that "it will not go" you mean that the feature is not going to be coded?

From my side, the specification is ready to be coded.

[juantenesaca]

@ecureuill Just the transcription. Because before we had it, but now I think @CAndresH removed it

[ecureuill]

@juantenesaca it's expected to have the transcription. I'm not aware of why it was removed.

[juantenesaca]

@ecureuill Andres (@CAndresH ) told me you said to him that it has to be removed from accessibility window on the tutor side. So if the tutor is not allowed to add a transcription, the student in consequence will not have it.

[CAndresH]

@ecureuill @juantenesaca ,Yes, Camila, do you remember that in the audio part you told me that only text alternatives should go, not audio transcription? on the teacher's side

[ecureuill]

Hi @CAndresH I remember that! I found the whatsapp message I sent you.

The problem was this tab "audio transcription", that should not exist.

But the "transcription" concept is covered by the "text alternative" long field

[juantenesaca]

@ecureuill So we have just to rename "Audio transcription" instead of "Long description".

[ecureuill]

In teacher module: remove the "audio transcription" tab, because the transcription information goes in "text alternative" tab

In student module: render as in this specification

[juantenesaca]

@ecureuill It is not completed, but please review then I could fix the specs missing.

[github-actions[bot]]

Functional Test failed! Please, review your solution.

---

Please, move to CODED only when this feature is fully implemented

• bugs reported in comments are fixed
• requirements in OP are coded If you want to request a test of some partial solution, add a comment here with test team @

---

@juantenesaca your solution is not correctly using the wai-aria attributes, please review your code against the sample code in OP.

• [ ] The text "show/hide" is inaccessible for screen-reader uses or user with cognitive limitation, check my sample code suggestion.

[github-actions[bot]]

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

[github-actions[bot]]

Functional Test failed! Please, review your solution.

---

Tasks in requirement are not all done

---

• [x] It is impossible to change the time slider by keyboard navigation

---

• [x] There is no hover indicator

---

• [x] Screen reader does not read the audio title, the short description or the transcription

[github-actions[bot]]

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

[github-actions[bot]]

Functional Test failed! Please, review your solution.

---

Audio files are still inaccessible for screen reader users with keyboard navigation

The transcription and audio title are never read, and the same happens for the audio buttons (play, volume, download)