spaceninja + accessibility   463

Inline validation is problematic
Live inline validation tells users whether what they type is valid as they type. Theoretically it's easier to fix errors as they occur instead of waiting until after form submission. But inline validation is problematic for many reasons. In this article I'll explain all the problems this causes and what to do instead.
fridayfrontend  forms  css  validation  accessibility 
3 days ago by spaceninja
How to Fail at Accessibility
So, let’s flip the script, and dive into — “How not to fail at accessibility”
We’re going to cover three main areas:
Testing — how do you know if your website is or is not accessible currently?
Building — once you’ve identified some bugs, how do you code for accessibility?
Process — how can you improve your process to prevent bugs in the first place?
fridayfrontend  accessibility  cssbasics  testing 
3 days ago by spaceninja
Adding visually hidden headings to complete a page's outline
Not only the main content of a web page needs to be marked up using headings, but also other elements like header, navigation, footer, etc. As the visual design usually does not include those headings, they need to be visually hidden by moving them off-screen.
fridayfrontend  accessibility  cssbasics  hidden  aria 
3 days ago by spaceninja
Need to scroll to the top of the page?
Perhaps the easiest way to offer that to the user is a link that targets an ID on the <html> element. So like...
fridayfrontend  cssbasics  html  scroll  accessibility 
10 days ago by spaceninja
Anchor Tags Can Contain Block-Level Elements As Of HTML5
This means that I can use just about anything that makes sense inside of an Anchor tag. To demonstrate, here's a "User Card" that is an Anchor tag that contains block-level elements:
fridayfrontend  html  links  accessibility  cssbasics 
10 days ago by spaceninja
UX accessibility for elderly — 12 principles
While working on a project the other day I dove into this topic quite deeply, and surprisingly I managed to find plenty of information on designing for the heavily visually impaired, or motorically dysfunctional. Don’t get me wrong, it’s absolutely great we account for that, but it was rather challenging to find guides on how to design for something, that even more of us will experience sooner or later — senility.
fridayfrontend  cssbasics  accessibility 
16 days ago by spaceninja
How to Accessibly Split Text
I recently published an article on animating variable fonts with the help of the Javascript library Splitting.js. A few people asked about the accessibility implications of this, so in this article we’ll take a look at why splitting a string of text can be problematic from an accessibility point of view, and what we can do to make sure that split text is accessible to everyone.
fridayfrontend  cssbasics  javascript  accessibility  splitting 
16 days ago by spaceninja
Accessibility Strategies for Your Content Team
We wanted to share some tips and tools to help empower content creators to take ownership of their role in accessibility. We’ll be looking at accessibility as it applies to any written content, basic page/content layout, PDFs, and video. We’ll also talk about the Content Creator’s role in promoting their organization’s overall accessibility by acting as QA for their organization’s website and other public-facing properties and picking accessible 3rd party tools.
fridayfrontend  accessibility  cssbasics 
16 days ago by spaceninja
The problem with tooltips and what to do instead
Tooltips are not only hard to use, but they're normally totally unnecessary. Learn why that is and what you could do instead.
fridayfrontend  css  cssbasics  javascript  tooltips  accessibility 
16 days ago by spaceninja
Tooltips in the time of WCAG 2.1
A review of the history and current state of tooltip accessibility. Or: everything you didn't know you needed to know before making a tooltip.
fridayfrontend  tooltips  css  html  aria  accessibility 
16 days ago by spaceninja
Exploring prefers-reduced-motion
Animations and transitions on the web are cool and all, they can make the UI feel snappier and responsive (if used judiciously). However there are problems with motion like this. A whole lot of people are sensitive to motion and you don't want your site to cause motion sickness and dizziness, right?

