Accessibility on Newsela

Accessibility on Newsela

Newsela is committed to maintaining a high level of accessibility, and delivering instructional materials that truly benefit every student. We design and develop our product to meet the Web Content Accessibility Guidelines (WCAG) 2.1 AA and Section 508 conformance standards. You can learn more about our accessibility process and our alignment to those standards in our Newsela Accessibility Statement

In keeping with our mission, we are committed to making continuous improvements in accessibility across Newsela. If you have feedback on Newsela’s accessibility, please email us at accessibility.feedback@newsela.com.

Newsela articles include a Read Aloud feature, which highlights and reads the text of an article aloud.

How to use Read Aloud

  1. Click the “Read Aloud” icon. The read aloud will automatically begin reading the text.

  2. Click the arrow “rewind” icon to start the read aloud from the article title.

  3. Click the pause button to stop the read aloud.

  4. Click the play button to continue from where the read aloud feature was paused.

  5. Scroll, or use the down arrow key, with the highlighted text to continue to read along with the voiceover.

  6. Click the “Exit X” icon to close the Read Aloud feature. 

All interactive videos on Newsela include

  1. A transcript

  2. Closed captions

  3. Audio descriptions (when applicable)

  4. A 4 question comprehension quiz

Transcript accessibility features

  1. Autoscroll may be enabled or disabled by selecting the “Autoscroll” checkbox.

  2. Each line of the transcript is a button that when selected will move video playback to that point of the video.

  3. Transcript text size adjustments can be made by selecting the “+” and “-”  increase and decrease text size buttons under “Text Size”. 

  4. Users can choose between light and dark transcript modes by selecting the light and dark circle icon button under “Mode”.


Closed captions and audio descriptions accessibility features

  1. To enable or disable captions and/or audio descriptions, select the three dot icon button in the lower right corner of the video controls to open the options. This button is labeled “Controls for Audio Descriptions and Captions” for screen readers.

  2. Select “On” or “Off” under “Captions” and “Audio Descriptions”.

  3. Once your selections are complete, either click away from the options or select the three dot icon button again to close the controls for audio descriptions and captions. 

 

4 question comprehension quiz accessibility features

  1. The Activities panel contains four question comprehension quizzes. 

  2. Each quiz is available on-demand in the Activities panel, or via quiz buttons in the video playback progress bar. 

  3. The quizzes are also generated automatically when the quiz buttons are reached during video playback; this will cause the video to pause to allow users to navigate to the quiz.

With our newly designed Annotations feature, teachers and students can highlight and annotate within articles. Annotations are created and stored in the Annotations section of the Activities panel. 

Teachers can leave questions or other guidance for students in annotations, and students can see and respond to their teacher's annotations. All teacher-student conversations are stored in the Annotations section of the Activities panel. 

*This updated feature is currently in pilot testing with a limited set of users. 


How to create annotations

  1. Highlight text. An Annotate popup button will appear.

  2. Select the Annotate button or press a on your keyboard. 

  3. A new annotation will be started in the Annotations section of the ActivitiesPanel. 

  4. Select the text highlight color and enter annotation text (text is optional). 

Select the Save button to save your annotation.

Creating annotations using only your keyboard

Our annotation feature works best in Chrome, Safari, and Edge browsers for keyboard-only annotation creation. We highly recommend using one of these browsers when using the annotation feature. 


Chrome and Edge users:

Chrome and Edge browsers both support caret browsing. This allows users to navigate and select text using only the keyboard. 

  1. To enable caret browsing in Chrome and Edge, press the F7 key. You will be asked whether or not you want to turn caret browsing on. Note: On Chromebook, the keyboard shortcut is Ctrl + Search  + 7, or Ctrl + Launcher  + 7.

  2. Once caret browsing is enabled, you can select text using the Shift + arrow keys. 

  3. When you’ve selected the text, press the a key.

  4. A new annotation will be started in the Annotations section of the ActivitiesPanel. 

  5. Select the text highlight color radio button using the tab and arrow keys. 

  6. Enter annotation text if you choose (text is optional). 

  7. Select the Save button to save your annotation. 

 

