Starter

1. Starter Homework presentations 3 people selected at random!

2. Task #1 (5 minutes) Independent research task Research “alt tags” • What are these used for? • How are these used? • How does this benefit website accessibility?

3. Learning Objectives • Define and explain several systems/practices of ensuring web accessibility • Analyse examples of websites with regards to web accessibility

4. AO1: Learning Outcomes MERIT: Candidates outline clearly at least two different types of factor affecting accessibility of websites. They describe some of the systems that can help website accessibility. DISTINCTION: Candidates outline clearly at least three different types of factor affecting accessibility of websites. They describe the systems that can help website accessibility, explaining how, and clearly link these back to the original factors outlined.

5. Alt tags mini-plenary Alt tags are used to display alternative text for content when it cannot be displayed (commonly images). Also used by screen-readers so people who are visually impaired can still access image content.

6. Other accessibility features… Similar HTML accessibility features/practices that serve to help people with disabilities include: Link titles – used to provide descriptions of links Chronological headings – headings are numbered and should be used in that order. H1 should not be used more than once. Skip navigation – “skip to content”, “skip to navigation”, save screen readers from reading a whole page’s content before getting to the bit the user actually wants!

7. Alternative Content Technological factors of website accessibility often restrict users access to content. To help with this, we need to include systems to ensure: Is Flash installed? What browser is being used?

8. Alternative content specifics We can use JavaScript code to check whether Flash is installed.

9. Alternative content specifics Another common alternative content method is to do a HTML browser check. <!--[if IE]> //add code for Internet Explorer here <!--<![endif]--> <!--[if !IE]>--> //add code for other browsers here <!--<![endif]-->

10. Task #2 (10 minutes) http://www.howtogeek.com/howto/windows-vista/toggle-flash-on-or-off-in-internet-explorer-the-easy-way/ Follow this link, this will tell you how to turn off Flash in internet explorer – useful for testing for alternative content. When you are analysing websites for AO1, this will be a good feature to use. • Find an example of a website with Flash alternative content enabled. • Find an example of a website this feature not enabled. What happens when you try view the site?

11. Dynamic Styles • Dynamic styles allow the user to control different aspects of a website’s design. • One example of this is to alter colour schemes, or to increase text size. What factors of accessibility do these methods address?

12. Task #3 (5 minutes) • Dynamic styles form the basis for most accessibility features of the modern web. Visit https://www.couchsurfing.org/ What is the main major accessibility feature this website has in place? Why is this needed? EXTENSION: How is this implemented? Find the HTML / CSS that operates this system. Right click -> “View Source”

13. Responsive Design • Sociological and technological factors of accessibility include catering to the wide variety of different platforms people use to access the internet in the modern day. • Websites are commonly viewed through different sized screens. • Web designers target this problem by including systems of ‘responsive design’.

14. Task #4 (5 minutes) Visit one of the following sites: http://forefathersgroup.com/ http://foodsense.is/ These sites use a format of styles known as the “CSS Box Model”. What happens as you change the size of your browser window?

15. Plenary • Define and explain: Alternative content Dynamic styles Alt tags Responsive design “Skip to” links

16. AO1: • Tourist information has asked you to produce a short presentation about accessibility issues that can be delivered to all the employees in the local council, including the local MP. They would like you to suggest which of these issues may affect their website. 1. Research factors which affect accessibility of websites and analyse at least ten existing websites, looking for examples of good and bad practice. Make notes as you research to help you create your presentation. 2. Create a presentation that explains at least three factors that affect the accessibility of websites. For each: • Describe how the factor has an effect o n users (this might be more than one effect) • Explain the systems that could help accessibility by overcoming the effect(s) of this factor and how they operate • Give at least 3 examples of existing websites to reinforce your points • Suggest how this factor might be overcome on their website.

17. Tools for analysis To aid in your analysis next lesson, you can: • Disable Flash • View source • Resize the browser • Use http://browsershots.org • Use http://iphonetester.com/ • Or even better – view the website on your smartphone! • Check for alt-tags • Check for dynamic styles (language, font size, colour changing options) • Check for “skip to” links • Check for link titles.