Luckily, most modern browsers now support prefers-reduced-motion CSS media query. Which means you can skip animations for people who don't want them.
fridayfrontend  css  cssbasics  animation  reduced-motion  accessibility 
25 days ago by spaceninja
What Tumblr Taught Me About Accessibility
As someone who was a teenager during its peak, Tumblr has had an undeniable influence on my life. Like many people my age, my first exposure to the concepts of ‘accessibility’ and ‘ableism’ was through Tumblr. In sharp contrast to the web accessibility community, where we often focus on technical details, meeting clear criterion and legal compliance, Tumblr’s disability community focused on more human facets of accessibility by practicing accessibility in a variety of creative ways. Even when presented with access barriers created by the inaccessibility of Tumblr as a platform, Tumblr as a community has found unique ways to support disabled users. As developers, we need to learn from our mistakes by finding out where our users compensate for our deficiencies, and learn from how disabled communities support themselves.
fridayfrontend  tumblr  accessibility 
25 days ago by spaceninja
Why You Shouldn't Gray Out Disabled Buttons
When designing disabled buttons, adjust the opacity, not the color. The optimal opacity values will vary based on your background color. But a rule of thumb is to aim for an opacity level of 40% or below. It’s important to make the opacity level low enough, or some users may still view the button as enabled.
fridayfrontend  accessibility  css  cssbasics  disabled  forms 
4 weeks ago by spaceninja
Accessibility and web performance are not features, they’re the baseline
Instead we must start to see inaccessible and slow websites for what they are: a form of cruelty. And if we want to build a web that is truly a World Wide Web, a place for all and everyone, a web that is accessible and fast for as many people as possible, and one that will outlive us all, then first we must make our websites something else altogether; we must make them kind.
fridayfrontend  accessibility  performance  cssbasics 
4 weeks ago by spaceninja
Reducing Motion to Improve Accessibility
Hey friends! In this post, I am going to walk you through a newer media query (to me): prefers-reduced-motion. My major takeaways from the web accessibility perspective: Be careful with your animations; Be careful with your gifs; Use prefers-reduced-motion; Allow a user to control reduce motion;
fridayfrontend  css  cssbasics  accessibility  reduced-motion 
4 weeks ago by spaceninja
Unexpected accessibility tips
8+1 unexpected but practical tips for testing accessibility and inclusive design: Test on the train; Ask people in a hurry; Hold your mobile with straight arms; Test on a projector; Take off your glasses; Wear gloves; Use only the keyboard; Test on a low-spec device; Disable JS, CSS, and images;
fridayfrontend  accessibility  testing 
4 weeks ago by spaceninja
Update on accessibility improvements we’re making to Chorus
Over the last few months, we’ve been changing that. The product team’s been hard at work improving the accessibility of Chorus and every website powered by it. We’ve been working to ensure our websites are more usable for everyone, regardless of which browsers, devices, and assistive technologies they rely on. To reach our goal, we’ve been making improvements to our design system, and we’ve been creating new resources and training to inform our practices. In this post, we’ll share what we’ve done so far, how your experience of browsing our websites might be improved, and—most importantly—we’ll talk about the work that’s still ahead of us.
fridayfrontend  accessibility  contrast  alt  forms  screenreaders  vox 
5 weeks ago by spaceninja
How Privilege Defines Performance, by Tatiana Mac
In theory, performance, accessibility, and inclusive design all have similar goals: Provide the best, most consistent experience to all people using the minimal amount of resources.

In practice, this often falls apart.

Product creators define what it means to be performant from where they stand, which is typically from places of privilege with unseen biases, struggling to find true empathy with their users.

