1. Web Accessibility training An introduction to web accessibility

2. Outline Session 1. Web accessibility introduction Session 2. Semantic markup Session 3. Creating content Session 4. Publishing content

3. In todays session: Page components –Images and ALT text –Data tables –Colour contrast

4. Images 2 ways of adding images to webpages –With the image tag –Via the stylesheet We are only focussing on the image tag

5. Displaying Images All images must have an ALT attribute ALT attribute is short for “alternative text” –A way of describing an image in text –Screen readers will announce the text

6. ALT text Not always necessary to have ALT text –If image needs to be explained have ALT text –If image is decorative only no ALT text is required

7. ALT text examples From the AEI website –ALT=“Joint Endeavour Scholarships and Mobility logoB.jpg” –Existing ALT text does not describe the image

8. ALT text examples How can this be fixed? Two Options –ALT=“” –“Endeavour Scholarships and Fellowships Mobility Grants”

9. ALT text examples

10. Tabular data Display tabulated data in tables Screen reader will announce columns and rows A HTML table element provides a structure to the data

11. Creating a basic table Create the table with –End the table with Column headers begin with –Each end with Each row begins with –And end with Each row can have many elements –Each end with

12. Creating a basic table Column Text Row Text Two rows One column

13. Making it accessible All tables must have a caption –Brief description of what the data shows –Located beneath the element This is a caption

14. Making it accessible Table headers must have a scope attribute –Scope describes it as being a column This is a caption This is a column header

15. Making it accessible This is a caption Column Text Row Text

16. Colour contrast Users with a vision impairment may have difficulties identifying onscreen content. –Onscreen content needs to be readable regardless of impairments –Bad colour combinations can make it difficult

17. Colour contrast example Easy to read hard to read

18. Colour contrast Web content accessibility guidelines (WCAG 2.0) about colour contrast are very difficult to understand.

19. Colour contrast 1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA) Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1; Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement. Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.

20. Colour contrast Far too difficult to understand –Just have to ensure colour combinations are accessible –Use free online tools to help you http://webaim.org/resources/contrastchecker/ http://www.visionaustralia.org/digital-access-cca

21. To confuse things further Colour used on webpages is not in the standard RGB format –Hexadecimal (Hex) colour values are used –A RGB colour value needs to be converted to Hex before identifying if the colours are accessible Use free online tools http://www.rgbtohex.net/http://www.rgbtohex.net/

22. However… The AEI website uses predefined styles and colours, you don’t have to consider this when you add content. –Understanding colour contrast is useful to know and appreciate

23. Summary We’ve discussed –Displaying images and ALT text –Displaying data in a table –Colour contrast issues

24. Creating content exercises 1 Do all images using the tag need an ALT attribute? What is ALT text? Does a decorative image require ALT text?

25. Creating content exercises 2 2.1 make the image tag accessible 2.2 provide a description to the image

26. Creating content exercises 3 What 2 things does a require to be accessible? What does scope mean? What does TH, TR, TD mean?

27. Creating content exercises 3 3.1 create a table with 3 columns and 2 rows 3.2 provide a caption for the table 3.3 add the scope attribute to the table

28. Creating content exercises 4 How do you identify if the colour contrast is inaccessible?

29. Any questions? accessibility-testing@ssc.gov.au