Differences

This shows you the differences between two versions of the page.

--- accessibility2026 [2026/02/09 14:51] – removed - external edit (Unknown date) 127.0.0.1
+++ accessibility2026 [2026/02/09 14:55] (current) – [Accessibility features in Xerte] jsmith
@@ Line 1: / Line 1: @@
+====== Accessibility ======
+As XOT and Bootstrap are developed new features and improvements are checked for compliance with industry standards for accessibility. While authoring, you will find that the various page types in Xerte have options for ensuring that your content is accessible to learners.  There are also inbuilt controls allowing learners to make accessibility decisions from display options that meet their needs. If you follow sound basic practices and make use of Xerte's default labeling and dialog boxes, such as the ones shown below, you can easily generate content that is both media-rich and accessible to users employing screen readers or other assistive technologies.
+===== Mobile devices and accessibility =====
+XOT and Bootstrap have been designed to display effectively and offer functionality on a range of modern mobile devices.  However, you will need to bear in mind that some interactivity (such as drag and drop activities) may not perform effectively on smaller screens such as smartphones. This is simply because of the limitations on the amount of content that can displayed and interacted with on a small screen.  While authoring, you should always check how projects work on a range of screens, and be prepared to make changes, either to organisation of content or to your choice of interactivity pages.
+===== Xerte Accessibility Statement =====
+The [[http://bit.ly/xerteaccessibilitystatement|Xerte Accessibility Statement]] is the most detailed and up-to-date resource on accessibility in Xerte.  While much of this is aimed at specialists, who might for example want to check Xerte's compliance with accessibility legislation, there is also a lot of practical guidance for authors.
+The statement includes a link and instructions on how to import a version into your own installation, where you are free to adapt it to meet your needs.  Please bear in mind that it it was written to meet the needs of **UK universities**, and may need to editing to match the context in which you are working.
+Many of the links on this page will take you to different pages and sections in the statement.
+===== Accessibility features in Xerte =====
+Some accessibility features are aimed at the **learner**, and are built in to the design of Xerte.  However, most involve the **author** making choices and inputting information (e.g. descriptions of images).
+++++ Learner colour and theme controls |
+These are in-built and allow a learner to change the colours and theme in the learning object they are working with, to make text as easy to read as possible.  They include dark mode, light mode, high-contrast and black-on-yellow options.  The [[https://xot.xerte.org.uk/play.php?template_id=151#colour|Accessibility guide for learners]] provides more information.
+++++
+++++ Accessibility Checker in the Rich Text Editor|
+You can use the Accessibility Checker to inspect the accessibility level of content created in the Rich Text Editor and immediately solve any issues that are found.
+Select the Accessibility Checker icon in the toolbar to run the process on your page.
+{{a11y-checker1.png|Accessibility Checker Icon}}
+The Accessibility Checker presents issues with each item in the editor one at a time. For many issues, the Accessibility Checker gives you a Quick fix option. If a Quick fix is not available, the checker will describe what needs to be done to fix the issue.
+{{a11y-checker2.png|Accessibility Checker Quick Fix}}
+++++
+++++ Alt Text for Images|
+Anywhere that the Toolbar appears, you have the option to include images in your pages. When adding images, it is important to include short, meaningful, descriptive text in the%% %%**Alternative Text**%% %%box of the **Image Properties** dialog. This helps users with screen readers better understand the content on the page.
+{{ckeditor-image-alt-text.png|Image properties dialog example}}
+:!:  New in 3.13.  It has always been possible to add Alt Text or captions to images inserted through the Toolbar, but it is now possible to do this when you add an image through an editor field, see example below; {{ :image_upload_3.13.png?400 }}
+++++
+++++ Audio Transcripts|
+%%Xerte allows content authors to add transcripts to page narration audio, as well as audio files added to pages. Depending on the page type, the Transcript field will be found either as a new optional property or as part of the property group where audio is added. Adding a transcript to audio portions of your learning objects will make them more accessible for learners with hearing impairments. %%
+Several page types have the transcript option available in the **Narration Property** as shown below. The text area below the audio file selection field allows you to enter or copy and paste a transcript of the narration content.
+{{narration-property.png|Narration Property example}}
+In addition to the **Narration Property** above, the **Audio Slideshow** page type also has a separate **Transcript Property**. When added to the page, the **Transcript Property **provides a text area to enter or copy and paste a transcript for the audio slideshow content.
+{{audio-slideshow-transcript.png|Example Audio Slideshow Transcript Property}}
+++++
+++++ Gap Fill > Audio Feedback Property|
+The **Gap Fill **page type also has an **Audio Feedback **optional property, in addition to the **Narration Property **already mentioned, and you can add a transcript here.
+{{gap-fill-audio-feedback.png|Gap fill Audio Feedback and Narration properties}}
+++++
+++++ Colour Contrast|
+Another important element to keep in mind when authoring content is colour contrast. %%Learners may have visual impediments that will require adequate contrast in the learning objects you are producing. The best way to help these learners is to make sure that the contrast between the background and foreground has a ratio of 4.5:1 or higher. %%
+%%The default themes in Xerte have been checked to ensure they provide sufficient contrast. However, if you are using custom stylesheets or formatting specific pages manually, be sure to check for adequate contrast. You can use an online tool, such as %%__[[https://webaim.org/resources/contrastchecker/|WebAIM's Color Contrast Checker]],__%% to check how the text colour you've selected contrasts with the background colour behind your text.%%
+For additional guidance on the use of colour, please see the [[usingcolour|Using Colour]] page in this wiki.
+++++
+{{tag>pagetype all_pages}}