Accessibility: a summary of requirements - PowerPoint Presentation

Accessibility: a summary of requirements Dwight LewisSection 508 Accessibility ConsultantDivision of CommunicationsOffice of Legal, Legislative and Communication ServicesKentucky Department of Education 6/28/2018

Meeting our obligation to all Kentuckians: “…State's underlying legal obligations to ensure people with disabilities are able to acquire the same information, engage in the same interactions, and enjoy the same benefits and services within the same timeframe as their nondisabled peers…”- from the Resolution Agreement between KDE and USDE OCR, 8/1/2016 2

Legal backgroundSection 504 of the Rehabilitation act of 1973, as amendedProhibits creating barriers for people with disabilities in educationSection 508 of the Rehabilitation act of 1973, as amendedAdopted by KRS 61.980 – 69.988 Regulations issued under Section 508 provide the technical requirements Title II of the Americans with Disabilities Act of 1990. Prohibits discrimination on the basis of disability in State and local government services Title I of the Americans with Disabilities Act of 1990.Prohibits discrimination on the basis of disability in State and local government employment 3

Accessibility addresses needs of people who: have no vision;have limited vision; have limited perception of color;cannot hear;have limited hearing;cannot speak;have limited ability to manipulate objects or user interface controls (e.g. fine motor skills or simultaneous manual operations); h ave limited reach and/or strength; h ave limited language , cognitive and/or learning abilities. Reference: Section 302, Appendix C to 36 CFR Part 1194 (revised Section 508 regulations) 4

Guidelines for AccessibilityWeb Content Accessibility Guidelines version 2.0 (WCAG 2.0) Issued by the Web Accessibility Initiative Committee (WAI) of the World Wide Web Consortium (W3C) Designed to be independent of technology, focuses on function and contentDeveloped with collaboration of advocacy groups, industry, technical experts, along with public reviewAdopted worldwide (U.S., Europe, Japan) Adopted by the U.S. Government in the latest revision of the Section 508 regulations Cited by the U.S. Department of Education in Section 504 cases involving web and electronic access WCAG 2.0 contains:4 principles for accessibility 12 guidelines 3 levels of conformance (A, AA, AAA) KDE is required to meet levels A and AA in all electronic documents and on all websites 5

The goal for digital content accessibility Make digital information available to all users in a manner and format that meets their needs including: Design documents and websites so that people with disabilities can perceive, understand, navigate and interact with the information.Provide additional information in the document, webpage, video, etc. that allows assistive technology to present the information in a format needed by the user.For example: caption files for videos, alternative text for pictures, format tags in documents. Provide information in alternative formats that produces an equivalent outcome.For example: A full text description file for a visual flow chart diagram. 6

Techniques that may be used by persons with disabilities to access content:use a keyboard without a mouse to navigate webpages and documents;use a screen reader to read documents and for webpage navigation;use a screen magnifier;use headphones: for example, to access an ATM in privacy; change the browser’s default fonts and/or font size;use the browser’s magnification function;change or invert screen colors, or use a high contrast mode; u se various Assistive Technology (AT) devices that mimic keyboard input; u se accessibility gestures and/or voice guidance with tablets and smartphones.7

Key QuestionsQuestions to ask while creating your document, etc. If I cannot see the page, does the page have enough information to covey the meaning? If I cannot distinguish the colors on the page, is the information presented in a way that doesn’t depend on color? If I have limited vision, is the information presented in a way that allows me to perceive it visually? If I cannot hear your presentation, is the information also present visually? If I cannot see your presentation, is the information also present audibly? 8

Screen Reader tipsHeaders / FootersScreen readers do not read headers or footers. Vital information contained in a header or footer must be replicated at least once in the body of the document. Overlays / watermarksScreen readers do not read page overlays or page watermarks. If the overlay or watermark contains vital information, the information must be repeated in the body. Ranges (e.g. 12 – 24) A number range expressed with a hyphen is read by screen reader without the hyphen. Example: the range “12 – 24” is read as “1234” Use text to denote a range. Example: “12 to 24”. Reading OrderScreen readers follow the structure of the page. Place text boxes, images, tables, etc. “in line” to insure the proper reading order is maintained. 9

