DEV Community: itsvicki

Accessibility tools I wish I knew about sooner

itsvicki — Fri, 21 Aug 2020 19:01:37 +0000

World Wide Web Consortium (W3C) do a great job of not only tirelessly researching ways of making the web better, but also go to great lengths to explain advice in the form of Web Content Accessibility Guidelines (WCAG).

As good as these guidelines are, including their how to Meet WCAG (quick reference), here are some tools which I've found great to break these guidelines down.
Do note that automated tools can only go so far and not a replacement for understand the guidelines.

Browser plugins

To quote NoCoffee, "vision problems are more pervasive than most of us realise. Upwards of 285 million people worldwide are visually impaired. Many more have low or moderate visual difficulties". NoCoffee can help understand problems such as: Low Acuity, Low Contrast Sensitivity, Colour-blindness, visual snow, glare ghosting and cataracts, Nystagmus or Obscructed visual field
As engineers it's sometimes preferable to develop in Chrome. However in the case of Mac; VoiceOver works best with Safari and not so great with Chrome. For those times when you want to quickly check how a screen reader would perceive something ChromeVox is an option. Although I would always recommend re-checking with a recommended browser + screen reader at the end
AXE do a range of great tools to verify accessibility, including axe for Firefox or axe for Chrome
tota11y "helps visualise how your site performs with assistive technologies... In many cases, developers must have some prior accessibility knowledge in order to make sense of the results. Instead, tota11y aims to reduce this barrier of entry by helping visualize accessibility violations (and successes), while educating on best practices."
Within Chrome DevTools there is the ability to audit a page's accessibility. Chrome states that it helps to determine if: "a page is properly marked up for screen readers. The text elements on a page have sufficient contrast ratios."
Probably one people are more familiar with, WAVE Evaluation Tool

HTML validators

HTML_CodeSniffer "is a client-side script that checks HTML source code and detects violations of a defined coding standard. HTML_CodeSniffer is written entirely in JavaScript, does not require any server-side processing and can be extended by developers to enforce custom coding standards by creating your own 'sniffs'."

Colour

Colour Contrast Analyser is a great accessibility tool for when you need to do pixel picking to test colour contrast ratios. It also simulates certain visual impairments, including colourblindness
The Contrast Triangle which helps breakdown link contrast guidelines
People who have colorblindness are sensitive to certain colors such as reds and greens. Color Oracle is one tool that can be used to test web page designs for effective color usage. Color Oracle is a free colorblindness simulator that can be used for Windows, Mac, or Linux. It applies a color filter on the web page that simulates how a person with colorblindness may see a design. Testers and designers can use the tool to determine whether colors used in the design may cause issues for people who have colorblindness

Keyboard accessibility

A guide to most of the common online interactions, the standard keystrokes for the interaction, and additional information on things to consider during testing

Code snippets

Deque University have a growing code library where you can find complete code snippets for common snippets

Hope that helps!

Tools to succeed

itsvicki — Thu, 30 Jul 2020 20:02:02 +0000

The web has never been as capable as it is today and will be tomorrow.
As software engineers we have so many options, almost too many, and it can be daunting. This post is just to share some of the tools I've found great at managing to remember the basics but keep with the current.

Our good old friend, data structure & algorithms

"This is the coding implementations of the DSA.js book and the repo for the NPM package.
In this repository, you can find the implementation of algorithms and data structures in JavaScript. This material can be used as a reference manual for developers, or you can refresh specific topics before an interview. Also, you can find ideas to solve problems more efficiently."
https://github.com/amejiarosario/dsa.js

AlgoExpert

There are many of these types of sites around, and for some, they would rather not pay for it so do do some research of which would suit you best.
But for me, the user interface is what really worked. It's clear to see what topics there is to cover, how far through and easy to work on coding questions.
algoexpert.io

Keep up to date with podcasts

Keep up to date with email

JavaScript weekly
React status
Node.js was an absolute turning point in development, there is no denying that. But Deno is the one to watch now, as explained by the creator, Ryan Dahl in 10 Things I Regret About Node.js. Deno weekly is another great one.

Keep up to date with twitter

sxywu who does some inspiring work with "data-driven art and visualizations"
Addy Osmani
Ryan Florence
Kent C. Dodds
Chris Heilmann
mpj creator of FunFunFunction
JavaScript Daily

Thanks for reading! 🙌

A different kind of introduction to Accessibility

itsvicki — Mon, 02 Dec 2019 21:42:27 +0000

For those of us who are more visual learners - a quick introduction to Accessibility.

Transcript

Introducing Accessibility - Ally

What is it?

It comes in all shapes & sizes
It's necessary & non-negotiable
It's an ongoing design requirement
It's not limited to physical disabilities
It's made up of objective & subjective guidelines
It's the right & ability to access the same information

The ability spectrum

From permanent - situation

Permanent - such as legally blind, deaf or physically disabled
-> temporary - such as having an ear infection, broken arm or eye infection
-> -> situational - such as a new parent, at a concert or library

a.k.a we all benefit from accessibility

You can thank accessibility for..

...those handy next stop reminders on the bus & train
...those captions so you can still watch the news in a noisy bar
...those extra page hits because search engines discovered your transcripts

Types of disabilities

Colour-blind / blind / low vision
Deafblind / deaf
Cognitive / speech / reading / seizures
Motor / multiple disabilities

Software + assistive technology

We all live in a pretty incredible time where software creates equal opportunities when creators simply follow standards

Application [in/output]
[in/output] transformed into an accessibility tree [in/output]
[in/output] assistive technology [in/output]
[in/output] user [in/output]

screen readers are the most commonly discussed assistive technology
...but there is also technology to translate into/from braille display
...magnify text
...head wands, mouth sticks & oversized trackball mouse
...single switch & sip-and-puff switch
...adaptive keyboard
...eye-tracking & voice recognition technology

Cognitive disabilities

always keep in mind...

"don't beat around the bush"

Be direct, help avoid mistakes & be clear on how to fix them
Don't expect users to understand implied meaning
Give adequate time for everyone

still be creative!

Balance use of text alternatives like video & illustrations
...or use bright colours to keep attention & interest
Keep text & layout simple - white space is your friend