1 / 36

Web Accessibility: Identifying and Resolving Inaccessible Web Content

Learn how to make your web content accessible for all users by providing alternate image descriptions, embedding flyers, and using proper headers.

florance
Download Presentation

Web Accessibility: Identifying and Resolving Inaccessible Web Content

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. uaa.alaska.edu/its Web Accessibility Identifying and resolving inaccessible web content. Chris HustonWEB / GRAPHIC DESIGN ENGINEER in WEB/APPS ITS UA is an AA/EO employer and educational institution and prohibits illegal discrimination against any individual: www.alaska.edu/nondiscrimination

  2. 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=“Cat with Fly on Nose”

  3. 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 5PM, ROOM SSB120”

  4. 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 Posted in Graphic Design Dept. alt=“Birthday Card with photo of cat with fly on its nose.”

  5. Alternate Image Descriptions Embedding Flyers DON’T • Insert a full 8”x11” poster with alt text “2018 fall poster” • Write very long alt text DO • Use Image with Screen Reader Text Snippet • Crop flyer graphic and rebuild paragraphs and headers • Download accessible PDF button

  6. Alternate Image Descriptions Embedding Flyers Alt = “Collge Department logo. Title Headline GOES here, nice and bold. Nullam ex est, tristiquenectellusnec, viverraultriciessapien. Maurispulvinarenimegetcondimentummattis. Maurisrisusnisl, porttitor et nibhmattis, dictum mollis ligula. Nullaelementum nisi velnullasollicitudininterdum. Nunc fringillased magna quiscommodo. Proinornarepurusurna, egetaliquetauguecommodo gravida. Integer vitae ultricestellus. Suspendissepotenti. Vivamussollicitudinaugueegetnisldignissimmolestie. DON’T • Insert a full 8”x11” poster with alt text “2018 fall poster” • Write very long alt text DO • Use Image with Screen Reader Text Snippet • Crop flyer graphic and rebuild paragraphs and headers • Download accessible PDF button

  7. Alternate Image Descriptions Embedding Flyers DON’T • Insert a full 8”x11” poster with alt text “2018 fall poster” • Write very long alt text DO • Use Image with Screen Reader Text Snippet • Crop flyer graphic and rebuild paragraphs and headers • Download accessible PDF button <div id="long-alternative">UAA Parking services 2019 annual amateur photo contest. Capture an image that represents..</div>

  8. Alternate Image Descriptions Embedding Flyers DON’T • Insert a full 8”x11” poster with alt text “2018 fall poster” • Write very long alt text DO • Use Image with Screen Reader Text Snippet • Crop flyer graphic and rebuild paragraphs and headers • Download accessible PDF button

  9. Alternate Image Descriptions Embedding Flyers DON’T • Insert a full 8”x11” poster with alt text “2018 fall poster” • Write very long alt text Title Headline goes here, Nice & Bold DO Nterdumet malesuada fames ac ante ipsum primis in faucibus. Aeneanpellentesquefelismauris, vitae luctusnislscelerisqueauctor. Vestibulumimperdietaliquet mi, sedornareeratporttitor sed. Suspendisseat ipsum eros. Utaliquet quam a ultricesdapibus. • Use Image with Screen Reader Text Snippet • Crop flyer graphic and rebuild paragraphs and headers • Download accessible PDF button

  10. Alternate Image Descriptions Embedding Flyers DON’T • Insert a full 8”x11” poster with alt text “2018 fall poster” • Write very long alt text Download 2018 Fall Flyer DO • Use Image with Screen Reader Text Snippet • Crop flyer graphic and rebuild paragraphs and headers • Download accessible PDF button

  11. Headers • H1 | Chris’ party ( Page Title ) • H2 | Things to bring • H3 | Food • H4 | Hot Food • H4 | Cold Food • H3 | Gifts • H2 | Directions • H2 | After party • Provide in-page navigation • Nest headings by their rank • H1 (most important)H6 (least important) • Equal or higher rank start a new section • Lower rank start new subsections • Context is everything

  12. Headers • H1 | Chris’ party ( Page Title ) • H2 | Things to bring • H5 | “Also it’s a SECRET!” • H3 | Food • H4 | Hot Food • H4 | Cold Food • H3 | Gifts • H2 | Directions • H2 | After party • Provide in-page navigation • Nest headings by their rank • H1 (most important)H6 (least important) • Equal or higher rank start a new section • Lower rank start new subsections • Context is everything

  13. Headers • H1 | Chris’ party ( Page Title ) • H2 | Things to bring • H3 | Food • H4 | Hot Food • H4 | Cold Food • H3 | Gifts • H2 | Directions • H2 | After party • Provide in-page navigation • Nest headings by their rank • H1 (most important)H6 (least important) • Equal or higher rank start a new section • Lower rank start new subsections • Context is everything

  14. Headers • H1 | Chris’ party ( Page Title ) • H2 | Things to bring • H3 | Food • H4 | Hot Food • H4 | Cold Food • H3 | Gifts • H2 | Directions • H2 | Max’s party • Provide in-page navigation • Nest headings by their rank • H1 (most important)H6 (least important) • Equal or higher rank start a new section • Lower rank start new subsections • Context is everything

  15. Headers • H1 | Employee Parties (Page Title) • H2 | Chris’ party • H3 | Things to bring • H4 | Food • H5 | Hot Food • H5 | Cold Food • H4 | Gifts • H3 | Directions • H2 | Max’s party • Provide in-page navigation • Nest headings by their rank • H1 (most important)H6 (least important) • Equal or higher rank start a new section • Lower rank start new subsections • Context is everything

  16. Unordered and Ordered Lists Context is Everything Ordered Unordered Directions to the party. Things to bring to the party Take a left at 1st Street Right at barrel on the corner Take a left on Crazy Guy Ave. Park behind the barn • Bacon • Cake • Tacos • Watermelon Bad Unordered Bad Ordered • Take a left at 1st Street • Right at barrel on the corner • Take a left on Crazy Guy Ave. • Park behind the barn Bacon Cake Tacos Watermelon

  17. Link content Bad Link Content Good Link Content • Link to Home Page • Click here • More Info • How to contact us • Learn how you or a loved one can get in touch with the media lab.. • www.google.com/?b65.90/prfgsad/sdfeww/fsfrgsd/fssadf • Home • Download 2018 Flyer • Contact us • ..you can reach the Media Lab • http://www.uaa.alaska.edu • About us • Lab Calendar

  18. Tables & Tabular Data • Only for tabular data • Must have a header row • NEVER used for layout • Auto scale cells. Don’t stretch

  19. Tables & Tabular Data • Only for tabular data • Must have a header row • NEVER used for layout • Auto scale cells. Don’t stretch

  20. Tables & Tabular Data • Only for tabular data • Must have a header row • NEVER used for layout • Auto scale cells. Don’t stretch

  21. Tables & Tabular Data • Only for tabular data • Must have a header row • NEVER used for layout • Auto scale cells. Don’t stretch

  22. Tables & Tabular Data • Only for tabular data • Must have a header row • NEVER used for layout • Auto scale cells. Don’t stretch

  23. Tables & Tabular Data • Only for tabular data • Must have a header row • NEVER used for layout • Auto scale cells. Don’t stretch

  24. Tables & Tabular Data • Only for tabular data • Must have a header row • NEVER used for layout • Auto scale cells. Don’t stretch

  25. Embedded Media • Use Media Embed Snippet for size and aspect ratio • MUSThave Closed Caption with 98% accuracy • MUST have Closed Caption embedded in player. • Live broadcast must advertise 3 days in advanced requests for accessibility requirements.

  26. 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.

  27. Checking Accessibility • OU Campus Built in Checker • Wave Accessibility Checker • Developer Tools Add-ons

  28. Checking Accessibility • OU Campus Built in Checker • Wave Accessibility Checker • Developer Tools Add-ons

  29. Checking Accessibility • OU Campus Built in Checker • Wave Accessibility Checker • Developer Tools Add-ons

  30. Checking Accessibility • OU Campus Built in Checker • Wave Accessibility Checker • Developer Tools Add-ons

  31. Checking Accessibility • OU Campus Built in Checker • Wave Accessibility Checker • Developer Tools Add-ons

  32. Checking Accessibility • OU Campus Built in Checker • Wave Accessibility Checker • Developer Tools Add-ons

  33. Checking Accessibility • OU Campus Built in Checker • Wave Accessibility Checker • Developer Tools Add-ons

  34. Checking Accessibility • OU Campus Built in Checker • Wave Accessibility Checker • Developer Tools Add-ons

  35. 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

  36. Accessibility Training • The accessibility QUIZ. Will be sent to you following this training. • Questions? web_team@uaa.alaska.edu • Thank you.

More Related