Screen Reader tips (continued)Textual emphasisbold, italics, underscore, etc. emphasis are typically not read by a screen reader. Color text The color of the text is typically not read by a screen reader. ImagesImages that do not have “alt text” are skipped by a screen readerScanned images of text Scanned images containing text in the image and scanned documents cannot be read by a screen reader.Hyperlinks When navigating a document page (or a web page) with a keyboard only the hyperlink is read, not the surrounding content. 10

Screen Reader tips (continued)Screen Readers DO read structural elements: Headings Lists TablesMerged / spit cells in Word and Excel present problems for screen readers Web page tables properly coded using WAI ARIA techniques can merge cellsA screen readers uses the column header to identify cells. Images that have “alt text” The alt text must be in the “Alt Text Description” field to be read by a screen reader. (The “Title” field is typically skipped by a screen reader.) Hyperlinks When navigating a web page (e.g. with “tab”) only the hyperlink is read. When reading the entire page the hyperlink is read within the context of the page. Language Adjusts pronunciation rules to match the language 11

Considerations for Creating Accessible DocumentsApplication of WCAG 2.0 levels A & AA Success CriteriaDisclaimerMany of the following examples are from various KDE webpages and documents. These are for illustrative purposes only. 12

Guidance applies to:Documents created in Office 2013 (and later versions) Documents intended for on-screen viewing Note: There are additional WCAG 2.0 programming requirements that apply to general webpage and application development. 13

Layout - documentsHow will the document will be viewed? Printed PC workstation screen Mobile device screen Columns Single column layout works best for viewing on multiple screen sizes and orientations Use the “columns” function in Word to control a multiple column layoutDo not use a table to achieve multiple column formattingDo not manually format columns Headings (Styles) Use headings to establish the structure of the document Headings must be used in order (H1, H2, H3, H2, H3, etc., NOT H4, H1, H4, etc.) Text emphasis (Styles) The non-Headings under “Styles” may be used as desired for visual effect . Do not use text emphasis ( bold , italics, underscore, strong, intense, color, etc.) as the only means to convey meaning. 14

Layout -example4 column fixed layout PDF: Works well for a printed document Layout does not reflow, difficult for visual users to read on a small screen device A single column layout is more versatile for all users. If created using “columns” in Word, then not an issue for a Screen ReaderSource: IRS Publication 17, for tax year 2016 15

Layout -exampleCreating columns by using a table: Visually looks like a 2 column layout To a screen reader looks like a 2 column, multiple row TABLEThe TABLE is read left right (cell 1, cell 2) and not column 1 followed by column 2. Use “Columns” in Word!16 This is a 2 column layout using a table to accomplish the function This is the second column

Layout -exampleUse a Text Box and not a Table for a heading:Screen reader announces “Table” but for a Text box just reads the contents Text box has same visual formatting options17This is a heading in a Table cell This is a heading in a Text Box

FontsFont selectionSans-serif fonts are preferred for screen viewing. Arial, Calibri, Tahoma, Verdana, and similar fontsSerif fonts, such as Times New Roman are acceptable for printed material. Avoid stylized and calligraphy fonts such as Algerian and French Script. Images of fontsImages of text, such as scanned images and scanned documents should not be used. If an image contains text, the Alt Text field for the image must repeat the text. Do not convert fonts to bitmap images.Contrast A minimum contrast ratio of 4.5:1 is required between text and background Check the contrast ratio when using watermarks and page overlays Check contrast ratio when using either color text and/or color background Black text on white, or white text on black does not need to be checked (ratio is 22:1) Note: Logos have no contrast requirement 18

Minimum Font Contrast exampleMinimum Contrast ratio (text to background) is 4.5:1 Use a color contrast tool to check for all other color combinations other than black text on white and white text on black. 19 Acceptable color ratio 4.7:1 Unacceptable color ratio 3.4:1 An easy to use tool can be found at: Colour Contrast Analyser from the The Paciello Group https ://www.paciellogroup.com/resources/contrastanal y ser/

