uaa alaska eduits Web Accessibility Identifying and resolving
uaa. alaska. edu/its Web Accessibility Identifying and resolving inaccessible web content. Chris Huston WEB / GRAPHIC DESIGN ENGINEER in WEB/APPS ITS (in-person trainings) Holli Yancey INSTRUCTIONAL DESIGN and TECHNOLOGY DIRECTOR, CHD (distance trainings) UA is an AA/EO employer and educational institution and prohibits illegal discrimination against any individual: www. alaska. edu/nondiscrimination
Why are we doing this (again)? • Accessibility is GOOD! • WCAG 2. 0 = making web content accessible – Web Accessibility Initiative (WAI) – W 3 C • Office of Civil Rights (OCR) complaint – Agreement to have ALL web authors complete annual training in accessibility – All University web page site and proof scores will rate at 95 or above by October 2019
Alternate Image Descriptions • Every image must have an alt attribute • Images of text must contain the same text presented in the image • Context means everything alt=“White Cat looking cross-eyed at Bee on nose”
Alternate Image Descriptions • Every image must have an alt attribute • Images of text must contain the same text presented in the image • Context means everything alt=“HAPPY BIRTHDAY! PARTY AT 5 PM, ROOM SSB 120”
Alternate Image Descriptions • Every image must have an alt attribute • Images of text must contain the same text presented in the image • Context means everything CONTEXT = Posted in Graphic Design Dept. alt=“Birthday Card with photo of cat looking cross-eyed at bee on its nose. ”
Alternate Image Descriptions Embedding Flyers DON’T 1. Insert a full 8”x 11” poster with alt text “ 2018 fall poster” 2. Write very long alt text DO 1. Use Image with Screen Reader Text Snippet 2. Crop flyer graphic and rebuild paragraphs and headers 3. Download accessible PDF button
Alternate Image Descriptions Embedding Flyers DON’T 1. Insert a full 8”x 11” poster with alt text “ 2018 fall poster” 2. Write very long alt text DO 1. Use Image with Screen Reader Text Snippet 2. Crop flyer graphic and rebuild paragraphs and headers 3. Download accessible PDF button Alt = “Collge Department logo. Title Headline GOES here, nice and bold. Then I am going to talk about every single aspect of this poster with no idea of why I am telling people about the gold swoop in the logo and a girl in a pink shirt even though all the person needs to know is that this is a college student sitting at a table and it is to advertise something totally different that is happening. Remember it is all about context and not just details and word count.
Alternate Image Descriptions Embedding Flyers DON’T 1. Insert a full 8”x 11” poster with alt text “ 2018 fall poster” 2. Write very long alt text DO 1. Use Image with Screen Reader Text Snippet 2. Crop flyer graphic and rebuild paragraphs and headers 3. Download accessible PDF button <div id="long-alternative">UAA Parking services 2019 annual amateur photo contest. Capture an image that represents. . </div>
Alternate Image Descriptions Embedding Flyers DON’T 1. Insert a full 8”x 11” poster with alt text “ 2018 fall poster” 2. Write very long alt text DO 1. Use Image with Screen Reader Text Snippet 2. Crop flyer graphic and rebuild paragraphs and headers 3. Download accessible PDF button
Alternate Image Descriptions Embedding Flyers DON’T 1. Insert a full 8”x 11” poster with alt text “ 2018 fall poster” 2. Write very long alt text DO 1. Use Image with Screen Reader Text Snippet 2. Crop flyer graphic and rebuild paragraphs and headers 3. Download accessible PDF button Title Headline goes here, Nice & Bold Then tell me what this picture was put here for (the “Birthday Party” invite) including the details that should be listed. And finish it off with a nice “call to action” or “ask”.
Alternate Image Descriptions Embedding Flyers DON’T 1. Insert a full 8”x 11” poster with alt text “ 2018 fall poster” 2. Write very long alt text DO 1. Use Image with Screen Reader Text Snippet 2. Crop flyer graphic and rebuild paragraphs and headers 3. Download accessible PDF button Download 2018 Fall Flyer
Headers • Provide in-page navigation • Nest headings by their rank • H 1 (most important) H 6 (least important) • Equal or higher rank start a new section • Lower rank start new subsections • Context is everything • H 1 | Chris’ party ( Page Title ) – H 2 | Things to bring • H 3 | Food – H 4 | Hot Food – H 4 | Cold Food • H 3 | Gifts – H 2 | Directions – H 2 | After party
Headers • Provide in-page navigation • Nest headings by their rank • H 1 (most important) H 6 (least important) • Equal or higher rank start a new section • Lower rank start new subsections • Context is everything • H 1 | Chris’ party ( Page Title ) – H 2 | Things to bring • H 5 | “Also it’s a SECRET!” • H 3 | Food – H 4 | Hot Food – H 4 | Cold Food • H 3 | Gifts – H 2 | Directions – H 2 | After party Don’t do this!
Headers • Provide in-page navigation • Nest headings by their rank • H 1 (most important) H 6 (least important) • Equal or higher rank start a new section • Lower rank start new subsections • Context is everything • H 1 | Chris’ party ( Page Title ) – H 2 | Things to bring • H 3 | Food – H 4 | Hot Food – H 4 | Cold Food • H 3 | Gifts – H 2 | Directions – H 2 | After party
Headers • Provide in-page navigation • Nest headings by their rank • H 1 (most important) H 6 (least important) • Equal or higher rank start a new section • Lower rank start new subsections • Context is everything • H 1 | Chris’ party ( Page Title ) – H 2 | Things to bring • H 3 | Food – H 4 | Hot Food – H 4 | Cold Food • H 3 | Gifts – H 2 | Directions – H 2 | Max’s party Con fusi o n!
Headers • Provide in-page navigation • Nest headings by their rank • H 1 (most important) H 6 (least important) • Equal or higher rank start a new section • Lower rank start new subsections • Context is everything • H 1 | Employee Parties (Page Title) – H 2 | Chris’ party • H 3 | Things to bring – H 4 | Food » H 5 | Hot Food » H 5 | Cold Food – H 4 | Gifts • H 3 | Directions – H 2 | Max’s party
Unordered and Ordered Lists Context is Everything Ordered Unordered Directions to the party. Things to bring to the party 1. 2. 3. 4. • • Take a left at 1 st Street Right at barrel on the corner Take a left on Crazy Guy Ave. Park behind the barn Bad Unordered • • Take a left at 1 st Street Right at barrel on the corner Take a left on Crazy Guy Ave. Park behind the barn Bacon Cake Tacos Watermelon Bad Ordered 1. 2. 3. 4. Bacon Cake Tacos Watermelon
Link Content Unclear Link Text Examples Ø Click here for instructions on how to use… Ø Learn more about color and accessibility here and here Ø Story 1 (Read More) | Story 2 (Read More) Ø Accessibility 101 (Register) | Accessibility 102 (Register) Usable Link Text ü Instructions for the new website are available online ü Learn more about accessibility in terms of accessible contrast and color coding for accessibility ü A Great Story 1, Another story 2 ü Register for Accessibility 101, Accessibility 102
You need to know because… • This is what a screen reader sees, so… – Write links that make sense out of context – Maintain the standard that text links are underlines and a different color value than the main text – If you are using an image as a link, make sure the destination is included in your alt tag
Tables & Tabular Data • NEVER used for layout • Only for tabular data • Must have a header row • Check Row Properties This is a table with tabular data and a header row. This is information that was plopped into a table because it formats the way we wanted visually.
Tables & Tabular Data • Must have a header row • Auto scale cells. Don’t stretch
Tables & Tabular Data – Header Row 1. Right click in the top table row 2. Select “Row” 3. Select “Row Properties” 4. Choose “Header” from the dropdown menu
Tables & Tabular Data • Must have a header row (will format as bold) • NEVER used for layout
Tables & Tabular Data – Auto Scale, Don’t Stretch
Embedded Media • Use Media Embed Snippet for size and aspect ratio • MUST have Closed Caption with 98% accuracy • MUST have Closed Caption embedded in player. • Live broadcast must advertise 3 days in advanced requests for accessibility requirements.
Embedded Media • Use Media Embed Snippet for size and aspect ratio • MUST have Closed Caption with 98% accuracy • MUST have Closed Caption embedded in player. • Live broadcast must advertise 3 days in advanced requests for accessibility requirements.
Checking Accessibility • OU Campus Built in Checker • Wave Accessibility Checker • Developer Tools Add-ons
Checking Accessibility • OU Campus Built in Checker • Wave Accessibility Checker • Developer Tools Add-ons
Checking Accessibility • OU Campus Built in Checker • Wave Accessibility Checker • Developer Tools Add-ons
Checking Accessibility • OU Campus Built in Checker • Wave Accessibility Checker • Developer Tools Add-ons
Checking Accessibility • OU Campus Built in Checker • Wave Accessibility Checker • Developer Tools Add-ons
Checking Accessibility • OU Campus Built in Checker • Wave Accessibility Checker • Developer Tools Add-ons
Checking Accessibility • OU Campus Built in Checker • Wave Accessibility Checker • Developer Tools Add-ons
UAA Accessibility Sustainability • • Upgrade to an Accessible framework Better snippets for accessibility Community ADA assessment Accessibility checker on Publish Governance Site Improve Reports Cutting out gray areas
More questions? The accessibility QUIZ link is posted in chat or will be sent to you following this training. Questions? web_team@uaa. alaska. edu Thank you!
- Slides: 35