Note: This section of the site is under heavy construction, tread carefully.

Bookmarks tagged with “accessibility”

230 bookmarks by garrettc


The Surprising Truth About Pixels and Accessibility: should I use pixels or rems?

"The truth is, if you want to build the most-accessible product possible, you need to use both pixels and ems/rems. It's not an either/or situation. There are circumstances where rems are more accessible, and other circumstances where pixels are more accessible."

Bookmarked on #




What makes writing more readable?

"An examination of translating text to make it as accessible as possible."

Bookmarked on #


Intopia Launches WCAG 2.1 Map

“On 24 July 2018, Intopia launched WCAG 2.1 Map, a visual rendering of the Web Content Accessibility Guidelines (WCAG) version 2.1.”

Bookmarked on #



Web accessibility audit tracking

"Be Inclusive is a web app that helps you define, track, and share digital accessibility audits. We simplify the admin part of the process so manual auditing is easier to manage and share with teammates & clients."

Bookmarked on #


DownSub

"DownSub is a FREE web application that can download subtitles directly from Youtube, VIU, Viki, Vlive and more. We supports downloading all subtitles/captions formats such as: SRT, TXT, VTT. DownSub doesn't force our user to download or install any type of extensions or third party software. We provide an online method to download subtitles by just entering the URL of the video and clicking Download."

Bookmarked on #


How-to: Accessible heading structure - The A11Y Project

Nice comprehensive article about accessible heading structures in html.

Bookmarked on #



Filterable WCAG tests

The WCAG2.1 guidelines summarised with filters and categories.

Bookmarked on #


Ashley Sheridan - Making an Accessible Hamburger Menu

How to improve the accessibiilty of the checkbox approach to hamburger menus.

Bookmarked on #


Advanced Perceptual Contrast Algorithm

“WCAG 3 will use a new color contrast method called APCA (Advanced Perceptual Contrast Algorithm). It's a big improvement over the current system but there are a lot of changes to get your head around.”

Bookmarked on #


Estelle Weyl – “Fast. Simple. Accessible.“ | .concat() 2018 - YouTube

"You already know that accessibility is important. In fact, it’s the law. It’s also a good idea. Let’s make the Web accessible—and faster—for everyone."

Bookmarked on #


Respecting Users’ Motion Preferences

"The prefers-reduced-motion media query has excellent support in all modern browsers going back a couple of years. In this article, Michelle Barker explains why there’s no reason not to use it today to make your sites more accessible."

Bookmarked on #


Kontrasto

"Kontrasto is a dual Python and JavaScript library which analyses instances of text over images, and transforms the text to make it more readable and have a higher contrast against the background."

Bookmarked on #




Accessible Palette

Create color systems with consistent lightness and contrast.

Bookmarked on #


Color and Universal Design

"Mobile—and the related trends of using tablets and notebook computers in every environment—has made discussions of universal access even more important. Instead of thinking of disabled rather normal people, it is best to think along the lines of everyone being at least sometimes temporarily disabled. Although much temporary disability is the result of physical conditions, illnesses, or injuries, it can also be the consequence of environmental conditions. For example, sunlight might be coming through a window and glaring off a screen, making it hard to read and colors difficult to differentiate."

Bookmarked on #



CSS accent-color

"CSS accent-color from the CSS UI specification is here to tint elements with one line of CSS, saving you from customization efforts by providing a way to bring your brand into elements."

Bookmarked on #


Using CSS to Enforce Accessibility

Useful techniques for using CSS to highlight potential accessibility issues in a page.

Bookmarked on #


The Button Cheat Sheet

Do you need a button for your next project but you’re not sure about the right markup? Don’t worry, we’ve got you covered!

Bookmarked on #



Learn CSS

“This course breaks down the fundamentals of CSS into digestible, easy to understand pieces.”

Bookmarked on #


inclusive-design-and-development handbook

Ingredients for case About the need for accessibility About the cost of accessibility

Bookmarked on #


Find out who can use your color combination

A tool that brings attention and understanding to how color contrast can affect different people with visual impairments.