Scanned textScanned documents must be converted to textFaxed, scanned PDF, or printed documentsAcrobat Pro DC has a built-in Optical Character Recognition (OCR) function that can be used to convert scanned documents to readable text. Scanned images containing text must repeat the text in the Alt Text Description field. 20

Scanned image document -exampleA scanned image document must be converted to or replaced with a readable text document. Use the original source document if possible Convert the scanned image with Acrobat if the original is not available. 21

Lists Use the List functions built into Word for both ordered (numbered) and unordered (bulleted) lists. Do not create lists manually. Do not depend on the visual formatting of the list alone to convey information about the list structure. Using the List function allows a screen reader to convey to the user the structure of the list. 22

Lists - Example 23 A complex list organization. The organization of the list is conveyed by the screen reader in addition to the contents of each element.

TablesUse the Table function built into Word.Do not create tables using manual formatting.Always label columns and rows Designate the header row (“Repeat as Header Row”)Keep tables simple, no tables within a table, or merged/split cells. Place table “in line” to ensure proper reading order Note: Use a Text Box to accomplish format placement or box borders rather than a Table. 24

Table example 125 Federal Program CFDA# Type of Assistance Manner of Deliver Coverage/Potential Beneficiaries NCLB Title I, Part A, Improving Basic Programs Operated by Local Educational Agencies 84.010 Formula Grant Reimbursement Local education agencies NCLB Title I, Section 1003(g), School Improvement Grants   84.377 Formula Grant Reimbursement Local education agencies NCLB Title I, Part C, Migrant Education 84.011 Formula Grant Reimbursement Local education agencies NCLB Title I, Part D, Neglected/ Delinquent or At-Risk Students 84.013 Formula Grant Reimbursement Local education agencies NCLB, Title II, Part A, Improving Teacher Quality 84.367 Formula Grant Reimbursement Local education agencies NCLB, Title II, Part B Math Science Partnerships 84.366 Formula Grant Reimbursement Local education agencies/universities/ educational cooperatives Perkins Career and Technical Education Improvement 84.048 Formula Grant Reimbursement Local education agencies/universities/ NCLB Title III, Language Instruction for Limited English Proficient and Immigrant Students 84.365 Formula Grant Reimbursement Local education agencies NCLB, Title IV, Part B, 21st Century Community Learning Centers 84.287 Formula Grant Reimbursement Local education agencies/universities/ non-profit entities NCLB, Title VI, Part B, Rural Education Achievement Program 84.358 Formula Grant Reimbursement Local education agencies Column headings Regular table without merged or split cells. Can be navigated easily with a screen reader

Table example 226 FOR KDE/OCTE USE ONLY   School or District submitting request   Name and contact information   Name of NEW Career Pathway     Pathway Status Dates Date Received     Adopted   Reviewed By     Under-Development     Declined       Assigned CIP   Teacher Certification Assigned Program(s)   Existing:     Must Be Created:   Comments: No Column headings Irregular table with merged cells Difficult for a screen reader user to navigate

Table example 327 A workaround for Irregular tables without column headings: Each cell contains text identifying the cell. FOR KDE/OCTE USE ONLY School or District submitting request:   Name and contact information:   Name of NEW Career Pathway:     Date Received:   Pathway Status Dates: Adopted:    Under-Development:    Declined:    Reviewed By:   Assigned CIP:   Teacher Certification: Assigned Program(s):     Existing:   Must Be Created:   Comments:

Text Boxes The Text Box function in Word is typically used to:Provide a “spot highlight” to emphasis text such as section headingsTo provide a unique reading order (other than top to bottom, left to right) such as a flowchart. Contrast Ratio: If the text box has a background color or colored text be sure the minimum contrast ratio of 4.5:1 is met. Placement: Text wrapping should be “in line” for applications such as a section heading. Reading Order: When used to provide a unique reading order, check and adjust the reading order with Acrobat after conversion to PDF.28

Text Box example – non standard reading order 29 Reading order is unique: Left to right, but some vertical boxes are read together, then the next box to the right. Create in WordMake PDF Modify reading order with AcrobatCan be navigated with a screen reader

Text Box example – non standard reading order 30Reading order is unique: Create in WordMake PDF Modify reading order with AcrobatCan be navigated with a screen reader

