Tag Archives: howto

Accessible SVGs | CSS-Tricks

An excellent, fully detailed article on making SVG graphics accessible.

Scalable Vector Graphic (SVG) is emerging as the preferred graphic format to use on the web today. Are you abandoning the icon font or replacing old pg, gif and png graphics for the well-supported SVG, too? Let’s see how this will impact users of assistive technology (AT) and what is needed in order to ensure a great user experience for everyone.

…Source: Accessible SVGs | CSS-Tricks

Part 2: How to Conduct a Basic Accessibility Audit on Your Site : Adobe Team

Continued from Part 1.

Part 2: How to Conduct a Basic Accessibility Audit on Your Site

In case you missed it, catch up on Part 1 of How to Conduct a Basic Accessibility Audit on Your Site.

In this post, we are going to learn how to do keyboard, screen reader and automated code testing.

Testing with a keyboardUnderstanding how people might be using your site with assistive technology is a great way to gain empathy and insight into the impacts of poor accessibility.

Remember that some people may not be able (or not want to!) use a mouse, due to motor impairments or personal preferences. Navigating by keyboard takes some practice. The basics are:The tab key moves forward through interactive elements on the page and shift tab moves backwards.Using the enter key should select a link or button.The arrow keys should navigate within dropdowns.

The space bar works with form controls for example checking or unchecking a checkbox.Gov.uk has a skip to main content link and a clear visual focus state when using a keyboard.

To run a keyboard test on your site:Go to your site.

Unplug your mouse – you are not allowed to use it. No cheating!

Hit the tab key to get started.

Do interactive elements have the same functionality as they do when using a mouse?

Is the order of the focus states logical?

As you get the hang of keyboard navigation, you will learn how important the order of focus states is, as well as discovering interactive elements which don’t function well. A common problem is a ‘keyboard trap’ – where you cannot move away from an interactive element using the keyboard alone.

Curated by (Lifekludger)
Read full article at Source: Part 2: How to Conduct a Basic Accessibility Audit on Your Site : Adobe Dreamweaver Team Blog

Part 1: How to Conduct a Basic Accessibility Audit on Your Site : Adobe Team

Part 1: Visual Accessibility and Manual Code Inspection

Accessibility is really important: Accessibility benefits everyone. By paying attention to accessibility you will improve the UX of your site for all of your users.Making sure your site is accessible expands your customer base. People with a range of disabilities make up a significant portion of the buying power.It’s the right thing to do – designing and developing with an eye to inclusivity means that we value and respect all users and people equally.

There are legal imperatives. More and more legislation is coming into play that mandates accessibility, particularly in the transportation and technology sectors.

It can seem overwhelming, but there are a few simple things you can do to evaluate your site’s accessibility. Many different types of people need to use the web. Not everyone is using technology in the same way. It is crucial to design for a range of abilities and assistive technologies, to make sure that people do not experience barriers to using your site.Web accessibility is a deep and important topic,  and there are people and companies who specialise in it. The WCAG 2.0 guidelines are considered the industry standard in accessibility, but these can feel overwhelming! Each guideline has three levels of success criteria, A, AA and AAA. The level of compliance that is legally required varies depending on where you are based and the sector.

As a rule of thumb for getting started, aim for level AA. For this post, let’s look at some of the easy ways to get started with some basic accessibility auditing on the sites you design and develop.

Part 2 continues here

Curated by (Lifekludger)
Read full article at Source: Part 1: How to Conduct a Basic Accessibility Audit on Your Site : Adobe Dreamweaver Team Blog

How to do a DIY Web Accessibility Audit | Usability Matters

Before you begin an accessibility audit, it’s important to know why you want your digital product to be accessible. Are you trying to comply with AODA or meet WCAG 2.0 standards? Maybe you’d like to create an accessible website in order to reach as many users as possible.

Know your digital accessibility goals and what standards you need to meet to achieve those goals so you have something to measure your digital product against.

It’s a good idea to have a list of any standards (most commonly WCAG 2.0 Level A and AA) readily available that you can reference as you work your way through the process.

Curated by (Lifekludger)
Read full article at Source: How to do a DIY Web Accessibility Audit | Usability Matters

Float Label Pattern – Building Better Interfaces

Float Label Pattern

The Float Label Pattern was originally conceived by Matt D. Smith, where he needed to solve the issue of input field labels and space issues on mobile forms.  … the Float Label Interaction, which combines the idea of using both placeholder text and a label to identify form fields.

The challenge with form field labels on mobile devices is that they take up a lot of space.  If you left align a label, the input field would have limited horizontal length, and a top aligned label would increase the vertical length of the page. Using placeholders (or inline labels) does not completely solve the problem either, once they the placeholder disappears the user will lose the defining context around the input field.

In Mobile Form Usability: Never Use Inline Labels, Jamie Appleseed has a detailed study of the usability problems with inline labels.

The Float Label Interaction proposed by Matt, is a compromise between field label visibility and maximizing the space available.

Floating the label element over an empty input field defines the input expected, upon user input the label is shrunk and placed above the input.  This pattern allows the user never to lose context around the input field, while allowing the form to maximize the space of the viewable screen area.

Curated by (Lifekludger)
Read full article at Source: Float Label Pattern – Building Better Interfaces