Skip to content

Using VoiceOver

While studying the Web Accessibility course from Google by Udacity, I came across this video explaining how to use the Mac VoiceOver as a screen reader to navigate the web and I thought it would be a great idea to share it. I also included the course description included with the video as a guide and a reference (video and the information credit goes to the course).

Shortcuts mentioned:

  • CMD+F5 to turn on VoiceOver on OS X.
  • Normal keyboard operation (TAB, Shift+TAB, arrow keys etc.) work as normal with VoiceOver running.
  • CMD+L to jump to address bar.
  • CTRL+Option+U to open Web Rotor.
  • Type search term with Web Rotor open to search within Web Rotor.
  • CTRL + Option + to explore content.
  • CTRL + Option + CMD + H to move forward by heading.
  • CTRL + Option + CMD + Shift + H to move backward by heading.

WebAIM’s article on Using VoiceOver to evaluate Web Accessibility has a full introduction to VoiceOver from the point of view of evaluating accessibility, including most keyboard commands available.

If you don’t have a Mac device, NVDA is a free, open source screen reader available for Windows. WebAIM’s introduction to NVDA covers the basics of using NVDA to check accessibility.

If you only use Linux, Orca is available in the Gnome desktop manager, although this screen reader is much more rarely used and suffers from poor support by web browsers.


On Web Accessibility

Udacity Accessibility Course Cover Image

Today, I just finished and I would recommend this Web Accessibility course from Google by Udacity.

Accessibility is something I wasn’t taking seriously before and was just reading some bits here and there without understanding and seeing the big picture if using it.

The important thing is that there is a wide range of people who might have some disabilities and by ignoring them you will make their life harder and they will end up leaving, but the web should be available to everyone.

Think about how someone who is blind using the VoiceOver, and a simple case, someone who is only able to use the keyboard to navigate your website or app.

I encourage you to stop using the mouse for a while and just use your keyboard to navigate different websites or use the ChromeVox or VoiceOver as a screen reader.

The problem comes with no awareness about it, no budget, or not learning about it at the start of learning about web development as a single topic, somehow we ignore it and jump directly into writing HTML without thinking about this wide range of people who might use the end product.

The course helped to connect the dots and the important thing is to think about the end user while writing code or Developing with Empathy as the course said :)


New Website Design

Today, I’m just happy to create and release an update for my website with a simple and minimal design. What I need is something that reflects the way that I believe and the way I work, just to make things simple and functional as possible.

I have used Jekyll as a static site generator with GitHub and Netlify to deploy the website. Also, I have used Sass and ITCSS to organize the CSS code. You can find the source code at ahmadajmi.github.io.