@@ -22,8 +22,7 @@ See the following sections for more information:
* :ref:`Supporting Learners with Diverse Needs`
* :ref:`Accessibility Best Practices`
*
*
* :ref:`Conclusion`
.. _Supporting Learners with Diverse Needs:
...
...
@@ -74,6 +73,9 @@ Accessibility Best Practices
* :ref:`Best Practices for Readability`
* :ref:`Best Practices for Accessible PDFs`
* :ref:`Best Practices for Custom Content Types`
* :ref:`Best Practices for Describing Images`
* :ref:`Best Practices for Accessible Media`
* :ref:`Best Practices for HTML Markup`
.. _Best Practices for Universal Design for Learning:
...
...
@@ -125,8 +127,8 @@ EdX courses have a global and diverse audience.
Learners will be better positioned to access the concepts of your content if it is written in clear, straightforward language and the content is well structured.
Use appropriate terminology to your subject area, but keep it as clear and unambiguous as possible to help learners who:
* are not native English speakers; or
* have a disability that affects reading, such as dyslexia or a visual impairment.
* Are not native English speakers; or
* Have a disability that affects reading, such as dyslexia or a visual impairment.
To produce content that is more readable by all students:
...
...
@@ -137,7 +139,7 @@ To produce content that is more readable by all students:
* When creating written learning resources, break text into sections by using HTML elements, such as headings, paragraphs, and lists.
Long blocks of unbroken text are a barrier to most readers. Segmented content is more inviting and is easier to navigate and search.
See “Best Practices for HTML Markup,” below, for guidance on creating accessible HTML.
See :ref:`Best Practices for HTML Markup` for guidance on creating accessible HTML.
* Avoid jargon. If unfamiliar words or phrases are relevant to the subject, explain them when they are first used, and include a glossary with your course materials.
When using an abbreviation or acronym, write out the phrase the first time it appears: for example, “National Aeronautics and Space Administration (NASA).”
...
...
@@ -176,7 +178,7 @@ This early step helps minimize issues that may be difficult or impossible to add
Don’t add unnecessary indents, rules, columns, blank lines, and typographic variation. The simpler the formatting, the easier it will be to make an accessible PDF document.
* Use styles for formatting your text, such as Normal, Heading 1, and Heading 2, rather than manually formatting text using bold and indents.
Add alternative text to images (see “Best Practices for Describing Images,” below) using Word’s picture formatting options.
Add alternative text to images (see “:ref:`Best Practices for Describing Images`) using Word’s picture formatting options.
**Preparing PowerPoint documents**
...
...
@@ -194,7 +196,7 @@ This early step helps minimize issues that may be difficult or impossible to add
* Use a unique and informative title for each worksheet tab.
* Include text alternatives for images (see “Best Practices for Describing Images,” below) using Excel’s picture formatting options.
* Include text alternatives for images (see :ref:`Best Practices for Describing Images`) using Excel’s picture formatting options.
* Identify column headers using Excel’s table formatting options (Table > Table Options > Header Row), and include in each header cell informative text describing the data in that column.
...
...
@@ -231,9 +233,9 @@ Updating PDFs for accessibility
You may need to update your existing teaching materials in PDF format to improve accessibility. This might include PDFs that were:
* created by scanning a hard-copy document;
* generated from a document that was not created with accessibility in mind; or
* generated by a process that does not preserve source accessibility information.
* Created by scanning a hard-copy document;
* Generated from a document that was not created with accessibility in mind; or
* Generated by a process that does not preserve source accessibility information.
In such cases, you need special software, such as Adobe Acrobat Professional, to enhance the accessibility of the PDF.
PDFs that are created from scanned documents require a preliminary Optical Character Recognition (OCR) step to generate a text version of the document.
...
...
@@ -283,7 +285,7 @@ The following are best practices for making information graphics accessible to v
* Avoid using only color to distinguish important features of the image. For example, on a line graph, use a different symbol as well as color to distinguish the data elements.
* Whenever possible, use an image format, such as SVG, that supports scaling. Consider providing a high-resolution version of complex graphics that have small but essential details.
* Provide a text alternative that describes the information in the graphic. For charts and graphs, a text alternative could be a table displaying the same data.
See “Best Practices for Describing Images,” below, for details about providing text alternatives for images.
See :ref:`Best Practices for Describing Images` for details about providing text alternatives for images.
++++++++++++++++++++++++++++++++++++++++++++
Math content
...
...
@@ -381,3 +383,174 @@ for guidance on creating accessible HTML.
* MathJax provides guidance on creating accessible pages with the display engine:
Pictures, diagrams, maps, charts, and icons can present information very effectively.
However, some visually impaired students, including people who use screen reader software, need text alternatives to understand the information conveyed by these images.
The text alternative for an image depends on the image’s context and purpose, and may not be a straight description of the image’s visual characteristics.
Use the following guidelines when you include images in your course:
* Provide a short text description that conveys the purpose of the image, unless the image conveys a concept or is the only source for the information it presents,
in which case a long text description is appropriate. Note that you don’t need to provide a long description if the information appears elsewhere on the page.
For example, you don’t need to describe a chart if the same data appears as text in a data table.
* For a representative image, such as a photograph of Ponte Vecchio, a short
description could be “Photo of Ponte Vecchio.” If the photograph’s purpose is to provide detailed information about the location, the long description should be more specific: “Photo of Ponte Vecchio showing its three stone arches and the Arno River.”
* For a chart, diagram, or illustration, the short description might be “Diagram of Ponte Vecchio.” The long description should include the details conveyed visually, such as dimensions and materials used.
* For a map, a short description might be “Map showing location of Ponte Vecchio.” If the map is intended to provide directions to the bridge, the long description should provide text directions.
* For icons, the short description should be the equivalent to the information that the icon provides. For example, for a Course Syllabus link containing a PDF icon, the text equivalent for the icon would be “PDF,” which would be read as “Course Syllabus PDF.”
* For an image that serves primarily as a link to another web page, the short description should describe the link’s destination, not the image. For example, an image of a question mark that serves as a link to a Help page should be described as “help,” not “question mark.”
* Images that don’t provide information don’t need text descriptions. For example, a PDF icon that is followed by link text reading “Course Syllabus (PDF)” does not need a description. Another example is a banner graphic whose function is purely aesthetic.
* Include the short description in the alt attribute of the HTML image element, as follows (see “Getting Started with Studio” or the “Add an Image to a Unit” in the edX101 training course for more information about adding images):
::
<img src="image.jpg" alt="Photo of Ponte Vecchio">
* Include an empty alt attribute for non-informative images. When image elements do not include an alt attribute,
screen reader software may skip the image, announce the image filename, or, in the case of a linked image,
announce the link URL. An empty alt attribute tells screen reader software to skip the image.
::

