WestonThayer

Installation

1. Download http://westonthayer.com/tmp/BloksBeta.zip
2. Unzip to
   • On a PC: %appdata%\Adobe\CEP\extensions\
   • On a Mac: ~/Library/Application Support/Adobe/CEP/extensions/
3. Rename the folder from BloksBeta to com.westonthayer.bloks
4. Enable unsigned Adobe CEP extensions
   • On a PC: open the registry editor (<WINKEY + R> then regedit) and add a value at HKEY_CURRENT_USER\SOFTWARE\Adobe\CSXS.6 of type REG_SZ and value PlayerDebugMode. Set the data to 1

• On a Mac: in Terminal, run defaults write com.Adobe.CSXS.6 PlayerDebugMode 1

WestonThayer

i stumbled across that article (https://www.imarc.com/blog/best-font-size-for-any-device) too, while trying to find guidance around minimum type sizing. to get actionable data, i combined

• info on what devices our customers were using / we wanted to support
• the x-height font metric for our typeface
• the above research on minimum viewing angle that @jpamental cited
• https://material.io/devices/ (click on a row to see Screen distance and dp/in, which should match css px/in)

assuming you trust Google's Screen distance values are accurate for that device's average viewing distance, you can track down the device with the highest dp/in you want to support in a particular viewing distance bucket, then choose your minimum font-size to fit it

there isn't a great way to target a "viewing distance bucket", but i thought normal viewport width media queries worked ok

WestonThayer

Two phones, side by side, showing a list of missed phone calls. It animates the content's zoom from 100% to 500%. The left phone magnifies font-size and margins, which becomes very hard to read above 200%, while the right phone only magnifies font-size and is much easier to read above 200%

WestonThayer

Screen recording of Samsung Internet browser running on a Galaxy S9. The web page showing has text sized with px and rem. When the browser's Text Size setting is increased to 200%, all text is doubled in size, regardless of whether px or rem was used.

WestonThayer

// All tests visiting a page with this HTML:
//
// <p>content before</p>
//
// <ol id="target">
//     <li>
//         Cats
//         <ol>
//             <li>Big cat</li>
//             <li>Small cat</li>

WestonThayer

# Using MacOS Automator to type in any application. Useful for
# apps that don't support pasting
#
# To configure:
#
# 1. Open Automator
# 2. Create a new Quick Action (formerly known as a Service)
# 3. Workflow receives: no input
# 4. in: any application (you may need to grant Automator Accessibility
#    access in System Preferences)

WestonThayer

(* 
	VoiceOver Translator
	
	Version: 1.1

Copyright 2020 Tyflos Accessible Software. All rights reserved.
You may incorporate this Tyflos Accessible Software sample code into your system and 	program(s) without restriction.  
This sample code has been provided "AS IS" and the responsibility for its operation is yours.  
You are not permitted to redistribute this Tyflos Accessible Software sample code as "Tyflos 	Accessible Software sample code" after having made changes.  If you're going to redistribute the code, we require that you make it clear that the code was 		descended from Tyflos Accessible Software sample code, but that you've made changes.

WestonThayer

Twitter thread for context: https://twitter.com/__grunet/status/1434197313795330049

Q: Is it possible to run the Android Emulator in the cloud?

A: Yes, either in a bare metal cloud or with nested virtualization.

Q: Is it easy to set up?

A: Sort of, I'm sure a lot of it could be scripted. https://github.com/budtmo/docker-android has put a lot of work into making it fast once you have a Linux machine ready (I didn't test it). With nested virtualization, you could do these steps once and take a VM image.

WestonThayer

x-height test while zooming

A basic algorithm to check if any given webpage has "accessible" text scaling, based on w3c/silver#506 (comment), which approximates x-height as ~50% of font-size (so the min and max x-height sizes from user research have been 2x'd):

• All text can reach a rendered font-size of least ~88 CSS px
• No text exceeds a rendered font-size of ~120 CSS px

By "rendered font-size", I mean the computed CSS font-size value multiplied by the current zoom level (100%, 150%, etc). So for example, assuming linear scaling, 17.6px would be the minimum acceptable size because browsers have a max zoom of 500% and 17.6 * 5 = 88.

1. Start at some "desktop" viewport, say 1280px wide, and 100% zoom

WestonThayer

<button aria-pressed="false">
   <span aria-hidden>13</span>
   <span class="visually-hidden">
     13 December
  </span>
</button>
<!-- Read as "13 13 December" -->