POUR
CONTRAST
WCAG
Traci Notes
Accessibility Emails
Genially
Disabilities: Visual- range from some vision loss; loss of visual acuity, or sensitivity to specific or bright colors; to complete or uncorrectable loss of vision in either or both eyes. Visual Disabilities include: blindness, low vision, color blindness Hearing- include partial to complete hearing loss and low hearing Mobility- physical and mobility disabilities cause limitations in independent, purposeful physical movement of the body or one or more extremities. Include- limited mobility, tremors, and paralysis Cognitive- may occur on their own or as a resulty of injury, Include- vestibular disorders, dyslexia, memory, and linguistic, reading or verbal comprehension
Document Accessibility: Micro Excel
Checklist
Document Accessibility:Micro Word
Level Access Extension
WCAG in Detail
Title Tab
Contrast: difference in brightness between foreground and background
both white and black backgrounds, use opposite colors for box and background - they must also meet a minimum size requirement 6. Contrast Requirements for Links Contained in Paragraphs- need to be identifiable - can be underlined - can use color: must have minimum 4.5:1 to background color, paragraph color must have a 4.5:1 of background color and LINK TEXT TO PARAGRAPH TEXT COLOR must have a minimum contrast of 3:1 (Example) - text formatting- bright colored text , too much color can cause migrains; Light text on Dark Background is much harder to read 7. Flashing Content- (may cause seizures), 2 things to consider: speed and color - page content should never flash more than 3 times in a second - red flashes tend to be more sensitive thatn other colors Success Criterion 2.3 Seizures and Physical Reactions
Contrast
1. Color Contrast is for everything: headings, buttons, graphs, hyperlinks, flashing content 2. strong contrast ratio ensures that text is readable and objects are perceivable - ratios apply to all states of an element -AA requires that normal text has a min. of 4.5:1 with background, AAA requires normal text is 7:1 with background and large is 4.5:1 with background (Example) - when using text with outlines or halos: outline or border is the foreground color (Example) - text on images needs to pass contrast, every pixel with background must have good contrast with every pixel of foreground 3. Incidental elements (those that have no affect on the usability of the content), do not have any contrast requirements: inactive user interface components, pure decoration, not visible, logo types 4, Contrast ratio between non-text elements and background needs to be at least 3 to 1. (applies to all states: hover, focus, etc) - Elements to consider: buttons, links, media controls, non-text navigational elements, Icons, interactivity indicatorys (<,>,+,etc...) - Charts 5. Visible Focus Indicator- default browser focus indicators ALL have poor contrast (Safari, Chrome, etc...) - use an indicator that meets the 3 to 1 contrast with
Accessibility Emails
Document Accessibility: Micro Excel
Document Accessibility:Micro Word
Level Access Extension
Resources:
WCAG in Detail
University of Louisville Color Contrast Guidelines for 1.4: Distinguishable
Title Tab
Email- read visually, may need assistive tech like text to speech, or refreshable Braille display.
Animation - can have various impacts on users with disabilities: vestibular disorders, motion sensitivity and photo-sensitive seizure disorders - safely include these is emails by reviewing the following: ensure elements blink or flash at a safe threshold ( 3 times per second), ensure animated gif images stop moving within 5 seconds (watch the loop cycle when creating) Color -can be used for styling, but not to convey info (example color highlights to convey importance; red-high, etc...) - WCAG contrast recommendations - Level Access Contrast Checker - uses an algorithm to chek color contrast, but not guaranteed to meet compliance - Eyedropper Tool- use to test for contrast Data Tables - Outlook Considerations- must be accessible using screen reader, Directions on How To - HTML Table- press here for simplified explanation Images -Use Text Instead of Images of Text- it can be adapted by the user- Exceptions - Alternative Text- read as a block when using asst. tech, it is limited in length and in how users can read it. Large images conveying a lot of info would not provide an efficient user experience
CONTRAST
Accessibility Emails
Users With Vision and Cognitive Disabilities 1. Screen readers- provide speech output of digital contnet to allow users to navigate, read and interact with content. It is done through braille display or synthesized speech. They are controlled with the keyboard (on desktops) or the Accessibility Settings (controlled with swipe and tap gestures) on iOS devices. - Commonly used assistive tech: NVDA Screen Reader, Zoom Text, and Dragon Naturally Speaking 2. System Settings- users with low vision and color-blindness have different settings available to enhance contrast to make it easier to read. Windows- uses a HIgh Contrast Mode, Email applications like Outlook allow users to customize the themes and colors Users Who Are Deaf or Hard of Hearing - Captions are important in making multimedia accessible, emails may not contain multimedia, but frequently link out Users with Mobility Disabilities - may have difficulty using a mouse and rely on the keyboard o interact with devices. - other tools include: switch devices, eye-tracking tech, mouth sticks, and voice recognition
Page 2 Notes
Document Accessibility: Micro Excel
Document Accessibility:Micro Word
Level Access Extension
WCAG in Detail
Title Tab
Resources:
Images (continued...) - Alternative Text-Example Alt Text is a text description of the content contained in images. It's acts as an alternative to the visual experience., it conveys the info in the image to users, images THAT DISPLAY INFO must ALWAYS include alt text to convey the meaning. It should be short and conciste, but provide the context. Example for Outlook, Example for HTML - Reviewing image alt text is a manual process, meaning it's manually applies Lists - Need to be properly formatted - Outlook: the unordered and ordered list controls MUST BE used to insert list content. This ensures that list structures are properly identifiable by asst. tech. Even if tempted, don't manually make lists using dashes, etc...these do not convey list structure reliably. - Poor Example - Proper Example - Add a Numbered or Bulleted list to a Message - HDMI: you must use valid HTML list markups, -HDMI testing tool: a free bookmarklet that povides a clearn interface for reviewing content for accessibility: ANDI Page Structure - Headings are used to show sections of grouped content.Allow users to understand the importance of leveled blocks of information and hierarchy of textual content. They MUST be programatically structured, not just simply styled with larger or bolded text.
- Outlook Example - HTML Example Logical Content Order - Reading typically flows left to right and top to bottom, you must be sure the reading order of content is logical in various layouts. - HTML emails must ensure that the content is structured in a way that creates a logical intuitive reading order. Example - Outlook provides an accessibility checker . This allows you to inspect your email for accessibility issues and apply any recommendations for the issues discovered. Guide for Outlook Accessibility Checker
Excel- notes center around Microsoft Office Desktop Excel
-Adding Columns and Rows to a Table - click the next available cell that you want to add and begin inputting data Naming a Table: improves clarity, accessibility and functionality - Directions to Naming a Table Descriptive Labeling: should be done for: file names, document titles, worksheet titles, table names - File name: give a descriptive file name - Document title: main title or headline of doc, when Excel doc converts to PDF the doc title is displayed at top of file (not file name), file and doc titles can be the same. - Worksheet Title: largest unit within Excel doc, each worksheet must be titled correctly Hierarchy of Labels - should reflect hierarchy of elements: Document title>Workbook title>Table Name Descriptive Labeling - Guidelines Use of Color - be sure there is a strong contrast if using different cell colors -add additional info to convey info other than just color (additional row with same info) Important Tips
CONTRAST
- If using a template, be sure it is accessible, not all are. Screen Reader and Excel Functionality PLUS Strategies for Optimal Function - Excel sheets are very difficult to read through a screen reader, here is how they operate: 1. once opened, the reader starts with the content in cell A1 STRATEGY 2. arrow keys navigate the cells STRATEGY 3. readers can NOT read comments STRATEGY 4. they do NOT announce when last column or row have been reached, this makes it difficult to know when the worksheet ends STRATEGY 5. they can NOT read hidden columns or rows STRATEGY Table Formatting - create before or after inputting data. -if you haven't put in any data, highlight the cells you want included, you can edit any rows, etc later - if you HAVE data, select the cell that will be the upper-left cell, select the Home tab, then select Format as table, choose an accessible table style, in the pop up add: ensure cell range is correct, select the box to indicate that "my table has headers"
Accessibility Emails
Document Accessibility: Micro Excel
Document Accessibility:Micro Word
Level Access Extension
WCAG in Detail
Title Tab
Alternative Text: - for images and non-text content to offer an alternative to the visual experience (EXAMPLE) -To add: Right click on image, select edit alt text, enter the appropriate alt text in the field, (DO NOT use "generate a description for me") -an alternate method is to go throught the Picture Format tab Decorative Images: - any image or non-text content should be marked as decorative (imp. because screen readers will skip) .- To add: complete like above, but click on "mark as decorative" box Text Wrapping for Image: - Only images with the "Wrap Text" style of "In Line with Text" are recognized by screen readers (Example) Positioning Images: -To add: Right click image, from menu select "wrap text>In line with text" Using and Creating Headings: -Heading structure is the most CRITICAL aspect of an accessible document, they form the main structure of a document- DO NOT SKIP
CONTRAST
- there should be one heading level 1 on the page, reserved for the MAIN heading. all others should be under the heading level 1 forming parent-child relationships, heading levels 2-6 are less important Styling Headings: - created and updated using the Styles gallery located on the HOME tab - to apply: Option 1 or Option 2 or Shortcut Keys - to update heading styles: 1. next to Styles, open the Styles Pane, 2. hover over the heading you want to update to reveal an arrow, select the arrow, 3. from the menu select Modify Style, 4. in the dialog that pops up, you can update the heading style - match current text format (be sure it's properly identified) by 1. select the text in your doc that you want to be the heading, 2. in the Styles gallery right click the correct heading type, from the menu select "Update to Match Selection" Navigating by Headings: - you can navigate a doc by headings using the Navigation pane located on the view tab.
Accessibility Emails
Document Accessibility: Micro Excel
Document Accessibility: Micro Word
Page 2 Notes
Level Access Extension
WCAG in Detail
Title Tab
Navigating by Headings(continued...) - The Navigation pane has an indented structure which indicates each heading's level. Clicking on the heading will take you directly to the heading of that document -a logical heading structure functions like a Table of Contents - Creating a Table of Contents in Windows: - 1. move cursor to where you want the ToC, 2. on ribbon select References tab, 3. select ToC button to expand drop down, 4. from the Built-In menu, select Automatic Table format Columns: - used to bread up large bodies of text that can't fit in single block of text on a page, commonly used in print, DO NOT use tab key or space bar to create columns - Formatting columns: Step 1- select the text you want to put into columns, 2. on the ribbon, select Layout, 3. select the Columns button and choose the number of columns, 4. to customize, select More Columns and adust your columns in the dialog box Tables: - To create: 1. place cursor where you want table to be, 2. on ribbon, select Insert tab, 3. select Table to open dropdown, 4. select Insert a Table, 5. select number of columns and rows and okay - mouse users can hover over grid in Table menu and select Table Headers: - add proper heading or title in table - you must properly identify row and column headers, how it is read - to create: 1. select Table Design, Step 2- keep tables SIMPLE, do not use merged cells - Repeat Header Rows for table that spans multiple pages.To do: Step 1. select the first row of the table, 2. select Table Layout, Step 3
Readability: - Aspects: write short sentences (20 words max), keep paragrahs short (5-7 sentences max), use active (not passive) voice - for a general audience, aim for 8th grade reading level, educated audience aim for 12th grade reading level -Enabling Readability Statistices: 1. file, select Options, 2. in Word Options, select Proofing, 3. When Correcting Spelling and Grammar in Word, check the "Show Readability Stats" box, okay -once enabled, readability stats will be presented in dialog after every spellcheck Counts, Averages, Readability -Hemmingway App- free web-based program that provides readability scores and guide for improvements Metadata (like a label or tag, in a doc it includes: author name, date created and modified, title and keywords, file type) - Filename is important, it should be succinct and describe the doc, avoids special characters, ensure screen readers will be able to read the filename by separating words (space, hyphen or camelCase) - to add: 1. select File, Info, Properties and enter in Title field, save Accessibility Checker: - Appears on Syles and Alt Text Pane when open - Inspection Results - to open: 1. select File, 2. Info, 3. Check for Issues, 4. Check Accessibility Creating PDFs: (Adobe) - To create: 1. save file, 2. Acrobat tab select Create PDF, AVOID using Save as PDDF and Print to PDF
Level Access Browser Extension: - part of accessibility toolkit - you can test anything accessible via your browser - Extension App Link
CONTRAST
Accessibility Emails
Document Accessibility: Micro Excel
Document Accessibility:Micro Word
Level Access Extension
WCAG in Detail
Title Tab
What is WCAG: - series of guidelines that make web content more accessible to people with disabilities WCAG 1.0 published in 1999, 2.0 in 2008, 2.1 in 2018, 2.2 in 2023 (each builds upon the other) Four Principles (POUR): - Perceivable - Operable - Understandable - Robust 13 Guidelines: -4 principles are comprised of 13 guidelines - Perceivable - Operable - Understandable - Robust Conformance Level: - Each of the guidelines fall under one of 3 levels 87 Success Criteria: - Access here Perceivable Guidelines -1.1 Text Alt (applies to images, charts, diagrams, infographics, interactive images, linked images,
and icons. be concise rather than too wordy. - 1.2 Time-Based Media (content like audio or video) Transcripts, Captions, Audio Descriptions, Sign Language - 1.3 Adaptable (needs to be created so it adapts to the given situaton; screen size, assistive tech, tables, form field with a label) - 1.4 Distinguishable (to see or hear content) color contrast, adapt colors to suit preference (dark or light mode), ability to enlarge text Operable Guidelines: - 2.1 Keyboard Accessible (all functionality is available on keyboard) -2.2 Enough Time (any content that has a time limit needs a way to turn it off), content that moves, blinks, etc... needs to be able to be stopped - 2.3 Seizures and Physical Reactions- no content should flash more than 3 times in one second, beware of red flashing -2.4 Navigable: -Focus Order- the order in which actionable elements receive keyboard focus.
CONTRAST
Accessibility Emails
Document Accessibility: Micro Excel
Document Accessibility:Micro Word
Level Access Extension
WCAG in Detail
Page 2 Notes
Title Tab
Focus Order (continued...) - Generally navigated left to right, up to down - Visible Focus Indicator- only one element can have keyboard focus at one time, it is critical to make it obvious - focus indicator is typically a box that indicates where on the page you are as you tab through the experience, all default indicators have poor focus, be sure to CHANGE the indicator to align its style with your branding. It should be 3:1 contrast, also consider the weight of the border and a minimum size/area for your focus indicator - Bypass Blocks- provide a means to skip over large blocks of content. Skip link does that, special type of liknk that allow keyboard users to bypass large blocks of content, typically hidden by default, Example - User's Location- "You are Here" Indicators", 1. Breadcrumbs- show's a page's location in the site hierarchy, helps people with short attention span, another example: providing clear page titles which helps all users becuase descriptive titles help identify the page content Example - Section Headings- should clearly communicate the structure and relationshipof the content on the page. Smaller elements like links need to clearly indicate where they will take the user, label the link for what it offers - Input Modalities- ensureing users can operate functionality using a variety of inputs, users should be free to switch from a keyboard to a mouse to a touch device to a sylus to a voice controller, etc... touch screens need to provide an alt action that requires one finger, basically buttons to enable a single click/ double click or a click-and-hold Example - When designing the single pointer al, every user should be able to activate the control no matter which input device they use., must meet minimum size requirements, visible text/label must be the same or similar to programmatic label Example Readable: - about ensuring the content is readable and understandable - aim for 8th grade readability (use app to check), expand acronyms
define unusual words and describe pronunciations. - needs to be read and pronounced properly by assistive tech -3.2 Predictable- ensure web pages appear and operate in predictable ways - find comfort in patterns and predictability -stay away from hidden components - 3.3 Input Assistance- forms, mark fields that are mandatory, instructions are clear, labels are understandable Example - If mistakes are made, be sure to notify them and help in fixing errors. Example - Offer auto complete or a way to select info that was previously submitted Compatible -about maximizing compatibiltiy with current and future tech -use coding best practices ensuring the code is clean and standardized
CONTRAST
Accessibility Emails
Document Accessibility: Micro Excel
Document Accessibility:Micro Word
Level Access Extension
WCAG in Detail
Title Tab
INcorrect
Correct
The manually created bullet points (asterisks) will NOT convey the list structure reliably to all users.
Genially and Accessibility
How to Make Your Geniallys More Accessible
In this example, the list is improved by selectin gthe desired text and applying bullet formatting using the Bullets option in Outlook.
WCAG- TU
Inst. Coaches
Created on September 24, 2025
Start designing with a free template
Discover more than 1500 professional designs like these:
View
Genial Calendar 2026
View
School Calendar 2026
View
January Higher Education Academic Calendar
View
School Year Calendar January
View
Academic Calendar January
View
Choice Board Flipcards
View
Comic Flipcards
Explore all templates
Transcript
POUR
CONTRAST
WCAG
Traci Notes
Accessibility Emails
Genially
Disabilities: Visual- range from some vision loss; loss of visual acuity, or sensitivity to specific or bright colors; to complete or uncorrectable loss of vision in either or both eyes. Visual Disabilities include: blindness, low vision, color blindness Hearing- include partial to complete hearing loss and low hearing Mobility- physical and mobility disabilities cause limitations in independent, purposeful physical movement of the body or one or more extremities. Include- limited mobility, tremors, and paralysis Cognitive- may occur on their own or as a resulty of injury, Include- vestibular disorders, dyslexia, memory, and linguistic, reading or verbal comprehension
Document Accessibility: Micro Excel
Checklist
Document Accessibility:Micro Word
Level Access Extension
WCAG in Detail
Title Tab
Contrast: difference in brightness between foreground and background
both white and black backgrounds, use opposite colors for box and background - they must also meet a minimum size requirement 6. Contrast Requirements for Links Contained in Paragraphs- need to be identifiable - can be underlined - can use color: must have minimum 4.5:1 to background color, paragraph color must have a 4.5:1 of background color and LINK TEXT TO PARAGRAPH TEXT COLOR must have a minimum contrast of 3:1 (Example) - text formatting- bright colored text , too much color can cause migrains; Light text on Dark Background is much harder to read 7. Flashing Content- (may cause seizures), 2 things to consider: speed and color - page content should never flash more than 3 times in a second - red flashes tend to be more sensitive thatn other colors Success Criterion 2.3 Seizures and Physical Reactions
Contrast
1. Color Contrast is for everything: headings, buttons, graphs, hyperlinks, flashing content 2. strong contrast ratio ensures that text is readable and objects are perceivable - ratios apply to all states of an element -AA requires that normal text has a min. of 4.5:1 with background, AAA requires normal text is 7:1 with background and large is 4.5:1 with background (Example) - when using text with outlines or halos: outline or border is the foreground color (Example) - text on images needs to pass contrast, every pixel with background must have good contrast with every pixel of foreground 3. Incidental elements (those that have no affect on the usability of the content), do not have any contrast requirements: inactive user interface components, pure decoration, not visible, logo types 4, Contrast ratio between non-text elements and background needs to be at least 3 to 1. (applies to all states: hover, focus, etc) - Elements to consider: buttons, links, media controls, non-text navigational elements, Icons, interactivity indicatorys (<,>,+,etc...) - Charts 5. Visible Focus Indicator- default browser focus indicators ALL have poor contrast (Safari, Chrome, etc...) - use an indicator that meets the 3 to 1 contrast with
Accessibility Emails
Document Accessibility: Micro Excel
Document Accessibility:Micro Word
Level Access Extension
Resources:
WCAG in Detail
University of Louisville Color Contrast Guidelines for 1.4: Distinguishable
Title Tab
Email- read visually, may need assistive tech like text to speech, or refreshable Braille display.
Animation - can have various impacts on users with disabilities: vestibular disorders, motion sensitivity and photo-sensitive seizure disorders - safely include these is emails by reviewing the following: ensure elements blink or flash at a safe threshold ( 3 times per second), ensure animated gif images stop moving within 5 seconds (watch the loop cycle when creating) Color -can be used for styling, but not to convey info (example color highlights to convey importance; red-high, etc...) - WCAG contrast recommendations - Level Access Contrast Checker - uses an algorithm to chek color contrast, but not guaranteed to meet compliance - Eyedropper Tool- use to test for contrast Data Tables - Outlook Considerations- must be accessible using screen reader, Directions on How To - HTML Table- press here for simplified explanation Images -Use Text Instead of Images of Text- it can be adapted by the user- Exceptions - Alternative Text- read as a block when using asst. tech, it is limited in length and in how users can read it. Large images conveying a lot of info would not provide an efficient user experience
CONTRAST
Accessibility Emails
Users With Vision and Cognitive Disabilities 1. Screen readers- provide speech output of digital contnet to allow users to navigate, read and interact with content. It is done through braille display or synthesized speech. They are controlled with the keyboard (on desktops) or the Accessibility Settings (controlled with swipe and tap gestures) on iOS devices. - Commonly used assistive tech: NVDA Screen Reader, Zoom Text, and Dragon Naturally Speaking 2. System Settings- users with low vision and color-blindness have different settings available to enhance contrast to make it easier to read. Windows- uses a HIgh Contrast Mode, Email applications like Outlook allow users to customize the themes and colors Users Who Are Deaf or Hard of Hearing - Captions are important in making multimedia accessible, emails may not contain multimedia, but frequently link out Users with Mobility Disabilities - may have difficulty using a mouse and rely on the keyboard o interact with devices. - other tools include: switch devices, eye-tracking tech, mouth sticks, and voice recognition
Page 2 Notes
Document Accessibility: Micro Excel
Document Accessibility:Micro Word
Level Access Extension
WCAG in Detail
Title Tab
Resources:
Images (continued...) - Alternative Text-Example Alt Text is a text description of the content contained in images. It's acts as an alternative to the visual experience., it conveys the info in the image to users, images THAT DISPLAY INFO must ALWAYS include alt text to convey the meaning. It should be short and conciste, but provide the context. Example for Outlook, Example for HTML - Reviewing image alt text is a manual process, meaning it's manually applies Lists - Need to be properly formatted - Outlook: the unordered and ordered list controls MUST BE used to insert list content. This ensures that list structures are properly identifiable by asst. tech. Even if tempted, don't manually make lists using dashes, etc...these do not convey list structure reliably. - Poor Example - Proper Example - Add a Numbered or Bulleted list to a Message - HDMI: you must use valid HTML list markups, -HDMI testing tool: a free bookmarklet that povides a clearn interface for reviewing content for accessibility: ANDI Page Structure - Headings are used to show sections of grouped content.Allow users to understand the importance of leveled blocks of information and hierarchy of textual content. They MUST be programatically structured, not just simply styled with larger or bolded text.
- Outlook Example - HTML Example Logical Content Order - Reading typically flows left to right and top to bottom, you must be sure the reading order of content is logical in various layouts. - HTML emails must ensure that the content is structured in a way that creates a logical intuitive reading order. Example - Outlook provides an accessibility checker . This allows you to inspect your email for accessibility issues and apply any recommendations for the issues discovered. Guide for Outlook Accessibility Checker
Excel- notes center around Microsoft Office Desktop Excel
-Adding Columns and Rows to a Table - click the next available cell that you want to add and begin inputting data Naming a Table: improves clarity, accessibility and functionality - Directions to Naming a Table Descriptive Labeling: should be done for: file names, document titles, worksheet titles, table names - File name: give a descriptive file name - Document title: main title or headline of doc, when Excel doc converts to PDF the doc title is displayed at top of file (not file name), file and doc titles can be the same. - Worksheet Title: largest unit within Excel doc, each worksheet must be titled correctly Hierarchy of Labels - should reflect hierarchy of elements: Document title>Workbook title>Table Name Descriptive Labeling - Guidelines Use of Color - be sure there is a strong contrast if using different cell colors -add additional info to convey info other than just color (additional row with same info) Important Tips
CONTRAST
- If using a template, be sure it is accessible, not all are. Screen Reader and Excel Functionality PLUS Strategies for Optimal Function - Excel sheets are very difficult to read through a screen reader, here is how they operate: 1. once opened, the reader starts with the content in cell A1 STRATEGY 2. arrow keys navigate the cells STRATEGY 3. readers can NOT read comments STRATEGY 4. they do NOT announce when last column or row have been reached, this makes it difficult to know when the worksheet ends STRATEGY 5. they can NOT read hidden columns or rows STRATEGY Table Formatting - create before or after inputting data. -if you haven't put in any data, highlight the cells you want included, you can edit any rows, etc later - if you HAVE data, select the cell that will be the upper-left cell, select the Home tab, then select Format as table, choose an accessible table style, in the pop up add: ensure cell range is correct, select the box to indicate that "my table has headers"
Accessibility Emails
Document Accessibility: Micro Excel
Document Accessibility:Micro Word
Level Access Extension
WCAG in Detail
Title Tab
Alternative Text: - for images and non-text content to offer an alternative to the visual experience (EXAMPLE) -To add: Right click on image, select edit alt text, enter the appropriate alt text in the field, (DO NOT use "generate a description for me") -an alternate method is to go throught the Picture Format tab Decorative Images: - any image or non-text content should be marked as decorative (imp. because screen readers will skip) .- To add: complete like above, but click on "mark as decorative" box Text Wrapping for Image: - Only images with the "Wrap Text" style of "In Line with Text" are recognized by screen readers (Example) Positioning Images: -To add: Right click image, from menu select "wrap text>In line with text" Using and Creating Headings: -Heading structure is the most CRITICAL aspect of an accessible document, they form the main structure of a document- DO NOT SKIP
CONTRAST
- there should be one heading level 1 on the page, reserved for the MAIN heading. all others should be under the heading level 1 forming parent-child relationships, heading levels 2-6 are less important Styling Headings: - created and updated using the Styles gallery located on the HOME tab - to apply: Option 1 or Option 2 or Shortcut Keys - to update heading styles: 1. next to Styles, open the Styles Pane, 2. hover over the heading you want to update to reveal an arrow, select the arrow, 3. from the menu select Modify Style, 4. in the dialog that pops up, you can update the heading style - match current text format (be sure it's properly identified) by 1. select the text in your doc that you want to be the heading, 2. in the Styles gallery right click the correct heading type, from the menu select "Update to Match Selection" Navigating by Headings: - you can navigate a doc by headings using the Navigation pane located on the view tab.
Accessibility Emails
Document Accessibility: Micro Excel
Document Accessibility: Micro Word
Page 2 Notes
Level Access Extension
WCAG in Detail
Title Tab
Navigating by Headings(continued...) - The Navigation pane has an indented structure which indicates each heading's level. Clicking on the heading will take you directly to the heading of that document -a logical heading structure functions like a Table of Contents - Creating a Table of Contents in Windows: - 1. move cursor to where you want the ToC, 2. on ribbon select References tab, 3. select ToC button to expand drop down, 4. from the Built-In menu, select Automatic Table format Columns: - used to bread up large bodies of text that can't fit in single block of text on a page, commonly used in print, DO NOT use tab key or space bar to create columns - Formatting columns: Step 1- select the text you want to put into columns, 2. on the ribbon, select Layout, 3. select the Columns button and choose the number of columns, 4. to customize, select More Columns and adust your columns in the dialog box Tables: - To create: 1. place cursor where you want table to be, 2. on ribbon, select Insert tab, 3. select Table to open dropdown, 4. select Insert a Table, 5. select number of columns and rows and okay - mouse users can hover over grid in Table menu and select Table Headers: - add proper heading or title in table - you must properly identify row and column headers, how it is read - to create: 1. select Table Design, Step 2- keep tables SIMPLE, do not use merged cells - Repeat Header Rows for table that spans multiple pages.To do: Step 1. select the first row of the table, 2. select Table Layout, Step 3
Readability: - Aspects: write short sentences (20 words max), keep paragrahs short (5-7 sentences max), use active (not passive) voice - for a general audience, aim for 8th grade reading level, educated audience aim for 12th grade reading level -Enabling Readability Statistices: 1. file, select Options, 2. in Word Options, select Proofing, 3. When Correcting Spelling and Grammar in Word, check the "Show Readability Stats" box, okay -once enabled, readability stats will be presented in dialog after every spellcheck Counts, Averages, Readability -Hemmingway App- free web-based program that provides readability scores and guide for improvements Metadata (like a label or tag, in a doc it includes: author name, date created and modified, title and keywords, file type) - Filename is important, it should be succinct and describe the doc, avoids special characters, ensure screen readers will be able to read the filename by separating words (space, hyphen or camelCase) - to add: 1. select File, Info, Properties and enter in Title field, save Accessibility Checker: - Appears on Syles and Alt Text Pane when open - Inspection Results - to open: 1. select File, 2. Info, 3. Check for Issues, 4. Check Accessibility Creating PDFs: (Adobe) - To create: 1. save file, 2. Acrobat tab select Create PDF, AVOID using Save as PDDF and Print to PDF
Level Access Browser Extension: - part of accessibility toolkit - you can test anything accessible via your browser - Extension App Link
CONTRAST
Accessibility Emails
Document Accessibility: Micro Excel
Document Accessibility:Micro Word
Level Access Extension
WCAG in Detail
Title Tab
What is WCAG: - series of guidelines that make web content more accessible to people with disabilities WCAG 1.0 published in 1999, 2.0 in 2008, 2.1 in 2018, 2.2 in 2023 (each builds upon the other) Four Principles (POUR): - Perceivable - Operable - Understandable - Robust 13 Guidelines: -4 principles are comprised of 13 guidelines - Perceivable - Operable - Understandable - Robust Conformance Level: - Each of the guidelines fall under one of 3 levels 87 Success Criteria: - Access here Perceivable Guidelines -1.1 Text Alt (applies to images, charts, diagrams, infographics, interactive images, linked images,
and icons. be concise rather than too wordy. - 1.2 Time-Based Media (content like audio or video) Transcripts, Captions, Audio Descriptions, Sign Language - 1.3 Adaptable (needs to be created so it adapts to the given situaton; screen size, assistive tech, tables, form field with a label) - 1.4 Distinguishable (to see or hear content) color contrast, adapt colors to suit preference (dark or light mode), ability to enlarge text Operable Guidelines: - 2.1 Keyboard Accessible (all functionality is available on keyboard) -2.2 Enough Time (any content that has a time limit needs a way to turn it off), content that moves, blinks, etc... needs to be able to be stopped - 2.3 Seizures and Physical Reactions- no content should flash more than 3 times in one second, beware of red flashing -2.4 Navigable: -Focus Order- the order in which actionable elements receive keyboard focus.
CONTRAST
Accessibility Emails
Document Accessibility: Micro Excel
Document Accessibility:Micro Word
Level Access Extension
WCAG in Detail
Page 2 Notes
Title Tab
Focus Order (continued...) - Generally navigated left to right, up to down - Visible Focus Indicator- only one element can have keyboard focus at one time, it is critical to make it obvious - focus indicator is typically a box that indicates where on the page you are as you tab through the experience, all default indicators have poor focus, be sure to CHANGE the indicator to align its style with your branding. It should be 3:1 contrast, also consider the weight of the border and a minimum size/area for your focus indicator - Bypass Blocks- provide a means to skip over large blocks of content. Skip link does that, special type of liknk that allow keyboard users to bypass large blocks of content, typically hidden by default, Example - User's Location- "You are Here" Indicators", 1. Breadcrumbs- show's a page's location in the site hierarchy, helps people with short attention span, another example: providing clear page titles which helps all users becuase descriptive titles help identify the page content Example - Section Headings- should clearly communicate the structure and relationshipof the content on the page. Smaller elements like links need to clearly indicate where they will take the user, label the link for what it offers - Input Modalities- ensureing users can operate functionality using a variety of inputs, users should be free to switch from a keyboard to a mouse to a touch device to a sylus to a voice controller, etc... touch screens need to provide an alt action that requires one finger, basically buttons to enable a single click/ double click or a click-and-hold Example - When designing the single pointer al, every user should be able to activate the control no matter which input device they use., must meet minimum size requirements, visible text/label must be the same or similar to programmatic label Example Readable: - about ensuring the content is readable and understandable - aim for 8th grade readability (use app to check), expand acronyms
define unusual words and describe pronunciations. - needs to be read and pronounced properly by assistive tech -3.2 Predictable- ensure web pages appear and operate in predictable ways - find comfort in patterns and predictability -stay away from hidden components - 3.3 Input Assistance- forms, mark fields that are mandatory, instructions are clear, labels are understandable Example - If mistakes are made, be sure to notify them and help in fixing errors. Example - Offer auto complete or a way to select info that was previously submitted Compatible -about maximizing compatibiltiy with current and future tech -use coding best practices ensuring the code is clean and standardized
CONTRAST
Accessibility Emails
Document Accessibility: Micro Excel
Document Accessibility:Micro Word
Level Access Extension
WCAG in Detail
Title Tab
INcorrect
Correct
The manually created bullet points (asterisks) will NOT convey the list structure reliably to all users.
Genially and Accessibility
How to Make Your Geniallys More Accessible
In this example, the list is improved by selectin gthe desired text and applying bullet formatting using the Bullets option in Outlook.