Recommended
More Related Content
Similar to Design with Accessibility in Mind
Similar to Design with Accessibility in Mind (20)
Recently uploaded
Recently uploaded (20)
Design with Accessibility in Mind
- 4. The Why Why should we make things accessible?
- 5. Removing Barriers for Learners JAMES GABLE
- 7. How I Design With Accessibility In Mind HTML5 + CSS
- 8. Who is NWEA? BRIAN TOSKY
- 10. Surveythe room
- 11. Why Accessibility Matters to Us
- 12. How are we defining accessibility
- 13. Americans with Disabilities Act (ADA) Web Content Accessibility Guidelines (WCAG) 2.1 508 Compliance Voluntary Product Accessibility Template (VPAT) Regulations/Compliance Source:A Guideto DisabilityRights Laws
- 14. Assistive Technology Academic andlearningaids Aidstodailyliving AssistedLivingDevicesand EnvironmentalAids AugmentativeCommunication ComputerAccessandInstruction EnvironmentalControl MobilityAids OralCommunicationandACC Pre-VocationalandVocationalAids RecreationandLeisure SeatingandPositioning VisualAids
- 15. ELIZABETH BARKER The Myth of Average – Todd Rose
- 16. Multiple Meansof: 1. Engagement 2. Representation 3. Action andExpression (http://www.cast.org/ Universal Design for Learning)
- 19. The How How do you make something accessible?
- 22. Be The Squeaky Wheel
- 23. Continue Improving Accessibility • It's not a project • Accessibility Center of Excellence • Defining standards • Providing training • Measuring progress • Recommending improvements • The Bat-Signal • The role of UX
- 24. UX MARK SCHMIDT
- 25. Design System What problem are we trying to solve? • User Experience fragmentation • Foundational accessibility embedded in the system
- 27. The Nuts & Bolts CORINNA SCHULTZ
- 29. 1. Whatis theelement? (checkbox,list item) 2. Whatis itspropertiesandrelationships?(disabled,label for) 3. Whatis itsstate?(checked, selected) 4. Alert user tochangein state. 5. Keyboardandfocusis predictable.Eventtriggering is intuitive(spacebar,hotkey). Make things accessible
- 30. • Usetheright HTML(let the browserdo thework) • Provideheadingsforquicknavigation • Providefocusandkeyboardsupport • Provideaccessible namesanddescriptions • Communicatestatewitharia-live Basic HTML5 Accessibility <body> <header> <nav> <a></a> </nav> </header> <main> <p> </p> <ul> <li></li> <ul> </main> <footer> </footer> </body>
- 31. <body> <div> <div> <div></div> </div> </div> <div> <div> </div> <div> <div></div> <div> </div> <div> </div> </body> Primitive HTMLElements <div> and <span> • Nofocus • Nointeraction • Nosemantics • Nogood!
- 32. Design requires <div>? • UseARIAtomimic HTML5 semanticelements • Addtabindexes • Ensurefocusis clear • TESTEVERYTHINGacrossall browsers! <body> <div role="banner"> <div role="navigation"> <div role="link"></div> </div> </div> <div role="main"> <div> </div> <div role="list"> <div role="listitem"></div> <div> </div> <div role="contentinfo"> </div> </body>
- 33. User Experience: • Zoom • KeyboardNavigation • Screen Reader • RefreshableBraille
Editor's Notes
- James personal experience and tie this back into his current role. Good evening, I am James Gable, the Systems and Solution Innovation Specialist here at NWEA. Tonight, I want to share a short personal story about why designing with accessibility in mind is important to me. Growing up I saw my older sister, Tanya, struggle in school with spelling, reading, and general language skills. She didn’t develop her communication skills until much later in life than most kids. She was nonverbal until she reached the age of four and my parents took her to several specialists before they found out the cause. My sister was eventually diagnosed with Auditory Processing Disorder, also known as (APD).
- Most people do not know what Auditory Processing Disorder is or that it even exists since it only affects 5% of the population. People with (APD) are not able to process what they hear in the same way other people do because their ears and brain don't fully coordinate. Another way to describe it is like having a bad phone reception and not being able to clearly hear all the syllables and vowels in the conversation and then trying to piece together what the other person is saying. During my sister’s early school years, she had a really hard time academically and socially. I knew it wasn’t because she wasn’t as smart as the other kids or that she wasn’t trying hard enough. However, many of her teachers and classmates didn’t understand why she was struggling so much. It wasn’t until middle school that my sister finally found the confidence and resources, she needed to overcome her learning disability. There was one specific teacher who made a huge difference in her life. That teacher was Mrs. Literal; she gave my sister the knowledge and tools she needed to overcome the challenges of (APD). And she gave my sister one message that completely changed her life! That message was, “You are just as smart as your classmates, you just need to decode and learn the information in a different way.” Once my sister had the tools she needed to strengthen her central resources such as (language, problem-solving, memory, attention, and other cognitive skills) I saw a dramatic change in her life. Her grades improved, she gained self-confidence, and she became more social at school!
- Here at NWEA, I use HTML5 and along with CSS to help create new tools for students like my sister, who need to remove barriers that are preventing them from learning. For example, my sister would often need to rely on a teacher or audio book to help decipher certain words. Now we have text to speech along with a highlighter tool which allow students to select problematic words to see and hear the words as they are read aloud. We can also use CSS to customize the font and background colors and make the text on screen for students with dyslexia and other learning disabilities easier to decode. Another example is using responsive design along with browser zoom to present content in a format that makes it easier for students to see and process information on screen. These are just a few examples of how we can design with accessibility in mind and help kids spend less time decoding the information and more time learning! Now I would like to introduce my colleague, Brian Tosky, who will tell you more about what we do here at NWEA.
- Creating an app to survey who is in the audience https://poll.excitem.com/s/presentation/poll?id=26316 Vote by texting: (503) 386-9323
- *DEIA and Mission based organization
- What is accessibility? What do we use to guide us with accessibility? When is something online considered “accessible?” Talk 508, WCAG Privacy and Independence
- ADA: The ADA prohibits discrimination on the basis of disability in employment, State and local government, public accommodations, commercial facilities, transportation, and telecommunications. 508: Section 508 was made part of the Rehabilitation Act of 1973. Its purpose is to “…require Federal agencies to make their electronic and information technology (EIT) accessible to people with disabilities.” VPAT: A document which evaluates how accessible a particular product is according to the Section 508 Standards. WIP JM Notes: JM Notes: There is too much content on this slide. What is the main takeaway here?
- WIP JM Notes: What is the main takeaway for this info? Is there something specific you want to emphasize or are you communicating the volume of hardware available?
- Universal Design – what is it, why it important to inclusion, and how does this relate to design *show video (Todd Rose) https://ed.ted.com/on/4s8O5loM
- Things to think about with design: Does the design require visual perception of the entire page to be understood? Does the design require visual perception of the layout to be understood? Does the interaction of the design require any single sensory perception, including memory, to be used?
- Talk about how today these are foundational requirements and how beautiful including accessibility into architecture can be. I will also give examples of the curb cuts, entry ways width, electric sinks and door handles The pillars of a good foundation: Security, Accessibility, and.. Make this slide - questions
- Advocate for accessibility within your organizations regular ceremonies Get others to become advocates too Be tactful but be persistent Change takes repetition Advocating can come in the form of reporting on current state, presentations to your colleagues and executives or just casually within your meetings
- Started an ACOE in November 2018. Responsibilities include: Defining standards – WCAG 2.1 AA Providing training – Customized training program for each role Measuring progress – Setting goals for the organization and helping to measure progress towards these. Recommending improvements – This could be business process related or product related but with a goal to continue shifting accountability to the wider organization The Bat-signal - Providing answers! Reference the role UX is playing and the design system.
- Diagram alt text: Information on a computer is communicated to AT via the platform's accessibility API. The web browser has its own accessibility API that talks to the platform's accessibility API. The screen reader only communicates through the platform API, not directly with the web browser. This fact has two main consequences. First, there are quirks and bugs that result from the combinations of different versions of platform and program and AT. And second, this means that the web developer needs to be aware that there are two independent representations of a web page - the browser DOM and the accessibility tree. Keeping important changes in sync is one of the challenges of making the web accessible.
- <!doctype html> <html> <head> <meta charset="UTF-8"> <title>DWP Example 1</title> <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <style> body { font-family: 'Open Sans', sans-serif; background: #e2e2e2; } main { background: #fff; padding: 5px; } button { cursor: pointer; } h1 { color: #404041; text-align: center; text-decoration: underline; } ul.level1 { margin: 0px; } .level1 li { margin: 24px 0px; } ul.level2 { margin: 0px; padding: 0px; } li.noBull { list-style-type: none; margin: 0px; } li { overflow: auto; } table.data { border-collapse: collapse; border: solid 1px black; margin-top: 5px; } table.data th { font-weight: bold; border: solid 1px black; padding: 5px; } table.data td { border: solid 1px black; padding: 5px; } table.inputs td { padding-right: 25px; } table.inputs td label { white-space: nowrap; } .visuallyHidden { clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; } nav { display: flex; justify-content: flex-end; } .account { font-size: 24px; } footer { padding: 5px; } </style> </head> <body> <!--ARIA LIVE can be used to communicate the state of your page.--> <div id="live-update" class="visuallyHidden" aria-live="polite"></div> <header> <nav><a href="#home">home</a> | <a href="#about">about</a> | <a href="#account"><i class="material-icons account" aria-label="my account">account_circle</i></a> </nav> <h1>Basic HTML5 Accessibility</h1> </header> <main> <h2>Using the Right HTML5 Elements Helps Improve Accessibility!</h2> <p>Let's show you how by providing a list of examples.</p> <ul class="level1"> <li>Click on this button! <button onClick="updateLiveRegion()">click me</button> </li> <li> <div class="visuallyHidden">These options are laid out using a table element. </div> <table class="inputs"> <tbody> <tr> <td> Which would you like for a pet?<br> <input type="radio" name="RadioGroup1" value="radio" id="RadioGroup1_0"> <label for="RadioGroup1_0">Cat</label> <br> <input type="radio" name="RadioGroup1" value="radio" id="RadioGroup1_1"> <label for="RadioGroup1_1">Snake</label> <br> <input type="radio" name="RadioGroup1" value="radio" id="RadioGroup1_2"> <label for="RadioGroup1_2">Capybara</label> <br> </td> <td> Why did you pick that? <br> <input type="checkbox" name="CheckboxGroup1" value="checkbox" id="CheckboxGroup1_0"> <label for="CheckboxGroup1_0">They are cute</label> <br> <input type="checkbox" name="CheckboxGroup1" value="checkbox" id="CheckboxGroup1_1"> <label for="CheckboxGroup1_1">They are easy to take care of</label> <br> <input type="checkbox" name="CheckboxGroup1" value="checkbox" id="CheckboxGroup1_2"> <label for="CheckboxGroup1_2">They are unusual</label> <br> </td> </tr> </tbody> </table> </li> <li> <p>Tables are extremely useful for data navigation.<br> Simply add a border for the magic to happen! </p> <p> <table class="data"> <tbody> <tr> <th>Person</th> <th>Age</th> <th>City</th> <th>Pet</th> </tr> <tr> <td>Chris</td> <td>38</td> <td>Vancouver</td> <td>Cat</td> </tr> <tr> <td>Dennis</td> <td>45</td> <td>Portland</td> <td>Cat</td> </tr> <tr> <td>Sarah</td> <td>29</td> <td>Seattle</td> <td>Snake</td> </tr> </tbody> </table> </p> </li> </ul> </main> <footer> Brought to you by the letter A and the number 19.</footer> <script> function updateLiveRegion () { setTimeout(function () { document.getElementById("live-update").innerHTML = "You clicked the button."; }, 1000); } </script> </body> </html>
- <!doctype html> <html> <head> <meta charset="UTF-8"> <title>DWP Example 2</title> <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <style> body { font-family: 'Open Sans', sans-serif; background: #e2e2e2; } main { background: #fff; padding: 5px; } button { cursor: pointer; } .button { border-color: rgb(216, 216, 216) rgb(209, 209, 209) rgb(186, 186, 186); border-style: solid; border-width: 1px; padding: 1px 7px 2px; display: inline-block; border-radius: 5px; font-size: 12px; } h1 { color: #404041; text-align: center; text-decoration: underline; } ul.level1 { margin: 0px; } .level1 li { margin: 24px 0px; } .li.level2 { margin-bottom: 0px; } ul.level2 { margin: 0px; padding: 0px; } li.noBull { list-style-type: none; margin: 0px; } li { overflow: auto; } table.data { border-collapse: collapse; border: solid 1px black; margin-top: 5px; } table.data th { font-weight: bold; border: solid 1px black; padding: 5px; } table.data td { border: solid 1px black; padding: 5px; } table.inputs td { padding-right: 25px; border-collapse: collapse; border: solid 1px black; } table.inputs td label { white-space: nowrap; } .visuallyHidden { clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; } nav { display: flex; justify-content: flex-end; } .account { font-size: 24px; } footer { padding: 5px; } </style> <script> $(document).ready(function () { $(".select").click(function () { var expand = $(this).attr('aria-expanded'); if (expand == 'true') { $(this).attr('aria-expanded', 'false'); } else { $(this).attr('aria-expanded', 'true'); } $(".o2, .o3, .o4").slideToggle("slow"); }); $(".button").mousedown(function () { $(this).css("background-color", "#999"); }); $(".button").mouseup(function () { $(this).css("background-color", "#fff"); }); $(".label").click(function () { var checked = $(this).children(".input").attr('aria-checked'); if (checked == 'true') { $(this).children(".input").attr('aria-checked', 'false'); } else { $(this).children(".input").attr('aria-checked', 'true'); } $(this).children(".input").toggleClass("selected"); }); }); </script> </head> <body> <!--ARIA LIVE can be used to communicate the state of your page.--> <div id="live-update" class="visuallyHidden" aria-live="polite"></div> <header> <nav><span id="home" role="link">home</span> | <span id="about" role="link">about</span> | <a href="#account"><i class="material-icons account" aria-label="my account">account_circle</i></a> </nav> <h1>Basic HTML5 Accessibility</h1> </header> <main> <h2>Using the Right HTML5 Elements Plus ARIA Helps Improve Accessibility!</h2> <p>Let's show you how by providing a list of examples.</p> <ul class="level1"> <li>Click on this button! <button onClick="updateLiveRegion()">click me</button> </li> <div class="li" role="listitem">Click on this button! <div class="button" role="button" tabindex="0">click me</div> <div aria-hidden="true">(This text is hidden from the screen reader. Shh...) </div> </div> <li> <div class="visuallyHidden">These options are laid out using a table element. </div> <table class="inputs" role="presentation"> <tbody> <tr> <td> Which would you like for a pet?<br> <input type="radio" name="RadioGroup1" value="radio" id="RadioGroup1_0"> <label for="RadioGroup1_0">Cat</label> <br> <input type="radio" name="RadioGroup1" value="radio" id="RadioGroup1_1"> <label for="RadioGroup1_1">Snake</label> <br> <input type="radio" name="RadioGroup1" value="radio" id="RadioGroup1_2"> <label for="RadioGroup1_2">Capybara</label> <br> </td> <td> Why did you pick that? <br> <input type="checkbox" name="CheckboxGroup1" value="checkbox" id="CheckboxGroup1_0"> <label for="CheckboxGroup1_0">They are cute</label> <br> <input type="checkbox" name="CheckboxGroup1" value="checkbox" id="CheckboxGroup1_1"> <label for="CheckboxGroup1_1">They are easy to take care of</label> <br> <input type="checkbox" name="CheckboxGroup1" value="checkbox" id="CheckboxGroup1_2"> <label for="CheckboxGroup1_2">They are unusual</label> <br> </td> </tr> </tbody> </table> </li> <li> <p>Tables are extremely useful for data navigation.<br> Simply add a border for the magic to happen! </p> <p> <table class="data"> <tbody> <tr> <th>Person</th> <th>Age</th> <th>City</th> <th>Pet</th> </tr> <tr> <td>Chris</td> <td>38</td> <td>Vancouver</td> <td>Cat</td> </tr> <tr> <td>Dennis</td> <td>45</td> <td>Portland</td> <td>Cat</td> </tr> <tr> <td>Sarah</td> <td>29</td> <td>Seattle</td> <td>Snake</td> </tr> </tbody> </table> </p> </li> </ul> </main> <footer> Brought to you by the letter A and the number 19.</footer> <script> function updateLiveRegion () { setTimeout(function () { document.getElementById("live-update").innerHTML = "You clicked the button."; }, 1000); } </script> </body> </html>