autoscale: true build-lists: true ## [fit] Web Accessibility 101:
Why It Matters ### with Stephanie Marx --- ## About Me ### Graduate of IIT and Dev Bootcamp ### Web Developer at UL ^ graduate of IIT with psych degree and most of a physics degree, ask me about that some other time ^ graduate of dev bootcamp, a 19-week program that turns everyday folks into web developers ^ UL is a 122-year-old global safety consulting and certification company based on Northbrook ^ my team is 10 people, create internal and external-facing applications for engineers, product manufacturers, trade associations, and consumers ^ my position is full stack in Ruby on Rails. I specialize on the very front of the front end (HTML/CSS) and design (UI/UX) and i have a passion for accessibility --- # This talk is about... - how we define accessibility - different types of disabilities - how to make the web more accessible --- # [fit] Show of hands... ^ raise your hand if you’ve written any html ^ if you’re written any css ^ if you have made a visual design for the web (wireframe, mockup, etc) ^ if you’ve made a code or design choice specifically for accessibility --- # [fit] My Goal ^ that you’ll leave this talk with some good ideas that you can implement in your own code, and with the knowledge to go and learn even more. ^ also to make this talk as accessible as i can, please let me know if i’m speaking too quickly, too quietly, if I’m using too much jargon, or my presentation slides aren’t visible or readable. ^ to that end, i'll be putting up my slides and some additional notes on my site later today. i'll give you the link when we're done ^ also, i'm leaving time for questions at the end, but if you have a burning question or need some clarification, just raise your hand and i'll get to you. --- # [fit] What is accessibility
and why does it matter? ^ To understand accessibility, we first need to understand a bit about disability. There are five general categories of disabilities that we need to think about when designing for the web. ^ This isn't meant be a completely exhaustive list, instead think of this as a starting point for understanding. --- # Categories of disabilities - visual - hearing - motor - cognitive - seizure ^ 5 major categories of disability types that we’ll address in this talk - visual - blindness, low-vision, color-blindness - hearing - deafness and hard-of-hearing - motor - Parkinson’s, cerebral palsy, muscular dystrophy: cause inability to use a mouse, slow response time, limited fine motor control - cognitive - Dyslexia, global developmental delay, autism, Down’s syndrome, learning disabilities, distractibility, inability to remember or focus on large amounts of information - seizure - seizures caused by strobing, flickering, or flashing effects ^each of the major categories requires certain types of adaptations in the design of web content. most of the time, these adaptations benefit nearly everyone, not just people with disabilities. - helpful illustrations! clear navigation! - captions are needed for deaf users, and can people helpful to people who view a video without audio --- ## Why create accessible content? ^ 1 in 5 americans have a disability. no sensible person could make an ethical or economical argument for potentially excluding 20% of their audience. you wouldn't design a website to not work on 20% of browsers used by your audience, would you? ^ why create accessible web content? ^ there are all acceptable motivations! some are just more or less altruistic than others.there are all acceptable motivations! some are just more or less altruistic than others. - to improve the lives of people with disabilities - to capitalize on a wider audience or consumer base - to avoid lawsuits and/or bad press --- # Major Laws ^ Americans with Disabilities Act - 1990, civil rights legislation from DOJ - not directly about the internet, but works to ensure that people with disabilities have equal opportunities ^ Rehabilitation Act of 1973 - prohibits discrimination on the basis of disability in programs run by federal agencies; programs that receive federal financial assistance; in federal employment; and in the employment practices of federal contractors. ^ many international laws --- ## Web Content Accessibility Guidelines 2.0 ### by the Worldwide Web Consortium ^ Web Content Accessiblity Guidelines 2.0, published in Dec 2008 ^ developed with W3C (Worldwide Web Consortium), the governing body of the web ^ guidelines that are the basis of most web accessibility law in the world --- # Four Principles - Perceivable - Operable - Understandable - Robust ^ so, the W3C created four principles that define accessibility ^ based on four principles - perceivable - available to the senses either through browser or other assistive technologies (screen readers, screen enlargers, etc) - operable - users can interact with all controls and interactive elements using either the mouse, keyboard, or an assistive device - understandable - content is clear and limits confusion and ambiguity - robust - a wide range of technologies (including old and new user agents and assistive tech) can access the content --- # [fit] So how do we do this? ^ web accessibility is easy! once you understand how important it is and learn the techniques for making content accessible, it’s relatively easy to do. ^web accessibility is a process. an accessible site doesn’t happen overnight, and i know i’m always finding new things i can do to make the sites i work on more accessible. it’s not something to achieve, but something to always strive for. ^so, what are some things that make our sites less accessible, why do they matter, and how can we fix them? i have about a dozen or so examples, which are just a small sample of common accessibility issues. --- ## Document Language Missing ```html Web Accessibility 101 ``` ^ what it means: the language of the document isn’t identified ^ why it matters: identifying the language of the page allows screen readers to read the content in the appropriate language. it also facilitates automatic translation of content. ^ how to fix it: identify the document language using the attribute (or whatever non-english language) --- ## Document Language - Fixed! ```html Web Accessibility 101 ``` --- ## Missing Form Label ```html ``` ![inline](/Users/stephaniemarx/Desktop/Screen Shot 2016-04-30 at 12.08.37 AM.png) ^ what it means: a form control doesn’t have a corresponding label ^ why it matters: if a form control doesn’t have a properly associated text label, the function or purpose of that form control may not be presented to screen reader users. form labels also provide visible descriptions and larger clickable targets. ^ how to fix it: if a text label is visible for a form control, use the