• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
So How Do I Know if My Website is Accessible?
 

So How Do I Know if My Website is Accessible?

on

  • 376 views

Presentation I delivered on Global Accessibility Awareness Day - May 15th 2014. It was delivered as part of Inclusive Design 24 - 24 hours of accessibility webinars. The event was sponsored by the ...

Presentation I delivered on Global Accessibility Awareness Day - May 15th 2014. It was delivered as part of Inclusive Design 24 - 24 hours of accessibility webinars. The event was sponsored by the Paciello Group and Adobe.

The presentation is aimed at developers and website administrators who may have heard about accessibility, but who'd like to learn more.

It sets out a series of yes/no questions that anyone can answer about their own websites - using simple techniques and a couple of useful tools that you can download.

The presentation doesn't cover all aspects of web accessibility, but if you can answer these questions correctly about your website, then it's going to be more accessible than many.

Statistics

Views

Total Views
376
Views on SlideShare
360
Embed Views
16

Actions

Likes
3
Downloads
0
Comments
0

1 Embed 16

https://twitter.com 16

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    So How Do I Know if My Website is Accessible? So How Do I Know if My Website is Accessible? Presentation Transcript

    • Coolfields Consulting www.coolfields.co.uk @coolfields So, how do I know if my website is accessible? Graham Armfield Web Accessibility Consultant WordPress Developer graham.armfield@coolfields.co.uk @coolfields
    • What I’m going to cover Web Content Accessibility Guidelines (Version 2) published by the Web Accessibility Initiative of the World Wide Web Consortium http://www.w3.org/TR/WCAG20/ A.K.A. WCAG2.0 • Good resource for accessibility • But can be hard to interpret @coolfields
    • What I’m going to cover So how about a simple yes/no checklist? Easy to check – with free tools @coolfields
    • Health warning In time available I can only cover some common accessibility issues. But, if you can answer these questions correctly, your site will be more accessible than many. 4@coolfields
    • Coolfields Consulting www.coolfields.co.uk @coolfields Keyboard Interaction
    • Keyboard interaction You need to answer Yes to these: 1) Can I easily access all parts of the site with the keyboard only? 2) Can I easily see where keyboard focus is? 6@coolfields
    • Keyboard interaction 7 Hover states
    • Keyboard interaction 8 Hover states Keyboard focus
    • Keyboard interaction CSS a:hover {background:#fff, color:#000} a:hover, a:focus {background:#fff, color:#000} Don't do this: a:focus {outline:none} 9@coolfields
    • Keyboard interaction 10@coolfields Keyboard accessible dropdown menus are possible
    • Keyboard interaction 11 You need to answer Yes to this: 3) Can I easily access all functionality with the keyboard only? @coolfields
    • Keyboard interaction 12
    • Keyboard interaction 13 When lightbox opens, focus remains on page below
    • Keyboard interaction 14 You need to answer Yes to this: 4) Does the keyboard tab order make sense? @coolfields
    • Coolfields Consulting www.coolfields.co.uk @coolfields Photo: Links
    • Links Can you answer Yes to this one? 5) Are the links obviously links? 16@coolfields
    • Links Can you answer Yes to this one? 6) Do all links provide enough information to state where they lead to? 17
    • Links Can you answer Yes to this one? 6) Do all links provide enough information to state where they lead to? 18
    • Links Can you answer No to this one? 7) Do any of your links open new windows or panels without letting the user know in advance? 19 Lightbox functionality – there is no warning that this panel will open
    • Coolfields Consulting www.coolfields.co.uk @coolfields Media
    • Media Can you answer Yes to this? 8) Do all images have appropriate alternate text? (appropriate may mean empty ie alt="") 21@coolfields
    • Media Using the Wave Toolbar 22@coolfields
    • Media Can you answer Yes to this? 9) Do all videos have captions? 23@coolfields
    • Coolfields Consulting www.coolfields.co.uk @coolfields Signposting Content Photo: thepicturedrome
    • Signposting content Can you answer Yes to this? 10) Are the page titles unique and meaningful? 25@coolfields
    • Signposting content Can you answer Yes to this? 11) Do pages have appropriate headings and subheadings? 26@coolfields
    • Using headings 27 Headings list from NVDA screen reader Note: NVDA exposes heading hierarchy Heading are used as a navigation feature
    • Using headings 28
    • Coolfields Consulting www.coolfields.co.uk @coolfields Text
    • Text Can you answer Yes to this one? 12) Can I resize text in a page without breaking the layout? 30@coolfields
    • Normal size NB: Resizing and zooming are not the same thing Text 31@coolfields Larger size
    • Text Can you answer No to this one? 13) Is any of the text fully justified? 32@coolfields
    • Text 33 Left aligned text
    • Text 34 Left aligned textFully justified text
    • "Rivers of white space" Text 35 Left aligned textFully justified text
    • Coolfields Consulting www.coolfields.co.uk @coolfields User Input Photo: AlecCouros
    • User input Can you answer Yes to this one? 14) Do all form fields have an accompanying label? 37@coolfields
    • User input 38
    • User input 39
    • Coolfields Consulting www.coolfields.co.uk @coolfields Colour & Shape
    • Colour & shape Can you answer Yes to this one? 15) Is the colour contrast sufficient? 41
    • Colour contrast 42
    • Colour contrast 43 Colour Contrast Analyzer Tool
    • Colour contrast 44@coolfields
    • Colour & shape Can you answer No to this one? 16) Is meaning conveyed by colour or shape only? 45@coolfields
    • Colour & shape 46 Project Name Status Fully Resourced? Easy peasy project a Quite a tricky project a So glad I'm not on that project r Going OK a @coolfields
    • Colour & shape 47 Project Name Status Fully Resourced? Easy peasy project a Quite a tricky project a So glad I'm not on that project r Going OK a @coolfields Green Green Amber Red
    • Useful links Colour Contrast Analyzer • http://paciellogroup.com/resources/contrastAnalyser Wave Toolbar • http://wave.webaim.org/toolbar/ 48
    • Thanks for listening Any questions? graham.armfield@coolfields.co.uk @coolfields 49
    • Some things I didn't cover • Form submission errors • Movement/flashing on pages • Audio on pages • Updating content after page loaded • Timeouts • Data tables 50@coolfields • Keyboard traps • CAPTCHAs • Skip links • Alternate navigation • Indicating language • Triggering actions • Automated page refreshing • PDFs
    • All the questions together 1) Can I easily access all parts of the site with the keyboard only? Right answer - Yes 2) Can I easily see where keyboard focus is? Right answer – Yes 3) Can I easily access all functionality with the keyboard only? Right answer – Yes 4) Does the keyboard tab order make sense? Right answer – Yes 5) Are the links obviously links? Right answer – Yes 6) Do all links provided enough information to state where they lead to? Right answer – Yes 7) Do any of your links open new windows or panels without letting the user know in advance? Right answer – No 8) Do all images have appropriate alternate text? Right answer - Yes 51@coolfields 9) Do all videos have captions? Right answer – Yes 10) Are page titles unique and meaningful? Right answer – Yes 11) Do pages have appropriate headings and subheadings? Right answer – Yes 12) Can I resize text in a page without breaking the layout? Right answer – Yes 13 ) Is any of the text fully justified? Right answer – No 14) Do all form fields have an accompanying label? Right answer – Yes 15) Is the colour contrast sufficient? Right answer – Yes 16) Is meaning conveyed by colour and shape only? Right answer - No