Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Pwpt #341

Open
wants to merge 10 commits into
base: master
Choose a base branch
from
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/en/content-and-communication/images/audio.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified src/en/content-and-communication/images/cca.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/en/content-and-communication/images/check.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/en/content-and-communication/images/info.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/en/content-and-communication/images/info2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/en/content-and-communication/images/theme.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
84 changes: 68 additions & 16 deletions src/en/content-and-communication/powerpoint/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,30 @@ Producing accessible PowerPoint slides requires following these different recomm
Defining slide layouts is the first action to do in order to create an accessible presentation, it will ensure information have the correct reading order.
Use the Slide Master view: select the <code>View</code> tab > <code>Slide Master</code> to create or modify slides layouts.

<img class="center" src="/en/content-and-communication/images/screen1.png" alt=""/>
<img class="img-fluid" src="/en/content-and-communication/images/slidemaster.png" alt="">

Use the Master Layout submenu to add titles or footers.

<img class="center" src="/en/content-and-communication/images/screen2.png" alt=""/>
<img class="img-fluid" src="/en/content-and-communication/images/placeholder.png" alt=""/>


<img class="img-fluid" src="/en/content-and-communication/images/placeholder2.png" alt=""/>

Create as many layouts as types of slides needed.
Avoid adding text boxes or images directly into the presentation via the <code>Insert</code> menu but use the <code>Slide Master</code> view.

Avoid adding text boxes or images directly into the presentation via the <code>Insert</code> menu but use the <code>Slide Master</code> view.

Provide a general theme of accessible slides master:
- Accessible colours (cf. colour chapter)
- Accessible fonts (cf. shaping chapter)
- Avoid inserting effects
- Choose a theme colour for each text

<img class="img-fluid" src="/en/content-and-communication/images/theme.png" alt=""/>
<img class="img-fluid" src="/en/content-and-communication/images/themecolor.png" alt=""/>



Note: if you edit the slide layout after you have created the slides, you must reapply the new model.

## Presentation properties
Expand All @@ -34,7 +50,7 @@ Every punctual change of language must be identified by selecting the text and:
### Other properties
Title, author and tags fields have to be completed in tab <code>File > Info > Properties</code>.

<img class="center" src="/en/content-and-communication/images/screen3.png" alt=""/>
<img class="img-fluid" src="/en/content-and-communication/images/info2.png" alt="">

This information is accessible by everyone in Windows Explorer and are readable by the screen readers.

Expand All @@ -50,7 +66,7 @@ Begin all sentences by a capital letter but avoid using all capital letters and
Avoid justifying the text; prefer left alignment.
In order to add white space between sentences and paragraphs, use option: <code>right click</code> on the text and select <code>Paragraph… > Indents and Spacing</code>.

<img class="center" src="/en/content-and-communication/images/screen4.png" alt=""/>
<img class="img-fluid" src="/en/content-and-communication/images/paragraph.png" alt=""/>

## Colors and contrasts

