Canva vs PowerPoint Accessibility

Canva vs PowerPoint Accessibility (A11y) What software application do you use to create flyers or infographics? What are Screen Readers Screen readers are a form of assistive technology (AT) software that enables access to a computer, and all the things a computer does, by attempting to identify and interpret what is being displayed on the computer screen using text-to-speech. Screen readers can only access and process live text (fully editable or selectable text). • Provides access to someone who is visually impaired, has a mobility or a learning disability, to access text on the screen. • Offers same level of independence and privacy as anyone else. Types of screen readers Screen reader program for Microsoft Windows that allows blind and visually impaired users to read the screen either with a text-to-speech output or by a refreshable Braille display. NVDA screen reader can be downloaded free of charge by anyone. Provides auditory descriptions of each onscreen element using gestures, a keyboard, or a braille display. Adds spoken, audible, and vibration feedback to your device. Screen magnifier for Microsoft Windows that allows you to see and hear everything on the computer. Mysterious Dash or Hyphen Screen readers do not know what the – symbol represents (minus, hyphen, en dash or em dash) so screen readers will not read it. It is always a good practice to spell the word and any abbreviations or make a reference to your abbreviation when used for the first time. For examples: • May 8th, 2022 from 3:30 - 5:00pm. The screen reader reads three, thirty five. Recommend May 8th, 2022 from 3:30 to 5:00pm. • Final exams May 14 - 20, 2022, screen reader reads May 1420, 2022. Recommend May 14 to 20, 2022. • Homework assignment pages 200 – 281 for tonight’s reading material. Recommend pages 200 to 281. • The fiscal year 2015-2016. Recommend The fiscal year from 2015 to 2016. • Grading scale 95 - 100%, screen reader reads 95100%. Recommend 95 to 100%. ❖A + , screen reader reads A+. Recommend A plus. ❖A – , screen reader reads A. Recommend A minus. ❖ Recommend to spell the word plus or minus for consistency purpose. Minor changes can have a big effect on maintaining clarity for students using assistive technology. TAGS are the HTML code accessibility markup all of the document text, images, etc. Tags are invisible identifiers that will tell screen readers and other assistive technology (AT) an element is… • header < H1 > to < H6 > • paragraph < P> • image < Figure> • list item < L> and < LI> • hyperlink < Link> • table data cell < TD> What is PDF Tags? Canva Tags Confusion • Accessibility markup tags such as < P>, < Figure>, < L> and < LI> are buried underneath multiple < Div> tags layers. The < Div> tag is known as the Division tag. The < Div> tag is used in HTML to make divisions of content in the webpage like (text, images, header, footer, navigation bar, etc.) • No heading structure markup < H1> to < H6>. • No built-in Check Accessibility like Microsoft Office. • Canva finally added a new feature to add image description in Alternative text (Alt Text). • Logical reading order is out of order and will not make sense to screen reader users. There is no option to re-arrange the reading order in the correct order. Quick Check Using ‘Read Out Loud’ Tool Adobe Acrobat and Adobe Reader’s built-in ‘Read Out Loud’ is not a real screen reader, but this is a quick check to listen to how a screen reader reads the content. • Open your Canva PDF file in Adobe Acrobat Pro or Reader, View tab, Read Out Loud, Activate Read Out Loud. • Go back to the View tab again, Read Out Loud, Read This Page Only. Listen to how the screen reader reads the content information in Canva. • Recognize the logical reading order is out of order? How to fix Canva Tags? Be familiar with PDF Accessibility tagging tool Remediate Canva Tags should look like… Original Canva Tags Final Tags version PowerPoint Design Offers • Microsoft PowerPoint offers a quicker way to create accessible event flyers, infographics, posters, or newsletters that include: • Headings structure • Image description (Alt Text) • Re-arrange logical reading order • Built-in accessibility checker • Retains all the structure when exporting to PDF • Time-saver: you can edit as many times as you want without worrying about losing the design structure. • Everyone on campus has access to Microsoft PowerPoint. Legibility Pretty fonts look good but can people read it? The inaccessible fonts can make content difficult to read and slow readers down. Fonts, text size (12 points or up) and color should be legible. • Text should be clear and easy to read • Avoid using difficult-to-read fonts and small text • San-serif fonts are more suited to electronic formats (Arial, Calibri, Verdana or Franklin Gothic Book) • Avoid underlining text. Underlining is interpreted by screen readers and people with low vision as linked text. • Capitalization for the heading is fine not the entire paragraph. Most people have difficult to read it if all text capitalized. Text Shadow and Text Effects Font Styles Avoid using Text Shadow and Text Effects font styles because PDF accessibility checker report an error “Other elements alternate text – failed.” due to two layers 1) actual text 2) image of text shadow Check Color Contrast People who have low vision or are colorblind could encounter some difficulty distinguishing text color from a background color if the contrast is insufficient with a contrast ratio like 1.5:1. This example has a great color contrast ratio of 8.7:1. The contrast is sufficient for those who have different vision. • Download Colour Contrast Analyser onto your computer (PC/Mac) to ensure accessible contrast or use an online contrast checker from WebAIM. • WCAG Level AA requires a contrast ratio of at least 4.5:1 for regular sized text (12 or 14 pt. font) and 3:1 for large text (18 pt. font). • Coblis Color Blindness Simulator Let’s Get Started with the PowerPoint! Let’s start by choosing your Slide Size • Design tab, Slide Size, and select Custom Slide Size • The Custom option is to let you customize any flyer, poster, or newsletter size. For example, the letter size is 8.5” x 11” Built-in slide layouts (unique title) • PowerPoint does not use headings like Word Document’s Style Panes instead using slide TITLE. Every slide should have a unique title. Assistive technology users such as screen readers navigate by slide title. • Using the default slide layouts is the first step in making your presentation accessible. 1. Go to Home tab 2. New Slide 3. Office Theme 4. Select the slide with Title. Avoid using blank slide that has no title. Slide Title • New Slide, select Title and Content. This will be the main content title, and export to PDF as H1 (heading 1). Just one H1. • Enter the main title name, i.e. Student Leadership Conference. • How to add sub-section H2 (heading 2)? • Copy/paste the main content title box (H1) then reduce the font size for heading 2. • Repeat the same steps if you need more sub-sections (H2) for several pages. Slide Title to PDF Tags PDF Tags Slide Title and Sub-sections Can I use Canva’s images in the PowerPoint? ABSOLUTELY! Download any Canva’s image file type: • PNG (suggested): high quality image • JPG: Small file size image •SVG: Sharp vector graphics at any size Either drag the download Canva’s image into the slide or use Insert tab, select Pictures button, browse the image to insert in the slide. If the image conveying succinct information, add image’s Alt text otherwise mark as decorative. Image Alternative or Alt Text Screen readers and other AT announce that it’s an “image” or “graphic”, then read the alt text: “Three plants going through transformation with text quote Accessibility user-friendly document for CSUN student success.” • The purpose of Alt Text is to allow low vision or blind users who use text-to-speech assistive technologies (AT), such as screen readers, to understand the purpose of graphic images. Sighted users usually don’t see alt text unless they use AT. • Screen readers and other AT can’t convert images into texts. So, when writing alt text, consider the following for images: o Describe the content and the purpose of the image clearly and concisely, in a phrase or a sentence or two. Keep alt text short 200 characters or less. o Image with text (for example, the CSUN wordmark) should include the words on the image. o “Image of…”, “Photo of…” is not needed because screen readers and other AT announce that it’s an “image” or “graphic”. o When completing the alt text, use proper punctuation such as periods to indicate the end of the alt text. Without proper punctuation, some screen readers will run the alt text into the body text that follows and cause confusion to the user. o Don’t insert hyperlinks in alt text because they are not clickable and can’t create descriptive link text. Office 365 - Adding Alt Text Select the image and right-click to select “Edit Alt Text” Older version Office 2016 - Adding Alt Text Right click to select Format Picture, Layout & Properties, Alt Text Adding QR Code • QR Code image Alt Text e.g. “QR Code for Canva vs PowerPoint event flyer.” • Add a short URL link visible on the flyer and selectable/clickable. • Don’t insert hyperlinks in alt text because they are not clickable and can’t create descriptive link text. What are Decorative Images? • • • • • • Conveys no information; does not provide meaningful information. Purely for visual effect. The horizontal line that divided the two sections. Line border image used as part of page design. Decorative images do not require a text alternative. Decorative images, lines, borders, or shapes are ignored by assistive technologies, such as screen readers. Shapes All SHAPES mark as decorative to ignore by the screen readers. • Draw the shape under Drawing group • Select the shape, right-click to select Edit Alt Text or Format tab • Select the checkbox “Mark as decorative” Text on top of the shape – two layers Don’t combine the shape and Edit Text in one layer then mark as decorative. Screen reader will ignore the text entirely. Create two separate layers: • Layer #1: select the shape, right-click to select Alt Text, mark as decorative • Layer #2: Select Text box, type your text • Move text box on top of the shape as overlay • Do not group two layers together then mark as decorative. PDF accessibility checker reports “Figures alternative text-Failed.” Group images or objects DO NOT group images or objects together then adding alternative text (alt text) at once. PDF accessibility checker reports “Figures alternative text – Failed.” Alt text or mark as decorative image/object individually. Descriptive Link Text, 1 of 2 Not Accessible – vague and redundant CSUN News CSUN Honors Four Exceptional Graduate Students for Thesis and Project Work CSUN’s Division of Academic Affairs has selected four exceptional CSUN graduate students as the winners of the 2020 Distinguished Thesis/Graduate Project Competition, with each receiving a $1,000 award and recognition from the university. Read more. CSUN Team to Tap into Power of Inouye Telescope to Study Sun’s Atmosphere With the aid of a telescope in Hawaii, a team of professors at California State University, Northridge hope to solve some of the mysteries found in the sun’s atmosphere, information that could help us better understand the impact of solar flares, as well as what is happening with other stars in our solar system. Read more. Minimizing the COVID Slide During the Summer In response to the COVID-19 pandemic, schools across the nation transitioned to meeting online. Given the abruptness of the transition and lack of preparation parents had in becoming in-home teachers’ aides, many parents and educators are worried about a “COVID slide” or “COVID slowdown,” where students fail to retain any new information learned before and during the pandemic — as well as over the summer, when students are not in school. Click here Accessible – descriptive and unique CSUN News CSUN Honors Four Exceptional Graduate Students for Thesis and Project Work CSUN’s Division of Academic Affairs has selected four exceptional CSUN graduate students as the winners of the 2020 Distinguished Thesis/Graduate Project Competition, with each receiving a $1,000 award and recognition from the university. Learn more about CSUN's Four Exceptional Graduate Students. CSUN Team to Tap into Power of Inouye Telescope to Study Sun’s Atmosphere With the aid of a telescope in Hawaii, a team of professors at California State University, Northridge hope to solve some of the mysteries found in the sun’s atmosphere, information that could help us better understand the impact of solar flares, as well as what is happening with other stars in our solar system. Continue reading about CSUN's Astronomy Team. Minimizing the COVID Slide During the Summer In response to the COVID-19 pandemic, schools across the nation transitioned to meeting online. Given the abruptness of the transition and lack of preparation parents had in becoming in-home teachers’ aides, many parents and educators are worried about a “COVID slide” or “COVID slowdown,” where students fail to retain any new information learned before and during the pandemic — as well as over the summer, when students are not in school. Learn more about the "COVID Slide". Screen readers read: The content and link text then announce the word "link" Screen readers read: "Read more, link" "Read more, link" "Click here, link" Descriptive Link Text, 2 of 2 Reading Order, 1 of 3 The order of text boxes, images, and shapes determines how the content will be presented to screen reader users, and other users of assistive technology. Incorrect Reading Order Correct Reading Order Reading Order, 2 of 3 To check or fixing reading order of a slide, select Home > Arrange > Selection Pane. Reading order is shown in reverse, bottom to top. Click and drag or use the arrow buttons to change reading order. When the screen reader reads this slide, it reads the objects in the reverse order listed in the Selection pane. Important: The Title should always be read first as heading title. Assistive technology users such as screen readers navigate by slide title. Reading Order, 3 of 3 The PowerPoint reading order reads the objects in the reverse order listed in the Selection pane from bottom to top. When exporting to PDF, the tags reading order reads from top to bottom. It’s very important to ensure the slides reading order follow the PowerPoint’s reading order in the correct order for the PDF to export correct reading order. PowerPoint Accessibility Checker The accessibility checker will identify certain accessibility issues: • Duplicate slide titles • Images with no alt text • Tables without the header box checked. • Tables that have merged cells or with empty cells • Reading order needs checking. What is a Document Title? • A document title is a descriptive and meaningful version of the file name. When converting to PDF, titles are often visible in the PDF window or tab. • When multiple PDFs are open, well defined PDF titles allow for easier distinction between them. This distinction is particularly useful when relying on screen readers. • The best way to add a PDF title is to edit an original document such as Microsoft Office file. See next slide how to add a Title in the PowerPoint. Window: File, Info, Title Windows: Converting to PDF 1. Select File menu 2. Save as, Save as type: PDF 3. Select Options button to include Document Properties and Document structure tags for accessibility 4. Save 5. Open the PDF file from Adobe Acrobat Pro 6. Run Accessibility Check Learn more about PDF Accessibility Mac: File, Properties, Title Mac: Converting to PDF Unfortunately, Mac PowerPoint Desktop Software Save as PDF doesn’t import PDF tags structure “No Tags available”. The alternative way to export PDFs with tags is by logging into Microsoft Office 365 online. 1. 2. Go to MyCSUN Portal Select Microsoft Office 365 3. 4. 5. 6. 7. 8. 9. Select PowerPoint tab on left side Upload your PowerPoint file Select File menu Save as, Download as PDF button Download button (save on your desktop) Open the PDF file from Adobe Acrobat Pro Run Accessibility Check Learn more about PDF Accessibility Never Choose Print to PDF Option Never choose a "Print" to PDF option in Office, or in any other program. A screen reader user may still be able to access the text of a PDF created in this way, but heading structure, alternative text, a logical reading order, and any other tag structure will be lost. Use Save As, then choose PDF. How to Save the PowerPoint Designing in PNG or JPEG for Social Media or Email Marketing? • Go to File menu • Select Save As • Save as type: dropdown list, choose either PNG or JPEG • Enter file name • Save button Adobe Creative Cloud for Faculty & Staff • Adobe Creative Cloud software is now available for use (at no additional charge) on all faculty and staff university-owned computers, labs and classroom devices, and for all students. • Please note that this deployment of Adobe software is not available for use on personally-owned faculty and staff devices at this time. • Learn more about Adobe Creative Cloud for Faculty & Staff • Adobe Acrobat DC • Adobe Reader is for viewing, printing, signing, sharing, and annotating PDFs. Adobe Reader doesn’t have Accessibility checking tool. Adobe Acrobat Tools Pane Set Up If this is your first time setting up Adobe Acrobat software • Select Tools Tab • Add Shortcut for Accessibility Adding Tools to Navigation Pane These are the primary tools needed to create an accessible PDF: Option 1: View > Show/Hide >Navigation > Option 2: On left pane, right-click to select Tags and Content Pane Tags and Content Pane Adobe Acrobat Pro Check Accessibility Run the Accessibility Full Check • Accessibility checkers results in bold text have one or more issues/failed that need to fix. • If you have a failure, you can right-click on any item in the report and select “Explain” that will link to Adobe webpage to explain the problem. • If the results not in bold text, that section has passed. Common Issues – Title shown as a failure Acrobat did not recognize the Title from Word Document, simply right-click Title item and select “Fix”. The document description gives the document a proper title and language to be recognized by assistive technology. • Select File menu > Properties • Description tab, enter Title box is document title or main content heading/title (deselect Leave As Is, if necessary). • Application box showing the source document created from Word to PDF. Accessibility Checker – Manual evaluation The accessibility checker will always flag two items that require manual evaluation: • Logical Reading Order • Color Contrast Two question marks will always stay in Document (2 issues) section even if you right-click and select Pass. It just there as a reminder to conduct manual check. Use a screen reader to finalize your flyers/infographics accessibility features Microsoft Windows NVDA screen reader that allows blind and visually impaired users to read the screen either with a text-to-speech output or by a refreshable Braille display. NVDA can be downloaded free of charge by anyone. nvaccess .org • Apple VoiceOver built-in provides auditory descriptions of each onscreen element using gestures, a keyboard, or a braille display. Your creativity is worth millions as long as you consider the following accessibility best practices Learn more about Infographics Best Practices How can we help you make a difference? Universal Design Center Offers • Online, self-paced training • In-person training each semester • Consultations • Tools and Services