Bookmarked on #


The right tag for the job: why you should use semantic HTML

Whether you write plain old HTML, HTML templating or JSX, are you using the right HTML tags? A guide to semantic HTML: what it is, why it’s so important, and how to use it

Bookmarked on #



Components AI — A new way to explore generative design systems

Open source color system - 132 colors - 5,390 accessible color combinations - The first 6 steps in each scale are accessible with white, the last 6 steps are accessible with black - Export as CSS, JS, JSON, or Sass

Bookmarked on #


Screen reader practice!

The main content of this page is invisible to the eyes - spooky, huh!? But, you can learn it's secrets by turning on Voiceover and navigating the page like a visually impaired user might.

Bookmarked on #


How to Report Errors in Forms: 10 Design Guidelines

"Help users recover from errors by clearly identifying the problems and allowing users to access and correct erroneous fields easily."

Bookmarked on #


The Best Place for Error Messages on Forms

"Where are you placing the error messages on your form? If they’re not placed where users expect to see them, you could jeopardize their capability to complete your form."

Bookmarked on #


The Ultimate UX Design of Form Validation

"Form validation is the technical process where a web-form checks if the information provided by a user is correct. The output of this process is emotional rather than technical. The form either points out that the user made an error, or assures that the provided data is accurate. "

Bookmarked on #


The Almost-Complete Guide to Cumulative Layout Shift

"This post is an attempt to get the most comprehensive view of Cumulative Layout Shift: what it is, what it measures, how it measures, how you can see it, and how you can fix it."

Bookmarked on #



Accessibility Strategies for Your Content Team

"Content creators can have a major impact on accessibility, here are some tips and tools to help empower content creators to take ownership of accessibility."

Bookmarked on #


Sticky Headers: 5 Ways to Make Them Better

Persistent headers can be useful to users if they are unobtrusive, high-contrast, minimally animated, and fit user needs.

Bookmarked on #



A Complete Guide To Accessible Front-End Components

"reliable accessible components: from tabs and tables to toggles and tooltips."

Bookmarked on #


An Accessible Current Page Navigation State

"Design and technical considerations behind the icon that indicates what page you're currently on."

Bookmarked on #


The unreasonable effectiveness of simple HTML

"Go sit in an uncomfortable chair, in an uncomfortable location, and stare at an uncomfortably small screen with an uncomfortably outdated web browser. How easy is it to use the websites you’ve created?"

Bookmarked on #


WAI-ARIA Authoring Practices 1.1

This document provides readers with an understanding of how to use WAI-ARIA 1.1 [WAI-ARIA] to create accessible rich internet applications. It describes considerations that might not be evident to most authors from the WAI-ARIA specification alone and recommends approaches to make widgets, navigation, and behaviors accessible using WAI-ARIA roles, states, and properties. This document is directed primarily to Web application developers, but the guidance is also useful for user agent and assistive technology developers.

Bookmarked on #


Readability Guidelines

A collaboratively developed, universal content style guide, based on usability evidence. Created by Content Design London.

Bookmarked on #



aria-live

"Assistive technology will initially scan the document for instances of the aria-live attribute and keep track of elements that include it. This means that, if we want to notify users of a change within an element, we need to include the attribute in the original markup."

Bookmarked on #


Sortable Table Column Mad Libs

"Visually and functionally sortable column headers on tables are straightforward (I have a post coming on that soon). However, making them accessible can be a bit frustrating. To clarify, making them accessible to screen readers is frustrating."

Bookmarked on #


Float Labels with CSS

"You’ve probably seen this pattern going around. It’s an input that appears as if it has placeholder text in it, but when you click/tap into that input, that text moves out of the way and allows you to type there. It’s rather clever, I think."

Bookmarked on #


Mobile Form Usability: Never Use Inline Labels

"Labels placed inside the form field (aka “inline labels”) are widespread in mobile apps and sites — almost to the point of being a best (mal)practice. Yet in every usability test we’ve conducted inline labels have suffered from major usability problems. Mobile included."

Bookmarked on #