1.
The Accessible Web
Presented by FamilySearch

2.
Steven Lambert
Web Developer @ FamilySearch

3.
What does it mean?
Accessible: capable of being reached or
used
http://www.merriam-webster.com/dictionary/accessible

4.
Accessible Web: Usable by 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

6.
If a user goes to your website they get something back
Uptime

7.
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

8.
Uptime is based on the users perspective

9.
Industry standard: 99.9% (43.2 min/month or 8.76
hours/year)

10.
Improve uptime:
• use a 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

11.
Speed
How fast your website returns usable content

12.
http://www.lukew.com/ff/entry.asp?1797

13.
Perceived performance is more important than actual
performance

14.
How users perceive response 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/

15.
Perceived speed becomes more important for
international users

16.
http://www.slideshare.net/OnDevice/the-mobile-only-internet-generation

17.
http://designingforperformance.com/performance-is-ux/

18.
http://www.ericsson.com/res/docs/2014/ericsson-mobility-report-november-2014.pdf

19.
85% of mobile users expect sites to load at least as fast or
faster than on a desktop
http://designingforperformance.com/performance-is-ux/

20.
85% of mobile users expect sites to load in 5-10 seconds

21.
Improve speed:
• make as 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)

22.
Core Experience
Core content and functionality for all users

23.
https://twitter.com/brad_frost/status/618083742993752065

24.
Core content: the fundamental 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

25.
Core functionality: functionality needed in order to use the
core content

26.
Core experience must be agnostic to device, platform, or
browser and fault tolerant

27.
Core experience must be rendered on the server

28.
Use progressive enhancement to give a better
experience

29.
A caveat: Most JavaScript frameworks do not support core
experiences

30.
React.js does, and Ember.js is currently working on it

31.
A11Y (Accessibility)
Inclusion practices for removing barriers
for users with disabilities

32.
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)

33.
A lot of these impairments can develop as you get older or
even come and go with injuries

34.
Unfortunately, it can be difficult to remove barriers that you
haven’t experienced

35.
Luckily, a little work can go a long way

36.
Color blind:
• don’t use color alone to convey meaning
• use good color contrasts for text

37.
Deaf:
• provide text transcripts for audio clips
• provide closed captioning for audio clips

38.
Motor:
• avoid mouse only interactions, use keyboard alternatives
• make sure all core functionality is accessible via the
keyboard
• make sure tab order makes sense (especially when
canceling actions)

39.
Learning:
• simplify layout as 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

40.
Blind:
• ensure valid HTML 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

41.
Additional information:
http://bit.ly/WebAim

42.
Usability
Quality attribute that defines ease-of-use

43.
Users will leave your site if they get lost, frustrated,
confused, or can’t find what they want

44.
5 E’s of usability:
• 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

45.
Not all five categories need to apply to every task

46.
Improve usability:
• reduce number 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/

47.
Questions?