LanguageIdentify all non-English text with the appropriate languageAllows a screen reader to change pronunciation rules to match the languageSets the appropriate spell check dictionary in Word. Note: the default language is US English in Word for US versions of Word / WindowsNote: the language function is under the “Review” tab in WordUpon conversion to PDF verify the “primary language” is set in the PDF. The document language is under the “advanced” tab on document properties for the PDFLanguage is automatically checked when the Acrobat accessibility check function is run 31

ColorColor is never used as the only means to convey information: Pie Charts and Bar Charts: use text labels and / or geometric patterns in addition to color Line graphs: use unique line patterns Maps (e.g. Kentucky maps): Include a table with the identical information Color combined with a shape is acceptable. Use of color to provide text emphasis is acceptable as long as the meaning does not depend solely on the color. Note: Logos have no color or contrast requirement 32

Example: accessible color pie chartSource: Highcharts.com33

Example: accessible color pie chartSource: IBM34

Example: accessible line graphSource: Highcharts.com35 Chart meets visual accessibility requirementsAdd a table for non-visual users

Example: color bar graphInaccessible – color onlyInaccessible – Red / Green 36 Accessible – Text labels Accessible – colors Add Alt Text with the same data Source: Penn State website

Example: color only information map 37 Color coded map, with color as the only indicatorSource: KDE website

Example: map + table 38 Map image’s Alt Text includes direction to the table for more information“See the table listing the school contact information” The table contains the at least same information as the map, or in this example more information. Source: KYTECH

Limited Perception of Color39 Red / Green color coded Map – Normal color perception Source: KDE website

Limited Perception of Color40Red / Green color coded Map – Color blind perception

Color Blindness Reference Chart41 Source: cog5games

Limited Perception of ColorAvoid the following color combinations:Green & RedGreen & Brown Blue & PurpleGreen & BlueLight Green & YellowBlue & GreyGreen & GreyGreen & BlackNote: color must never be used as the only means to convey information. 42

Shape, Size etc. If a shape or size is used to present information, always provide the same information using a secondary means.Text labels (preferred) Color can be used in combination with shape and size. Examples: (use text + color + shape)* (required field) * Name: ______________Select ONE of the following items: __ Green Beans __ New Red Potatoes __ Brown Pinto Beans 43

HyperlinksUse unambiguous, complete text for the link: Examples: Kentucky Department of Education: Homepage.Kentucky Board of Education meeting agenda, 2/7/2018Email John Doe for the date for the next training session Do not use simple or unclear text as link text: Examples: Use instead: “ here ” or “ click here” Click here for next week’s schedule“more” or “ read more ” Read more about water falls “ contact ” If interested contact John Doe “ email ” email John Doe for more information Note: The raw hyperlink address should used if the document is intended to be printed. http ://education.ky.gov . 44

Headers / Footers / Overlays / WatermarksA Screen Reader does not read the contents of the header, footer, page overlay, or watermark. Repeat important information at least once in the body of the document. For example: Document information (e.g. title) at the beginning of the main textContact information at the end of the main text45

Example: HeaderRepeat the header information in the body on just the first page of the document 46

Example: FooterRepeat the footer information in the body on just the last page of the document 47

ImagesText wrapping for images should be “in line”. The “Alt Text Description” field for the image must describe the image The extent of the description should be proportional to the role of the image Simple images can use a short description, complex images need a more detailed description Images used only for decoration should have a blank Alt Text field. If in doubt about the use of the image, include a simple alt text label If the images contains text, the text must be duplicated in the Alt Text field. Flow charts, require a complete text description of the logical flow of the chart.Simple flow charts can be described in the Alt Text fieldComplex flow charts should have a text description in the body. Logos: Decorative logos – blank Alt Text Required logos – Identify the logo in the Alt Text 48

Example: Image without Alt Text 49 Source: KSB website User of image in this case was “decorative” no Alt Text is neededScreen Reader skips image with blank Alt Text field A quote – space - quote can be used in the Alt Text field to satisfy the Accessibility Check Function

Example: Image with Alt Text 50Source: Kentucky Teacher website The Alt Text Description field contains a short description of the photo The Title field can be left blank

