Accessibility and design

Where the look comes from

The site borrows from signage: near-black type on warm paper, one typeface, few sizes, thick rules, and buttons that press down when you click them. It shares that style with Gregor Posadas's website and with BahaWatch, a low-cost flood-sensing project by Berkeley graduate students. The flood maps up close are drawn like BahaWatch's dashboard: paper-coloured land, white streets, and every building outlined.

A thin blue-over-red stripe under the header is a quiet nod to the Philippine flag.

Our target is the Web Content Accessibility Guidelines (WCAG) 2.1The international standard for accessible web pages. Level AA is the level most laws and universities ask for. at level AA.

Typeface

• All text is set in Atkinson Hyperlegible Next, a typeface the Braille Institute designed for readers with low vision. Letters that are easy to confuse are drawn to differ: capital I has serifs, lower-case l has a tail, and zero has a slash.
• Reading text is 18 px, and lines stop at about 70 characters.
• Two weights only, regular and bold, so emphasis stays clear.

Colour and shape

• Contrast. Text has at least 4.5:1 contrast with its background.
• Never colour alone. Every coloured mark also has a shape or a word: legends name every swatch, the people on the map are figures, and the lines to each province are labelled in the list view.
• Colour-blind-safe colours. Figure colours follow Jack Baker's guidance on choosing colours for figures, from one palette: blue #385F96, orange #CF5921, light blue #9EB8DB, gold #E7B800 and maroon #800000. Every pair that must be told apart is checked under simulated red, green and blue colour blindness (Machado, Oliveira and Fernandes, 2009), with a script in the site's code.

The maps

• Water reads in greyscale. Flood depth runs from pale to dark blue in one even step, so deeper water is darker even printed in black and white. The blues come from the same family as Fabio Crameri's Davos colour map, made to be even to the eye and safe for colour blindness.
• Buildings have outlines. Up close, every building is a light shape with a thin dark outline, so it reads as a building whether it stands on dry land or in the deepest water.
• Smooth edges. The flood model works in 10 m squares; we smooth the edges when we draw them so the zoomed maps don't break into stair steps.
• Every map has words. The sentence above the map says what it shows, and "The map as a list" gives every number on it as a table.

Touch and keyboard

• Buttons and links in menus are at least 48 × 48 px, larger than the WCAG minimum.
• Everything works with a keyboard, and focus shows as a thick outline. In the presentation, the arrow keys step through it and Escape leaves it.
• No page scrolls sideways, from a 375 px phone to a desktop screen.
• Underlined terms open a short note when tapped, clicked or hovered; Escape or a click elsewhere closes it.

Screen readers

• The map is described in words, and its numbers are in a table.
• Every photo has a description, and decorative drawings are hidden from screen readers.
• Links that open in a new tab say so, and cited facts say their source.

Motion

• If your device asks for reduced motion, the map doesn't animate, the presentation cuts instead of flying between places, and notes appear without fading.

Words

• Plain language first. Terms that may be new, like habagat or "100-year flood", carry a short note.

What still falls short

• The RSVP form is a Google Form, so its look and its accessibility are Google's.
• The presentation at the event is visual. We'll read every caption aloud, and the same words are on screen.
• Dr. Martinez's photo loads from her department's website, so it may be slow or missing; every speaker's name is always shown.

If something on this site doesn't work for you, reply to your RSVP email or tell us on the day, and we'll fix it.