Best Practices to Make your Web Application Accessible
- 1. BEST PRACTICES TO MAKE YOUR WEB APPLICATION ACCESSIBLE TATIANE AGUIRRES NOGUEIRA
- 2. TATIANE AGUIRRES NOGUEIRA Front-end Developer @tatianeaguirres tatianeaguirres.com Utrecht, Netherlands
- 3. WHY HAVING AN ACCESSIBLE WEBSITE ISN'T A PRIORITY?
- 5. WHY ACCESSIBILITY IS SO ESSENTIAL NOWADAYS?
- 6. •According to data, disabled people represent 6.7% of the Brazil population •In 2019, the total population of Brazil was estimated at almost 210 million •14 million people with disabilities in Brazil
- 7. WHO ARE THESE USERS? HOW DO WE MAKE OUR WEB APPS ACCESSIBLE TO THEM?
- 8. PHYSICAL OR MOTOR DISABILITIES • If a person has an injury or disability that hinders normal physical functioning, they will be described as having a physical impairment. If the person has a loss or limited function in their muscle control, movement or mobility, they will be described as having a motor impairment. • Includes: Spinal Cord Injury, Amputation, Musculoskeletal Injuries (Back Injury), Arthritis, Muscular Dystrophy, Parkinson's Disease. Stephen Hawking
- 9. WHAT NOT TO DO Need for precision Grouping of close interactions Content that requires a lot of mouse movement Show messages for a short period of time Tire users with a lot of typing and scrolling
- 10. WHAT TO DO Large clickable areas Spacing between form fields Design to use only the keyboard or screen reader Design for mobile and touch screens in mind Provide shortcuts
- 11. AUTISM SPECTRUM DISORDER • Autism spectrum disorder is a condition related to brain development that impacts how a person perceives and socializes with others, causing problems in social interaction and communication. • Includes: Asperger Syndrome and Autism. Anthony Hopkins
- 12. WHAT NOT TO DO Large blocks of text Buttons with general text Bright contrasting colors Complex and disorderly layouts Figures of speech and idiomatic expressions
- 13. WHAT TO DO Simples phrases and labels Descriptive buttons Simple colors Consistent and intuitive layouts Describe everything clearly and simply DO IT!
- 14. DYSLEXIA • Dyslexia is a learning disorder that involves difficulty reading due to problems identifying speech sounds and learning how they relate to letters and words (decoding). Also called reading disability, dyslexia affects areas of the brain that process language. • Types of Dyslexia: Phonological Dyslexia, Surface Dyslexia, Rapid Automatic Naming Dyslexia, Double Deficit Dyslexia, Dyscalculia, Dysgraphia, Left-Right Confusion. Steven Spielberg
- 15. WHAT NOT TO DO Large blocks of text Underline words, use italics and write in capital letters Force the user to remember things from previous pages Depend on correct spelling (provide suggestions) Lots of information in one place DON’T DO IT
- 16. WHAT TO DO Keep content short, clear and simple Use images and diagrams to follow texts Align text to the left and maintain layout consistency Consider producing materials in other formats Allow users to change the contrast between background and text Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- 17. HEARING IMPAIRED OR DEAF • The difference between being hard of hearing and being deaf lies in the degree of hearing loss. People typically use being hard of hearing to describe mild-to-severe hearing loss. Meanwhile, deafness refers to profound hearing loss. Deaf people have very little, if any, hearing. • Main cause: genetics, ageing, exposure to noise, some infections, birth complications, trauma to the ear, and certain medications or toxins. A common condition that results in hearing loss is chronic ear infections. Millie Bobby Brown
- 18. WHAT NOT TO DO Large blocks of text Use audio or video content only Do not allow the phone to be the only means of communication Complex and disorderly layouts Figures of speech and idiomatic expressions
- 19. WHAT TO DO Split content with subtitles, images and videos Describe everything clearly and simply Use captions and provide transcripts for videos Consistent and intuitive layouts Allow the user to choose their best means of communication DO IT!
- 20. LOW VISION • Low vision generally refers to people who can see but have an impairment that impacts their vision. Low vision only includes impairments that are not mitigated with regular glasses, contact lenses, medicine, or surgery. Only when it interferes with a person's ability to perform daily activities, is it considered a visual impairment. • Main cause: eye diseases and health conditions such as cataracts, glaucoma, and diabetes, birth conditions or injuries. Johnny Depp
- 21. WHAT NOT TO DO Low contrast and small fonts “Hide” information in download files Use only colors to transmit messages Spread content and need to scroll screen Separate actions from their context Aa + 200%
- 22. WHAT TO DO Good contrast and readable font size All information directly in HTML pages Use combination of colors, shapes and text Logical and linear layout ensuring good readings with zoom Build buttons and notifications within context Aa + 200%
- 23. SCREEN READER USER • Screen readers convert digital text into synthesized speech, and they allow users to listen to the website content and navigate with the keyboard. This technology helps people with special needs to have independence and privacy to surf the internet. • Disability Types: Blindness, Low Vision/Visually- Impaired, Cognitive, Deafness/Hard-of-Hearing, Motor and others. Blindness Low Vision / Visually- Impaired Cognitive Deafness Motor Other Webaim Screen Reader User Survey 2015 https://webaim.org/projects/screenreadersurvey6/
- 24. WHAT NOT TO DO Display content in video and image only Force user to use mouse or touch to interact Spread content across the page Structure dependent on text size, style and location Badly descriptive titles and links <p class=“u-font-36”>Title</p> <p class=“u-font-24”>Subtitle</p> <p class=“u-font-12”>Content</p> Click here
- 25. WHAT TO DO Describe images and provide transcripts for videos Semantic HTML Build for keyboard use only Inform the language of your app Self-describing links and titles <h1> <nav> <label> <section> <alt> Contact us<html lang="en">
- 26. CONCLUSION
- 27. REFERENCES •World Wide Web Consortium (W3C) - https://www.w3.org/ •WebAIM - https://webaim.org/ •Michael K Sahota - https://twitter.com/michaelsahota •Web Accessibility I: Make Your Website Accessible to Keyboard Users - https://www.tatianeaguirres.com/blog/2020-07-20-web-accessibility-1/
- 28. THANKS! Slides available at https://tatianeaguirres.github.io/public-speaking