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

Agenda• Introductions• Ilesh Mistry• MMT Digital• Scope

• Accessibility Standards• Survey• Ways to make your site accessible• Questions

Introductions

Solutions Architect @ MMT Digital

Kentico MVP

Ilesh.m@mmtdigital.co.uk

http://www.mmtdigital.co.uk/Ilesh-Mistry

Ilesh Mistry

MMT Digital

• 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

About Scope

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)

Introduction to Accessibility Standards

Name something youwould do to

make your Kenticowebsite accessible?

Kentico Connection 2014 – Family Fortunes

=============================================

KENTICO CONNECTION 2014 - FAMILY FORTUNES=========================================

==== Name something you would do to make your Kentico website accessible? 1. 2. 3. 4. 5. =========================================

====

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

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

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

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?

Accessibility Consideration

Ways to make the site accessible

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

- HTML

Ways to make the site accessible

• Accessibility basic standards should be followed• Images should ALWAYS have a ALT tag describing

the image and not be misleading/inappropriate

MISLEADINGImage alt – Winner

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

- ALT and TITLE

Ways to make the site accessible

• 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

- Links

Ways to make the site accessible

• 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;

}

- CSS

Ways to make the site accessible

• Applying colour on a site it is essential tocheck 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

- Colour Contrast

Ways to make the site accessible

• When you create forms you need to follow standard practices to have the forms within a fieldset and labels with related inputs. Fieldset

LegendFields with corresponding labels

• Label ‘for’ attribute should be the same as ‘id’ of the fieldhttp://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

- Kentico Forms

Ways to make the site accessible

• 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

- Media (Kentico Transformations)

Ways to make the site accessible

• 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

- ARIA (Kentico Templates)

Ways to make the site accessible

• 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…

- ARIA (Kentico Templates)

Ways to make the site accessible

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

- ARIA (Kentico Templates)

Ways to make the site accessible

• 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

- ARIA

Ways to make the site accessible

• 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

- ARIA

Third Party widgets/content• What happens when you use third party

widgets/content, which you can’t make accessible?

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;}

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

Questions?

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

Thank You