Tag Archives: web

Using Keyboard-only Navigation, for Web Accessibility

Blind and low-vision users, as well as those with mobility disabilities, rely on their keyboards — not a mouse — to navigate websites. Online forms are keyboard "traps" when they don't allow a user to tab through it without completing a field. That is not the case with Newegg's checkout form, which properly allows users to tab through it, and ultimately return to the browser bar, without completing a field.

… Programmers are big fans of using the keyboard instead of continually shifting between the keyboard and mouse.

And yet a significant percentage of websites make it difficult or even impossible for users to perform some activities without using a mouse or other pointer device. This curious relationship between using the keyboard and developing for the keyboard has always seemed imbalanced to me.

To be fair, navigating the Internet with a keyboard is very different from using a keyboard shortcut to perform a complex task.

The keyboard shortcuts that people use with most desktop software are combinations of two to four keys that directly activate menu actions buried somewhere in the program’s options.

Navigating a website with the keyboard primarily requires only a few keys, but they’re used constantly. The following keys are most fundamental to using a website.

  • TAB
  • The left, right, up, and down arrow keys.

In complex web applications, like Google Docs, more complex keyboard shortcuts are common. But for an average ecommerce site — where the priorities are getting the user to find a page, learn about a product, and then go through the purchase process — those keys are usually all you need. These are the keys that are natively defined by browsers for the operation of web pages.

Why Navigate with Just a Keyboard?


Curated by (Lifekludger)
Read full article at Source

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

Slides: London Web Standards; Making SVG accessible

London Web Standards is an established and popular meetup for web professionals. The meetups cover a broad range of topics including design, development, UX and accessibility, and this month I had the opportunity to talk about SVG accessibility. The talk looked at SVG past, present, and future, and explored the benefits and challenges it brings in terms of accessibility. Topics included the best way to maximise SVG accessibility, how to use ARIA to supplement the native accessibility of SVG, and how to us

Curated by (Lifekludger)
Read full article at Source: Slides: London Web Standards; Making SVG accessible | The Paciello Group – Your Accessibility Partner (WCAG 2.0/508 audits, VPAT, usability and accessible user experience)

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.

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

The ultimate guide to web content accessibility

Websites with standards-compliant code all follow the typical W3C standards. But there’s a whole different level of compliance when it comes to WCAG, also known as the Web Content Accessibility Guidelines.

The same people who produce the HTML5/CSS3 specs organize and officiate these guidelines, so it’s truly an international system of coding standards. Most web developers never bother with WCAG accessibility, but it’s becoming a huge aspect of the internet.

If you’re looking to understand accessibility or just want to delve a bit deeper into the subject, then this guide is for you. I’ll explain some basics of WCAG conformance for a beginner, along with all the tools and resources you’ll need to keep learning along the way.

Curated by (Lifekludger)
Read full article at Source: The ultimate guide to web content accessibility – InVision Blog

How to do Web Accessibility QA: Part 2 | Viget


Accessibility QA starts with broadening your frame of reference and understanding what it’s like to use a computer in unfamiliar ways. With that understanding, we can dive into actual testing.

The usual starting point is to read the Web Content Accessibility Guidelines (aka WCAG), which define the current accessibility standard. (The older Section 508 standard is relevant only for government sites.) But good luck understanding WCAG on first glance.

WCAG is broken into three levels (A, AA, AAA); four principles; 12 guidelines; and 61 success criteria. It’s hard to make sense of WCAG’s multi-layered categorization, jargon, and sheer number of items.

The good news: You don’t have to worry about all that to get started. Instead, I find it easier to think in terms of these broad goals:

  • Goal 1: People who don’t use a mouse should be able to use and understand a site.
  • Goal 2: People who don’t look at a screen should be able to use and understand a site.
  • Goal 3: A site’s content should be visually legible.
  • Goal 4: People should have access to alternate versions of video and audio content.
  • Goal 5: People should have control over automatic changes to the page.

Curated by (Lifekludger)
Read full article at Source:
How to do Web Accessibility QA: Part 2 | Viget

How to do Web Accessibility QA: Part 1 | Viget

If you’re nervous about doing accessibility QA for the first time, I’m with you. Thanks to Jeremy Fields and others, I had multiple background sessions — but I still felt lost when it came time for real testing.

Don’t sweat it; a11y testing is straightforward once you understand a few foundational concepts. Here’s my two-part guide to accessibility testing so you can help make your sites as inclusive as possible. (Here’s Part 2.)

Start by experiencing how people use a computer differently than you: with a keyboard (no mouse) and screen reader.

Curated by (Lifekludger)
Read full article at Source: How to do Web Accessibility QA: Part 1 | Viget

The inaccessible web: how we got into this mess

Compared to other public spaces, the internet provides us with choices for how we consume and interact. We can use various devices, browsers and operating systems; we can change the size and colour of text; we can navigate with a mouse, keyboard, finger or mouthpiece; or we can use a screen reader to convert words to sounds.

Whatever your needs or preferences, there’s almost certainly a way to access the web.

Theoretically.In reality, the web is a mess.

These accessibility options tend to be forgotten or stripped away, even though accessible websites and apps can absolutely still be beautiful, innovative and user-friendly.

This is more than an inconvenience. This is a human rights issue. Disabled people need these options in order to access the web.

Here are my thoughts on how we got into this mess, and what we can do.

Curated by (Lifekludger)
Read full article at Source: The inaccessible web: how we got into this mess