Intranet now accessibility workshop

  • Published on
    13-Feb-2017

  • View
    196

  • Download
    1

Embed Size (px)

Transcript

Andrew Doyle and Billy Clackers @Invotra #IntranetNowAccessibility Workshop

Welcome to our accessibility workshop, Im Billy and this is Andrew. Andrew has been leading our accessibility drive for the past 6-8 months. You may have seen Pauls key note on accessibility earlier on. Well were going a little more in depth and will be taking you through some useful tools & tips on how to make your intranet more accessible from a content creation point of view.

Andrew Doyle and Billy Clackers @Invotra #IntranetNowTesting it out

Use free tools out there, we use WaveTest with a screen-readerWhich screen reader?

Billy: The first step to making your intranet more accessible is to test it. There are a wide variety of tools out there, but we tend to use Wave which well show you shortly. Another extremely useful method is to actual use a screen reader and turn off your monitor. We actually did this in our office. We thought we were accessible until we did this.

Which screen reader? IE - Jaws, FF - NVDA, iOS - VoiceOver, Linux - Orca

Tools - WAVE (great for checking a page one-by-one to identify any issues, it flags any failures, suggestions or any good stuff like a heading present, clicking the flag provides information laid out in English to let you know why this is fails/passes, why its good/bad, how to fix it and the references to the guidelines) ; http://achecker.ca/checker/index.php (for checking the entire site) || Screen readers are built for certain browsers: JAWS for IE, NVDA for FF, VoiceOver for iOS, Orca for Linux || Hands-on testing

Andrew Doyle and Billy Clackers @Invotra #IntranetNowThe basics

(common mistakes and how to resolve them)

Firstly, were going to be talking to you about the basics. The common mistakes that many people make and how to resolve them. For each of the next few slides well be demoing live using JAWS.

Andrew Doyle and Billy Clackers @Invotra #IntranetNowDeciding alt text

Context of the imageThe level of detailWhen to have empty alt text

First up is alt text. This is probably the most widely known html attributes for accessibility purposes. However there tends to be confusion around when alt text should actually be used and just how useful is it?

Andrew is going demonstrate using 2 basic images of a lion. One with alt text and one without. Notice the difference and imagine not being able to see the pictures.

Andrew Doyle and Billy Clackers @Invotra #IntranetNowFormatting lists

Use the lists provided in your web editorDont use your own

Next well show you why NOT using native html lists can cause problems for screen readers. For example, if you use hyphens or an asterisk instead of an ordered or unordered list then the user is presented with less information. In addition there are special keys you can use to find lists when using a screen reader, they will only be picked up if you use the native html lists.

Andrew is going to show you a basic example of how a screen reader interprets 4 different lists. Listen out for the additional information provided with the native html lists.

Andrew Doyle and Billy Clackers @Invotra #IntranetNowUsing your headings correctly

They need to be logicalBe careful with bold text

Now we will take a look at using headings correctly. A common mistake people make is using bold text for a heading. If you do this, a screen reader will not interpret that text as an important heading on the page. Many screen reader users will navigate the page using headings and if you use bold text, it will be missed.

Andrew will now demonstrate how a screen reader interprets a simple html page which has 3 real headings, and 3 fake headings.

Andrew Doyle and Billy Clackers @Invotra #IntranetNowDont obscure text with colour

Colour contrastSmall text vs large textColour checker

Lastly we will take a look at colour contrast. People who are colour blind will struggle to see text depending on the contrast between the font colour and the background colour.

We use a great tool which allows you to check the contrast of your font & background, which tells you whether or not the text is accessible for colour blind people. Andrew will demonstrate to you how to use the tool now.

Andrew Doyle and Billy Clackers @Invotra #IntranetNowAny questions?

andrew.doyle@invotra.combilly.clackers@invotra.com

Thank you for listening, feel free to email us!

Weve only touched the high level basics here around content creation. The actual navigation etc will depend on your supplier and/or developers.

Feel free to approach us for any more advanced tips such as using ARIA.

Recommended

View more >