Year round learning for product, design and engineering professionals

Derek Featherstone – Designing for Accessibility

  • Screen magnifiers make graphic text blurry, but alt attributes still render as proper text
  • If we’re not writing scripts to suppress the right click menu, perhaps we should avoid suppressing the showing of alt text on images in IE
  • Square brackets are often used to separate links to different document formats; when read through a screen reader using a verbosity setting that doesn’t announce punctuation – if the user hits ‘p’ to find the link that he/she believes starts with P (eg: PDF), it will not be found because the actual text is [PDF]
  • Even if the link doesn’t make sense out of context, users of assistive technology are usually smart enough to point their device on line above the confusing link to try and get some context.
  • We have bigger battles to fight than links with repetitive text (eg: Read More…)
  • In a magnified context, “Back to top” may not be what you really want. Just because most users can see the page title from the top of the page doesn’t mean everyone can. For example, the header and navigation could be enough to psh the page/article heading out of the initial viewable area. Perhaps ‘Back to heading’ and ‘Back to menu’ would be more suitable.
  • Derek considers the Opera browser as the best option for a keyboard user. (more specifically, someone who navigates using the keyboard). Opera also allows the user to re-map any accesskeys assigned within the current page.
  • Don’t assume assistive technology users know everything that their device is capable of. If you can help them while doing no harm; do so.
  • Source ordering: research indicates it actually means very little to screen reader user; document structure is far more important. When styling is off, source ordering becomes a cognitive issue. Basically, keep doing your best to keep that content block up high in the source. You may not be helping the people you think you are, but you’re still Doing Good.
  • Derek demonstrates his correctly source-ordered advisory information on a form; demo is form SimplyAccessible.org. Involves floated text and em width. He then shows using a strong element to define an error in place of the em element that was showing the initial instruction.
  • Don’t mess with the status bar while the page is loading, but it is a good method of indicating there are errors in the form or similar. The same is true of the title element.
  • tabindex=”-1” can be used to force the browser focus on elements other than links or form elements, such as headers. This is an invalid value for the attribute, but you’re doing it to help people so make sure you mention that if anyone wants to burn you at the stake for it.

delivering year round learning for front end and full stack professionals

Learn more about us

this was a masterfully curated event … a brilliant day that educated, entertained, and rekindled some old connections

Ash Donaldson Service & Behaviour Design Director, Tobias
Portrait of Ash Donaldson