Skip to content

Commit

Permalink
docs: V2 videos page updates
Browse files Browse the repository at this point in the history
docs: V2 videos page updates
  • Loading branch information
jristau1984 authored Jan 28, 2024
2 parents 41caee8 + e1fe8e0 commit 685f934
Show file tree
Hide file tree
Showing 8 changed files with 283 additions and 85 deletions.
101 changes: 101 additions & 0 deletions en_us/course_authors/source/accessibility/accessibility_checker.rst
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
.. _Accessibility Checker:

######################
Accessibility Checker
######################

* This feature allows you to check HTML in the editor for various
WCAG and Section 508 accessibility problems.
* The Accessibility Checker focuses on exceeding WCAG "A", "AA",
and "AAA" levels.
* The Accessibility Checker enables content authors to check for
accessibility problems using an in-editor dialog, complete with
a repair feature that corrects the errors on their behalf.

*******************************
Accessibility Checker Use Case
*******************************

When using the Accessibility Checker, begin by looking for the
accessibility icon . As you enter content into the Rich Content
Editor, the Accessibility Checker will automatically start looking
for any potential accessibility issues. Click on the icon to learn
more.

After clicking it, the Accessibility Checker will open in the
sidebar menu with details on each issue found. Navigate between
the items to learn about each issue and apply the fixes (see
images below).

.. image:: ../../../shared/images/AccessibilityCheckerWidget.png
:alt: an image of the accessibility checker icon and menu. The
accessibility checker lists various accessibility issues and
includes an auto repair capability.
:width: 600

****************************
Accessibility Checker Review
****************************

#. **Adjacent links**: Adjacent links with the same URL should be
a single link. This rule verifies link errors where the link text
may include spaces and break the link into multiple links.

#. **Headings**: Headings should not contain more than 120
characters.

#. **Image alt text**: Images should include an alt attribute
describing the image content.

#. **Image alt filename**: Image filenames should not be used as
the alt attribute describing the image content. Currently, files
uploaded directly to Canvas create a redirect that does not
properly verify image filenames.

#. **Image alt length**: Alt attribute text should contain fewer
than 120 characters.

#. **Large text contrast**: Text larger than 18pt (or bold 14pt)
should display a minimum contrast ratio of 3:1.

#. **Lists**: Lists should be formatted as lists.

#. **Sequential headings**: Heading levels should not be skipped
(e.g. H2 to H4). However, the tool does not check if the first
header starts with H2 or whether the headings are sequential
with the rest of the content in the page. Tables do not begin
with H1, which is designated for the page title.

#. **Small text contrast**: Text smaller than 18pt (or bold 14pt)
should display a minimum contrast ratio of 4.5:1.

#. **Table captions**: Tables should include a caption describing
the contents of the table.

#. **Table header scope**: Table headers should specify scope and
the appropriate structure.

#. **Table header**: Tables should include at least one header.

***************************************
Advantage of the Accessibility Checker
***************************************

The Accessibility Checker has the primary advantage of being very
low effort and having intelligible warnings and solutions for
content creators, who are most likely not accessibility experts.
We have a general goal of minimizing instances of asking content
creators to edit the HTML view of course content in order to make
it WCAG-compliant, and this helps with that significantly.

Course content will be more accessible, consistent, and predictable
because the TINYMCE accessibility checker reviews for the following
content:

* Heading levels
* Lists
* Contrast ratios on text
* Image alt text
* Tables
* Captions
* Scopes
3 changes: 2 additions & 1 deletion en_us/course_authors/source/accessibility/index.rst
Original file line number Diff line number Diff line change
Expand Up @@ -8,4 +8,5 @@

edX_accessib_guidelines
supporting_learners_diverse_needs
best_practices_course_content_dev
best_practices_course_content_dev
accessibility_checker
46 changes: 28 additions & 18 deletions en_us/course_authors/source/video/add_video_to_course.rst
Original file line number Diff line number Diff line change
Expand Up @@ -41,22 +41,17 @@ To copy the video ID, follow these steps.

#. Open the course in Studio.

