Can You See That OK?

A presentation at CSSConf AU in in Melbourne VIC, Australia by Julie Grundy

Can You See That OK?

Can You See That OK?

9% of Australians live with low vision

9% of Australians live with low vision

Demo site

Demo site

Zoom tool in the browser settings

Zoom tool in the browser settings

Zooming creates horizontal scrollbars

Zooming creates horizontal scrollbars

Video of zooming on the fixed site

Video of zooming on the fixed site

Flip to mobile on zoom with em-based responsive design

Flip to mobile on zoom with em-based responsive design

As for previous slide, with em units highlighted

As for previous slide, with em units highlighted

Video of text resizing on original site

Video of text resizing on original site

Allow containers to resize along with text

Allow containers to resize along with text

Check background styles

Check background styles

Video of text resizing on the fixed site

Video of text resizing on the fixed site

Colour contrast is essential

Colour contrast is essential

Text is hard to contrast over a varied background image

Text is hard to contrast over a varied background image

Changing the colour might not help

Changing the colour might not help

Borders and drop-shadows can help

Borders and drop-shadows can help

Semi-opaque panels can help

Semi-opaque panels can help

Reverse the colours

Reverse the colours

Fixed site with text over images

Fixed site with text over images

Colour is often used to indicate special items in a group

Colour is often used to indicate special items in a group

Check for colour-only indicators with a greyscale filter

Check for colour-only indicators with a greyscale filter

Demo site with greyscale filter applied

Demo site with greyscale filter applied

Use changed shapes to distinguish menu items

Use changed shapes to distinguish menu items

Greyscale site with reverse-colour style on selected menu item

Greyscale site with reverse-colour style on selected menu item

Colour version of site with block-style on selected menu item

Colour version of site with block-style on selected menu item

Greyscale version of lower half of site

Greyscale version of lower half of site

Greyscale lower half with links circled to show their position

Greyscale lower half with links circled to show their position

Colour alone is insufficient to indicate links

Colour alone is insufficient to indicate links

Underlines are reliable indicators for most people

Underlines are reliable indicators for most people

Make underlines prettier with skip-ink

Make underlines prettier with skip-ink

Video of changing themes on Windows desktop

Video of changing themes on Windows desktop

Video of the demo site in high contrast

Video of the demo site in high contrast

Demo site with login modal open in high contrast

Demo site with login modal open in high contrast

Modal in colour

Modal in colour

Add borders for high contrast modes

Add borders for high contrast modes

Fixed modal in high contrast

Fixed modal in high contrast

Final fixed site

Final fixed site

Thankyou

Thankyou

Not all accessibility is about screenreader software. Many users with low vision use tools which change the appearance of your site - learn the CSS tips and techniques you need to make your site robust enough to give them a good user experience.

Video

Resources

The following resources were mentioned during the presentation or are useful additional information.

Code

The following code examples from the presentation can be tried out live.

Buzz and feedback

Here’s what was said about this presentation on Twitter.