Example: Illustrative Image51Source: KDE website The text completely describes the actions to be taken The images only illustrate the screen view for these steps and are NOT critical to the directions in the text. The Alt Text can be very simple “Screen shot of search results”

Example: Flow Chart 52 Flow charts have a dynamic reading order that can change at each decision block. However, the screen reader follows a static reading order and hence cannot correctly convey the information in the flow chart. Provide the flow chart as an image and include a text description of the chart, the logical flow, and decision points. Source: KDE website

Example: Flow Chart 53A flow chart as a single image:The alt text completely describes the flow chart and the logical steps containedThe screen reader “sees” a single image and reads the Alt Text description Meet Flo. Flo has a disability. Flo needs assistive technology. Flo might participate in a public awareness activity. At this activity Flo is introduced to assistive technology materials that interest Flo. Or Flo might call the local assistive technology program for information and assistance. Flo gets information about assistive technology and learns about resources. Flo might visit the local assistive technology program’s demonstration center. An Assistive Technology Pro shows Flo products and how to use them. Flo might learn about the assistive technology lending program. Flo asks to borrow a product. Flo finds a product that meets her needs and wants to own it. Flo learns about options for getting the product. Flo might decide to use the state financing program or the re-utilization program. The state financing program might be able to help Flo get a new product. The re-utilization program might be able to help Flo get a reused product at no to little cost. Flo receives the product and is happy. Flo is done with the assistive technology and decides to provide it back to the local assistive technology program through the re-utilization program to continue the process. Or Flo needs a new piece of assistive technology and starts the process again with information and assistance. Source: KATS web site

Forms“Print” forms should be converted to fillable PDF FormsProcess: Create or update the form in Word Convert to a PDF Use the Prepare Form function in Acrobat Pro DCEdit the form as necessary in Acrobat The resulting PDF form: Can be filled out using Reader (saved and/or printed)Can be printed via Reader and filled out manually 54

Example: Print form converted to a fillable form Word Form55 Fillable PDF Form

Checking for AccessibilityWhen the document is complete and before converting to a PDF or distributing check for compliance with accessibility requirements: Use the KDE accessibility checklist for Word to ensure all accessibility requirements have been addressed. Run the Word “Check Accessibility” tool.Perform the manual accessibility checksCorrect the accessibility issues before distributing or converting to PDF.56

Microsoft “Check Accessibility” toolWord 2013 has a built-in “Check Accessibility” tool:The tool can be found under:File>Info>Check for Issues/Check Accessibility The check tool can be installed on toolbar File>Options>Customize RibbonThe tool can be run at any time during the edit process, or run continuously The tool primarily checks the use of Word’s formatting functions The tool cannot detect inappropriate use of fonts/colors/columns/tables, etc. 57

Manual Accessibility ChecksThe following items must be verified manually in Word: __ Contrast Verify the contrast ratio between text and background when either color text and/or a color background is used. The minimum ratio is 4.5:1, use a contrast checking tool. __ Hyperlinks Verify the hyperlink text clearly explains the purpose of the link and is unique. __ Headers / Footers / Watermarks Verify vital information is included in the body. __ Color and Shapes Verify information is not conveyed by color or shape alone. __ Fonts Verify stylized fonts are not used. __ Images Verify images do not contain text. Or, if text is in the image, the text is repeated in the Alt Text field. __ Language Verify all non-English text is identified with the correct language. 58

File Formats for Microsoft Office DocumentsSave files in the latest Word/Excel/PowerPoint formats(Office Open XML File Formats) Word: Word Document (.docx) Excel: Excel Workbook (.xlsx) PowerPoint: PowerPoint Presentation (.pptx) Preferred distribution format for Word is PDFDo not use “compatibility” formats (Older Microsoft file formats do not support accessibility)Word 97 – 2003Word Macro enabled PowerPoint 97 – 2003 PowerPoint Macro enabled Excel 97 – 2003 Workbook Excel Macro enabled 59

Tags?Microsoft Office TagsPDF TagsHTML Tags Tags are simply the imbedded formatting codes that give the document or web page it’s structure. Tags define headings, paragraphs, lists, tables, etc. Tags determine the visual appearance of the document or page.Tags are used by assistive technology (e.g. a screen reader) to determine content, structure and correct reading order. PDF documents must be tagged to be accessible. 60