Through this talk, we'll examine how to build conscientiously, looking within to resist systematic problems in order to create more truly performant, accessible, and inclusive systems for our users.
fridayfrontend  video  performance  accessibility  privilege  culture  racism  sexism  feminism  inclusive  diversity 
5 weeks ago by spaceninja
Accessible inline list with bullets between items
I had a list like this on my site for a long time: Pizza · Döner · Kaffee. Until I’ve tried it in a screen reader and realized that a screen reader reads pseudo elements (::before and ::after) content that I was using to implement bullets. A screen reader will read something like “Pizza MIDDLE DOT Döner MIDDLE DOT Kaffee”. Not good. Let’s try to fix it.
fridayfrontend  accessibility  cssbasics  lists 
6 weeks ago by spaceninja
Truths about digital accessibility
Creating, maintaining, or evaluating accessible technology? Here are some things to keep in mind (note that identity-first language is intentional):
fridayfrontend  cssbasics  accessibility  screenreaders 
6 weeks ago by spaceninja
CSS prefers-reduced-motion Media Query
One of the CSS media queries I've recently discovered is prefers-reduced-motion, a media query for users sensitive to excessive motion. Let's use prefers-reduced-motion to show motion to all users but none to sensitive users:
fridayfrontend  css  cssbasics  reduced-motion  accessibility 
6 weeks ago by spaceninja
Getting to the Heart of Digital Accessibility
Quick! Think of the word “developer” or “coder” — what’s the first thing that comes to mind? Maybe a whiteish male in his twenties living in a busy metropolis, wearing a nerdy t-shirt and hoodie? Someone a bit like Mark Zuckerberg? Or maybe a younger Bill Gates or Sergey Brin? Any of the dudes from the HBO series Silicon Valley, perhaps? Certainly no one like me. By tech standards, I’m old. I’m also female and a mother. I live in a midwestern town you’ve never heard of and will never visit — a town where the cows vastly outnumber the people.
fridayfrontend  culture  diversity  accessibility  siliconvalley 
6 weeks ago by spaceninja
Short note on the disabled/aria-disabled attributes
Setting the disabled attribute on a control as well as aria-disabled="true" is not necessary under any circumstances:
fridayfrontend  accessibility  disabled  forms  aria-disabled  cssbasics 
7 weeks ago by spaceninja
Form design: from zero to hero all in one blog post
This guide is quick and to the point—a whistle stop tour of the knowledge I’ve accrued in my years of form design. It’s not exhaustive, but rather an entry point, designed to save you time on the basics.
fridayfrontend  forms  css  html  design  accessibility  cssbasics 
7 weeks ago by spaceninja
Maybe Ignore type=search
Another case of the headline saying it all. If you have a valid, accessible search field (with a useful, sensible label) then you can probably ignore type="search" and use type="text" instead.
fridayfrontend  accessibility  html  forms  search  inputs  cssbasics 
7 weeks ago by spaceninja
Context and Caveats
I found myself in one of those famous Twitter debates* the other day and off the back of it, I thought I’d create a short article about how we should should always consider context and caveats when we make bold statements. The context of that particular conversation was around a hot take that I’ll paraphrase: “Native buttons aren’t great and this one that has been developed is better and fully accessible”
fridayfrontend  accessibility  context  buttons 
7 weeks ago by spaceninja
Dynamically changing the text color based on background color contrast with vanilla JS
Last month, we looked at a technique for generating random colors with vanilla JS.
Reader Stephen Flannery showed me a demo he built with the technique where the text color changed from black to white if the color was too dark.
Checking color contrast with vanillia JS When I asked Stephen how he did it, he pointed me to this article from Brian Suda at 24 Ways on checking color contrast.
javascript  contrast  color  accessibility 
7 weeks ago by spaceninja
Reduced Motion Auto-Play Video
Auto-playing background videos can be annoying. However, beyond being a source of annoyance (or “user delight”, as some might say) they can be distracting for those who have difficulty staying focused, and potentially sickening for those with Vestibular disorders. Fantastic… Fortunately the reduced motion media query gives developers another chance at implementing such components in a way that will respect user preferences from an OS level.
fridayfrontend  css  cssbasics  reduced-motion  video  auto-play  accessibility 
8 weeks ago by spaceninja
Accessible CSS Generated Content
CSS generated content can have unintended side-consequences. As Andy Clarke discovered recently, data- attributes he used as a way to transfer content into CSS for visual purposes are not translated using built-in browser functionality.
fridayfrontend  css  cssbasics  generated  before  after  accessibility  translation  internationalization  localization 
8 weeks ago by spaceninja
Top 5 Rules of ARIA
Even though ARIA was created years ago, some of the developers still misuse ARIA due to the lack of thorough knowledge on the subject. Misusing ARIA results in a much more inaccessible experience than when developers do not use ARIA. That is the reason for the common saying, “No ARIA is better than bad ARIA.” That being said,  developers should try to understand and follow the rules of the ARIA, to help provide a more accessible experience to people with disabilities. Let’s dive into the rules of ARIA in greater detail below.
fridayfrontend  accessibility  aria  cssbasics 
8 weeks ago by spaceninja
Maybe You Don’t Need a Date Picker
What we know is that native and custom calendar controls are often a problem for users and applied where they are not needed. Before dropping the code on a screen as a matter of habit, consider if it genuinely helps the user or just your workflow.

