Practicing accessibility meetup takeaways

Katherine Barcham and Meg Howie of came along to help us understand common accessibility problems and shared practical ways to identify and fix them.

Thanks to Dan Smith, Web Developer and Consultant for these great notes! Follow via @dtrt_nz

About the presenters

  • Katherine Barcham and Meg Howie presenting at NetSquared WellingtonKatherine Barcham (content designer) and Meg Howie (author) – content & UX overlap
  • From the Department of Internal Affairs ( team)
  • Recently attended the Content Strategy (CS) Forum in Melbourne

Aims of the presentation

  • To learn something new and actionable
  • To do something different

Setting the stage


  • Accessibility is hard
  • Complying with the Web Content Accessibility Guidelines (WCAG) is difficult
  • No-one with a disability will ever use my site


  • Our idea of ‘disability’ is often of extreme examples
  • Many people have permanent, temporary and situational impairments
  • Everyone has unique circumstances
  • Websites can present all sorts of barriers

Vision impairment

Who it affects

  • People who are blind or colour blind
  • People who are recovering from eye surgery
  • People who are elderly
  • People who have cataracts
  • People who have low vision
  • People who have poor internet connections (because the images don’t download)
  • People who use search engines (because spiders like Googlebot don’t understand images)
  • People who use their devices outside in the sunshine
  • People who use their phones with the screen brightness turned down
  • People who use a poor quality projector

Add Alternative text to images

  • Alternative (Alt) Text serves as a text replacement for an image
  • Is an image meaningful or decorative? – it’s subjective
  • Designers often choose images that are ‘emotion rich’
  • Meaningful images need Alt text: <img src=”chippy-the-dog.jpg” alt=”Chippy the Dachshund running on the grass. ” />
  • Decorative images don’t need Alt text: <img src=”dog.jpg” alt=”” /> (this is known as ‘null’ Alt text)
  • Linked images need Alt text describing the destination: <a href=”dogs.html”><img src=”dogs.jpg” alt=”Our favourite dogs” /></a>
  • Avoid text in images, as Assistive Technology and search engine spiders can’t read this
  • Cascading Style Sheets (CSS) can be used to place a decorative image behind some text: <div style=”background-image: url(dogs.jpg);”><h1>Our favourite dogs</h1></div>
  • CSS doesn’t support Alt text

Ensure there is sufficient contrast

  • The contrast ratio between the foreground and background colours
  • There are different requirements for small/bold/large text
  • Don’t design elaborate systems that rely on colour
  • Use words, icons and patterns
  • Pay special attention to links and graphs
  • added CSS underlines to their links following user testing
  • An easy test: print a webpage in black & white, or greyscale
  • 10% of men see the standard HTML link ‘Blue’ colour as pale yellow

Hearing impairment

Who it affects

  • People who are deaf
  • People with hearing impairments
  • Office workers who don’t want to annoy their colleagues
  • Commuters on public trains
  • Search engine spiders looking for meaningful text

Add closed captions to videos

  • CC icon on video playback toolbar
  • Captions appear as text on top of the video
  • YouTube automatically creates captions, but they’re often just bad guesses
  • DIY, or use a paid service, or find a fast typist

Create a text transcript of video

  • The written format of spoken text
  • Beneficial for Search Engine Optimisation (SEO)

Page structure

Who it affects

  • Everyone
  • People using search engines (22,000,000 results for “Untitled Document”)
  • Assistive Technologies such as Screen Readers
  • Busy people who skim read pages
  • People who need to apply their own styles to web pages to make them more readable (user stylesheets)
  • People who need to customise their computers to make software more usable

Add a page title

  • Appears in browser tabs
  • Appears in search results
  • Appears in bookmarks
  • It’s the first thing a screen reader reads
  • ‘Front-load’ the page title, followed by the organisation name

Write meaningful links

  • Links may be read out of context (e.g. by screen readers)
  • People skim reading will only read the first few words
  • Avoid generic phrases like ‘click here’ and ‘read more’
  • Link the content
  • Follow the link text with the page title
  • Make sure that links with matching text go to the same place
  • Make sure that linked images correctly identify the link destination, not: <a href=”baggage-services.html”><img alt=”Air New Zealand International Lounge” /></a>

Create structure with headings

  • Enforce a page hierarchy
  • Headings can be read out of context (e.g. by screen readers)
  • If it looks and acts like a heading, mark it up as a heading: <h2>Heading Level 2</h2>

Mobility Impairment

Who it affects

  • People with limited use of their hands
  • People with tremors
  • People wearing a cast
  • People controlling their computer with their feet
  • People controlling their computer with their head
  • People controlling their computer with a mouth stick

Include keyboard support

  • Everything should be usable from the keyboard only
  • Usability might differ from using a mouse (typing a date rather than ‘picking’ one from a calendar)
  • Skip links allow all users to bypass long lists of links
  • Visible focus box shows which page element is being interacted with (e.g. link, text field)
  • The focus can be styled with CSS
  • uses a ‘flying focus’ technique
  • OS X (Mac) browsers and Chrome on Windows automatically put a blue box around focusable elements
  • Test on other Windows browsers to make sure that the focus is obvious enough
  • Avoid keyboard traps (where is the cursor, how do I get out of this modal)
  • The reading order should make sense when tabbing through the page
  • Easy test: disable stylesheets to view the page structure (developer toolbar)
  • Turning stylesheets off gives you a different perspective

Avoid non-HTML formats

  • PDF documents are not automatically accessible – they must be ‘tagged’
  • Traditionally PDFs are not accessible by Assistive Technology running on Macs and Linux
  • Microsoft Word documents are not automatically accessible
  • EPUB3 is being investigated by the Government (HTML5 and CSS3 in a wrapper)

Resources: Links & testing tools

It was mentioned that Jason Kiss, ICT Web Standards Lead at the Department of Internal Affairs might be able to help out with some accessibility queries via

Posted in Takeaways Tagged with: ,
2 comments on “Practicing accessibility meetup takeaways
  1. Bill Dashfield says:

    Wow! That’s a fantastic set of notes!

    I’d add under ‘Add closed captions to videos’ that YouTube makes adding and syncing captions really easy, once you’ve got the typist.

Leave a Reply

Your email address will not be published. Required fields are marked *