Saving as PDF from WordPrior to converting Word to PDF correct any accessibility issues.PDF options when saving a Word file as PDF:Check – Document structure tags for accessibility Check – Create bookmarks using headings if bookmarks are desired Uncheck – Bitmap text when fonts may not be embeddedNote: PDF/A -- Option is Archive (not accessibility) means the document meets the archive standard,Can be used if desired, usually causes all fonts to be embedded but does not usually conflict with accessibility61

Saving as PDF from Word62 Options to select when converting Word documents to PDF Deselect “Bitmap text” when converting Word documents to PDF

Options to Verify the PDF versionOpen the document in Adobe Reader Verify the document visuallyUse built-in Adobe “Read Out Loud” function Use the Acrobat Pro DC Accessibility check functionVerify the accessibility checks in AcrobatCheck and modify the document’s Reading Order 63

Use Adobe Acrobat Pro DCAcrobat Pro DC Accessibility check function Verify / correct reading order issues Text boxes Fillable Forms Diagrams / Flow charts Create fillable forms Convert scanned documents to readable text 64

Conclusion of Presentation Remember: We strive to make content accessible to accommodate the needs of the widest possible audience of users because it’s the right thing to do!I’m available if you have questions or would like to talk about specific issues: Dwight LewisSection 508 Accessibility Consultant Office : (502) 564-2000, ext. 4620  DID: (502) 892-6176 Email: Dwight.Lewis@education.ky.gov 65

Reference:Guides and Tools

Online Accessibility TutorialsCreating Accessible Microsoft Office 2013-2016 Documents https://gov.texas.gov/organization/disabilities/accessibledocs2013-16A series of short “how to” videos covering: WordExcelPowerPointOutlook (most are less than 10 minutes) 67

Accessibility Guides for Word 2013Create Accessible Electronic Documentshttps://www.section508.gov/content/build/create-accessible-documents Basic Authoring and Testing Guide for Microsoft Word 2013https://www.section508.gov/sites/default/files/Section%20508%20Basic%20Authoring%20and%20Testing%20Guide%20Word%202013%20v%201%200%2012%2014%202015....doc Basic Authoring and Testing Checklist for Microsoft Word 2013https://www.section508.gov/sites/default/files/Section%20508%20Basic%20Authoring%20and%20Testing%20Guide%20Word%202013%20Checklist%20v%201.0%20..._0.doc Creating Accessible Documents with Microsoft Word 2013, a one page reference http :// ncdae.org/resources/cheatsheets/pdf/word2013.pdf 68

Microsoft Accessibility GuidesMake your Word documents accessible https://support.office.com/en-us/article/Make-your-Word-documents-accessible-d9bf3683-87ac-47ea-b91a-78dcacb3c66d Make your Outlook email accessiblehttps://support.office.com/en-us/article/Make-your-Outlook-email-accessible-71ce71f4-7b15-4b7a-a2e3-cf91721bbacb?ui=en-US&rs=en-US&ad=US Make your Excel spreadsheets accessible https :// support.office.com/en-us/article/Make-your-Excel-spreadsheets-accessible-6cc05fc5-1314-48b5-8eb3-683e49b3e593?ui=en-US&rs=en-US&ad=US Make your PowerPoint presentations accessiblehttps :// support.office.com/en-us/article/Make-your-PowerPoint-presentations-accessible-6f7772b2-2f33-4bd2-8ca7-dae3b2b3ef25?ui=en-US&rs=en-US&ad=US 69

ToolsColour Contrast Analyser (CCA): (free download) https://www.paciellogroup.com/resources/contrastanalyser/ Screen Magnifier: (built into Windows)Alt+control+del, select “Ease of Access” icon in lower left corner, select MagnifierNVDA Screen Reader: (free download)https://www.nvaccess.org/Learn NVDA (American Foundation for the Blind) http :// www.afb.org/info/living-with-vision-loss/using-technology/assistive-technology-videos/learn-nvda/1234?gclid=CKn-1cGIhtQCFdgegQodzAEKiA 70