Stretch tasks Building a site people can use

Round 1: Quiz Blitz

1. Read the school uniform policy Screen reader users often hear a list of links on their own. The link text must say where it goes.
2. True Headings are the page's map for someone who cannot see it.
3. People with limited vision Low contrast makes text hard to read for everyone, and impossible for some.
4. Alt text on meaningful images; Everything works with a keyboard; Text can be enlarged without breaking the layout Alt text, keyboard access and resizable text all remove barriers.
5. Users always know where to find it, and where they are Consistency means nobody has to relearn the site on every page.
6. Watch someone else try to find something on it You know where everything is because you built it. Someone else shows you where people really get stuck.
7. False Small screens break layouts, shrink text and make buttons hard to tap. Always test on a phone.
8. <h1> → <h2> → <h3> Main heading, then section headings, then sub-sections: never skip a level.
9. With the Tab key and the keyboard Every link, button and form field should be reachable with Tab and usable with Enter or Space.
10. To make sure it still makes sense if images fail to load Slow connections and screen readers both depend on the alt text and the words around images.
11. accessibility Accessibility is designing so that nobody is shut out.
12. You already know where everything is, so you cannot see the problems Your own knowledge fills in the gaps that confuse everyone else.

Round 2: Quick Fire

1. • It does not say where the link goes
   • Screen reader users may hear links out of context, in a list
   Model answer

   It does not say where the link goes. Screen reader users often hear a list of links on its own, out of context, so a page full of click here links is useless to them.

2. • Strong colour contrast
   • Text that can be enlarged without breaking
   • Alt text so a screen reader can describe images
   • Clear headings in order
   • Not relying on colour alone
   Model answer

   Use strong colour contrast between the text and the background, and make sure text can be enlarged without the layout breaking.

3. • Many people visit websites on phones
   • On a small screen the layout can break, or text and buttons are too small
   Model answer

   Many people visit websites on their phones. On a small screen the layout can break, text can be too small to read and buttons too small to tap, so it must be checked.

4. • Every link works
   • It works on a phone and other devices
   • Someone else tries to use it
   • It makes sense with images turned off
   • Spelling is checked
   • It works with a keyboard
   Model answer

   Check every link works, and view the site on a phone as well as a computer.

Round 3: Big Think

1. • The screen reader reads the page aloud
   • They move around with the keyboard, not a mouse
   • They jump between headings, so headings must be in order
   • Images need alt text describing them
   • Links must describe where they go
   Model answer

   A screen reader reads the page aloud, turning the text into speech. The person moves around with the keyboard rather than a mouse, using Tab to reach links and buttons, and often jumps from heading to heading to find the part they want. So the designer must use headings in order, h1 then h2, give every meaningful image alt text that describes it, and write link text that says where each link goes.

2. • Looks do matter: first impressions and trust
   • It must be accessible to everyone, including disabled users
   • It must be easy to navigate and find things
   • Stylish choices can hurt readability, such as low contrast
   • It must work on phones and other devices
   • Large images can make it slow to load
   • The content must be accurate and useful
   • A reasoned conclusion
   Model answer

   Looks do matter: an attractive, professional design makes a good first impression and helps people trust the site. However, a site that only looks good can fail its users. It must be accessible to everyone, including disabled people using screen readers, and easy to navigate so visitors can find things in a few clicks. Stylish choices such as pale grey text can make it hard to read because of low contrast, and huge images can make it slow to load, especially on a phone, where the layout must also still work. Above all, the content must be accurate and useful. Overall, the designer is wrong: looking good is one part of a good website, but a site must work for everyone first.

This or That

1. Alt text that describes it A screen reader reads the alt text aloud. A bigger picture does not help someone who cannot see it.
2. Dark blue text on white Strong contrast between text and background makes text readable for everyone, and essential for people with limited vision.
3. Screen reader users lose the page's structure Headings are the map a screen reader user navigates by. Skipping levels breaks the map, although the page still loads.
4. The text grows and the layout still works Text that can be enlarged without the layout breaking helps people with limited vision.
5. Watching someone else try to use it You know where everything is because you built it. Another person shows you where users really struggle.
6. In the same place on every page Navigation that never moves means users always know how to get around and where they are.
7. It does not say where it goes Screen reader users often hear the links on their own, so each one must describe its destination.
8. That every link works Broken links stop users finding things. Huge images only make pages slow to load.

Memory Match

• A 3 Alt text: Describes an image for screen readers
• B 6 Contrast: The difference between text and background colours
• C 1 Screen reader: Reads a page aloud to someone who cannot see it
• D 5 Navigation: The menu of links for moving around a site
• E 4 Accessibility: Designing so that everyone can use a site
• F 2 Usability testing: Watching real users try to complete tasks