Exercise Notes

Learning goals

  • Learn how to develop effective user interfaces
  • Conduct an accessibility test

Programs used

Accessibility

Keyboard navigation

Try navigating some of your favourite websites using only your keyboard and not your mouse:

  • Try filling in a form
  • Try navigating a complex system of menus and submenus (like Amazon’s)
  • Try playing a video

How easy did you find it? Were some sites easier than others?

Screen-reader

Now try using a screen-reader.

Info

If you have Chrome you can add the ChromeVox Plugin

Follow the ChromeVox Tutorial, at least up to ‘First Practice’. Try to do this without looking at your screen (e.g. put some paper over your screen).

Once you’ve had a bit of practice, try navigating some of your favourite websites.

Disabling Screen-Reader

ChromeVox can quickly become very annoying for sighted users when you are not doing the exercise, so make sure you know how to disable it. By default, use the sequence ‘Shift-Alt-A, A’ to enable/disable. If that does not work, find the options and configure your ‘ChromeVox modifier’ key appropriately.

How easy did you find it? Were some sites easier than others?

Some examples of good accessibility that you can try out:

Accessibility testing

Return to the site that you built for the mini-project during Bootcamp (Whalespotting) and do accessibility testing of it. As that was a group project, you should fork that repo so you have your own copy and get it running locally.

Run manual accessibility tests on the site in the following ways:

  • The UK government provides guidance here, including linking to an accessibility checklist created by a US government agency
    • Follow the accessibility checklist to check your site for at least the Critical issues
  • Use the ChromeVox screen reader to test your site
  • Are you following all the WCAG guidelines? Try to fix any missing attributes – alt-text, ARIA labels etc.

Responsive design

Case studies

Find an example of a site with particularly good responsive design.

Can you find an example of a site which displays poorly on mobile devices? How would you improve it?

Responsive design in practice

How does your site measure up on a mobile device?

Ideally try it out on a real phone! If not, you can use developer tools to emulate a mobile device.

Try and make it responsive, so it looks just as natural on a mobile as a desktop.