#. On the **Content** menu, select **Video Uploads**.
#. On the **Content** menu, select **Videos**.

#. In the **Previous Uploads** list, locate the video that you want to
include in the course.
#. Locate the video that you want to include in the course.

#. Select the value in the **Video ID** column for the video. The video ID
#. Click on the three dot menu, the select "Copy video ID". The video ID
is assigned when you upload a video.

#. Right-click the value, and then select **Copy**. Be sure to copy the
entire video ID value.

Note that the course team can add a video to their course as soon as the
unique video ID is visible in the **Previous Uploads** list on the **Video
Uploads** page. However, for a video to play successfully, the status for
the file must be “Ready”. Processing takes 24 hours to complete for all
encodings and all video hosting sites.
unique video ID is visible on the **Videos** page. However, for a video to
play successfully, the status for the file must be “Ready”. Processing
takes 24 hours to complete for all encodings and all video hosting sites.

You can also :ref:`download a report<Reporting Video Status>` of all uploaded
videos. The report includes the video ID for every uploaded file.
Expand Down Expand Up @@ -100,25 +95,40 @@ To add a video and its transcript to an edx.org course, follow these steps.
Add New or Previously Uploaded Video to Course on edx.org
=========================================================

If you are in a Unit in your course and you want to add a previously uploaded video, click on the green video tile.
If you are in a Unit in your course and you want to add a previously uploaded
video, click on the green video tile.

.. image:: ../../../shared/images/AddNewComponent.png
:alt: this is an image of several components that you can choose from, including the video component.
:alt: this is an image of several components that you can choose from, including
the video component.

You now see a list of all the videos that you have previously uploaded. You can search for specific videos within the Search bar, filter by date added (newest/oldest), name (ascending/descending), or duration (longest/shortest). You can sort by video status (uploading, processing, ready, failed). To add a video to your course, click on the video you want to add and then click on Select video.
You now see a list of all the videos that you have previously uploaded. You can
search for specific videos within the Search bar, filter by date added
(newest/oldest), name (ascending/descending), or duration (longest/shortest). You
can sort by video status (uploading, processing, ready, failed). To add a video
to your course, click on the video you want to add and then click on Select video.

.. image:: ../../../shared/images/AddVideoToYourCourse.png
:alt: this is the page you are brought to after clicking on the video component and this page offers the ability to select a previously uploaded video so that you can add it to the course as well as a button to upload or embed a new video.
:alt: this is the page you are brought to after clicking on the video component
and this page offers the ability to select a previously uploaded video so that
you can add it to the course as well as a button to upload or embed a new video.

To upload or embed a new video, click on the link on the bottom left side of the Add video to your course page. You can drag and drop a video, click to upload a video, or paste your video ID or URL in the text box.
To upload or embed a new video, click on the link on the bottom left side of the Add
video to your course page. You can drag and drop a video, click to upload a video,
or paste your video ID or URL in the text box.

.. image:: ../../../shared/images/UploadVideoDragAndDrop.png
:alt: you can drag and drop a video here or upload MP4 or MOV files.

In the screenshot above, a Youtube URL was pasted into the text box. If you click the right arrow in the box, you are taken to the Video Settings page (screenshot below). If you click Save, the video is added to your course. If you click on Replace video, you are taken back to the Add video to your course page.
In the screenshot above, a Youtube URL was pasted into the text box. If you click the
right arrow in the box, you are taken to the Video Settings page (screenshot below).
If you click Save, the video is added to your course. If you click on Replace video,
you are taken back to the Add video to your course page.

.. image:: ../../../shared/images/VideoUploadDetails.png
:alt: this screen shows the settings for the video and includes video ID and video URL as well as fields for fallback videos, a thumbnail, transcripts, duration, handout, and license.
:alt: this screen shows the settings for the video and includes video ID and video
URL as well as fields for fallback videos, a thumbnail, transcripts, duration,
handout, and license.

.. _Add a Video to an Edge Course:

Expand Down
Loading

0 comments on commit 685f934

Please sign in to comment.