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

1. Scope - how to make an
accessible website
Ilesh Mistry – Kentico MVP

2. Agenda
• Introductions
• Ilesh Mistry
• MMT Digital
• Scope
• Accessibility Standards
• Survey
• Ways to make your site accessible
• Questions

3. Introductions

4. Solutions Architect @ MMT Digital
Kentico MVP
Ilesh.m@mmtdigital.co.uk
Ilesh Mistry
http://www.mmtdigital.co.uk/Ilesh-Mistry

5. MMT Digital

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. 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. Introduction to Accessibility Standards

9. Kentico Connection 2014 –
Family Fortunes

10. =============================================
KENTICO CONNECTION 2014 - FAMILY FORTUNES
=============================================
Name something you would do to make your Kentico
website accessible?
1.
2.
3.
4.
5.
=============================================

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

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Third Party widgets/content
• What happens when you use third party widgets/content, which
you can’t make accessible?

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

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