Category Archives: tips

Accessibility Testing: Checkers & Development Tools Review

Tools of the Trade

In a different article, I outline the basics foundations of accessibility standards: “Understanding s508 & WCAG 2.0“. To further expand this, let’s look at various development tools to help author accessible content conformant to the Web Content Accessibility Guidelines (“WCAG”) 2.0 standards.

Getting Started

For a primer or refresher on what the Web Accessibility Initiative (WAI) is review the W3 Org website and its associated entries on this subject at https://www.w3.org/WAI/.

Checkers and Tools

W3 Org offers a great list of available tools for developers to use when checking content for accessibility conformance at https://www.w3.org/WAI/ER/tools/. Various filters can be applied to this list, in order to narrow-down best options. For this article, I applied the following filters:

  • Guidelines > WCAG 2.0 – W3C Web Content Accessibility Guidelines 2.0
  • Languages > English
  • License > Free and License > Open Source

From the filtered-list, I chose to explore the following tools/checkers:

Curated by (Lifekludger)
Read full article at Source.

 

Web Accessibility Checklist

A beginner’s guide to web accessibility

Landmarks
ARIA Landmark Roles are helpful landmarks that can be used by AT to navigate a website.

Note: When you validate html using landmark roles, you’ll receive a warning stating these roles are redundant. In HTML5, several of the landmark roles are implicit via the native structural element which is supported by most modern desktop browsers with the exception of IE and iOS Safari. So, if you support IE and iOS browsers, you’ll want to use the landmark roles. For more information, read Quick Tip: Aria Landmark Roles and HTML5 Implicit Mapping.

Curated by (Lifekludger)
Read full article at The A11Y Project

Four Free Tools for Automated Accessibility Testing of Web Apps

Designing and developing for web accessibility has become a requirement of modern computing. Depending on the content and complexity of your project requirements, it can also be a very difficult pursuit. Two colleagues of mine have already written excellent articles exploring the need for and design of accessible web sites: Designing Accessible Software – Breaking Down WCAG 2.0 and Easy Design & Front-End Practices for Improving Accessibility. According to the experts at Deque Systems, somewhere between 20%….

…….

Curated by (Lifekludger)
Read full article at Source: Four Free Tools for Automated Accessibility Testing of Web Apps

Accessibility for Visual Design

They say beauty is in the eye of the beholder. As designers, we need to remember that the same is true of color and all visual abilities. It’s estimated that 4.5% of the global population experience color blindness (that’s 1 in 12 men and 1 in 200 women), 4% suffer from low vision (1 in 30 people), and 0.6% are blind (1 in 188 people). It’s easy to forget that we’re designing for this group of users since most designers don’t experience such problems.

Today’s products must be made accessible for everyone–regardless of a person’s abilities. Designing for users with visual or other impairments is an example of how designers can practice empathy and learn to experience the world from someone else’s perspective.

Creating accessible design seems like a difficult task. Fortunately, as a designer you don’t need to become an expert on visual impairment issues; you can make sure that your design is good for this group of users by keeping in mind a few solid best practices, which we’ll review in this article.

One caveat: not every best practice will apply to all users with visual impairments, but at least some of it will apply to a very large majority of them.

Curated by (Lifekludger)
Read full article at Source: Accessibility for Visual Design | UX Booth

The web is awesome and everyone should be able to read it.

These last months I’ve been improving my website accessibility so anyone can understand it. Here’s what I’ve learned:
By anyone I mean any person that doesn’t use the internet like I do. Having empathy with the users is one of the things I’ve been learning on web development. You should give it a try as well. Not everyone interacts with an interface or uses the same device and input devices as you do.
Empathy is the capacity to understand or feel what another person is experiencing from within the other person’s frame of reference, i.e., the capacity to place oneself in another’s position. — wikipedia
So you should adapt your product for them. By adapting I don’t mean making it uglier. I mean making it simple. And doing something simple is hard. It’s good to force yourself to rethink your interface or logic in order to accomplish a more complete and intuitive solution.

