Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Web Accessibility Compliance

Well done!

You have completed Web Accessibility Compliance!

Sign up for Treehouse Back to Library

Gestures and Touch

2:46 with Aisha Blake

Long gone are the days when everyone was glued to a desktop if they wanted to access the web. We use so many different devices and those devices are all different sizes and have different capabilities. We need to be aware of how the lack of a traditional keyboard and mouse can affect the accessibility of our apps.

Resources

Touch Screen Detection Code Snippet

Further Reading

You Can’t Detect a Touchscreen
Detecting Touch: It’s the Why, Not the How
The JavaScript in operator
How to Win at Mobile Accessibility

Example Sites

Touch screen hover state alternative

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    Long gone are the days when everyone was glued to a desktop if they wanted to 0:00
    access the web. 0:05
    We use so many different devices and 0:06
    those devices are all different sizes and have different capabilities. 0:09
    We need to be aware of how the lack of a traditional keyboard and 0:14
    mouse can affect the accessibility of our apps. 0:17
    Keep in mind that we still need to account for 0:20
    other types of input devices that we might be less familiar with. 0:23
    Users of touchscreen devices might be using voice commands or 0:27
    a little head jiggle to navigate your app. 0:30
    One of the first topics that come to mind when considering touch screen devices 0:34
    is how to detect them in the first place. 0:38
    A number of strategies have been developed over the years but 0:41
    the short answer is that it can't be done reliably. 0:45
    One pretty widely accepted technique though, 0:48
    is to use a variable with a bullion value. 0:51
    We're looking for the ontouched start property in this document object. 0:54
    You might also see the window object used for the same purpose. 0:59
    If the property exist of the object, the value of our variable will be true and 1:04
    any code we place inside our conditional statement will run. 1:09
    This will work as expected in a lot of cases. 1:12
    But some browsers will always indicate a touch device when using this method. 1:15
    While others might be affected by the user's settings or operating system. 1:19
    See the teacher's notes for more detailed information. 1:23
    The point here is that we can't rely on any one technique to tell us accurately 1:26
    whether the user has a touch screen in every single case. 1:30
    Knowing that, we can make more informed design decisions and more accessible apps. 1:34
    A common reason for a developer to attempt to detect touch devices is 1:40
    to create alternatives for elements with hover states. 1:44
    Let's check out a real world example. 1:47
    Here we see a breakdown of the different type of vehicles that can be searched for 1:50
    on this site. 1:54
    Cars, trucks, SUVs and so on. 1:55
    If we hover over any of these sections, two buttons appear. 1:58
    Which gives the option to dig into either new or used vehicles in that category. 2:02
    Let's open up the developer tools in device mode. 2:08
    You may need to refresh the page and or 2:16
    hit simulate touch events depending on the browser you're using. 2:18
    Once I do that the links are visible by default. 2:24
    A mobile user can just tap the link they want and keep moving. 2:28
    This technique works, but it's not infallible. 2:32
    And it's important to be aware of the risks you're taking. 2:35
    Consider implementing something like the mobile version of this by default. 2:38
    And using hover states for enhancement of non critical features 2:42

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up