Dev.Opera — Accessible Drag and Drop Using WAI-ARIA

This article is intended for people who create rich internet applications with drag and drop functionality and want to make them accessible.

No prior knowledge of WAI-ARIA is assumed, although it is recommended you read my introduction to WAI-ARIA article before starting this article. A basic knowledge of scripting is assumed, and is necessary to understand exactly what is going on in the code example, but this knowledge is not necessary to understand the basic concepts discussed.

After reading this article you will have an understanding of how to structure applications with drag and drop functionality so they are accessible.The term drag and drop infers using a mouse to move an object from one location to another.

Curated by (Lifekludger)
Read full article at Source: Dev.Opera — Accessible Drag and Drop Using WAI-ARIA

Effectively including accessibility into web developer training – Karl Groves

…Today, I’d like to follow “Your computer school sucks” with some actual guidance for web developer training schools and bootcamps.

Do not treat accessibility as its own topic

A few years ago, I wrote a series of blog posts under the theme Selling Accessibility. The content for many of those posts was driven by interviews I did with a number of people in the accessibility field, one of whom was Cher Travis-Ellis from CSU Fresno. Higher Education has some unique challenges when it comes to online accessibility, especially when it comes to the amount of content being created and the large numbers of non-technical people who create that content. During our discussions, Cher shared with me a neat trick she used when training CSU Fresno staff on accessible content creation: add the accessibility training to all the other training. Unless there’s a really specific technique that deals only with accessibility, nobody really needs to know that you’re teaching them how to make something accessible. For instance, if you’re teaching someone how to use MS Word and you talk about using actual headings instead of bolded text, the accessibility aspect of that practice doesn’t really matter. In other words, you’re teaching people how to do a good job, anyway. The same thing goes for web development. Many accessibility best practices are also just quality best practices. Teach people how to do a good job and, when it comes to techniques that are specific to accessibility, that should be in the core curriculum too.

Discuss the role of “markup” in Hypertext markup language

Discuss the Document Object Model, including Object-Oriented Principles like Abstraction, Inheritance, and Encapsulation

Discuss user input devices

Discuss quality

Discuss basic user expectations, including predictability of the interface

Expect More

Curated by (Lifekludger)
Read full article at Source: Effectively including accessibility into web developer training – Karl Groves

Airline Web Accessibility: Post US DOT Deadline Round Up

Round the world in 8 Days We are pleased to say we can conclude our round the world airline accessibility review, having looked at the six airlines (one from each continent) to see how they have approached the new US … Continued

Curated by (Lifekludger)
Read full article at Source: Airline Web Accessibility: Post US DOT Deadline Round Up – User Vision

7 Accessibility Sins I’m Tired of Pointing Out to UI/UX Designers

Dear UI/UX designer, I’m tired of seeing these mistakes over and over again coming out from UI/UX designers I’ve worked with. Some are exceptionally talented, producing beautiful web or app designs…

Curated by (Lifekludger)
Read full article at Source: 7 Accessibility Sins I’m Tired of Pointing Out to UI/UX Designers | μεταcole

Web Accessibility and Keeping Others in Mind – snack o’clock

Website accessibility has been on my mind recently. A few years back, one of the biggest trends on the web was subtlety. Medium gray text on light gray backgrounds, super-thin fonts, etc. all looked quite elegant to designers, but in … Continue reading →

Curated by (Lifekludger)
Read full article at Source: Web Accessibility and Keeping Others in Mind – snack o’clock

In Plain Sight — Shopify UX — 1

In Plain Sight: Text, Contrast, and Accessibility

This is the first post in a series on accessibility from Shopify UX’s team. We’re publishing posts every two weeks. You can check out the introduction here.

Contrast is one of the basic elements of graphic design. It lets us tell things apart. Yet in UI design, at least for the web, there is a perpetual temptation to skimp. Things tend towards gray-on-gray.

Especially when it comes to text, having enough contrast is essential. This isn’t just an aesthetic matter. We want everyone to be able to comfortably read the text on our sites and apps. It’s also worth remembering the world isn’t divided into those with perfect vision and those with disabilities. Eyesight differs across a wide range among the general population. Many of us wear glasses, and everyone’s vision worsens as we age. (That reminds me: I probably need a new prescription.)