Expand All @@ -61,27 +77,28 @@ Ensure a level of [sufficient contrast between the color of the text and that of
Make sure [color is not the only means used to convey information](/en/web/design/colors-and-contrasts/#do-not-use-colour-or-sensory-characteristics-as-the-unique-source-of-information).

<figure>
<img src="/en/content-and-communication/images/color1.png" alt=""/>
<img class= "img-fluid" src="/en/content-and-communication/images/color1.png" alt=""/>
<figcaption><strong>Not correct</strong>: information is transmitted only by color.</figcaption>
</figure>

<figure>
<img src="/en/content-and-communication/images/color2.png" alt=""/>
<img class= "img-fluid" src="/en/content-and-communication/images/color2.png" alt=""/>
<figcaption><strong>Correct</strong>: information is conveyed by color and shape.</figcaption>
</figure>

## Bulleted Lists or Numbered Lists
Always use the appropriate and native functions in order to create lists.

<img class="center" src="/en/content-and-communication/images/images/screen5.png" alt=""/>
<img class="img-fluid" src="/en/content-and-communication/images/bulletlist.png" alt=""/>


## Pictures and other Images

Add alt text to images, shapes or SmartArt graphics in your PowerPoint slides.
In order to write a good alt text, make sure to convey the content and the purpose of the image and its context in a concise and unambiguous manner.
Right-click on an image and select <code>Format Picture</code> or <code>Format Shape > Alt Text</code>.

<img class="center" src="/en/content-and-communication/images/screen6.png" alt=""/>
<img class="img-fluid" src="/en/content-and-communication/images/alttext.png" alt=""/>

Type the alt text in the Description text box (but leave Title blank, this information is not conveyed to assistive technologies).
If the picture is only decorative, leave the Description text box blank.
Expand All @@ -95,7 +112,7 @@ Select the text to which you want to add the hyperlink, and then right-click.
The text you selected displays in the “Text to display” box. This is the hyperlink text.
If necessary, add a ScreenTip by clicking on the ScreenTip button.

<img class="center" src="/en/content-and-communication/images/screen11.png" alt=""/>
<img class="img-fluid" src="/en/content-and-communication/images/hyperlink.png" alt=""/>

For every downloadable file, it is necessary to specify its name, type, size and language (if different of the presentation language).
Screen reader users sometimes scan a list of links, so the labels have to be simple and easy to understand.
Expand All @@ -109,36 +126,71 @@ Ensure that tables don't contain split cells, merged cells, nested tables, or co
If a table is too complex, you will need to provide an additional description: Right-click <code>Format Shape > Alt Text</code>.

## Audio or video file
For audio and video content, in addition to alt text, be sure the video or audio as well as the player are accessible.
For audio and video content, in addition to alt text, be sure the video or audio as well as the player are accessible.
Provide a complete transcription of the audio contents
Prevent any automatic playback of video or audio content


<img class="img-fluid" src="/en/content-and-communication/images/audio.png" alt=""/>

All video content must meet these prerequisites:

**Subtitling**: textual content synchronized with the video giving access to all of what is expressed in audio (dialogue, noise, music, etc.)

**Audio description**: narration added to describe the visual details essential to understanding the video (actions, characters, sets, etc.)

**Transcription**: textual version containing all the information of the content

**Requirement according to the content type**

<img class="img-fluid" src="/en/content-and-communication/images/contenttype.png" alt=""/>



<a href="/en/content-and-communication/animated-components/">See our recommendations for audio or video files.</a>

## Set the reading order
The order in which the screen readers read the slide contents can be modified in the Selection pane.
On the <code>Home</code> tab, in the <code>Drawing group</code>, select <code>Arrange > Selection</code> Pane.
The elements of your slide are read in the reverse order listed in this pane.

<img class="center" src="/en/content-and-communication/images/screen7.png" alt=""/>
<img class="img-fluid" src="/en/content-and-communication/images/readingorder.png" alt=""/>



## Accessibility Checker
At least, run Accessibility Checker to make sure your content is accessible.

In <code>File tab > Check for Issues</code>.

<img class="center" src="/en/content-and-communication/images/screen8.png" alt=""/>
<img class="img-fluid" src="/en/content-and-communication/images/tableau.png" alt=""/>


## Accessibility issues detection

Some errors will be automatically detected thanks to the spelling checker (**File > Option > Proofing**) and the accessibility checker:

<img class="img-fluid" src="/en/content-and-communication/images/check.png" alt=""/>

## Document title

Give an explicit title to the document
**File > Information > Proprieties > Title**


## Convert to PDF

After checking the accessibility of your document (see the <a href="/en/content-and-communication/powerpoint/test/">Testing the accessibility of your Word document section</a>), you can convert it to a PDF file, if necessary, by selecting: <code>File tab > Save As</code> and save as type PDF.
Check the « Document structure tags for accessibility » option.

<img src="/en/content-and-communication/images/screen9.png" alt=""/>
<img class= "img-fluid" src="/en/content-and-communication/images/saveas.png" alt=""/>

PDF is often a better format to present PowerPoint presentations electronically.

Note: If your presentation have more than 50 slides, it is better to advise your readers to change the following setting in Adobe:
Note: If your presentation has more than 50 slides, it is better to advise your readers to change the following setting in Adobe:
<code>Edit > Preferences > Reading > Screen Reader Options > Page vs Document: "Read the entire document"</code>

<img src="/en/content-and-communication/images/screen10.png" alt=""/>
<img class= "img-fluid" src="/en/content-and-communication/images/screen10.png" alt=""/>

To check the accessibility of a PDF document, see the <a href="/en/content-and-communication/pdf/">accessible PDF section of our site</a>.

Expand Down
14 changes: 8 additions & 6 deletions src/en/content-and-communication/powerpoint/test.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,16 @@ abstract: "Automated tests with Office Accessibility Verification Tool"

# Check accessibility in PowerPoint slides

## Automated tests
## Automated tests

### Office Accessibility Verification Tool
**Office accessibility verification tool**

Start your tests with the Office Accessibility Verification Tool:
Start your tests with the Office Accessibility Verification Tool:
**File > Info > Check for Issues > Check Accessibility**

<img alt="Accessibility checker screenshot" src="../../images/word_verification_en.png" class="img-fluid" />
<img class= "img-fluid" src="/en/content-and-communication/images/checkacc.png" alt=""/>

**Important:** if you encounter some difficulties, try to save your document from within PowerPoint 2010 in ".pptx" format. The option to "Maintain compatibility with previous versions of Word" has to remains unchecked.
**Important**: if you encounter some difficulties, try to save your document from within PowerPoint 2010 in ".pptx" format. The option to "Maintain compatibility with previous versions of Word" has to remains unchecked.

### Color contrasts
[Download Colour Contrast Analyser](https://developer.paciellogroup.com/resources/contrastanalyser/)
Expand All @@ -27,7 +27,9 @@ It helps you to simulate the configuration as the visually impaired and blind pe
[For further information to navigate with JAWS & NVDA](../../../web/toolbox/methods-and-test-tools/navigating-with-a-screen-reader)

### Self-Assessment Grids

These Grids are designed for self-assessment of the accessibility of Word and PowerPoint documents:
- <a href="../../AXS_assess_grid_WORD_EN.xlsx">Accessibility Assessment Grid for Word (16 ko)</a>
- <a href="../../AXS_assess_grid_PPT_EN.xlsx">Accessibility Assessment Grid for PowerPoint (16 ko)</a>

These Grids are designed for self-assessment of the accessibility of Word and PowerPoint documents:

Binary file modified src/en/res/memos/pwp/PowerPoint-Fact-Sheet-Orange.pdf
Binary file not shown.
2 changes: 1 addition & 1 deletion src/fr/articles/memo-accessibilite.md
Original file line number Diff line number Diff line change
Expand Up @@ -205,7 +205,7 @@ Documents office :
<h3 id="tele-word">Téléchargement</h4>
<p>
<a href="../../res/memos/pwp/Memo-PowerPoint-Orange.pdf" class="btn btn-secondary">
Télécharger au format PDF (294 Ko)
Télécharger au format PDF (302 Ko)
<span class="visually-hidden">Mémo rédiger une présentation PowerPoint accessible</span>
</a>
</p>
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/fr/contenu-et-communication/images/info2.png
Loading