I do not propose a perfect solution for the narrow use case I identified, but I am hoping it spurs rethinking the casual application of a more complex pattern than is often warranted.
fridayfrontend  cssbasics  accessibility  date  datepicker 
9 weeks ago by spaceninja
Understanding Assistive Technology: How Does a Blind Person use the Internet?
Understanding digital accessibility challenges is easy if you know people with disabilities. But what if you’ve never seen a person who is blind use their computer or smartphone? We’re here to help you understand a little bit about what it’s like to use the internet if you have a disability.
fridayfrontend  cssbasics  accessibility  screenreaders  blind 
9 weeks ago by spaceninja
Avoid Placeholder Text by Animating Form Labels
We suggest one solution — you can see the code on our CodePen — that includes positioning the label element so that it overlaps the input field. In effect, making the label look like placeholder text. Then when the input receives focus, animate the label element out of the user’s way. Let’s dive into one approach using CSS positioning and transitions:
fridayfrontend  cssbasics  css  forms  accessibility  placeholders  labels  animation 
9 weeks ago by spaceninja
An Intro To Screen Reader Testing for Sighted Developers
Besides the design, loading time and performance, accessibility determines the user experience of the web apps that you're building profoundly. This quick guide will give you an introduction to the why and how of testing your website's user experience using screen readers.
fridayfrontend  accessibility  screenreaders  testing 
9 weeks ago by spaceninja
Five Methods for Five-Star Ratings
Developers often struggle with with reviews — it is common to see inaccessible and over-complicated implementations. Let’s walk through new, accessible and maintainable approaches for this classic design pattern. Our goal will be to define the requirements and then take a journey on the thought-process and considerations for how to implement them.
fridayfrontend  cssbasics  ratings  stars  accessibility 
10 weeks ago by spaceninja
Menus with "Dynamic Hit Areas"
The problem is that if a submenu pops out somewhere on hover, getting your mouse over to it might involve moving it along a fairly narrow corridor. Accidentally move outside that area, the menu can close, and it can be an extremely frustrating UX moment.
fridayfrontend  cssbasics  css  accessibility  ui  svg 
10 weeks ago by spaceninja
2020 candidates: none of them have accessible websites for disabled people
The first stop to reaching disabled voters is making sure they can access your policy proposals.
fridayfrontend  accessibility  politics 
10 weeks ago by spaceninja
Menu (or not)
This article marks the third time I try to create a useful menu pattern for - but hopefully the third time's the charm. But before I explain the (hopefully) final and correct menu solution let's look back to past trails and (eventually failed) implementations.
fridayfrontend  accessibility  menus  aria 
10 weeks ago by spaceninja
Don't disable buttons while submitting forms with ajax
When a button picks up the [disabled] attribute, focus shifts from the button to the document. For screen reader users, this triggers an announcement. For people who use the keyboard to navigate (both screen reader users and sighted users), they’re now no longer in the field they were working in and might be disoriented. Fortunately, there’s a relative easy, better approach.
fridayfrontend  accessibility  disabled  buttons  forms  ajax  javascript 
10 weeks ago by spaceninja
Hello my name is St�phanie
My name is Stéphanie, for some reasons, some of you call me St�phanie, St?phanie, Stêphanie or Stéphanie. In a globalized diverse world where user travel and buy online, decisions about encoding, formats or characters you accept or refuse on your site and in your database will have more or less unpleasant consequences on human beings. I think it’s time you and me discuss encoding, diversity and user experience.
fridayfrontend  video  accessibility  encoding  characters  characterentities  names 
10 weeks ago by spaceninja
Nobody talks about the real reason to use Tabs over Spaces
in the tabs-vs-spaces debate, i see people saying "tabs lets us customize our tab-width", as though we do this "for fun" — but this is about meeting the real needs of real people who have real impairments — how is this not seen as a simple cut-and-dry accessibility issue?
accessibility  programming  tabs  space 
10 weeks ago by spaceninja
Delight Comes Last
Delight — creating an emotional impression through animation, copy, and illustration — is a common substitution for harder problems like accessibility and usability. More and more, designers and their stakeholders are focusing on delight as shorthand for success at the expense of basic utility.

To reverse this trend, we have to understand why delight is an easier problem than usability. With this knowledge, we can work to build better products by putting delight last.
design  accessibility  delight 
10 weeks ago by spaceninja
The Anatomy of Accessible Forms: Best Practices
In today’s post, we will go through all the ingredients of creating an accessible form that provides the best user experience for all users. We will go through each aspect of creating an accessible form, understand why a particular step is important, and how it affects people with disabilities or users in general.
fridayfrontend  cssbasics  accessibility  forms 
11 weeks ago by spaceninja
How to Section Your HTML
The sectioning elements in HTML5 are <nav>, <aside>, <article>, and <section>. <body> is also kind of a sectioning element since all content lying inside of it is part of the default document section. Here is a brief explanation of each sectioning element and how they are used:
html  nav  aside  article  section  elements  accessibility 
11 weeks ago by spaceninja
Accessibility Terms Defined
What does it mean to be accessible? What’s the difference between closed captions and subtitles – is there even a difference? If a friend or colleague asks you for a transcription definition, what should you say?

