Intranet now accessibility workshop
•Download as PPTX, PDF•
0 likes•924 views
What steps can you take to make your intranet more accessible? Andrew Doyle and Billy Clackers of Invotra explain more. Read the accompanying blog at: https://www.invotra.com/blogs/improving-accessibility-your-intranet
Recommended
Recommended
More Related Content
Recently uploaded
Recently uploaded (20)
Featured
Featured (20)
Intranet now accessibility workshop
- 1. Andrew Doyle and Billy Clackers @Invotra #IntranetNow Accessibility Workshop
- 2. Andrew Doyle and Billy Clackers @Invotra #IntranetNow Testing it out ● Use free tools out there, we use Wave ● Test with a screen-reader ● Which screen reader?
- 3. Andrew Doyle and Billy Clackers @Invotra #IntranetNow The basics (common mistakes and how to resolve them)
- 4. Andrew Doyle and Billy Clackers @Invotra #IntranetNow Deciding alt text ● Context of the image ● The level of detail ● When to have empty alt text
- 5. Andrew Doyle and Billy Clackers @Invotra #IntranetNow Formatting lists ● Use the lists provided in your web editor ● Don’t use your own
- 6. Andrew Doyle and Billy Clackers @Invotra #IntranetNow Using your headings correctly ● They need to be logical ● Be careful with bold text
- 7. Andrew Doyle and Billy Clackers @Invotra #IntranetNow Don’t obscure text with colour ● Colour contrast ● Small text vs large text ● Colour checker
- 8. Andrew Doyle and Billy Clackers @Invotra #IntranetNow Any questions? andrew.doyle@invotra.com billy.clackers@invotra.com
Editor's Notes
- Welcome to our accessibility workshop, I’m 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 we’re 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.
- 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 we’ll 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 it’s 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
- Firstly, we’re 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 we’ll be demoing live using JAWS.
- 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.
- Next we’ll 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.
- 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.
- 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.
- Thank you for listening, feel free to email us! We’ve 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.