Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Scope website - how to make an accessible website

Website accessibility presentation from Kentico Connection 2014 - Prague.
Explaining how we made the Scope website within Kentico accessible

  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Scope website - how to make an accessible website

  1. 1. Scope - how to make an accessible website Ilesh Mistry – Kentico MVP
  2. 2. Agenda • Introductions • Ilesh Mistry • MMT Digital • Scope • Accessibility Standards • Survey • Ways to make your site accessible • Questions
  3. 3. Introductions
  4. 4. Solutions Architect @ MMT Digital Kentico MVP Ilesh.m@mmtdigital.co.uk Ilesh Mistry http://www.mmtdigital.co.uk/Ilesh-Mistry
  5. 5. MMT Digital
  6. 6. About Scope • Together we can create a better society • Scope is one of the largest charities in UK and has been running for more than 60 years! • Recently launched the End the Awkward campaign • Check out some of these sort videos • http://www.youtube.com/watch?v=QX84nJoP4zc • http://www.youtube.com/watch?v=vE2HgtoOE7g • http://www.youtube.com/watch?v=6wG_p7nc3wk
  7. 7. Introduction to Accessibility Standards • WAI (Web Accessibility Initiative) accessibility guidelines • Developed by the W3C (World Wide Web Consortium) • Community Input • Globally recognised • WCAG (Web Accessibility Content Guidelines) • Globally recognised standard for web content accessibility • Made into an ISO standard (40500:2012) • For designers, developers and authors • Crossover into other mediums (mobile) • WCAG P.O.U.R Principles • Perceivable (text alternatives, captions) • Operable (keyboard, moving content) • Understandable (readable, predictable) • Robust (compatible with current and future tools)
  8. 8. Introduction to Accessibility Standards
  9. 9. Kentico Connection 2014 – Family Fortunes
  10. 10. ============================================= KENTICO CONNECTION 2014 - FAMILY FORTUNES ============================================= Name something you would do to make your Kentico website accessible? 1. 2. 3. 4. 5. =============================================
  11. 11. Website Development Accessibility • Accessibility consideration • Ways to make the site accessible • HTML • ALT and TITLE • Links • CSS • Colour Contrast • Forms • Media • ARIA • Third Party widgets/content • Accessibility Checking / Testing
  12. 12. Accessibility Consideration • Disability Types • Blindness or Low Vision • Deaf/Hard-of-Hearing • Learning Disabilities • Physical Disabilities • There are lots more • But that shouldn’t stop them from using your web site • One web site for ALL
  13. 13. Accessibility consideration • When you hear the word 'disabled,' people immediately think about people who can't walk or talk or do everything that people take for granted. Now, I take nothing for granted. But I find the real disability is people who can't find joy in life and are bitter. Teri Garr • The only disability in life is a bad attitude. Scott Hamilton • The world worries about disability more than disabled people do. Warwick Davis
  14. 14. Accessibility consideration • The issues disabled people face everyday using web sites • Alternative text for graphics not supplied or inappropriate • Video/Audio no transcript and captions provided • Focus highlighting – I don’t know where I am! • Increasing font size does not change anything for me • I can’t click on that button using my keyboard • Has something changed on the page? • I can’t see that text on that background • What’s that area to do with? • Why is everything mixed up? • Clicked on a link and where did it go?
  15. 15. Accessibility Consideration
  16. 16. Ways to make the site accessible - HTML • HTML Language for screen readers • Not an easy way to set this, so working with Kentico • HTML5 Semantics • Use HTML5 - sections, articles, asides, nav as and when appropriate • Heading Hierarchy • Appropriate heading markup should be formatted in an hierarchal approach • Use the appropriate semantic markup. • A button should be a HTML5 button and not a HTML DIV that can be clicked. Using the right tools for the right job.
  17. 17. Ways to make the site accessible - ALT and TITLE • Accessibility basic standards should be followed • Images should ALWAYS have a ALT tag describing the image and not be misleading/inappropriate MISLEADING Image alt – Winner APPROPRIATE Image alt - F1 driver Lewis Hamilton holding a trophy in the air celebrating his victory • For images that are not Kentico content and not in the CSS, an arrow for example, then you will still need to use the ALT tag, but it needs to be empty • <img src=“/images/arrow.png” alt=“” /> • Links need to have appropriate TITLE tags • <a href=“/home” title=“Go to the homepage”>Home</a>
  18. 18. Ways to make the site accessible - Links • Open in a new window should be clear for the user to see • When doing something like this, that bit of the text should always come before the link, as the screen readers will read from top to bottom. • If you go a navigation it is useful to have a skip to content link • Using a link to jump to the content ID • Always point to an Accessibility page listing the web site accessibility
  19. 19. Ways to make the site accessible - CSS • Font sizes should be created using relative units • EM, REM, % • E.g. h2 {font-size: 2.2em;} • CSS focus highlighting is essential to a site and can be created using the following • a:focus { outline-width: 4px; outline-style: solid; outline-color: green; } • Add the focus to anything that needs tabbing on to, which includes forms as well • a:focus, input:focus, input:active, input[type=text]:focus, input[type=password]:focus, input[type=checkbox]:focus, textarea:focus, select:focus { outline-width: 4px; outline-style: solid; outline-color: green; }
  20. 20. Ways to make the site accessible - Colour Contrast • Applying colour on a site it is essential to check the colour contrast. • A good way to check this is to use tools like Colour Contrast Check, you can put a foreground and background colour to check whether it would pass the Accessibility compliance you require
  21. 21. Ways to make the site accessible - Kentico Forms • When you create forms you need to follow standard practices to have the forms within a fieldset and labels with related inputs. Fieldset Legend Fields with corresponding labels • Label ‘for’ attribute should be the same as ‘id’ of the field http://www.scope.org.uk/about-us/contact-us/ask-question • Adding focus to fields is a massive plus • Adding mandatory field information is also essential with relevant help text
  22. 22. Ways to make the site accessible - Media (Kentico Transformations) • When adding media to the site like a YouTube video, you need to consider adding a transcript, title of the video and any additional information concerning the video. • The image below shows how a YouTube video can be embedded along with the accessibility information
  23. 23. Ways to make the site accessible - ARIA (Kentico Templates) • Accessible Rich Internet Applications (ARIA) • Defines way to make your web dynamic content/applications more accessible • WAI-ARIA attributes • Roles – <form role=”search”> purpose of element • States – <button aria-pressed=”true”> provides more information • Properties – <input aria-required=”true”> provides more information
  24. 24. Ways to make the site accessible - ARIA (Kentico Templates) • Accessible Rich Internet Applications (ARIA) • ARIA landmark roles, which define important parts of a page which can be reached by the user quickly e.g. navigation, search etc…
  25. 25. Ways to make the site accessible - ARIA (Kentico Templates) • Accessible Rich Internet Applications (ARIA) • ARIA landmark roles, which define important parts of a page which can be reached by the user quickly e.g. navigation, search etc… • <div role="banner">banner</div> <div id="left-column"> <div role="navigation"> <ul> <li><a href="#">Nav link #1</a></li> <li><a href="#">Nav link #2</a></li> <li><a href="#">Nav link #3</a></li> <li><a href="#">Nav link #4</a></li> </ul> </div> </div>
  26. 26. Ways to make the site accessible - ARIA • Accessible Rich Internet Applications (ARIA) • Live Regions – update the user that dynamic content has changed e.g. JS or AJAX calls that change content • Dynamic content • Tabs can be achieved using this JS and CSS – Accessible ARIA Tabs
  27. 27. Ways to make the site accessible - ARIA • Accessible Rich Internet Applications (ARIA) • Dynamic content • The HTML view for this would look a bit like this • An example of this working is on the Scope web site https://www.scope.org.uk/donate
  28. 28. Third Party widgets/content • What happens when you use third party widgets/content, which you can’t make accessible?
  29. 29. Third Party widgets/content • Add some text to the Accessibility page saying the third party widget/content will not be accessible. • Hidden Text - Add some text off screen to inform the screen reader that the content is not accessible e.g. for the Twitter widget • <div class=‘accessibility-information'> This text is attached to a Twitter widget. Users of screen readers will not be able to easily access the Twitter widget content. This widget is following posts that belong to the user/hashtag. </div> • Remember this text needs to placed before the widget • So position the information text off screen using CSS .accessibility-information {text-indent: -9999px; height: 1px;}
  30. 30. Accessibility Checking / Testing • Various checking tools • Browser toolbars • Site checkers • Page checkers • AChecker - Accessibility Checker • WAVE • W3C - Markup Validation Service • Manual testing • Companies who have accessibility testers in house • Screen readers • JAWS • Thunder Screenreader • NVDA • Alternative to Screen Reader • Fangs – Chrome add on
  31. 31. Questions?
  32. 32. Thank You http://www.mmtdigital.co.uk/Ilesh-Mistry https://twitter.com/ileshmistry https://www.facebook.com/ilesh.mistry https://www.linkedin.com/in/ileshmistry https://plus.google.com/+IleshMistry ilesh.m@mmtdigital.co.uk

×