That old lady being awesome on the web
The problem
I love to explore new interactive ways to communicate a message, so last Summer I rethought my personal website. I don’t consider it a straightforward portfolio, as interaction is the way to explore it. That’s the best part about it and at the same time the worst part.
Some months ago I got to know that users who use only keyboard or screen readers can’t understand shit. They have so many visual and interactive elements to explore that they end up lost. As a web lover, excluding people from using it to its fullest potential, just makes me really sad.

Curated by (Lifekludger)
Read full article at Source: The web is awesome and everyone should be able to read it.

Semantic HTML: The Unbearable Rightness of Being

This is the fourth post in a series on accessibility from Shopify’s UX team. We’re publishing posts every two weeks. Check out the introduction.

Using valid, semantic HTML is one of the most impactful ways to make your site more accessible. Writing semantic HTML means using the HTML element with the most specific, correct meaning for your task. For example, if you’re building a button, use a <button> element. With CSS and JavaScript you could make just about any element, e.g. a <div>, look like a button, but it won’t be a button.

This being is the reason semantic HTML is important for accessibility. Browsers have different behaviour depending on what an element is, not what it looks like. These differences can have a big impact on user experience.

How semantic HTML affects users

Consider this example (also available as a CodePen):

<div class="btn" onclick="alert('something')">do something</div>
<a href="#" class="btn" onclick="alert('something')">do something</a>
<button type="button" class="btn" onclick="alert('something')">do something</button>

 

 

Curated by (Lifekludger) Read full article at Source

The 7 Factors that Influence User Experience 

User Experience (UX) is critical to the success or failure of a product in the market but what do we mean by UX? All too often UX is confused with usability which describes to some extent how easy a product is to use and it is true that UX as a discipline began with usability – however, UX has grown to accommodate rather more than usability and it is important to pay attention to all facets of the user experience in order to deliver successful products to market.

There are 7 factors that describe user experience, according to Peter Morville a pioneer in the UX field who was written several best-selling books and advises many Fortune 500 companies on UX:

  • Useful
  • Usable
  • Findable
  • Credible
  • Desirable
  • Accessible
  • Valuable

Let’s take a look at each factor in turn and what it means for the overall user experience:

Curated by (Lifekludger)
Read full article at Source: The 7 Factors that Influence User Experience | Interaction Design Foundation

How to Get Your iPhone to Read On-Screen Text Aloud to You

Being able to hear written text on your phone read aloud to you can serve multiple purposes. If you have any type of impaired vision, it can certainly help in that regard. It’s also useful in settings where you don’t have the time nor capability to stare at your phone and read large blocks of text. Perhaps you want to treat whatever your reading as an audiobook of sorts.Whatever the case may be, your iPhone is perfectly capable of reading nearly any text you select back to you. All you first need to do is enable this feature in Settings.

….

Curated by (Lifekludger)
Read full article at Source: How to Get Your iPhone to Read On-Screen Text Aloud to You

5 Ways to Make Your Web Content More Neurodiversity Inclusive | NOS Magazine

When most people think about accessibility in technology, their first thought may be about accessibility for blind or D/deaf people: captioning, visual descriptions or Braille conversion. Blind and D/deaf people aren’t the only ones who benefit from inclusive technology, though. Autistic people, people with learning disabilities, people with ADHD and other neurodivergent people also have access needs that site designers and developers can meet. Here are five ways you can make your websites and apps more accessible for neurodivergent people.

Curated by (Lifekludger)
Read full article at Source: 5 Ways to Make Your Web Content More Neurodiversity Inclusive | NOS Magazine

Designing for Accessibility: The Ultimate in UX


Designing for users with a broad range of abilities can bring challenges. But, before you start thinking “Great, more stuff to limit my rockstar designs” — recognize this: Smart designs aren’t created to impress your peers. Smart designs (and smart designers!) use design elements like color, placement, and interaction in very intentional ways to help site visitors accomplish their goals — while giving the user the most enjoyable experience possible.

So how do you create impressive, accessible designs? These 6 tips will help you create accessible designs that meet the minimum standards of Section 508 and Web Content Accessibility Guidelines 2.0.

1 . Start with Wireframes

Now you might be thinking “Duh! This is obvious.” But how often do you consider accessibility at this step? Designing for accessibility means considering all users from the start.

Curated by (Lifekludger)
Read full article at Source: Designing for Accessibility: The Ultimate in UX