<img src="image.jpg" alt="">
* Consider using a caption to display long descriptions so that the information is available to all users.
In the following example, the image element includes the short description as the alt attribute and the paragraph element includes the long description.
::

<img src="image.jpg" alt="Photo of Ponte Vecchio"><p>Photo of Ponte Vecchio showing its three stone arches and the Arno river</p>


* Alternatively, provide long descriptions by creating an additional unit or downloadable file that contains the descriptive text and
providing a link to the unit or file below the image.
::
<img src="image.jpg" alt="Diagram of Ponte Vecchio"> <p><a href="description.html">Description of Ponte Vecchio Diagram</a></p>
**Resources**
* A decision tree for choosing appropriate alternative text for images (Dey Alexander):
* General guidance on appropriate use of alternative text for images (WebAim):
http://webaim.org/techniques/alttext/
* HTML5: A more detailed description of techniques for providing useful alternative text for images:
http://dev.w3.org/html5/alt-techniques/
* The DIAGRAM Center, established by the US Department of Education (Office of Special Education Programs), provides guidance on ways to make it easier, faster, and more cost effective to create and use accessible images:
Media-based course materials help convey concepts and bring course information to life.
We require all edX courses to use videos with interactive, screen-reader- accessible transcripts.
This built-in universal design mechanism helps enhance your course’s accessibility.
When you create your course, you need to factor in time and resources for creating these transcripts.
++++++++++++++++++++++++++++++++++++++++++++
Audio transcription
++++++++++++++++++++++++++++++++++++++++++++
Audio transcripts are essential for presenting audible content to students who can’t hear and are helpful to students who are not native English speakers.
Synchronized transcripts allow students who can’t hear to follow along with the video and navigate to a specific section of the video by clicking the transcript text.
Additionally, all students can use transcripts of media-based learning materials for study and review.
A transcript starts with a text version of the video’s spoken content.
If you created your video using a script, you have a great start on creating the transcript.
Just review the recorded video and update the script as needed.
Otherwise, you’ll need to transcribe the video yourself or engage someone to do it.
There are many companies that will create timed video transcripts (i.e., transcripts that synchronize the text with the video using time codes) for a fee.
The edX platform supports the use of transcripts in .srt format.
When you integrate a video file into the platform, you should also upload the .srt file of the timed transcript for such video.
Consult the edX Studio support guides for details on how to add timed transcripts.
++++++++++++++++++++++++++++++++++++++++++++
Video description
++++++++++++++++++++++++++++++++++++++++++++
When creating video segments, consider how to convey information to learners who can’t see.
For many topics, you can fully cover concepts in the spoken presentation.
If practical, you might also describe visual information, for example, by speaking as you are writing on a tablet.
++++++++++++++++++++++++++++++++++++++++++++
Downloadable transcripts
++++++++++++++++++++++++++++++++++++++++++++
For both audio and video transcripts, consider including a text file that students can download and review using tools such as word processing, screen reader, or literacy software.
The downloadable transcript should be text only, without time codes.
**Resources**
• Accessible Digital Media Guidelines provides detailed advice on creating online video and audio with accessibility in mind:
HTML is the best format for creating accessible content. It is well supported and adaptable across browsers and devices,
the information in the markup helps assistive technologies, such as screen reader software, provide information and functionality to people with vision impairments.
To make it easier for our course teams to create content with good HTML markup, we are working to make all templates in edX Studio conform to the best practices set forth below.
In the interim, we recommend that you manually add the appropriate HTML tagging.
Depending on the type of component you are adding to your course in edX Studio, the raw HTML data will be available either automatically or by selecting the “Advanced Editor” or “HTML” views.
Keep the following guidelines in mind when you create HTML content:
* Use HTML to describe your content’s *meaning* rather than its a*ppearance*. A phrase marked as a level 1 heading (<h1>) clearly indicates the topic of the page,
while a phrase marked as bold text (<bold> or <strong>) may be a heading or may just be text that the instructor wants to emphasize.
A group of items marked up as a list are related in the code, without relying on visual cues such as bullets and indents.
Coding meaning into content is particularly useful for students using screen readers, which, for example, can read through headings or announce the number of items in a list.
* Use HTML heading levels in sequential order to represent the structure of the document. Well-structured headings help students navigate a page and find what they are looking for.
* Use HTML list elements to group related items and make content easier to skim and read. HTML offers three kinds of lists:
#. Unordered lists, where each item is marked with a bullet.
#. Ordered lists, where each item is listed with a number.
#. Definition lists, where each item is represented using term and description pairs (like a dictionary).
* Use table elements to mark up data sets—that is, information that works best in a grid format—with descriptive rows and columns.
Mark up row and column headers using the <th> element so screen readers can effectively describe the content in the table.
**Resources**
* Creating Semantic Structure provides guidance on reflecting the semantic structure of a web page in the underlying markup (WebAIM):
http://webaim.org/techniques/semanticstructure/
* Creating Accessible Tables provides specific guidance on creating data tables with the appropriate semantic structure so that screen readers can correctly present the information (WebAIM):
At edX, the heart of our mission is to provide global access to higher-level learning with only a computer and the Internet.
We have designed a platform that enables course creators to reach thousands of learners, some of whom will lack the typical backgrounds and resources of resident students taking traditional courses on college campuses.
We hope that these guidelines prove useful to you as you work with your institution’s disability support services and information technology resources to comply with applicable accessibility laws.
As we are all on this learning venture together, we encourage you to share your thoughts with us at accessibility@edx.org.
