Category Archives: tips

108 million web users are color blind. Tips for designing keeping them in mind

Design, keeping everyone in mind

As designers, you pick up the best colors for the canvas and the most engaging content for your users, but often miss out on the color blind ones. Repeating the ever-repeated stats — 8% of the males and 0.5% of the females are color blind. Now that is a HUUUGE number if your user base is big. Ignoring these 8% and 0.5% of the society is no way acceptable. Here are few tip and tricks to help you design aligned with their needs as well-

Curated by (Lifekludger)
Read full article at Source: 108 million web users are color blind. Tips for designing keeping them in mind

Top tips for accessibility

Heidi Laidler, Media Access Australia’s User Experience Designer, gave a recent talk about how to test for accessibility at a ‘Hack 4 Good’ event attended by web professionals from around the country. Discover the top tips for accessibility from a user experience point of view, in this captivating podcast article.

Listen to Heidi’s complete address where she delves into the details of how to effectively test for accessibility and incorporate inclusive design principles into your web and digital communications.

Read the transcript of Heidi Laidler’s talk on top tips for accessibility

Curated by (Lifekludger)
Read full article at Source: Top tips for accessibility – Media Access Australia

Writing HTML with accessibility in mind

Writing HTML with accessibility in mind

An introduction to web accessibility. Tips on how to improve your markup and provide users with more and betters ways to navigate and interact with your site. If you don’t want to read the preface, jump right to the tips.

Personal development and change in perspective When I made my first website my highest priority was to get content online. I didn’t care much about usability, accessibility, performance, UX or browser compatibility. Why would I? …

If you don’t want to read the preface, jump right to the tips.

Personal development and change in perspective

When I made my first website my highest priority was to get content online. I didn’t care much about usability, accessibility, performance, UX or browser compatibility. Why would I? I made a robust table based layout and I offered a 800×600 and a 1024×768 version of my site. On top of that, I informed users that the website was optimized for Internet Explorer 5.

This was of course before I started to work professionally as a web designer and my perspective in what was important changed.

Years later, instead of dictating the requirements for my websites, I started to optimize them for all major browsers.

Beginning with Ethan Marcotte’s game changing article I started caring about devices as well.

Making websites for all kinds or browsers and devices is great, but pretty much useless if the websites are too slow. So I learned everything about critical CSS, speed indices, font loading, CDNs and so on.

Getting started with accessibility (a11y)


But accessibility isn’t just yet another item on our to-do list to cross off before we launch our website. Accessibility is the foundation of what we do as web designers and web developers and it’s our obligation to treat it as such.

I spent the last few months reading, listening and talking about web accessibility. It took me some time to get my head around a few things and I’m still at the beginning, but the more I learn the more I’m surprised how much I can do right now without having to learn anything completely new.

In this series of articles, I want to share some of my newly acquired knowledge with you. You shouldn’t treat the tips I’m going to give you as a check list but as a starting point. Incorporating these techniques into your workflow will get you started with accessibility and hopefully motivate you to learn and care more about your users.


Without further ado, here are my accessibility tips:

Source: Writing HTML with accessibility in mind – Medium

New Guide for Affordable and Accessible Technology Now Available Online

A new guide from ACCAN and Media Access Australia was launched this year at the annual ACCAN conference. The Affordable Access project addresses two of the key pillars of digital inclusion – affordability and accessibility of technology.

The Affordable Access project is an online guide which provides information on low-cost technology with useful accessibility features. The online resource also highlights what technology may be suitable for specific scenarios. These scenarios were created in collaboration with people with disabilities to identify commonly used products for various needs. This peer advice is a great approach to the guides as people accessing them can be confident that others are also using the technology.

Affordability and accessibility are essential if all Australians are to participate in an increasingly digitally-dependant society. However, the recent Digital Inclusion Index noted that people with a disability are some of the most digital excluded people groups in Australia. Helping people find the right technology is also a large part of the challenge, especially in specific cases such as the ones listed on the Affordable Access website.

Curated by (Lifekludger)
Read full article at Source: New Guide for Affordable and Accessible Technology Now Available Online | Go Digi

Designing Safer Web Animation For Motion Sensitivity

Val Head suggests accessible animation techniques to avoid triggering dizziness in users with inner ear and balance disorders.

It’s no secret that a lot of people consider scrolljacking and parallax effects annoying and overused. But what if motion does more than just annoy you? What if it also makes you ill?

That’s a reality that people with visually-triggered vestibular disorders have to deal with. As animated interfaces increasingly become the norm, more people have begun to notice that large-scale motion on screen can cause them dizziness, nausea, headaches, or worse. For some, the symptoms can last long after the animation is over. Yikes.

The idea that animation in our interfaces is capable of making our users dizzy wasn’t something we had to contend with much when the web was predominantly a static medium. It’s actually a fairly new revelation in most tech circles. Even Apple discovered this the hard way when the animated transitions in iOS 7 started making some people sick. Just like other elements of design, the way you use animation can have an impact on how accessible the end product is to your audience, especially if they suffer from a vestibular disorder.

Curated by (Lifekludger)
Read full article at Source: Designing Safer Web Animation For Motion Sensitivity

Prototyping accessibility in web and mobile UI design

Adaptable, interactive and coherent prototypes for users with disabilities. Covering accessibility in the prototyping phase of web and app design.

Pay close attention to color, contrast and visual hierarchy

Make your interactive UI elements more interactive

Don’t crowd me!

Make your app accessible by being adaptable

“Flexibility is the key to ensuring that your website is accessible to everyone.” Shaun Anderson, Hobo Web

Prototyping responsive design is actually pretty easy. With Justinmind prototyping tool, it really only involves creating a set of screens of different sizes (to represent the different screens sizes that your users use), adding the content to each screen, and adding linking events between the screens. In fact, we’ve created a nifty tutorial in our Support section to teach you step by step.

Don’t forget the user testing

Curated by (Lifekludger)
Read full article at Source: Prototyping accessibility in web and mobile UI design

Making your site accessible using W3C’s Easy Checks

We’ve put together an infographic based on the W3C’s ten easy checks.

While this is by no means an extensive checklist, we hope it will help when considering the first steps that can be taken in order to ensure your website is accessible.

 

Curated by (Lifekludger)
Read full article and Download the full infographic from Source: Making your site accessible using W3C’s Easy Checks

The art of labelling — A11ycasts #12

There’s a lot of neat tricks in this video by Rob Dodson where he focuses on accessibility tricks in Chrome’s DevTools. A few notes:

  • Chrome DevTools has an experimental feature to help with accessibility testing that you can unlock if you head to chrome://flags/ and turn on in the DevTools settings.
  • Wrapping an <input type="checkbox"> in a <label>gives the input a name of the text in the label, even without a for attribute.
  • The aria-labelledby attribute overrides the name of the element with the text taken from a different element, referenced by ID. It can even compose a name together from multiple elements, including itself.
  • Adding tabindex='0' to an element will make it focusable.


Curated by (Lifekludger)
Read full article at css-tricks