Safari users:

In order to select text with keyboard-only, Safari requires the use of Apple’s Mouse Keys. See the Enable Mouse Keys section of this article for more information. 

  1. Select text using Apple Mouse Keys. 

  2. When you’ve selected the text, press the a key.

  3. A new annotation will be started in the Annotations section of the ActivitiesPanel. 

  4. Select the text highlight color radio button using the tab and arrow keys. 

  5. Enter annotation text if you choose (text is optional). 

  6. Select the Save button to save your annotation.


Creating annotations using a screen reader

Our annotation feature works best in the following browser and screen reader combinations:

  • Safari with VoiceOver

  • Chrome and Edge with JAWS and ChromeVox


The NVDA screen reader is not able to select text while in Browse mode, this is an issue present in all web pages that require text selection for annotation. We will continue to monitor for changes as updates are released to NVDA. 


Safari with VoiceOver - MacOS (desktop)

  1. Use standard controls and the Quick Nav to select text on Mac. For more information, see the Apple VoiceOver guide for working with text

  2. Once you have selected text, press the a key. 

  3. Focus will be set to a new annotation started in the Annotations section of the ActivitiesPanel. 

  4. Select the text highlight color radio button and enter annotation text if you choose (text is optional). 

  5. Select the Save button to save your annotation.

 

Safari with VoiceOver - iOS (mobile and iPad)

  1. Use standard controls and gestures to select text. See About the VoiceOver rotor and a video on Text Selection with Apple’s VoiceOver.

  2. Once you’ve selected text, there are several ways to create an annotation, use the method that works best for you:

    1. Use Buttons in Rotor

      1. Add Buttons to the Rotor options (one-time setup)

      2. After text is selected, select Buttons from Rotor

      3. Swipe up; the Annotate button is always the first button to swipe up to after highlighting text. Press the Annotate button. 

    2. Use the Item Chooser

      1. After text is selected, open the Item Chooser via triple tap with two fingers 

      2. Type Annotate to filter items or swipe through all items until you reach Annotate

      3. Select to be brought to the Annotate button in the page. Press the Annotate button. 

    3. Use Voice Control

      1. Turn Voice Control on, see this video tutorial for reference. 

      2. Once you have highlighted text, the Annotate button automatically appears on the page

      3. Say, “Tap Annotate” to select the Annotate button.

  3. Once one of these methods is used, focus will be set to a new annotation started in the Annotations section of the ActivitiesPanel. 

  4. Select the text highlight color radio button and enter annotation text if you choose (text is optional). 

  5. Select the Save button to save your annotation.

Chrome and Edge with JAWS 

  1. Select text in Browse mode using Ctrl + Shift + left and right arrows.

  2. To use the a key to create an annotation, update your Quick Key assignment in the Navigation Quick Key Manager. The a key will need to be unassigned from any current Quick Keys

  3. To use the Annotate button generated after text has been selected, press Shift + Tab until you reach the Annotate button. This is usually the first item in the backwards tab order. If there are Power Words in the article, you may need to navigate through them to reach the Annotate button.

  4. A new annotation will be started in the Annotations section of the ActivitiesPanel. 

  5. Note: We are currently experiencing a bug with JAWS in this step. Your focus will either be moved to the annotation creation panel, or you will need to press the down arrow to hear the link to the “annotation start” text. Select this link and you will be moved to the annotation creation panel.

  6. Select the text highlight color radio button and enter annotation text if you choose (text is optional). 

  7. Select the Save button to save your annotation.

Chrome with ChromeVox on Chromebook

  1. Select text using the controls identified in Chromebook Help: Use the built-in screen reader. The Move through a page with keyboard shortcuts and Select and click sections are most helpful. 

  2. Once you have selected text, press the a key. 

  3. Focus will be set to a new annotation started in the Annotations section of the ActivitiesPanel. 

  4. Select the text highlight color radio button and enter annotation text if you choose (text is optional). 

  5. Select the Save button to save your annotation.

