The Accessible Web
Download as PPTX, PDF0 likes338 views
The document discusses key concepts of web accessibility and performance, emphasizing the importance of creating a usable web experience for all users, regardless of their devices or network speeds. It outlines strategies to improve website uptime and speed, noting perceived performance is crucial for user retention, especially on mobile devices. Additionally, it highlights best practices for ensuring accessibility for users with disabilities and enhancing overall usability through efficient design and navigation.
More Related Content
Similar to The Accessible Web(20)
The Accessible Web
- 1. The Accessible Web Presentedby FamilySearch
- 2. Steven Lambert Web Developer@ FamilySearch
- 3. What does itmean? Accessible: capable of being reached or used http://www.merriam-webster.com/dictionary/accessible
- 4. Accessible Web: Usableby any user, anywhere in the world, on their device, with their network speed
- 5. Patty Toland -Design Consistency For The Responsive Web - https://vimeo.com/108331967
- 7. If a usergoes to your website they get something back Uptime
- 9. Causes of downtime: •Scheduled maintenance • Server crash • DoS attack • Dependent service failed (AWS, Heroku, etc.) • JS error that prevents page load • JS error that prevents data the user needs from loading
- 10. Uptime is basedon the users perspective
- 11. Industry standard: 99.9%(43.2 min/month or 8.76 hours/year)
- 12. Improve uptime: • usea CDN • reduce number of assets requested per page • load 3rd party scripts asynchronously • optimize assets • use expire headers on assets • set up monitoring • use a load balancer
- 13. Speed How fast yourwebsite returns usable content
- 14.
- 15. Perceived performance ismore important than actual performance
- 16. How users perceiveresponse times: • 100 milliseconds: feels instantaneous • 1 second: flow of thought begins to become interrupted • 10 seconds: begin to lose interest entirely • > 10 seconds: will abandon task and leave site http://www.nngroup.com/articles/response-times-3-important-limits/
- 17. Perceived speed becomesmore important for international users
- 18.
- 19.
- 20.
- 21. 85% of mobileusers expect sites to load at least as fast or faster than on a desktop http://designingforperformance.com/performance-is-ux/
- 22. 85% of mobileusers expect sites to load in 5-10 seconds
- 23. Improve speed: • makeas few requests as possible • use a CDN • optimize content • compress images • minify and concat static assets • compress web fonts • gzip content • use expire headers on assets • async assets that are not used above-the-fold (critical path)
- 24. Core Experience Core contentand functionality for all users
- 25.
- 26. Core content: thefundamental reason for the webpage and the main reason the user comes to the site http://www.bbc.co.uk/guidelines/futuremedia/glossary.shtml#core-content
- 27. Core functionality: functionalityneeded in order to use the core content
- 28. Core experience mustbe agnostic to device, platform, or browser and fault tolerant
- 29. Core experience mustbe rendered on the server
- 30. Use progressive enhancementto give a better experience
- 31. A caveat: MostJavaScript frameworks do not support core experiences
- 32. React.js does, andEmber.js is currently working on it
- 33. A11Y (Accessibility) Inclusion practicesfor removing barriers for users with disabilities
- 34. Types of disabilities: •sight (blind, color blind, low vision) • hearing (deaf, hearing loss) • motor (Parkinson's disease, unable to use arm, arthritis) • learning (Alzheimer's, ADHD, English as a second language)
- 35. A lot ofthese impairments can develop as you get older or even come and go with injuries
- 36. Unfortunately, it canbe difficult to remove barriers that you haven’t experienced
- 37. Luckily, a littlework can go a long way
- 38. Color blind: • don’tuse color alone to convey meaning • use good color contrasts for text
- 39. Deaf: • provide texttranscripts for audio clips • provide closed captioning for audio clips
- 40. Motor: • avoid mouseonly interactions, use keyboard alternatives • make sure all core functionality is accessible via the keyboard • make sure tab order makes sense (especially when canceling actions)
- 41. Learning: • simplify layoutas much as possible • keep tasks concise, using as few steps as needed • keep navigation and common interactions as consistent as possible • don’t use blinking or flashing text or adverts • organize information into manageable chunks
- 42. Blind: • ensure validHTML with semantic headers • use landmark HTML5 elements (heading, nav, main, article) • provide alt text for images • avoid mouse only interactions, use keyboard alternatives • provide column and row headers on tables • don’t use anchor tags to just active JavaScript, use buttons • ensure text in anchor tags make sense out of context • learn when and how to use aria attributes
- 43.
- 44. Usability Quality attribute thatdefines ease-of-use
- 45. Users will leaveyour site if they get lost, frustrated, confused, or can’t find what they want
- 47. 5 E’s ofusability: • Efficient – speed of task completion • Effective – user goal is met successfully • Engaging – pleasant and satisfying to use • Error tolerant – tolerant to user errors, provides feedback • Easy to learn – good onboarding, low barrier to entry http://www.wqusability.com/articles/more-than-ease-of-use.html
- 48. Not all fivecategories need to apply to every task
- 49. Improve usability: • reducenumber of steps needed to complete tasks • identify user goals and ensure they can be met • reduce feature bloat and UI clutter • increase user exposure hours https://www.uie.com/articles/user_exposure_hours/
- 50.
Editor's Notes
- #4 the term "web accessibility" is overloaded and can carry a negative connotation, mostly is used to refer making websites accessible to users with disabilities however, the term “accessible” means so much more than that
- #5 Accessibility is user centric. Most of my presentation will be from the point of view of the user.
- #6 Abraham Maslow's hierarchy of needs basic needs at the bottom upper levels transcend and include the lower levels highest achievements are possible only with a stable foundation
- #7 Accessible Web hierarchy of needs
- #8 if a user cannot get to your site, it is inaccessible to them. Opposite of uptime is downtime. What does downtime look like?
- #9 A blank screen
- #11 Important to understand that uptime is based on the users perspective. If your servers are all running fine but your site loads too slow or breaks due to a JS error, the site is down to the user
- #12 This is what users expects
- #13 [relate story of my website being DoS attacked with my audio assets] less assets = less points of failure don’t let 3rd party scripts kill your site [relate adobe analytics problems]
- #14 Usable content is an important distinction. Usable content can be interacted with by the user to perform tasks
- #15 Luke Wroblewski (row-blue-ski), an internationally recognized digital product leader, told a story of when he worked on the polling app Polar. His team worked to improve the speed of the page so it loaded quicker. Since they loaded polls asynchronously, they also added a spinner to indicate that polls were being loaded. Shortly after their improvements, users starting giving feedback that the polls felt slower than before, even though the site was in fact much faster. This is because the addition of the spinner made people notice the waiting instead of overlooking it.
- #16 Again, it’s all based on the user’s perspective. So how do users percieve time?
- #17 in 1993 Jakob Nielsen published his book “Usability Engineering” wherein he documented how users perceived time. This was back in 1993, the 10 second limit could easily have dropped to 5 seconds in 2015. Remember uptime? A site is considered down it it is too slow to load. 5-10 seconds = too slow to load
- #19 In some parts of the world, mobile phones are the only way to access the internet
- #20 However, mobile web traffic is slowly becoming the preferred way to browse the internet even when desktop computers are available
- #21 Mobile speeds are slower than desktop speeds. Mobile (aka 3G) is typically 3-4x slower than desktop (4G). A 2 second page load is between 7-8 seconds on mobile. LTE = 4G, HSPA = 3G, EDGE = 2G
- #22 What does this translate to in terms of perceived performance?
- #24 less requests = less round trip time (slowest part) CDN puts assets closer to the users (less time to travel over the wire) optimized content = less bytes transferred critical path – want the usable part of your website available as fast as possible
- #26 No good reason to make your content inaccessible to users by preventing them from seeing it
- #27 Example: Core content of a news site is to allow users to read the news Core content of a games site is to allow users to play games Notice that both of these examples focus of the user’s goals and not the sites goals
- #28 Example: Ability to submit a poll in a polling app
- #29 Any user on any device or browser should be able to access your core experience A bug in you JavaScript code won’t cause a blank screen to appear
- #30 If a user comes to your site using an old Nokia phone (which are popular in Africa), you should still be able to serve them content
- #31 Progressive enhancement means to add functionality and content based on feature detection. Better featured browsers get a better experience while low featured browsers just get the core experience. Doing this helps you to support any device, but still have a browser specific feature set. This is know as “Cutting the Mustard”
- #32 JavaScript frameworks depend on JavaScript, and not only that, a certain capability in JavaScript that not all users may have on their device. They require a bare minimum of JavaScript functionality and browser support. Most recent angular does not support IE9 for example Need to render the page first o the server, then hand off the html and the state to the client. Once the client gets the core experience, can load the JavaScript framework and create a more responsive app. It’s a difficult problem to solve
- #36 Meaning some day you will be affected by some sort of impairment that will make the web harder for you to use
- #37 Example, unless you have done an in-depth study and analysis of how to remove barriers for blind users, it can be hard to understand how to solve problems they run into (or even be aware of them) I have been studying Accessibility techniques for many years, and I still don’t know how to solve some problems
- #38 Just doing basic things can help all users
- #39 Notice that the red and the green colors look the same to a red-green color blind users. This means that stop light colors (red, yellow, green) would be lost on this user and they wouldn’t be able to distinguish between an error and a success.
- #44 Notice that the red and the green colors look the same to a red-green color blind users. This means that stop light colors (red, yellow, green) would be lost on this user and they wouldn’t be able to distinguish between an error and a success.
- #47 How many of you are familiar with this software? Is it usable? What makes it unusable?
- #49 It’s important to identify which usability metrics are important for your program. For example, Photoshop is not easy to learn because of how powerful it is, but it is highly efficient and effective at what it does.
- #50 user exposure means having your entire team (project managers, designers, developers, and qa) going out and watching users use the product