Body
Ir a la versión en Español
Relevant to: faculty
This article contains information considered accurate at the time of publication. Technology updates, changes in University security practices, and policy or procedure changes may affect the information in this article. Updates are scheduled periodically and will address any necessary changes.
What is this guide?
This guide outlines core accessibility practices for creating Brightspace content aligned with WCAG standards and SUNY Empire design expectations.
Example of editing toolbar in Brightspace
Accessibility practices in Brightspace
Accessibility Checker
- Edit the content.
- Select the Accessibility Checker icon.
- Review identified issues and apply fixes.
- Select Save.
Why: Catches common issues before content is published.
Bold
- Open or edit a content item.
- Highlight the text.
- Select B from the editor toolbar.
- Use only for short phrases or key terms.
Why: Provides emphasis without replacing semantic structure or overwhelming readers or screen reader users.
Captions, Audio Description, and Transcripts
Ensure original videos have accurate captioning and that visual information is spoken aloud or described.
Audio-only content should be accompanied by an accessible written transcript.
See the following Knowledge Base Articles for additional information:
- Adding a YouTube Video to Learnscape
- Audio Description Guidelines
- Editing and Ordering Captions
Why: Captions ensure video content is perceivable for deaf and hard-of-hearing users and support comprehension for all learners. Transcripts offer access to deaf and hard-of-hearing users as well as flexible ways to engage with content. Audio descriptions provide narration of important visual elements that are not otherwise conveyed through dialogue or audio.
Color Contrast Check
- Edit a content item.
- Select the Accessibility Checker icon.
- Review color contrast alerts.
- Adjust the text or background colors as recommended.
If you choose to modify text colors within your Brightspace content, you can ensure that your colors meet WCAG color contrast ratios by using Brightspace's built-in color picker.
- Select the color picker button (the "A" with a paintbrush) on the editor toolbar.
- Choose the color you would like to use for your text.
- Check the contrast ratio for both small and large text.
- If a checkmark appears next to both, your color selections have sufficiently high contrast.
- If an "X" appears next to either one, choose a different color.
If you install the WebAIM: Contrast Checker Bookmarklet you can run color checks quickly and easily. Follow the instructions on the page for quick installation and activation.
Why: Adequate contrast ensures readability for users with low vision or color vision deficiency. Important: Do not rely on color alone to convey meaning, such as using red to indicate important information.
Equation Editor
- Edit the content.
- Insert Equation.
- Build the equation using the editor tools.
- Select Save.
Why: Equations created with the editor are scalable and can be read by screen readers. Avoid inserting equations as images when possible.
Headings and Styles
- Edit the content.
- Place your cursor in the text.
- Open the Paragraph dropdown.
- Start with Heading 2.
Why: Headings provide semantic structure for screen readers and improve navigability for all users. The Brightspace web page title serves as the H1 so added content begins at the H2 level. Do not skip heading levels (e.g., H2 directly to H4).
Images
- Select Insert Image.
- Upload or select the image.
- Enter meaningful and descriptive alt text.
Why: Alt text ensures non-visual users receive equivalent information. Please note: Mark decorative images such as page dividers or scrollwork as decorative rather than writing unnecessary alt text.
Links & Quicklinks
Links refer to internal or external links, but Quicklinks refer to links that are internal to Brightspace.
- Highlight descriptive text > select the Insert Link icon to add or edit a link > paste the URL in the link field.
- Choose Open in New Window if the content is external to Brightspace (website, library, or other external source).
- Choose Open in Current Window if the content is internal to the course (course modules, rubrics, or other internal spaces).
- Avoid repetitive naming (click here) in favor of clear, unique, descriptive naming of links that indicate what the link is connecting to.
Why: Descriptive links support screen-reader navigation and clarify purpose.
Lists
- Select the text to be listed.
- Choose Bullet List or Numbered List from the toolbar.
- Now, nest items using the Increase Indent button if need to be.
Why: Semantic lists communicate structure to assistive technology.
Tables
- Click the Insert Table button.
- Select the number of rows and columns needed by dragging your mouse across the grid.
- The empty table will now appear in the body. You can now fill out your information into the blank table.
Important: You need to make header rows.
- Select the first row.
- Click and drag to highlight all cells in the first row, or place your cursor in one of the cells.
- Open Cell Properties.
- Click inside a selected cell then select Cell > Properties in the table dropdown in the editor toolbar.
- Change the cell type.
- Change it from Cell to Header Cell.
- Click the save button.
- Apply this to all cells in the top row.
At that point the row becomes a true header row that screen readers can interpret.
Use simple tables whenever possible. Avoid merged cells or complex layouts because they reduce screen reader readability. Avoid merged cells where possible; avoid complex data tables.
Why: Properly structured tables allow screen readers to associate headers with the data in their corresponding cells.
Templates
- Go to the Content.
- Select the Upload/Create button.
- Create a File (Web Page).
- Select a Document Template.
- Then, replace the placeholder text with course/module specific content.
Why: Templates offer formatting with built-in accessibility and promote consistency across courses.
Creator+ Features
- Go to Content.
- Create a File or Edit an Existing Page.
- Select the Creator+ Panel.
- Insert accordions or interactive content blocks or timelines or tabs or hotspots.
.
Why: Creator+ features invite interactive and visually engaging content while maintaining accessibility. Important: Confirm accessibility support for each element with Instructional Designers before adoption.
Related articles
Versión en Español
Creando contenido accesible en Brightspace
Relevante para: profesorado
Este artículo contiene información considerada precisa al momento de su publicación. Las actualizaciones tecnológicas, los cambios en las prácticas de seguridad de la universidad, así como en normas y procedimientos, pueden afectar la información aquí presentada. Las actualizaciones de los artículos se programan de forma periódica e incluyen los cambios necesarios.
¿Qué es esta guía?
Esta guía describe las prácticas básicas de accesibilidad para crear contenido de Brightspace alineado con los estándares WCAG y las expectativas de diseño de SUNY Empire.
Ejemplo de barra de herramientas de edición en Brightspace
Prácticas de accesibilidad en Brightspace
Comprobador de accesibilidad
- Edita el contenido.
- Selecciona el ícono del Verificador de accesibilidad.
- Revisa los problemas identificados y aplica las soluciones.
- Guardar.
Por qué: Detecta problemas comunes antes de que se publique el contenido.
Texto en negrita
- Edita el elemento de contenido.
- Resalta el texto.
- Selecciona B en la barra de herramientas del editor.
- Úsala solo para frases cortas o términos clave.
Por qué: Proporciona énfasis sin reemplazar la estructura semántica ni saturar a los lectores o usuarios de lectores de pantalla.
Pies de foto, audiodescripción y transcripciones
Asegúrate de que los videos originales tengan subtítulos precisos y que la información visual se pronuncie en voz alta o se describa.
El contenido solo de audio debe ir acompañado de una transcripción escrita accesible.
Consulta los siguientes artículos del centro de aprendizaje KB para más información:
Por qué: Los subtítulos aseguran que el contenido en video sea perceptible para los usuarios sordos y con discapacidad auditiva y favorecen la comprensión para todos los estudiantes. Las transcripciones también ofrecen acceso a usuarios sordos y con discapacidad auditiva, así como formas flexibles de interactuar con el contenido. Las descripciones de audio proporcionan narración de elementos visuales importantes que no se transmiten de otro modo mediante diálogo o audio.
Comprobación de contraste de color
- Edita un elemento de contenido.
- Selecciona el Verificador de accesibilidad.
- Revisa las alertas del contraste de color.
- Ajusta los colores del texto o del fondo según te recomienden.
Nota: Si instalas el bookmarklet WebAIM: Contrast Checker, puedes hacer verificaciones de color de forma rápida y sencilla. Sigue las instrucciones en la página para instalarlo y activarlo rápidamente.
Si eliges modificar los colores del texto en el contenido de Brightspace, puedes asegurarte de que tus colores cumplan con las proporciones de contraste de color WCAG usando el selector de colores integrado de Brightspace.
- Selecciona el botón selector de color (la A con un pincel) en la barra de herramientas del editor.
- Elige el color que preferirías usar para tu texto.
- Comprueba la relación de contraste tanto para texto pequeño como grande.
- Si aparece un visto verde junto a ambos, tus selecciones de color tienen un contraste suficientemente alto.
- Si aparece una x roja junto a cualquiera de los dos, elige otro color.
Por qué: Un contraste adecuado garantiza la legibilidad para usuarios con baja visión o deficiencia de visión de colores. Importante: No te fíes solo del color para transmitir el significado, como usar el rojo para indicar información importante.
Editor de ecuaciones
- Edita el contenido.
- Insertar la ecuación.
- Construye la ecuación usando las herramientas de edición.
- Luego, Guardar.
Por qué: Las ecuaciones creadas con el editor son escalables y pueden ser leídas por lectores de pantalla. Evita insertar ecuaciones como imágenes siempre que sea posible.
Títulos y estilos
- Edita el contenido.
- Coloca el cursor en el texto.
- Abre el menu desplegable de Párrafo.
- Empieza con el encabezado 2 (H2).
Por qué: Los encabezados proporcionan una estructura semántica para los lectores de pantalla y mejoran la navegabilidad para todos los usuarios. El título de la página web de Brightspace sirve como encabezado 1 (H1), por lo que el contenido añadido comienza en el nivel H2. No saltes niveles de encabezados (por ejemplo, de H2 directamente a H4).
Imágenes
- Selecciona Insertar imagen.
- Sube la imagen seleccionada.
- Escribe un texto alternativo significativo y descriptivo.
Por qué: El texto alternativo garantiza que los usuarios no visuales reciban información equivalente. Por favor, ten en cuenta: marca imágenes decorativas, como divisores de páginas o trabajos de pergamino, como “decorativas” en lugar de escribir texto alternativo innecesario.
Enlaces y enlaces rápidos
Los enlaces se refieren a enlaces internos o externos, mientras que los enlaces rápidos se refieren a enlaces internos de Brightspace.
- Resalta el texto descriptivo. Luego, selecciona el ícono Insertar enlace para añadir o editar un enlace y pega la URL en el campo de enlace.
- Elige Abrir en una ventana nueva si el contenido es externo a Brightspace (sitio web, biblioteca u otra fuente externa).
- Elige Abrir en la ventana actual si el contenido es interno al curso (módulos, rúbricas u otros espacios internos).
- Evita repetir títulos/nombres de enlaces (“haz clic aquí”) en favor de nombres claros, únicos y descriptivos de los enlaces que indiquen a qué se conecta el enlace.
Por qué: Los enlaces descriptivos permiten la navegación en lector de pantalla y aclaran el propósito.
Listas
- Selecciona el texto que se va a listar.
- Elige Lista con viñetas o Lista numerada en la barra de herramientas.
- Anida elementos usando el botón Aumentar sangría si es necesario.
Por qué: Las listas semánticas comunican la estructura a la tecnología asistencial.
Tablas
Selecciona el botón Insertar tabla.
Luego, escoge el número de filas y columnas necesarias arrastrando el ratón por la cuadrícula. La tabla vacía aparecerá en el cuerpo. Ahora puedes rellenar tu información en la tabla en blanco. 
Importante: Si necesitas crear hileras de encabezados, sigue los siguientos pasos:
- Selecciona la primera hilera.
- Resalta todas las celdas de la primera hilera, o coloca el cursor en una de las celdas.
- Abre Propiedades de la celda en ícono de Tablas en el editor de Brightspace.
- Selecciona Celda > Propiedades de la Celda.
- Escoge Tipo de celda.
- Cambia de Celda a Celda de encabezado.
- Selecciona el botón Guardar.
- Aplícalo a todas las celdas de la fila superior.
En ese momento, la hilera se convierte en una hilera de encabezados verdadera que los lectores de pantalla pueden interpretar.
Usa tablas sencillas siempre que sea posible. Evita celdas fusionadas o diseños complejos porque reducen la legibilidad del lector de pantalla.
Por qué: Las tablas debidamente estructuradas permiten a los lectores de pantalla asociar encabezados con los datos de sus celdas correspondientes.
Plantillas
- Contenido
- Selecciona el botón Subir/Crear
- Crear un archivo (página web)
- Selecciona una plantilla de documento
- Sustituye el texto marcador por contenido específico del curso/módulo.
Características de Creator+
- Contenido
- Crear un archivo o editar una página existente
- Selecciona el panel Creator+ e inserta acordeones o bloques de contenido interactivo, líneas de tiempo, pestañas o puntos de acceso.
Por qué: Las funciones de Creator+ invitan a contenido interactivo y visualmente atractivo al mismo tiempo que mantienen la accesibilidad. Importante: Confirma el soporte de accesibilidad para cada elemento con los Diseñadores instruccionales antes de su adopción.
Artículos relacionados