EdX is dedicated to creating a platform that is not only itself accessible, but also enables course content creators to create accessible content. If you encounter platform issues that you believe might affect your ability to provide accessible course content, please contact us at firstname.lastname@example.org. We welcome any comments and questions.
Use of authoring tools other than those provided by edX might result in inaccessible course content. However, for clarity, use of edX authoring tools does not ensure that your course content will be accessible.
The WCAG 2.0 guidelines are organized around several principles, one of which is that web content must be perceivable. That is, information and user interface components must be presentable to users in ways they can perceive; it cannot be invisible to all of their senses. In almost all cases, this means that the information should be available as text, which can be rendered or transformed into a format that can be perceived.
To produce content that is perceivable by all learners, follow these guidelines.
For any non-text content, provide text alternatives so that the content can be changed into other forms that people need, such as large print, braille, speech, symbols, or simpler language.
For non-text tests or exercises that would be invalid if presented in text, provide text alternatives that at least provide descriptions of the non-text content. Make sure that all images have useful alternative text that screen readers and other assistive technologies can read. For more information, see Use Best Practices for Describing Images.
For time-based media, including pre-recorded audio or video content, provide alternative equivalent information, such as captions, audio description or pre-recorded sign language interpretation. For more information, see Create Accessible Media.
Design your course content so that it can be presented in different ways without losing information or structure. If your content includes specific information, structure, and relationships (such as sequence) that is conveyed through presentation, make sure the same information, structure, and relationships can be programmatically determined or are available in text. HTML is an ideal format in which to publish course content, because it provides semantic elements with implied roles, states, and properties. Users of assistive technologies rely on such semantic elements to effectively and efficiently consume and navigate content. Publish your content in HTML whenever possible.
Make sure your course content does not rely solely on sensory characteristics such as shape, size, visual location, orientation, or sound to be understood by learners.
Make the default presentation as easy to perceive as possible, especially by making it easier for learners to distinguish foreground information from the background, in both visual and audio elements.
For visual elements, techniques include making sure the fonts you use are readable, and that there is sufficient contrast between the foreground and background. Do not use color as the sole means of visually distinguishing an element or conveying critical information. If you must create images that contain text, make sure that the text has a font size of at least 14 points and has good contrast with the background. Images of text cannot be scaled or color corrected as effectively as HTML text. Whenever possible, use the default font and color defined in the edX platform, which was designed to be easy to read. If you choose to override default font colors, make sure that the foreground and background colors have sufficient contrast.
For audio elements, make sure that foreground sounds are sufficiently louder than background sounds.
Make sure your course content is readable and understandable. EdX courses have a global and diverse audience, including learners whose native language is not the language in which you created your course, as well as learners who have a disability that affects reading, such as dyslexia or a visual impairment.
Learners will be better positioned to access concepts in your content if you write in clear, straightforward language and the content is well structured.
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 you use an abbreviation or acronym, provide the full phrase the first time it appears. For example, “World Health Organization (WHO).”
The Center for Plain Language provides detailed resources on writing clearly and concisely, in language appropriate for your content and target audience.
When you use images (including diagrams, maps, charts, or icons) in your course content, you must provide text alternatives that provide information equivalent to the visual content, or that identify the purpose of such non-text content.
The text alternative for an image depends on the image’s context and purpose, and might not be a simple description of the image’s visual characteristics. In general, for every image, edX recommends that you provide a text alternative that provides the equivalent information that a sighted learner would obtain from viewing the image. If the image contains words that are important for understanding the content, include the words in the text alternative. If the image itself is being used as a link, the text alternative should describe the destination or action that will be performed when the link is activated.
The primary mechanism for providing a text alternative for an image in HTML is
alt attribute. The text value of this attribute is what screen reader
users hear when they encounter the image in your content.
All images must include an
alt attribute. There are some
cases, noted below, when an empty
alt attribute (
desirable. However, the
alt attribute must never be omitted.
Create useful and meaningful text alternatives for images in your course by following these guidelines for particular situations.
If your image contains text, the
alt attribute would typically consist of
exactly the same text as is contained in the image. However, there are a
couple of conditions when having an empty
alt attribute (
the preferred solution.
If the text contained in the image is also available in nearby HTML, or
otherwise accessible text, including it in the
alt attribute would be
redundant. In this case, setting an empty
alt attribute (
acceptable. Doing so effectively “hides” the image from screen reader users.
All images must include an
alt attribute so do not omit
alt attribute entirely. If the
alt attribute is omitted
entirely, screen readers will read the value of the
src attribute (the
path to the image on a web server) as a fallback. This is rarely helpful to
the user and often results in a poor user experience.
If the text contained in the image is for decorative purposes only and adds no
value to the content of the page, an empty
alt attribute is also
If the image is a simple graphic or photograph that provides additional
context to the surrounding content, the
alt attribute should briefly
describe the image in a way that conveys that context.
Consider the following examples of meaningful alt attributes for a photo of the famous stone bridge, Ponte Vecchio in Florence, Italy.
altattribute would be “Photo of Ponte Vecchio, a famous bridge and shopping center in Florence, Italy.”
altattribute would be more specific: “Photo of Ponte Vecchio showing its three stone arches which span the Arno River.”
altattribute would include the details conveyed visually, such as dimensions and materials used: “The Ponte Vecchio is a stone bridge with three arches and a span-to-rise ratio of 5 to 1.”
altattribute would provide directions as text.
If the image is a graph or represents a complex piece of information, include
the information contained in the image as accessible text adjacent to the
image, or provide a link to the information. The
alt attribute should
convey a summary of what the complex image conveys visually. For example, a
line graph that represents the price of a stock over time might be “The price
of the stock rises from $45 in January of 2015 to over $76 in June of 2015 with
a significant drop of 30% during the month of March.”
Consider using a caption to display long descriptions so that the information
is available to all learners. 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="Illustration of Ponte Vecchio"> <p><a href="description.html">Description of Ponte Vecchio Illustration</a></p>
If a suitable text alternative is unknown at the time of publication (for
example, a webcam image that updates every 10 minutes) provide an
attribute that includes as much useful information as possible. For example,
“Traffic on Interstate 90 at 5:45 PM June 26, 2015.”
Images that do not provide information, including purely decorative images, do not need text descriptions. For example, an icon that is followed by link text that reads “Course Syllabus (EPUB)” does not need alternative text.
For non-informative images that should be skipped by screen reading software,
alt attribute but leave it with an empty value (also known as a
<img src="image.jpg" alt="">
While it is appropriate to have an empty
alt attribute, it is
never acceptable to omit the
alt attribute entirely. If image elements do
not include an
alt attribute at all, a screen reader will read the path
to the image, or, in the case of a linked image, announce the linked URL.
This is rarely helpful to the user and often results in a poor user
Graphics are helpful for communicating concepts and information, but they can present challenges for people with visual impairments. For example, a chart that requires color perception or a diagram with tiny labels and annotations will likely be difficult to comprehend for learners with color blindness or low vision. All images present a barrier to learners who are blind.
EdX recommends that you follow these best practices for making information graphics accessible to visually impaired learners.
The source teaching materials for your course might exist in a variety of formats. For example, your syllabus might be in MS Word, your presentation slides in MS PowerPoint, and your textbooks in publisher-supplied PDF. It is important to consider how accessible these supplemental materials are before making them available through your course.
Carefully consider the document format you choose for publishing your course materials, because some formats support accessibility better than others. Whenever possible, create course materials in HTML format, using the tools available to you in edX Studio. When you make digital textbooks (ebooks) available within your course, ask digital book publishers for books in either DAISY or EPUB 3 format, or both. Both of these digital book formats include unparalleled support for accessibility. However, simply supporting accessibility does not always mean a document will be accessible. When you source ebooks from third parties, it helps to ask the right questions about accessibility.
Natively accessible formats like those mentioned above might not always be available options. Other popular document formats included in edX courses include PDF, Microsoft Word, Excel, or PowerPoint. Many of the same accessibility techniques and principles that apply to authoring web content apply to these document formats as well.
The information that follows provides some practical guidance to publishing accessible course materials in popular formats.
Not all ebooks are available in DAISY or EPUB 3 format. Portable Document Format (PDF) is another common format for course materials, including textbooks supplied by publishers. However, converting materials to PDF documents can create accessibility barriers, particularly for learners with visual impairments. Such learners rely on the semantic document structure inherently available in HTML, DAISY, or EPUB 3 to understand and effectively navigate PDF documents. For more information, see HTML Markup Resources).
Accessibility issues are very common in PDF files that were scanned from printed sources or exported from a non-PDF document format. Scanned documents are simply images of text. To make scanned documents accessible, you must perform Optical Character Recognition (OCR) on these documents, and proofread the resulting text for accuracy before embedding it within the PDF file. You must also add semantic structure and other metadata (headings, links, alternative content for images, and so on) to the embedded text.
When you export documents to PDF from other formats, it is important to ensure that the source document contains all the required semantic structure and metadata before exporting. Unfortunately, some applications do not include this information when exporting and require the author to add or “tag” the document manually using PDF editing software. You should carefully consider whether exporting to PDF is necessary at all.
EdX highly recommends using the tools available in Adobe Acrobat Pro (for example, “Accessibility Checker”) to evaluate your PDF files for accessibility. Adobe Acrobat Pro also includes tools (for example, “Make Accessible”) for fixing most common accessibility issues.
Many of the same accessibility techniques and principles that apply to authoring web content also apply to creating Word documents.
In addition, follow these guidelines when you format Word documents.
Many of the same accessibility techniques and principles that apply to authoring data tables in HTML also apply to creating Excel spreadsheets.
Many of the same accessibility techniques and principles that apply to authoring web content also apply to creating PowerPoint presentations.
To make your content accessible and comprehensible to learners who use screen reading software, start in Outline view and include all of your content as text. After completing the outline, add design elements and images, and use the picture formatting options in MS PowerPoint to include detailed text descriptions of images that convey useful information to learners who cannot view the images. Use the Home > Drawing > Arrange > Selection Pane option to view the reading order of objects on each slide. If the reading order is not logical, change the order of the objects.
Math in online courses can be challenging to deliver in a way that is accessible to people with vision impairments. Non-scalable images of mathematical content cannot be sufficiently enlarged or navigated by low-vision users and are not accessible to blind users at all.
EdX uses MathJax to render math content in a format that is clear, readable, and accessible to people who use screen readers. MathJax works together with math notation such as LaTeX and MathML to render mathematical equations as text instead of images. EdX recommends that you use MathJax to author your math content. MathJax renders math in a variety of formats on the client side, offering the end user the ability to consume math content in their preferred format. EdX Studio supports authoring math directly in LaTeX using the LaTeX Source Compiler to transform LaTeX into MathJax.
Using different content types in your courses can significantly add to the learning experience for your learners. This section covers how to design several custom content types so that your course content is accessible to all learners.
Simulations, including animated or gamified content, can enhance the learning experience. In particular, they benefit learners who might have difficulty acquiring knowledge from reading and processing textual content alone. However, simulations can also present some groups of learners with difficulties. To minimize barriers to learning, consider the intended learning outcome of the simulation. Is your goal to reinforce understanding that can also come from textual content or a video lecture, or is it to convey new knowledge that other course resources cannot cover? Providing alternative resources will help mitigate the impact of any barriers.
Although you can design simulations to avoid many accessibility barriers, some barriers, particularly in simulations supplied by third parties, might be difficult or impossible to address for technical or pedagogic reasons. Understanding the nature of these barriers can help you provide workarounds for learners who are affected. Keep in mind that attempted workarounds for simulations supplied by third parties might require the supplier’s consent if copyrighted material is involved. If you consider third party solutions, we encourage you to evaluate them for accessibility. The easiest way to do this is to contact the vendor and ask them about the accessibility of their product.
Consider the following questions when creating simulations, keeping in mind that as the course creator, you enjoy considerable freedom in selecting course objectives and outcomes. Additionally, if the visual components of a simulation are so central to your course design, providing alternative text description and other accommodations might not be practical or feasible.
Does the simulation require vision to understand? If so, provide text describing the concepts that the simulation conveys.
Is a computer mouse necessary to operate the simulation? If so, provide text describing the concepts that the simulation conveys.
Does the simulation include flashing or flickering content that could trigger seizures?
If so, and if this content is critical to the nature of the simulation, take these steps.
For each activity or assessment that you design, consider any difficulties that learners with disabilities might have in completing it, and consider using multiple assessment options. Focus on activities that can be completed and submitted by all learners.
Some learners take longer to read information and input responses, such as learners with visual or mobility impairments and learners who need time to comprehend the information. If an exercise has a time limit, consider whether the allowed time is enough for all learners to respond. Advance planning might help to reduce the number of learners requesting time extensions.
Some online exercise question types, such as the following examples, might be difficult for learners who have vision or mobility impairments.
If you include links to third-party content in your course, be mindful of the accessibility of such resources. EdX recommends that you evaluate third-party content prior to sharing it with learners.
You can use the eReader tool or Adding Files to a Course to incorporate third-party textbooks and other publications in PDF format into your course. You can also incorporate such materials into your course in HTML format. See Creating Accessible PDF Documents for guidance on working with third-party supplied PDFs, and Use Best Practices for HTML Markup for guidance on creating accessible HTML.
Media-based course materials help to convey concepts and can bring course information to life. We require all videos in edX courses to include timed text captions in SubRip (SRT) format. The edX media player displays caption files in an interactive sidebar that benefits a variety of learners, including learners who are hard of hearing or whose native language differs from the primary language of the media. This built-in universal design mechanism enhances your course’s accessibility. When you create your course, you need to factor in time and resources for creating timed text captions.
When you create video segments, consider how you will convey information to learners who cannot see what is happening in a video. Actions that are only visible on screen without any audible equivalent are not accessible to learners who have visual impairments.
For many topics, you can fully cover concepts in the spoken presentation. If it is practical to do so, you should audibly describe visual events as they happen in the video. For example, if you are illustrating dropping a coin and a feather together from a height, you should consider narrating your actions as you perform them. Ask yourself if your video would make sense if the learner were only listening to the audio content, for example while they were driving a car.
For both audio and video transcripts, consider including a text file that learners can download and review using tools such as word processing, screen reader, or literacy software. All learners can use transcripts of media-based learning materials for study and review.
HTML is the best format for creating accessible content. It is well supported and adaptable across browsers and devices. Also, the information in HTML markup helps assistive technologies, such as screen reader software, to provide information and functionality to people with vision impairments.
Most of the problem type templates in edX Studio conform to our recommended best practices in terms of good HTML markup. You can manually add appropriate HTML tagging even if it does not exist in the component template. Depending on the type of component you are adding to your course in edX Studio, the raw HTML data is 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 tags to describe the meaning of content, rather than changing its
appearance. For example, you should tag a section title with the appropriate
heading level (such as
<h3>) rather than making the text appear like
a heading by applying visual elements such as bold text and a larger font
size. Format list items into a list rather than using images of bullets or
indents. Using HTML to describe your content’s meaning is valuable for
learners who use screen readers, which, for example, can read through all
headings of a specific level or announce the number of items in a list.
Use HTML heading levels in sequential order to represent the structure of a document. Well-structured headings help learners and screen reader users to navigate a page and efficiently find what they are looking for.
In your HTML and problem components, be sure to apply only heading levels 3 through 6 to your content. Because the components that you add are part of a complete page, and heading levels 1 and 2 are already in use by other elements on the page, any text with a heading 1 or 2 style within an HTML or problem component can interfere with the functionality of tools such as screen readers.
Use HTML list elements to group related items and make content easier to skim and read. HTML offers three kinds of lists.
Use table elements to format information that works best in a grid format,
and include descriptive row and column headings. Tag row and column headers
<th> element so screen readers can effectively describe the
content in the table.
Universal Design for Learning focuses on delivering courses in a format so that as many of your learners as possible can successfully interact with the learning resources and activities you provide them, without compromising on pedagogic rigor and quality.
The principles of Universal Design for Learning can be summarized by the following points.
Course teams can apply these principles in course design by following several guidelines.