Now that I’ve reminded you it’s important, what is contrast, exactly? Essentially, it’s the perceived difference between two colors. Mind blown, right? Okay, bear with me, because there are several aspects of color that contribute to this perception. The main one is the difference in lightness (also known as luminance) between those colors. In addition to luminance, other aspects of color also make a difference to contrast. Keep this in mind, as I’ll explore this in greater detail later.

Practically then, how do we ensure our text has enough contrast on screens? It might seem simple: use dark enough text. End of story. But that’s only true if contrast is our only consideration: there are cases where other solid, usability-based concerns conflict with ideal contrast requirements. Getting text contrast right is harder than it seems. The good news is that a few simple rules of thumb can take us a long way. When we run into more complex scenarios, a deeper understanding of the issues can help point us in the right direction.

Source: In Plain Sight — Shopify UX — Medium

How to implement SVG icons | Creative Bloq

Web developer Shehzad Azram shows how SVG icons could help solve accessibility issues, and reveals how to implement one.

Things have come a long way from the days when we used plain vector art images as icons. Yet there are still a number of accessibility issues when it comes to icons. Thankfully, SVGs could go a long way towards addressing this problem.In this article, I’ll take you through the different icon options we have used in the past, then explore the benefits (and drawbacks) of SVG icons. Finally, I’ll explain how to implement SVG icons, using automation tools to reduce the workload.

While SVG has been around since the last century, it took over a decade for Internet Explorer to catch up with v9. With the rapid decline of legacy IE usage, SVG is now a viable solution across the vast majority of browsers and devices.

There are still some older browsers that do not support SVG icons, but there are tricks to get around this. So why should we use them over font icons? SVGs, like font icons, are vector-based.

SVG icons
How font icons appear when a font fails to render

Unlike font icons, you don’t have to use workarounds to make them accessible: they already contain semantic title and description attributes. They scale to any size without losing detail, so look great on HDPI displays.

Curated by (Lifekludger)
Read full article at Source: How to implement SVG icons | Creative Bloq

We’re Just Temporarily Abled : Designing for the Future : Designing for the Future

We aren’t just designing accessible products and websites for a subgroup of people who we may or may not know, who have permanent visual or motor issues. We’re designing these sites and products for our future selves as well.

A few years ago, I had the opportunity to attend and present at a great conference where Cindy Li delivered a phenomenal keynote.I learned about 8 million new things during her talk, but she made one particular statement that really stuck with me.

She simply said,“We’re all just temporarily abled.”

She talked a little bit about her mother who has an ocular disease that is slowly blinding her over time. Then she mentioned that while she doesn’t have an ocular disease herself, she is beginning to require stronger glasses prescriptions each year.

Why am I talking about Cindy’s eye health? Because she then pointed out that as designers we need to design for accessibility, not only for folks who are permanently visually or hearing impaired or have severe motor issues right now, but also for our future selves.

Design for the future you.

With each passing birthday, our vision is starting to go. Eventually our hearing will start to go and so will our mobility. I will have these issues, you will have these issues–they’re just part of the aging process.We aren’t just designing accessible products and websites for a subgroup of people who we may or may not know, who have permanent visual or motor issues. We’re designing these sites and products for our future selves as well.The next time you’re tempted to brush off accessibility while you’re working on a design, picture yourself in 20 or 30 years trying to use your own website or product. It’s a pretty life changing shift in thinking. I like to call it “forced empathy.”

Curated by (Lifekludger)
Read full article at Source: We’re Just Temporarily Abled : Designing for the Future : Designing for the Future | UX Magazine

Danger! Testing Accessibility with real people — Medium

As four people who are blind and care deeply about making the web more accessible, we strongly believe user testing should include people with disabilities. But when the results are misinterpreted, it can be dangerous. It can foster action that appears to benefit people with disabilities but ultimately do as much harm as good.

Curated by (Lifekludger)
Read full article at Source: Danger! Testing Accessibility with real people — Medium