All of these questions will soon be answered. Below, we define everything from “keyboard accessibility” to accessibility-related organizations and laws. It’s important to have a solid grasp on accessibility and how it may apply to you, and it starts by understanding the basics.
fridayfrontend  cssbasics  accessibility 
11 weeks ago by spaceninja
Using VoiceOver to Evaluate Web Accessibility
VoiceOver is a screen reader program that comes on new Mac computers, iPhones, iPads, and iPod touches. This article is designed to help users who are new to VoiceOver learn the basic controls for testing web content, and to serve as a reference for the occasional VoiceOver user.
fridayfrontend  accessibility  voiceover  screenreaders 
11 weeks ago by spaceninja
Converting divs into accessible pseudo-buttons – Ben Frain
Let’s get this out of the way right now: I don’t think there is a compelling reason to turn an unopinionated HTML element like a div or a span into a button. ’Cause, you know, button already exists. However, the question was asked, “If you had to do it though, could it be done?”.
accessibility  buttons  div  aria 
11 weeks ago by spaceninja
5 Keys to Accessible Web Typography
I wrote about fluid web typography in last month’s blog post and I realised that a lot of the popular implementation techniques come with accessibility issues. So I wanted to go back and revisit the basics and the best practices of accessible web typography.
fridayfrontend  cssbasics  css  accessibility  typography  contrast  font-smoothing  line-height  headers  semantics 
12 weeks ago by spaceninja
Target Size and 2.5.5
TL;DR: Regardless of what accessibility conformance level you target, try to ensure that interactive controls are at least 44 by 44 pixels in size. Links in blocks of text are exempt.
fridayfrontend  cssbasics  accessibility  touch  target 
12 weeks ago by spaceninja
The Anatomy of Accessible Forms: Required Form Fields
Websites and mobile apps collect a wide variety of data using the forms. Most of these forms have required fields which means the user must fill these fields in order to submit the form successfully. There are multiple ways of providing this cue that a particular form field is required. Below, we will explore each of the methods.
fridayfrontend  cssbasics  accessibility  design  forms  required 
12 weeks ago by spaceninja
HTML is the Web
A Web page is a document. A component, whether it’s part of a blog template, a news site, a marketing stats dashboard or a sign-up form, is a part of a document. Documents have structure. On the Web, that’s not just about the visuals or the architecture provided by your framework, it’s about choosing semantically correct elements to that make sure that your Web page, component, whatever, is correctly structurally formatted. Headings should be headings, lists should be lists, buttons should be buttons and tables should be tables. You can style them (pretty much) however you like - a heading doesn’t have to be big and bold with a bottom margin. That’s up to you, but it should definitely be a heading and I’ll fight you if you make it a div.
fridayfrontend  cssbasics  html  accessibility 
12 weeks ago by spaceninja
An Introduction to Accessible Labeling
Last week, I got a decent amount of folks who found the aria states blog post helpful. This week I wanted to continue with that and go over something that took me a long time to understand: labeling. How do you label things? What needs labeling? What is the difference between all the ways to label things? After this post, you should have a firmer understanding of all things labels.
fridayfrontend  cssbasics  accessibility  labels  forms  aria-label  aria-describedby  aria-labelledby 
12 weeks ago by spaceninja
Drop caps & design systems: A story about making things 1% better
This experience was a reminder for me that most design systems work is rarely flashy or sudden. Rather, it involves communication, iteration, and slow, careful research. If you can do that mapmaking, and if you’ve got a good team to help you find your way, your design system will be in excellent shape. And so will your drop caps.
fridayfrontend  css  accessibility  voiceover  screenreaders  dropcaps  first-letter 
12 weeks ago by spaceninja
The Anatomy of Accessible Forms: The Problem with Placeholders
Instructions help users to submit forms successfully. However, if the instructions are provided with a placeholder attribute, then the user might not be able to use that instruction effectively.
fridayfrontend  cssbasics  accessibility  placeholders  forms 
june 2019 by spaceninja
Indicating focus to improve accessibility
It’s a common, but fairly easy-to-fix accessibility issue: lack of indicating focus. In this post I will explain what we mean by focus and show you how focus outlines make your site easier to use.
fridayfrontend  cssbasics  css  focus  accessibility 
june 2019 by spaceninja
Keep it simple
One thing that is often forgotten about accessibility is that keeping things simple and utilising semantic HTML gets you most of the way towards providing a fully accessible experience for everyone. ARIA, CSS and JavaScript are great for enhancing what we already get with semantic HTML and you don’t have to use much of it at all if you do use well-structured, semantic HTML as your base. Even when you apply CSS and JavaScript, keeping the code as simple as possible will reduce risk that is very often created by complexity.
fridayfrontend  cssbasics  accessibility  aria  javascript 
june 2019 by spaceninja
Hello my name is St�phanie - a talk on special characters and UX
No there’s no encoding issues in your browser. This is just one of the many strange ways some sites  misspell my name: St?phanie, Stêphanie or Stéphanie. This talk is about user experience and how encoding and database decisions about formats and characters can create an awful experience.
fridayfrontend  accessibility  encoding  characters  characterentities 
june 2019 by spaceninja
My Web Accessibility Testing Process
It sounded like people were curious about my web accessibility testing approach! So I’m going to walk you through my thought process, what I test for, how early I check, and how I test. It’s like having my web accessibility testing checklist in your back pocket.
fridayfrontend  accessibility  testing  webaim  wave  contrast  tabindex  screenreaders  voiceover 
june 2019 by spaceninja
Create custom keyboard accessible checkboxes
I’ve seen a ton of designers make these GORGEOUS checkbox styles, but then you see them implemented and you can’t even select it using your keyboard.
fridayfrontend  accessibility  cssbasics  checkboxes  forms 
june 2019 by spaceninja
Accessibility Standards: Defining What Success Means – Automattic Design
> With all those different kinds of work, and with accelerated schedules as the norm, how can we possibly fulfill our mandate to create accessible web content? We decided that the answer was to choose a set of accepted guidelines (currently WCAG 2.1 AA), and then define what success would look like under each of the work scenarios I’ve described above. This document answers those questions at a sufficient level of detail to guide our and our colleagues’ and successors’ work.