How to edit, delete and share annotations

  1. Select the caret button next to your name. This button is labeled “annotation text” for screen readers. Selecting this button will expand the annotation text and options.

  2. Select Delete to delete the annotation. This will delete the highlighted text as well as the annotation from the Annotations section. 

  3. Select Edit to modify the annotation color or text. Press Save or Cancel after modifications. 

  4. Teachers can share or unshare an annotation by selecting the Share or Unshare button; student annotations are automatically shared with their teacher.  

Teachers can select the leveler at the top of the page to change lexile levels, and add annotations for a different level.

How to view and reply to annotations

To view an annotation in the Annotation section, either:

  1. Select the highlighted text link in the article.This is labeled, “annotation start, text beginning …” for screen reader users. Selecting the highlighted text link in the article will focus the annotation in the Annotation section.  

Open the Annotations section of the Activities panel to view all annotations listed.

To view an annotation in the article from the Annotation section:

  • From the Annotations section, select the highlighted text of the desired annotation to link to that text in the article. This link is labeled, “Navigate back to annotation” for screen reader users and immediately precedes the annotation text.

  • Selecting the highlighted text link will focus the annotation in the article.

To reply to an annotation: 

Select the caret button next to the name of the person who made the annotation. This button is labeled “annotation text” for screen readers. Selecting this button will expand the annotation text and options.

  1. Type your reply in the Reply text field. 

  2. Select the Reply button to send your reply, or the Cancel button to delete and re-enter your reply text. Be sure to select the Reply button after you’ve re-entered your text.

Once you’ve replied, you will have two button options to Delete or Edit your reply. Be sure to select the Save button after you’ve edited your reply, or the Cancel button to discard your changes.

The Newsela student experience is navigable using standard keyboard interactions, such as: shift, shift + tab, spacebar, enter and arrow keys. 

  • When interactive elements such as links or buttons receive keyboard focus, they are highlighted with a focus ring. 

  • A “Skip To Content” link is present at the beginning of each page, allowing keyboard users quick access to the page’s main content.

Note: in the current Annotations feature, users are not able to create annotations using only their keyboard. 

Users are able to navigate to existing annotations as well as reply to them via keyboard. 

Annotations are being re-built and will be updated for accessibility. We will update this documentation once the work is complete.


Newsela’s student experience is most compatible with VoiceOver, NVDA, JAWS, ChromeVox and TalkBack screen readers. 

For the best experience, we recommend these browser and screen reader combinations, using the latest versions of each:

Desktop

Mobile

New to using screen readers with your students? You can find more information on screen readers here.

Some of the supports in place for screen reader use are:

  • All images include alternative text descriptions.

  • Quizzes display correct and incorrect answer information in words, which screen readers can access.

  • Labels across the student experience are screen reader-friendly.

  • Screen reader only instructions are provided for complex interactions when appropriate.

Newsela uses status updates to confirm certain actions on the platform, such as saving or removing content.

The following supports are in place to make these updates easier to discover and navigate to:

  • A screen-reader-only region called “Status updates” has been added to the top of each page, ahead of the page header. It also contains a screen-reader-only heading of “Status updates”. This will allow screen reader users to navigate by landmarks or headings to access this content quickly. 

  • Similarly for users who navigate via keyboard, the status updates are always the first interactive element in the page focus order when present on the page.

  • Status updates have been coded as “Alert” elements to ensure they are announced the most consistently to the greatest number of screen reader and browser combinations. 

Status updates persist until one of the following occurs:

  • a user manually closes the update

  • an update’s inner link is activated

  • another update is created

Newsela also aligns to WCAG standards in the following ways:

  • Colors of text and informative icons meet color contrast standards and color alone is not used to convey meaning.

  • Consistent element labeling and simple language reduce cognitive load in site navigation and use. 

  • Article cards include the most relevant details for students, with a clear hierarchy of important information.

  • Responsive web design principles are followed to ensure device orientation and screen magnification support.