Tear Down This Wall! Removing Boundaries to Create an Accessible Website
Download as PPTX, PDF0 likes48 views
The document discusses strategies for creating accessible websites, emphasizing the importance of removing barriers to access information and resources. It outlines federal laws like Section 508 and the Web Content Accessibility Guidelines (WCAG) 2.0, along with practical tools and practices to enhance web accessibility. The significance of advocacy and awareness around accessibility is highlighted, given that a substantial portion of the population has disabilities.
Tear Down This Wall! Removing Boundaries to Create an Accessible Website
- 1. Tear Down This Wall! Removing boundaries to create an accessible website Sarah Arnold Content Strategy Librarian Tabitha Frahm User Experience RA
- 2. We are not experts
- 3. Overview/What We’ll Cover Accessibility, Section 508, and WCAG 2.0 UNC Chapel Hill Library’s Efforts Basic How-to’s Tools We Use Advocating for Accessibility More Resources
- 4. Defining Accessibility An absence of barriers (to anything). Anything = Web sites, textbooks, tools at work That lead to a diploma, a job, independence, success, and more
- 5. 29 U.S.C. 794D - Electronic and Information Technology aka Section 508 of the Rehabilitation Act of 1973 Federal law applies to all “agencies when they develop, procure, maintain, or use” information and communication technology (ICT) ICT includes: • Telecommunication products such as telephones • Websites • Multimedia (including videotapes) • Office equipment such as copiers and fax machines
- 6. Web Content Accessibility Guidelines (WCAG) 2.0 (Way-cag Two-point-oh) Technical standard for "web content accessibility that meets the needs of individuals, organizations, and governments internationally" (source) Technology agnostic Organized into • 4 guiding principles (POUR) • 12 guidelines • 3 possible levels of success criteria (A-AAA)
- 7. WCAG 2.0’s Guiding Principles Perceivable Operable Understandable Robust
- 8. A photo takes up the entire slide here
- 9. UNC Chapel Hill Library’s Efforts Accessibility assessments on new and existing projects/tools Trainings for staff including new staff and students Attending workshops, webinars, and other professional development opportunities Becoming advocates for accessibility
- 10. Basic How-tos
- 11. How to: Subscription Services Assess accessibility awareness and practices of new or existing vendor tools • LibGuides/Springshare products • Libraryh3lp/chat services • Formidable and WordPress plugins Check forums and help documentation If in doubt, contact support services and ask/push for accessible tools
- 12. How to: Alt text • First principle of web accessibility: Adding alternative text for images. • WCAG 2.0 Guideline 1.1.1. "All non-text content that is presented to the user has a text alternative that serves the equivalent purpose." • WHY use alt text? • Screen readers • Broken images • Search engines • WHAT needs to be conveyed? • Content & Function WHERE?
- 13. Alt text (continued) • HOW can I do this correctly? DO: • Be accurate • Be concise DO NOT: • Be redundant • Include words like “image” in your alt text Example: <img src="emoji.jpg" alt="Excited face"> Via EmojiOne
- 14. It depends
- 16. How to: ARIA Labels ARIA = Accessible Rich Internet Applications • aria-label • when text is not visible • aria-labelledby • when visible text labels the element Example: <button aria-label="Close" onclick="myDialog.close()">X</button> X
- 17. How to: ARIA Labels ARIA = Accessible Rich Internet Applications • aria-label • when text is not visible • aria-labelledby • when visible text labels the element Example: <button aria-labelledby="x_id" onclick="myDialog.close()">X</button> <span id=”x_id”>close</span> X close
- 18. How to: Headings • Headings • Define the structure of text on a webpage • Font changes, paragraph breaks, white space • Help users scan your pages • Heading elements: <h1> to <h6> • <h1> is most important (i.e. title of post) • DO NOT SKIP RANKS!!!
- 19. How to: Headings • Headings • Define the structure of text on a webpage • Font changes, paragraph breaks, white space • Help users scan your pages • Heading elements: <h1> to <h6> • <h1> is most important (i.e. title of post) • DO NOT SKIP RANKS!!! But I can make things look Pretty! SO
- 20. How to: Headings • Headings • Define the structure of text on a webpage • Font changes, paragraph breaks, white space • Help users scan your pages • Heading elements: <h1> to <h6> • <h1> is most important (i.e. title of post) • DO NOT SKIP RANKS!!! But I can make things look Pretty! SO
- 21. How to: Headings (continued) Example: <h1>Top level heading</h1> Here is some text. <h2>Second level heading</h2> Here is some more text. Top level heading Here is some text. Second level heading Here is some more text.
- 22. How to: Responsive Design What is responsive design? • Uses CSS & HTML to ensure your website looks good on all devices • Hide, shrink, resize, move content How can I make my website responsive? • Do it yourself <meta name="viewport" content="width=device-width, initial-scale=1"> • Use a responsive stylesheet • W3.CSS
- 25. Tools We Use
- 27. Tool: aXe
- 29. Tool: AInspector/AI (Firefox) http://ainspector.github.io Extension in Firefox that can be toggled on or off as needed Appears as sidebar Provides detailed information about violations, warnings, etc.
- 31. Tool: Functional Accessibility Evaluator (FAE) 2.0 https://fae.disability.illinois.edu Developed by University of Illinois at Urbana-Champaign Ability to create an account to track reports over time Reviews an entire website, a set of web pages, or a single page
- 32. Tool: Functional Accessibility Evaluator (FAE) 2.0
- 33. Tool: Functional Accessibility Evaluator (FAE) 2.0
- 34. Tool: Accessibility Bookmarklets https://accessibility-bookmarklets.org Quick way to see certain elements on a single web page Includes landmarks, headings, lists, images, and forms Simple drag-and-drop installation for Chrome, Firefox, Safari, and IE 9+
- 35. Tool: WebAIM Color Contrast Checker http://webaim.org/resources/contrastchecker
- 36. Tool: Paciello Group’s Colour Contrast Analyser https://developer.paciellogroup.com/resources/contrastanalyser/
- 37. Tool: Screen Readers NVDA: https://www.nvaccess.org • NonVisual Desktop Access • Free, open source screen reader for Windows OS • Translated into 43 different languages Others: • JAWS (Windows) • VoiceOver (Apple)
- 38. Why Accessibility is Important
- 39. “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
- 40. Advocating for Accessibility • Why is accessibility important? • Access to information and resources • Equality • Disabilities • Legality • 10-20% of population is disabled - think of the customers! • Physical impairments • Visual impairments • Hearing impairments
- 42. More Resources Web Accessibility Evaluation Tool List GOV.UK’s “Dos and Don'ts on Designing for Accessibility”
Editor's Notes
- #5: Background: Global Accessibility Awareness Day event in May Consider: if you give a blind student a textbook in braille or an e-version that's accessible via a screen reader or refreshable braille reader, they're good to go > they are not disabled; if you give that same student a traditional textbook, then yes, they are disabled Image source: http://accessibleicon.org/ Example of design activism
- #6: Title 29 of U.S. Code, Section 794D Federal law that dictates how agencies should make their technology accessible Agencies are required to provide a comparable format to their information for people with disabilities United States Access Board enacted a refresh of rule, also known as Final Rule, went into effect in March 2017 Incorporates WCAG 2.0 guidelines by applying Level A and Level AA success criteria requirements to website, electronic documents, and software On January 18, 2018 compliance will be required Sources: https://www.section508.gov/content/learn/laws-and-policies + https://www.access-board.gov/guidelines-and-standards/communications-and-it/about-the-ict-refresh/final-rule
- #7: International technical standard Technology agnostic Meant to encompass any existing or future technology Goal is to have guidelines and law apply to any type of technology that any sighted person would use Organization of WCAG 2.0 Complex and difficult to apply at times POUR = Perceivable, Operable, Understandable, and Robust Source: https://www.w3.org/WAI/intro/wcag.php
- #8: Perceivable = Information cannot be invisible to a user's senses Operable = Interface can't require interaction that a user can't perform Understandable = Information and operation of the interface must be understood by the user Robust = As technology advances, users must still be able to access the information/content 4 guiding principles sound like a great user experience! Image source: http://www.d.umn.edu/itss/news/2016/05/wcag_principles.html
- #9: Example of Principle 1, Guideline 1.1 Source: https://www.w3.org/TR/WCAG20/#text-equiv
- #10: Accessibility assessments + working meetings with developers Annual content audit trainings over summer > specific accessibility training Talk to librarians and new staff/students about importance of accessibility and what they can do vs. what we do in UX Workshops, trainings, webinars > badging course on landmarks and headings this summer from UIUC Generally advocate for accessibility > make sure others including stakeholders are aware and include it in their process when developing a new tool or site
- #13: Images: Buttons, photos, illustrations **EVERY image must have an alt attribute! WHY? Screen readers can’t see Broken image, slow connection, etc. - displays in place so user can tell what’s there SEO - textual info - help yourself/your website show up in search results WHERE? Within alt attribute In surrounding context (ex. captions)
- #14: Accuracy ex: pic of X is really a pic of Y Concise - NOTE: Because of JAWS restrictions, it’s recommended that ALT tags be limited to about 150 characters.
- #15: What do I say in my alt text? Depends on the context!
- #16: Pic: Me in Chicago @ ALA Personal website? alt text = Tabitha Travel blog? Alt text = Tabitha at the Chicago Bean Dating profile? Alt text = Tabitha posing seductively in front of the Chicago Bean It’s all about context!
- #17: an attribute designed to help assistive technology (e.g. screen readers) attach a label to an otherwise anonymous HTML element. (X) defines a string to label an element (“close”) When a screen reader encounters the object, the aria-label text is read so that the user will know what it is. can be used with any typical HTML element; will override any native naming such as alt text or labels
- #19: Creating a visual hierarchy of your webpage content Help users find info more easily Web browsers, plug-ins, and assistive technologies can use them to provide in-page navigation. Useful for labeling page regions. Use aria-labelledby to associate headings with their page region Up to 6 levels
- #20: Problem solving? Or Problem-creating?
- #21: DON’T DO IT As a user, i don’t care how pretty it looks Just want to be able to find the info I’m searching for
- #22: Look at this and know top level is most important
- #23: Make your page respond to screen width meta viewport tag - control the width and scaling of the browser's viewport - put in HEAD What does this mean? Viewport = a framed area on a screen for viewing information. Set width to device-width to match the width of webpage to device initial-scale=1 to establish a 1:1 relationship between CSS pixels and device-independent pixels.
- #24: Quote from Josh Clark
- #25: Video from Google
- #27: WAVE Accessibility Extension, available for Firefox and for Chrome EASY to use (just paste it in!)
- #28: the aXe Chrome extension (also available for Firefox) 1. Step 1: Download the aXe extension for Chrome or the aXe extension for Firefox. 2. Step 2: Go to the page you want to test. 3. Step 3: Open up your browser's developer tools menu. ... 4. Step 4: Select the aXe tab in the developer tools menu. ... 5. Step 5: Hit the big "Analyze" button. → you've got a handy list of accessibility issues, number of occurrences, and explanations/suggestions for fixing
- #29: Example of AInspector/AI in Firefox
- #30: Learned about at Landmarks and Headings training from University of Illinois at Urbana-Champaign Great tool for seeing what’s going on on your site and where exactly
- #31: Detail on what happens once you inspect a particular violation/rule
- #32: Similar to AInspector Able to create an account and save/view reports over time > track how the accessibility of your site has improved Can be more challenging when pinpointing exactly where/what is a violation of guidelines
- #33: Example of report details for particular element
- #34: Example of a violation detail page in the report
- #35: Useful for quick viewing of elements on your page Won’t show you violations, but gives good overall view of what’s happening
- #36: Intent is to provide enough color contrast between text and background so it can be read by someone with moderately low vision 4.5:1 for normal text (14 pt and smaller) 3:1 for large text (18 pt and larger, or 14 pt bold and larger) Useful, web-based color contrast checker Caveat about these tools: they don’t always account for text size but focus on color contrast ratio only Web Color Usage = example from UNC’s branding at http://identity.unc.edu/colors/
- #37: Great tool for both Macs and PCs Standalone software that lets you use eyedropper tool to select colors
- #38: Accessibility training over summer > activity where we turned off the projector screen > librarians who have used our site for years were lost Jaws = priced for large institutions/groups rather than individuals VoiceOver = built into Mac/Apple products like laptops and iPhones General advice/when in doubt: Just try keyboard navigation by using the Tab key NV Access = nonprofit organization that supports the development of NVDA
- #40: Sir Tim Berners-Lee
- #41: So that people can use the web! The web provides access... Computers can’t see; screen readers can’t see; some users can’t see! Helps people with disabilities do ordinary things and do them independently People who can’t see can read Can’t speak → have conversations Loss of mobility → explore and shop
- #42: “With great power comes great responsibility!” Difference between knowing what the right thing is and doing the right thing
- #44: Image source: https://unsplash.com/search/photos/ask-more-questions?photo=GxnyOLTxCr8