Zeldman is doing something interesting here, directly confronting the idea that rapid schedules don't leave room for accessibility.
fridayfrontend  accessibility  wordpress  wcag 
june 2019 by spaceninja
The World-Wide Work, by Ethan Marcotte
These days, it’s easy to feel overwhelmed. The tech industry is facing a veritable raft of ethical, moral, and political crises. Automation and industrialisation are reshaping our world. And sitting in the middle of all that? You and me. We’re digital designers, we’re developers, we’re product owners. But each day, our work is changing — more quickly than it ever has before.

Here’s the question we have to ask ourselves: what do we want that change to be? In this talk, we’ll look at some of the challenges facing our industry, and ask ourselves: what kind of work do we want to do?
fridayfrontend  video  ethics  unions  morality  politics  social  change  culture  accessibility 
june 2019 by spaceninja
Color contrast accessibility tools
Accessibility is all the rage these days, specifically when it comes to color contrast. I’ve stumbled upon a couple of tools this week that I think are pretty nifty for helping make sure that all of the text on our websites is legible regardless of what background color they might have.
fridayfrontend  cssbasics  accessibility  color 
june 2019 by spaceninja
Create a user controlled dark or light mode
It’s important to not make presumptions in design if you can help it, so I’m going to show you a quick and easy way to honour the user’s operating system preference by default, but also give them a toggle button to change their preference, manually.
fridayfrontend  css  cssbasics  darkmode  accessibility 
june 2019 by spaceninja
Making Websites Work with Windows High Contrast Mode
At Khan Academy, we've been working to make our web product more accessible to a variety of users, including those who experience blurry vision and/or severe color-blindness. Part of this work has involved updating our styling to be able to work well with Windows High Contrast Mode. In this post, you'll learn about how to optimize web applications for the benefit of other users with visual accessibility needs.
fridayfrontend  css  accessibility  cssbasics  windows  contrast  highcontrastmode 
june 2019 by spaceninja
The CSS background-image property as an anti-pattern
The CSS back­ground-image prop­er­ty allowed us to do some amaz­ing things, but in most cas­es, it’s time to leave it behind.
fridayfrontend  css  cssbasics  backgrounds  images  performance  accessibility  responsive 
june 2019 by spaceninja
How to create an accessible language picker
In this article, we'll go through the steps of creating a custom language picker and keeping it accessible.
fridayfrontend  cssbasics  accessibility  language  select  aria  buttons 
june 2019 by spaceninja
The difference between keyboard and screen reader navigation
People often include screen reader users in the much larger group of keyboard-only users. Whilst this is correct (most screen reader users don’t use a mouse), it also creates a false impression of the way screen reader users navigate content.
fridayfrontend  cssbasics  accessibility  keyboard  screenreaders 
june 2019 by spaceninja
Tabindex: it rarely pays to be positive
HTML’s tabindex attribute may be used to modify whether an element can receive keyboard focus, or not. It’s an attribute that can be quite beneficial in creating custom widgets, and ensuring elements that should be able to receive keyboard focus in some way are keyboard accessible. It can also be easily abused by people who are often trying to do the right thing, but don’t quite understand the undesired impact the attribute can have on accessibility when misused.
fridayfrontend  cssbasics  accessibility  tabindex 
june 2019 by spaceninja
Building the most inaccessible site possible with a perfect Lighthouse score
Google's built-in testing tool Lighthouse judges the accessibility of our websites with a score between 0 and 100. It’s laudable to try to get a high grading, but a score of 100 doesn’t mean that the site is perfectly accessible. To prove that I carried out a little experiment.
fridayfrontend  accessibility  lighthouse  testing  automation 
june 2019 by spaceninja
Daily Ethical Design
There's no shortage of content, manifestos, and opinions these days on how design can be evil. But if they've left you feeling more frustrated than empowered, wishing for practical, real-world ways to enact change in your work, we hear you. In this piece, Lennart Overkamp lays out a practice-based approach to daily ethical design. You might be surprised to find out how much you can already do.
fridayfrontend  design  ethics  usability  ux  accessibility  privacy  culture 
june 2019 by spaceninja
A Model for WordPress Accessibility
I am going to propose a way to increase the overall accessibility of the WordPress ecosystem. It requires acknowledging some mistakes and using those as the base for building a better platform. Automattic can build a dedicated accessibility team. With that team, Automattic can honor Matt Mullenweg’s promise to set new accessibility best practices for the web overall.
fridayfrontend  accessibility  wordpress  gutenberg 
june 2019 by spaceninja
Reducing motion with the picture element
hm… I wonder if you could use `picture` + `prefers-reduced-motion`? I copied the code, dropped it into a post of mine, created a static image of an animated GIF, and turned on the “reduce motion” preference (System Preferences > Accessibility > Display). And then BOOM. Just worked. In real time!
fridayfrontend  accessibility  reduced-motion  picture  images  gifs 
june 2019 by spaceninja
Contextually Marking up accessible images and SVGs
However, depending on the markup pattern and the method used, the accessible name may not be exposed as expected, due to quirks or gaps in implementations. This means that without testing, graphics may not be exposed in the manner in which you might expect. Additionally, this article will outline why different markup patterns are necessary when using images or SVG elements within interactive elements, such as links and buttons.
fridayfrontend  cssbasics  css  accessibility  svg  images  alt  title  aria-label 
may 2019 by spaceninja
How to tweet with accessibility in mind
Curating some go-to tips for myself for tweeting with accessibility in mind. I hope others find this helpful.
fridayfrontend  cssbasics  accessibility  twitter  alt 
may 2019 by spaceninja
Accessible Icon Buttons
While the seemingly popular aria-label is a perfectly valid way to add an accessible name to a button (and/or other components), it is certainly not the only way, let alone the best. You could always just put text in it, for example. But what if the designer or the UI enforces the absence of visual text next to an icon? There is a handful of ways that an icon button can be implemented accessibly. This article is an overview of them all.
fridayfrontend  accessibility  css  icons  buttons  aria  aria-label  svg 
may 2019 by spaceninja
Safari VoiceOver Helper Bookmarklet
This bookmarklet hides the content of the page, and shows a quick guide to using VoiceOver. It’s designed to help you learn how to use the basics of VoiceOver, which can help you design and build your service to better meet the needs of screen-reader users.
fridayfrontend  accessibility  voiceover  bookmarklets  safari 
may 2019 by spaceninja
Some Accessibility Resources
If you’re just getting into accessibility (or a11y for short), or you’re getting comfortable with what you know and want to build on that, I recommend checking out the following resources.
fridayfrontend  cssbasics  accessibility 
may 2019 by spaceninja
The Dark Side of the Grid (Part 2)
CSS Grid layout is powerful and flexible. It's great for our development experience, but it may come at the cost of user experience and accessibility if we don’t use it responsibly. This article series gives you an overview of potential implementation pitfalls; or, in other words, the dark side of the grid.
fridayfrontend  css  cssgrid  grids  layout  accessibility 
may 2019 by spaceninja
The intersection of accessibility and performance, by Eric Bailey
Accessibility is a holistic practice, essential to some but useful to all. It is a practice that touches on many aspects of good web design and development, especially performance. This talk will highlight opportunities and techniques to improve your website or web app's performance by embracing an accessible, inclusive mindset.
fridayfrontend  video  accessibility  performance 
may 2019 by spaceninja
How to create an accessible React modal
A step-by-step guide to creating an accessible and reusable modal component in React
javascript  react  modular  accessibility 
may 2019 by spaceninja
« earlier      
per page:    204080120160

