jump start for voiceover (macos + ios) and the rotor

Doing a lot of a11y work at work, and so I made this page to help people over the hurdle of using a voicereader...

Getting started with VoiceOver can be daunting at first - for people used to traditional screen/keyboard/pointer device/touchscreen, the amount of audio information coming in can be overwhelming, and even the most basic of touchscreen operations - for example, entering the passcode on the lock screen - will require extra steps.

iOS:

Go to Settings | General | Accessibility and set VoiceOver to On.

Doing so fundamentally changes the UI. A "What Widget Has The Focus" is added. Previously, tapping an onscreen button clicks it. Now, doing so highlights the button and the voice reads the caption. To click the currently highlighted button, you double tap the screen.

On the VoiceOver screen,. you can select "VoiceOver Practice" this screen will let you get a feel for how flicks - left and right to select previous and next and double tap for activate are the most important, but two and three finger flicks have various meanings as well for where the voiceover will start reading.

You may be tempted to just use the touchscreen as more or less normal, just switching tap to highlight, double tap to activate, but it is probably better to get practice using the flick navigation as well.

MacOS:

Go to System Preferences | Accessibility - VoiceOver is in the sidebar, so click Enable VoiceOver in its panel. You might try VoiceOver Training here as well.

PROTIP: the default "enable VoiceOver" keybinding is cmd-f5. However, MacPros with the touchbar might find this fiddly - you might consider going to System Preferences|Keyboard|Accessibility and setting "Turn VoiceOver on or off" to cmd-5.

Back to the main VoiceOver dialog - open "Open VoiceOver Utility". Here you can select the "VoiceOver modifier". Personally I prefer Caps Lock to the shift/command/option bundles, but it's a personal preference - but one you need to be comfortable with for activating the rotor. From here on in we will follow the convention of calling this key VO-

The Rotor is started with VO-U

The Rotor is the primary method of navigation for a certain part of the web audience. For the current webpage, It collates all the page parts of certain category into a flat list - for example all the links on the page, or all the form elements. (Under VoiceOver Utility | Web | Web Rotor you can see the categories you can have the rotor serve up) Firing it up on a webpage, you primarily navigate with arrow-keys: left and right to switch cartgory, up and down to select items. Hit enter to jump the focus to that item, and then VO-a to start reading there.

Apple has a page on VoiceOver Basics - I also found Deque University's VoiceOver Keyboard Shortcuts very handy.

After using the Rotor for a while, you may start to understand the purpose of many of the WCAG guidelines - providing structure that these tools can leverage, even apart from the visual display of the webpage.

accessible color systems

Nice piece on picking a batch of a11y friendly colors - I love toolbuilding like they do in this case.

2 steps forward, 1 step back for photos in iOS 13

So two distinct improvements in the iOS camera app, and then one drawback...

I take a lot of short videos (basically B-roll for my "One Second Everyday" project) and one problem is that the indicator of "now recording" was always a bit too subtle, a little red dot next to the recording time at the top... (a time indicator that would stay at 00:00:00 for the first whole second of shooting, and so not providing timely confirmation that recording had started.)

The new one, a large orange coloring for the whole background of the recording time,  is much more clear:

Also, taking advantage of their new "pro" cameras triple lenses, they simplified swapping between lenses and their corresponding zoom levels through good old-fashioned on screen buttons:

Honestly, the new .5 zoom wide angle for their advanced models is a ton of fun, maybe even cooler than the night mode feature... it's often nice to get more of the background in a shot for context, and the subtle fish-eye effect can be visually appealing as well.

You can also do the old "pinch to zoom" to zoom-in or -out, and holding one of the zoom buttons brings up a dial interface - it's interesting how powerful breaking the abstraction of continuous zoom is... and empowering, since the user needs to learn that you can't use night mode with the ultrawide lens, for example. (You notice that fairly quickly if you're using the buttons to swap lenses, since the phone darkens the image to approximately what the end result will look like.)

The "one step back" is the EXIF issue I griped about earlier, how selecting a smaller size for upload changes the relationship of the EXIF rotation data and the image data itself.

hello world, the glory and the hubris

Slate continues a really excellent series on computer programming, Hello, “Hello, World”

flexbox reference

Huh. A Complete Guide to Flexbox has lost some of its googlejuice, apparently, with w3school's boring, less visual, and less helpful guide claiming the top spot. So I'm putting the link here for my future reference...

filed away

Simon Pitt writing on "Computer Files Are Going Extinct" (or "The Death of the Computer File.doc") had this nice line:

Years ago websites were made of files; now they are made of dependencies.

I would nitpick and say "files plus browsers and maybe a scripting language", but I think Pitt points to  a major sea change. For me, coding is still about files - nouns - and then very well tested trustworthy verbs of the browser itself, and not too many intermediaries. Now coding is so much verb, so much process, and younger programmers put raw DOM into the same "low level stuff I don't need to think about much" level as an older CGI hacker might put assembly language.

The rest of the article was kind of delightful for us old-timers, reviewing how services and streams and what not have replaced quasi-physical files.

And I think that's a bummer. I'm currently reading Barbara Tversky's "Mind in Motion: How Action Shapes Thought". It really emphasizes how there's a physicality to our thoughts, that we turn to metaphors of space and motion all the time to make sense of our experiential data - and with files and folders, there was a physical nature to our filesystems as well. I kind of hate the iPhone's "all your photos as a big stream" approach to life, or using "smart folders" to take a giant heap of information. Folders can be clutzy and coarse grained, but there was a flexibility and sense of stability to them that the modern replacements lack.

this code changed everything

Nice piece from Slate, The 36 Bits of Software That Changed Our Lives (Of course, a casual geek might wonder if that should be 32-Bit, but 18- and 36-bit machines were a thing back in the day...)

exif continues to be a hot mess

Years ago I found an ImageMagick fix to rotating images shot on iPhones: something as elegant as
mogrify -auto-orient imagename.jpg
did the trick.

iOS recently added an option for web uploads form to use a smaller image size - which can save a lot of bandwidth, since often you don't need an image in its full multi-megapixel splendor. But apparently if you do that (as I tried with the first image I posted on my commonplace blog) the "-auto-orient" I was relying on gets confused. (I repeated the process with the full image it was fine.)

I haven't really researched this yet, but I suspect the Exif information - explaining how the image was shot rotated - is preserved for the smaller image, but the image data already has the appropriate rotation applied.

I know I'm not the only one wrestling with this kind of thing - here's an article on The dumb reason your fancy Computer Vision app isn’t working: Exif Orientation. As it says:

Exif metadata is not a native part of the Jpeg file format. It was an afterthought taken from the TIFF file format and tacked onto the Jpeg file format much later. This maintained backwards compatibility with old image viewers, but it meant that some programs never bothered to parse Exif data.

But worse than that, right now I'm not convinced there's a flag that says "this rotation data is for historical purposes only" vs "this rotation data is needed for proper display of the image" - or if there is, iOS and (my admittedly old install of) ImageMagick don't agree what that is.

context is strawberries

Every once in a while I get a notice from my old computer science department telling me I need to reset my password. To be honest, ssh'ing to reset the password is about the only thing I do with the account, and if I was less nostalgic I would just let it go. (Til then: enjoy visiting https://www.eecs.tufts.edu/~kisrael/ and see the web like it used to be, in the mid '90s...)

One of the funniest quirks from my old account is that once upon a time I replaced the regular "more" comand with an alias to this little script:

#!/local/bin/perl   

$target = $ARGV[0];

if(-d $target) {
exec "ls -F $target";
} else {
exec "less $target";
}

That's... kind of charming? Probably I kept typing "more directoryname" when I meant to "ls directoryname" ... so I made "more" into a generalized "view the contents of this", which makes a certain kind of sense but is a little weird...

converting HEIC to JPG on Mac easily

iOS tends to internally store photos as "HEIC". a more modern, space-efficient format. Usually you don't notice, and most ways of transferring files off of the device automagically converts the image into more standard things like JPG, but AirDrop tends to keep it as HEIC. This page outlines how to use the Automator to set up a "Quick Action" to make a copy of the file and convert it - then there will be a context menu option for your files to do the conversion.

I tend to do all temporary file work - from screenshots to where Airdrop puts things - in "Downloads" rather than the Desktop. (I don't know about you but my Desktop usually is covered with windows...) And I then actually go one more step and make it so Automator then drops the " copy" from the filename- I had to wrestle with Automator a bit but this setup finally got me the results I wanted:

typeface forward

A nice BBC "bitesize" on The history behind some famous typefaces.

I'm sometimes torn between being an engineer and a designer, but my face blindness leaves makes appreciation the nuance of typefaces a tougher road to hoe, so I'm usually ok with serif, sans-serif, some kind of Impact-ish font, and something Courier-ish.

hex color lighten and darken

https://www.cssfontstack.com/oldsites/hexcolortool/ is pretty decent for darkening and lightening hex colors by a certain percentage.