Tags: screen

101

sparkline

10 Year Challenge: How Popular Websites Have Changed

Side by side screenshots of websites, taken ten years apart. The whitespace situation has definitely improved. It would be interesting to compare what the overall page weights were/are though.

ANDI - Accessibility Testing Tool - Install

Another bookmarklet for checking accessibility—kind of like tota11y—that allows to preview how screen readers will handle images, focusable elements, and more.

Using aria-live

A terrific explanation of the aria-live attribute from Ire. If you’re doing anything with Ajax, this is vital knowledge.

Responsive Images on the Apple Watch — ericportis.com

Some tips for getting responsive images to work well on the Apple Watch:

  • test your layouts down to 136-px wide
  • include 300w-ish resources in your full-width img’s srcsets
  • art direct to keep image subjects legible
  • say the magic meta words

Bruce Lawson’s personal site  : Screenreader support for text-level semantics

Bruce reveals that the theory and the reality are somewhat different when it comes to the accessibility of inline elements like em and strong.

The Importance Of Manual Accessibility Testing — Smashing Magazine

This is very timely. I’ve been doing some consulting at a company where they are perhaps a little over-reliant on automated accessibility tests.

Automated accessibility tests are a great resource to have, but they can’t automatically make your site accessible. Use them as one step of a larger testing process.

‘Never assume anything’: The golden rules for inclusive design

Inclusive design is also future-proofing technology for everyone. Swan noted that many more developers and designers are considering accessibility issues as they age and encounter poor eyesight or other impairments.

The Accessibility of Styled Form Controls & Friends | a11y_styled_form_controls

A great collection of styled and accessible form elements:

Form controls are necessary in many interfaces, but are often considered annoying, if not downright difficult, to style. Many of the markup patterns presented here can serve as a baseline for building more attractive form controls without having to exclude users who may rely on assistive technology to get things done.

Short note on progressive ARIA by The Paciello Group

Léonie makes a really good point here: if you’re adding aria attributes to indicate interactions you’re making available through JavaScript, then make sure you also use JavaScript to add those aria attributes.

Untold AI: The Untold | Sci-fi interfaces

Prompted by his time at Clearleft’s AI gathering in Juvet, Chris has been delving deep into the stories we tell about artificial intelligence …and what stories are missing.

And here we are at the eponymous answer to the question that I first asked at Juvet around 7 months ago: What stories aren’t we telling ourselves about AI?

Progressive Web Games – Mozilla Hacks – the Web developer blog

I was just talking about how browser-based games are the perfect use-case for service workers. Andrzej Mazur breaks down how that would work:

  • Add to Home screen
  • Offline capabilities
  • Progressive loading

TANK (short film by Stu Maschwitz) - YouTube

This fun little film gives me all the feels for Battlezone …but then watching the excellent “making of” video really made me appreciate the love and attention to detail that went into this.

TANK (short film by Stu Maschwitz)

Kap - Capture your screen

This looks like a very handy tool for doing little screencasts where you don’t need to capture the whole screen.

Turning a MacBook into a Touchscreen with $1 of Hardware · cat /var/log/life

Well now, this is a clever bit of hardware hacking.

Surfaces viewed from an angle tend to look shiny, and you can tell if a finger is touching the surface by checking if it’s touching its own reflection.

Steve Faulkner on Twitter: Typical/expected screen reader output

Really handy accessibility information in a single tweet.

How we’ve made GOV.UK Elements even more accessible

A nice run-down of incremental accessibility improvements made to Gov.uk (I particularly like the technique of updating the title element to use the word “error” if the page is displaying a form that has issues).

Crucially, if any of the problems turned out to be with the browser or screen reader, they submitted bug reports—that’s the way to do it!

Offscreen Magazine Interview — by Craig Mod

Craig talks about reading, writing, books, publishing, and Amazon:

Kindle and non-Kindle book sales account for less than two percent of Amazon’s market cap. The Kindle could disappear tomorrow, and Amazon would not be materially affected. Even from a branding perspective, I don’t think AMAZON = BOOKS anymore, certainly not to younger consumers. AMAZON = PRIME. PRIME = A 3D PRINTER on a one-day time-delay that deposits anything you can imagine on your doorstep.

There’s also this about the double-edged sword of working at scale:

Does affecting one hundred lives turn you on? A thousand? A million? A billion? Why? What does it mean to have a positive impact on a life? How intimate does that connection need to be? Understanding your scale — the scale that moves you — is critical to understanding with whom and how you should work, how you should live.

Notifications

Heydon keeps on delivering the goods. This time, he looks at making on-screen notification messages accessible using ARIA’s live regions.

As ever, structuring content is paramount, even where it pertains to dynamic events inside realtime web applications.

A Tale of Two Rooms: Understanding screen reader navigation | The Paciello Group

A nice analogy to help explain what it’s like to navigate with a screen reader—and how much well-structured markup can help make it easier.

Ridley Scott’s ‘Blade Runner’: A Game-Changing Science-Fiction Classic • Cinephilia & Beyond

A nexus of hypermedia on all things Blade Runner, from links to Tumblr blogs to embedded screenplays, documentaries, and scanned images.