related tags

aa  abbr  abbreviations  accessibility  accordions  advice  after  agile  ajax  alexa  alt  amazon  analytics  animation  antipatterns  api  applewatch  apps  aria  aria-controls  aria-describedby  aria-disabled  aria-hidden  aria-label  aria-labelledby  article  aside  asl  audits  autism  auto-play  automation  avengers  aws  axe  backgrounds  before  bem  bias  blind  bookmarklets  borders  breadcrumbs  breaks  broadband  browsers  build  business  button  buttons  capitalization  captions  cards  carousel  certification  change  characterentities  characters  charts  cheatsheet  checkboxes  checklist  chrome  ci  civilrights  clip-path  codeofconduct  color  colorblind  comics  components  conferences  context  contrast  controls  cortana  cruelty  css  cssbasics  cssgrid  culture  currentcolor  cursors  customproperties  dark  darkmode  data  date  datepicker  debate  defaults  delight  descriptions  design  designsystem  details  detection  development  devtools  dialog  disabled  discrimination  display  displaycontents  div  diversity  dl  drag-and-drop  drinking  dropcaps  dropdown  dyslexia  edge  elements  em  email  ems  encoding  enhancement  errors  ethics  exclusion  features  feminism  fieldset  file  first-letter  flat  flexbox  floats  focus  focus-ring  focus-visible  focus-within  font-size  font-smoothing  fonts  footer  forms  frameworks  fridayfrontend  frontend  gender  generated  gifs  github  graphs  grids  guidelines  gulp  gutenberg  headcanon  header  headers  headings  health  hex  hidden  highcontrast  highcontrastmode  hiring  hover  howto  html  html5  https  icons  id  images  improvements  inclusive  infinite  initial-scale  inputs  instapaper  internationalization  interviews  inverted  ios  iphone  italics  jargon  javascript  jaws  jenkins  keyboard  labels  landmarks  lang  language  laws  layout  learning  legal  legend  letter-spacing  lighthouse  line-height  links  lint  linters  lists  liveregions  loaders  localization  mac  macos  main  margins  maximum-scale  mediaqueries  meetings  megamenu  menus  meta  microdata  microsoft  misconceptions  mobile  modal  modals  modular  morality  mouse  movies  mythbusters  myths  names  narrator  nav  navigation  night  node  notifications  numbers  nvda  offscreen  ol  opacity  orange  order  osx  outline  overlay  pa11y  patterns  performance  phone  picture  pixels  placeholder  placeholders  pocket  pointer  politics  position  posters  priorities  prioritization  privacy  privilege  process  programming  progress  progressive  proptypes  pseudo-classes  px  qa  questions  quotes  racism  radio  ratings  react  readability  readermode  redlining  reduced-motion  refactoring  reference  required  reset  responsive  rights  roi  roles  rules  rwd  safari  sass  scale  scifi  screenmagnifiers  screenreaders  scroll  scrollbars  search  section  section508  security  select  semantics  seo  sexism  shortcuts  sidebar  siliconvalley  siri  skiplinks  slides  social  sorting  sortsite  sourceorder  spa  space  speaking  spinners  splitting  sprites  standards  stars  states  statistics  sticky  structure  styleguide  subgrid  summary  surveys  svg  switch  tabbing  tabindex  tables  tabs  talkback  target  teams  teamwork  testing  tests  themes  tips  title  toggle  toggles  tools  tooltips  tota11y  toto  touch  training  trans  translation  travis  tumblr  twitter  typography  ui  ul  underline  unions  urls  usability  ux  validation  variables  video  viewport  virtualassistants  visibility  visualization  vm  voice  voiceover  voltron  vox  vue  w3c  wai  wai-aria  wave  wcag  webaim  webfonts  windows  word-spacing  wordpress  writing  zoom 

Copy this bookmark: