Tag: accessibility

Categories
Self Care Technology

Grayscale

Replied to Grayscale by James (jamesg.blog)

The display shows only grey colours. I decided to give this a go last night to see how I would feel about having non-grey colours disabled. My phone now feels different. Applications are no longer as vibrant as they once were. The features that would draw me into an application, such as the coloured ring around a profile on Instagram Stories indicative of a new post, are no longer prominent to the same degree.

I have grayscale set up as an accessibility shortcut on my phone so if I’m looking at something that does need color, like photos, I can turn it on for a few minutes. Just gotta remember to turn it back off! 😅

Categories
Art and Design The Internet Websites

Universal Design for online education

Bookmarked Neurodiversity Design System (Neurodiversity Design System)

The NDS is a coherent set of standards and principles that combine neurodiversity and user experience design for Learning Management Systems.

See also:

Everyone prefers plain language

Resources for learning about accessibility

Categories
Art and Design Resources and Reference Websites

Resources for learning about accessibility

Bookmarked Accessibility Resources (nicksimson.com)

The links below have helped me in my ongoing accessibility education. Most of these are beginner-friendly entry points to what can be a broad and sometimes complex topic.

A11y is a compact abbreviation for accessibility with 11 (eleven) representing the count of letters between the letter a and the letter y.

😅 I’ve seen A11y before and thought it was leet speak for “ally,” calling out the common problem of 1s looking like lowercase l’s in some typefaces. This… makes more sense 😂

Categories
Outreach Websites

Adding fun to accessibility

Bookmarked Where’s the fun in accessibility? (elisehe.in)

UX is not only about the way it works, but about delight, whimsy, wit, and beauty. But when it comes to accessibility, we tend to take the term literally. Why?

Categories
Writing

Get your computer to read to you

Narrator on Windows:  Settings > Ease of Access > Narrator

For self-editing, as an alternative to reading aloud to yourself

 

Categories
Websites

Include emotion in alt text for improved understanding

Bookmarked Writing great alt text: Emotion matters by Jake Archibald (jakearchibald.com)

The relevant parts of an image aren’t limited to the cold hard facts. Images can make you feel a particular way, and that’s something that should be made available to a screen reader user.

A good reminder to not get hung up on the details but focus on the meaning.

Categories
Art and Design Resources and Reference Websites

Web Design Tools

Color

Accessible Palette – Create color systems with consistent lightness and contrast

Accessible Color Generator – Show me the closest variations of COLOR that contrast against BACKGROUND COLOR enough to meet ACCESSIBILITY GUIDELINES

Contrast Grid – Test many foreground and background color combos for compliance with WCAG 2.0 minimum contrast.

Coolers – color palette generator

Optimal Overlay Finder – For Readable Text on a Background Image

Vivid Gradient Generator – we interpolate the gradient in a hue-based color system, such as HCL, HSB, or HCL (not RGB) 🤓. This avoids the line of gray that goes through the center of every color space.

Gradient Easing Generator – Create and preview your own easing gradients in CSS.

Typography

The Good Line-Height – the good line-height calculates the exact number so it always fits the baseline grid!

Graphics

Clippy – The clip-path property allows you to make complex shapes in CSS by clipping an element to a basic shape (circle, ellipse, polygon, or inset), or to an SVG source.

Hero Generator –

Layout

Flexbox Patterns – Flexbox is awesome, but it introduces many new concepts that can make it difficult to use. These interactive examples will show you practical ways to use it to build UI components.

Tools

Tiny Helpers – single task tools

Omatsuri – Open source browser tools for everyday use

Reference

Web Skills – reference deck with links to explain a variety of web elements

CSS-only Carousel