Category: a11y

A11y 101: WCAG 1.1.1 Non-text Content

Published on November 5, 2024

One of my roles as a consultant is to coach others. Clients & colleagues, from junior testers to CEOs. Each of them learns in a different style. That is why I’m starting this A11y 101 (short for accessibility – pronounced “ally” or “a-eleven-y”) series. It will break down some of the major topics in different ways. This approach hopefully connects easier than technical specification documents.

Success Criterion 1.1.1 Non-text Content

What is “non-text content”? The Web Accessibility Content Guidelines (WCAG) makes it pretty simple, if it isn’t text, it falls under here. As a developer, you are promising that there is a text fallback for the non-text content.

Videos, images, charts, animations are all examples of non-text content. Some times these are decorative. Sometimes they add meaning. When we are talking about non-text content, we really only mean meaningful non-text content.

Video

For video, we have two options for text alternatives, captions and transcript. Captions come in two types. While both cover the text alternative for video, one carries us beyond 1.1.1. Users can choose real-time captions. Alternatively, they can take their time to read the transcript.

Open Captions are captions that are embedded into the video. They can be positioned within the video to maximize the visual. Yet, this jumping around the view can be problematic for users. Additionally, this style of captions are not screen-reader accessible.

Closed Captions consist of a separate file the user can turn on and off. Each file will include a time-stamp followed by the words used on screen. Bonus feature is that closed captions can be read by screen-readers and Braille displays.

Not everyone reads at the same speed. Many factors affect reading speed. People with issues like TBI, ADHD, Dyslexia, or low literacy may need to slow down the tools. This allows them to read at their own pace. Transcripts allow this as well as supporting screen-readers and other assistive technology.

When deploying a video to your site, the best practice is to provide both the transcript and closed captions. You can save yourself time by creating the closed caption file, then using that to create the transcript. It works the best when the transcript is HTML loaded directly next to or under the video. This can be behind a disclosure or a link to another page. You can provide an accessible PDF as a transcript. Still, these are rarely easier to create than HTML.

Images

Images are the first thing we think of when we think non-text content. There are many image types available. We need to consider just a few methods to provide a text equivalent. This is highly dependent on how you call your images.

<IMG>

When using the <img> element, it MUST have the “alt” attribute in the tag. Here we provide a value that doesn’t describe the image, but rather the meaning of the image. Keep this in mind, we’ll talk more about it later.

<SVG>

There are several ways to place an SVG into a page. This technique addresses when the <svg> is placed into the HTML. First, we need to understand the SVG and how it is to be used.

Static image placed on the page? Then we can provide aria-label and put the meaning there. We could also provide the meaning in the SVG <title> element. Provide an ID and use aria-labelledby. This is super handy if your design teams are building SVGs this way.

Referenced by the <img> element as the source, use the rules for <img>.

Inside the <picture> element? The picture element requires several source files, but also includes a fallback to the <img> element. In the picture element, the alt text of the fallback image serves as the text alternative. So, don’t leave it out!

Using the <figure> element? This is a fun one because it combines all the techniques into one. A figure can have anything in that creates some sort of drawing. Whatever you put inside will dictate how to create the text alternative. For example, you can use an <img> inside. Or <svg>. In either case, we’d use the same rules as above.

Of course you could also draw something with HTML & CSS. In this case we provide an aria-label on the wrapping element of the drawing and also provide a role="img".

Figures also allow us to provide a caption using <figure>. While it is not required, if there is a complex message this is where we put it. We still need alternative text for the image, but we can go into more detail here.

Canvas

Canvas is a really cool set of tech we can use on the web. Yet, due to it’s nature, it isn’t really accessible. You can put HTML between the canvas tags. You can map the bitmap images to HTML elements. There are easier ways to do this too.

Always provide an aria-label; or aria-labelledby on the canvas element. Your descriptive content can live inside the canvas element and still be referenced.

Charts & Animations

Charts and animations are a combination of the above. Usually charts are crafted using SVGs on the client side or static images on the server side. Animations are usually made in JavaScript with SVGs or Canvas.

Keep in mind, that charts get complex really quickly. You should strive to provide two types of interaction:

Tab stops on all data points that convey both x & y titles and values.
Data table backup

Lastly, if you can, provide a summary for the chart. These usually either lead or follow the table in the HTML.

Comments closed

Ticketing Challenges: Finding Wheelchair Accessible Concert Seats

Ticketing Challenges: Finding Wheelchair Accessible Concert Seats

Published on October 24, 2024

I love concerts. People performing live music is one of my greatest pleasures. Music is critical to my soul and is beyond crucial for keeping up my mental health.

My wife is less thrilled with concerts, but is always up for a fun time with the right people. Weird Al announced a tour with Puddles Pity Party. Two of our favorite artists. One of the stops is our home town just after our anniversary. One of our closest friends is also a fan and knows Puddles. Off I went looking for tickets!

Checking out the tickets I saw that Ticketmaster and StubHub were selling them. I know that resellers like StubHub tack on additional costs and fees. I do my normal thing and head directly to Ticketmaster instead.

My wife has POTS, so when we go out she is in a wheelchair. I have a vestibular disorder that makes standing for long periods impossible. It is made worse with loud environments and big crowds (Sounds like I shouldn’t go to concerts, huh?). So we can only go to shows that have seating & wheelchair accommodations.

The location they are playing at is mostly general admission to stand on the field. It’s a stadium, so there is some seating. Ticketmaster showed only 1 wheelchair accessible ticket. Most of the seated areas were marked “sold out” a day after release. I decided to check StubHub for those “sold out” areas.

StubHub showed there are tickets in areas where Ticketmaster said tickets were sold out and I’m thinking, “Options!” StubHub does not provide a way to filter for disabled seating!

Previous Outings

We went to see Marc Maron last year. I opted to buy, from TicketMaster, an “Accessible seat” on an aisle. Upon arriving to the facility, the accessible seat was a regular seat. No where in the purchase process did it say it wasn’t wheelchair compatible.

The onsite TicketMaster people helped move us to the ONE wheelchair seat as it wasn’t sold. There was only space for one chair and one companion. And of course another wheelchair user showed up and they stuffed them in with us.

I learned from this that even if TicketMaster says there is accessible seating, it may not be wheelchair friendly. And the only way to actually buy accessible tickets is to call the venue.

We aren’t going to see Weird Al or Puddles. The one “accessible” seat won’t work for a wheelchair user.

Comments closed

Understanding VPATs and ACRs: Key Insights

Understanding VPATs and ACRs: Key Insights

Published on October 14, 2024

This week I had a bunch of requests from clients surrounding VPATs and ACRs. This article will be a living article where I’ll post extra questions I receive as they come in.

Comments closed

Improving Web Accessibility: Quick Solutions

Improving Web Accessibility: Quick Solutions

Published on October 3, 2024

When it comes to writing code that supports accessibility, there can be multiple ways to solve a problem. The industry has worked hard to standardize interactions so that component types function the same across environments. But, it avoids being dictatorial in how to remediate a given problem by only providing generic code samples.

Likewise, when we conduct accessibility audits, we will face user experiences that do not make sense to us. Nevertheless, the client is invested in these experiences. Perhaps the client has limited bandwidth to do remediation. The complete and proper resolution can be more than the client can get done in a reasonable amount of time. Yet, we want to help them achieve an accessible solution sooner.

In these cases it isn’t always appropriate to tell a client they need to completely change their code. Sometimes the solution is a small modification. Let’s examine a recent situation I encountered. A modification can fix the problem, even if the ideal remediation is a code change.

My client presented a website with some filters at the top of a table. The client initially coded the filters as multiple buttons per the design team’s layouts. Each button filtered the table in a different way, and only one filter can be used at a time. You can also have no filter applied. Upon examination, these buttons were properly constructed, but missed a state attribute and aren’t grouped.

I can justifiably tell the client to remove the buttons. They should replace them with radio button elements instead. Then, restyle them to look like a button grouping with one pressed. For no filters, we’d offer up a “Unfiltered” choice. And this will certainly fix things. In the long run, I want the client to follow this plan. It’s the most complete solution.

This change means the client needs to dig into their JavaScript. They must find the code related to the filters. Then, update it to respond to radio buttons instead of button elements. The client’s front end team will need to write new CSS and HTML. But remember they have limited resources, and we need them to fix things as soon as possible.

How do we help the client meet their goals?

There is another perfectly valid way to fix the problem. I can coach the client to add the aria role of “group” to the wrapping container. They should also add aria-pressed to the active filter button. This informs assistive technology that these items are related. It also fixes the state issue where we don’t know which filter is active. This solution takes roughly 10 minutes to fix, where the full remediation to proper radio buttons will take significantly longer.

The simpler recommendation may allow the client to fix more issues with the resources they have. Every step is a move towards better accessibility. Take the time needed with your clients to understand their current situation and needs before writing your recommendations. Don’t be afraid of offering up a “quick fix” for a client, as long as it actually fixes things.

Comments closed

Going Beyond WCAG

Going Beyond WCAG

Published on September 23, 2024

When it comes to accessibility for digital products, we look to the W3C’s Web Content Accessibility Guidelines (WCAG) to point us in the right direction. WCAG carries with interaction guides to how users can expect a digital product to respond regardless of their method of interaction. This common language we use to make sure that a website, application, kiosk, mobile app won’t be confusing to new users. However, WCAG isn’t prescriptive in demanding things be done a specific way. And more importantly, just like accessibility isn’t a destination, neither is WCAG conformance. Its just the baseline we start from, we can go beyond it.

What does it mean to go beyond?

Keeping things generic for a moment, what does it really mean to go beyond a standard? This may not be clear of possible in all situations, but to go beyond a standard, we need to first achieve that standard, then add features that enhance the usability and user experience.

Let’s try an example

We’ll establish that this is an ecommerce site. During development, we add a link to the end of each product description. To meet the guidelines we’re working with we need to make sure it stands out from surrounding text. To make it standout, we underline it and use a different color. For this imaginary link, the color we choose has a 3:1 contrast with the surrounding text and 4.5:1 with our background. This meets the barest of guidelines laid out in WCAG. But we can do more than this.

We’ve already cleared WCAG 1.4.1 Use of Color as we have our link underlined. Next, let’s look at the text. Our link is in the middle of a paragraph describing a product by Acme MFG, inc. The link reads, “More information” immediately following the product description.

The Acme MFG Ultra Juicer 3000 is a state-of-the-art kitchen appliance designed for health enthusiasts and busy families alike. With its powerful 1000-watt motor and innovative cold-press technology, this juicer efficiently extracts maximum nutrients from fruits and vegetables. The Ultra Juicer 3000 features a wide chute that accommodates whole fruits, reducing prep time significantly. Its quiet operation and easy-clean components make it a convenient addition to any kitchen. The juicer comes with multiple speed settings, allowing users to customize their juicing experience . Acme MFG’s commitment to quality is evident in the juicer’s durable stainless steel construction and 5-year warranty. More Information.

Some of you are probably getting wound up by the name of the link, be patient, because the above link passes WCAG 2.4.4 as it has context before it. It is reasonable to assume the user knows this link will take them to more information on the juicer. However, if that link were brought up in a link list as most screen readers provide, it loses the context and reads, “More information” in a list of links that may or may not be unrelated. Most of would go back and revise the link to read, “More information on ACME Ultra Juicer 3000.” And this is great! It takes this particular issue and meets WCAG 2.4.9 AAA. But have we gone beyond WCAG?

A lot of times we provide controls to do something on the page. Most accessibility specialists will recommend that the control tells you what it does. Our link above will take you to the ACME website for details and service manuals.

WCAG doesn’t directly apply to this.

The industry as a whole agrees that if a link or button opens a new tab, window, or dialog that the user should be alerted that control will do just that. But WCAG doesn’t address this. We add icons (with alt text) or text saying “opens in new window”, “opens dialog”, or similar to inform the user what is going to happen. We do this to prevent surprises, confusion, and disorientation of the user.

Going Beyond WCAG means that you recognize that accessibility is the first step in a good user experience, but a good experience isn’t enough. Great products have great experiences, so combine your accessibility knowledge with usability and user experience. And if you are a designer, great accessibility is great user experience, don’t discount either.

Comments closed

You Need Accessibility Testing

You Need Accessibility Testing

Published on January 5, 2016

This probably isn’t the first time you’ve heard it. Somewhere along the line somebody asked you how well your site or application works for people that are blind. You probably mumbled something along, “They don’t use our stuff,” or maybe, “I don’t know, does it matter?” The short answer is, yes it matters. And you want to pay attention to why.

Accessibility isn’t Just the Blind

Accessible products and websites are often built with the blind in mind, however what it means to be truly accessible runs much deeper than that. Accessible by it’s very nature means that anyone, anywhere, with any tool of their choosing can use it. This means the disabled, which is not just the blind, but those with hearing, neuro-diversity, mobility, physical, and learning disabilities; and it means the abled that are compromised by other means.

Economics plays a huge part in accessibility. AOL still has 2 million people using dialup internet. This is an economic issue. ISPs have decided it isn’t beneficial enough to run faster lines to these areas or they are on fixed incomes and can’t afford the rising cost of internet access. Developing nations don’t have access to the funds to buy the latest and greatest technology, so they use products released years ago to get online.

As developers we all cheer when we hear that Microsoft is dropping all support for browsers below Internet Explorer 11 next week, but how does someone in an African country who can’t afford to upgrade from XP going to feel when we don’t support IE9? And what if that great new mobile application you created only works on iOS 9+ and Android 4.4.4? Many lower income folks in the developed and developing worlds have phones that are 2, 3, 4, or 5 years old and don’t support the latest things we can do with the web or mobile.

Building accessible products and sites means taking all this into account. It is using responsive web design to make sure your content is readable on all devices regardless of size. It is using solid HTML to make sure the content is parseable by a variety of technologies on the client side from browser, to apps, to refrigerators and TVs. It is using progressive enhancement to make certain that the product is usable even when the CSS or Javascript fail to load. It requires building products that while that may be single page applications running on Angular, React, or Ember continue to be useful applications when the CDN doesn’t connect or the connection is slow. It means setting a performance budget so that we aren’t trying to load 3 megabytes of data to run a blog. Knowing to reduce images, minify scripts, use CDNs to load things faster, and trying your darndest to limit any single page to something that will load in under 4 seconds and be usable.†

But Why?

Getting back to the disability side of things, recently the DOJ has taken to pushing through that public websites are liable to be accessible to the disabled. There is recent legislation that is forcing airlines to improve their websites. Netflix, Target, H&R Block, and eBay have all been sued by disabled people because their websites weren’t accessible.

You probably have a good idea what a lawsuit brought in federal court would cost your company even before remediation and damages are incurred. Why get sued when you can save money fixing the problems first?

I’m Here to Help

Your competitors haven’t solved this problem yet. Many are in the same boat as you and don’t know where to start.

With over decade of experience in front end development, user experience design, and accessible development I can get you ahead of the curve. Working together we can do a proper assessment of your website in all the major assistive technologies to make certain any deficits are found before you end up in court. With an active assessment done and a remediation plan in place you can resolve many legal actions before they get started.

Once you know where the problems lay, I can work with or train your team on how to resolve those issues bringing your site up to par with WCAG 2.0 AA standards. This is the standard level used by the Canadian, United Kingdom, Australian, and Japanese governments to write their web accessibility legislature. The European Union has used it to craft theirs; and the United States has similar legislation based on WCAG 2.0 AA facing it for a vote.

Contact me to set up a time to discuss your needs so we can set your product or site off as a differentiator in your industry because it is accessible.

† 4 seconds is a magic number that will cause people to think your app is slow. If your customer is using dialup, then a 500kb page will take 1 minute and 13 seconds to download. Sure 3 megabytes is instantaneous on your home cable connection or 4G smartphone, but in the developing world it could be a minute.

Comments closed

Designing with Empathy

Published on October 7, 2015

This weekend I had the pleasure of speaking at the inaugural edition of Open Source & Feelings. It was an amazing conference tackling some really hard topics. I received really great feedback from the audience on my “Designing with Empathy” talk and several asked for the transcript as they couldn’t take notes fast enough. So here is the talk broken out with what was on the slides as well as the script I tried to follow. The video is coming, and I will add that when available.

When I first pitched this talk, I was thinking it was about accessibility because that’s usually what I speak about. As I wrote it. And rewrote it. And rewrote it. It evolved into being something bigger, higher level, and more important than just accessibility. It became about thinking of others and building experiences that we can all be proud of.

Trigger Warning

Some slides contain content that may trigger motion sickness

#DZY

Some of my slides contain motion that could make you feel ill. I’ll give you a warning before they occur.

Empathetic design makes badass users.

Comments closed

Infinite Canvas 6 With Rachel Nabors

Infinite Canvas 6 With Rachel Nabors

Published on August 3, 2015

Last week I got to be on a podcast. This week I appear on a screencast with Rachel Nabors talking about vestibular disorders in general and how animation may affect a user on your site.

If you don’t know who Rachel is, she is an amazing illustrator, cartoonist, speaker and animator using all those skills to shine a light on the web can be a better place with the right kinds and amounts of animation.

We had a lot of fun recording it, but I need to get a better microphone, sorry for the scratchiness that my beard brings. Also, we had a few problems trying to record it. Running Skype, Camtasia, Quicktime, and all the websites we looked at kept crashing our GPUs.

The screencast is on Youtube, and you should totally subscribe. She hasn’t done one in a while and it could be another while before we see another, so unlike the podcast episode I did, I’m embedding the video here.

Enjoy! Hit us up on Twitter with any questions you may think of.

Comments closed

Optimizing Working Remote

Optimizing Working Remote

Published on March 13, 2015

For the last eighteen months, I have been working remotely from my home in Wisconsin for a startup located in San Francisco. This has been one of the greatest adventures I have had in my life; learning a tremendous amount about the world of startups, better coding practices, how to make a remote environment work, and about myself. Today I want to share what I feel are best practices for myself & the teams I’m on working with to get the most out of being remote.

We live in the information age. The majority of our work is dealing with information and finances. The average worker goes into an office and works on a computer located in that office. However, there is nothing about that office that requires the person be co-located with all the other employees. This is especially relevant in the world of creatives.

Designers, programmers, UXers, and writers are in a particular advantage of not needing to be co-located. The tools that have sprung up in the last few years allows them to collaborate real time from thousands of miles away. Meetings can be held and accomplished with cheap (if not free) video and audio conferencing, unlike a decade ago when it cost tens of thousands of dollars for a quality, yet unreliable rig from Cisco.

Recent studies actually show the trend in “Open Office” plans are actually harmful to productivity, primarily in creatives. Most of them need to get in a zone to produce their best work. The lack of office doors, intrusion of email and IM, and chaos of noise consistently pokes holes in a person’s ability to achieve this zone. Working remotely can actually remove these distractions and introduce more zone times, thus more productivity. So how can you make this work?

1. Commitment

There has to be a commitment, not just on the immediate team, but from the executives on down to having successful remote employees. No matter how dedicated a manager is to having the truly best players regardless of location, if someone up the chain isn’t 100% behind the idea of remote workers, they will poison the whole thing.

It will likely start slow and unnoticed, but it does slowly creep its way in.

2. Communication

Since you are working from home, it becomes harder to look over your shoulder, across the aisle or walk around the corner to ask a question. The people just aren’t that close. Communication needs to find a channel where people can talk, not just one-to-one in IM, but in a team setting. Barriers need to be sought out to lower the friction of a quick check with a coworker to solve a problem.

This starts with a quality group chat application. It could be as simple as using IRC on Freenode, or using tools like Slack, FlowDock, and HipChat. These permit the one-to-one communication, but are really built to replace the shouting over desks that happens in the office.

When using your chat application, each team member needs to communicate with the rest of the team when they are available. There will be times when you need to log off chat, be it to get lunch, take a meeting, run an errand, but most likely to create a zone state. Instead of just dropping off or logging out, send a message first. Let your team know you are dropping off, why, and how long you expect to be. Greet them in the morning and say goodnight before you leave for the night.

This little courtesy will go a long way. The better you are at it, the more time you can take to be in the zone. If you have hours that you work the best during, block those out on your calendar & show yourself as busy. When those roll around, log off and focus.

Whenever possible, step up the communication from text to voice or better yet video. Daily standups or check-ins should be over video. Any meeting as well. Find a tool where you can screen share, like Hangouts, Slack, HipChat, or Webex. Whenever the discussion is not just social and more than a few quick volleys of text questions and answers, jump into a video chat. Let people see your face. Share screens and collaborate on the project, paid programming, design critiques, or joint editing all bond the team players and actually produce better results faster than passing them back and forth in email.

3. Social Inclusion

A hard thing to deal with as a remote worker is the lack of water cooler talk. The average worker spends 40 plus hours a week at work and an additional 10 commuting. If you sleep 8 hours a night, then you family and social time is reduced to 62 hours, and half of those are your weekend. If you’re like me, they get consumed running errands and doing work around the house. There isn’t much time to see friends or family.

This is why having social relationships with your workmates is important. With the amount of time we spend in work, we need to get along and share experiences. As a remote worker though, you are often working at home, alone. Having a communication with the team that is less formal than the rest of your meetings builds this bond. Set up an “Off Topic” room in chat where people can be themselves and let loose with the gifs, YouTube videos, and jokes.

One of the more successful teams I’ve worked with would do daily standups via Hangout, but every Friday after standup they would have a “Show & Tell”. One team member would put together a presentation, preferably not related to work, and share with the team. This gave everyone a chance to really get to know who they are and what they enjoy. I learned how to make a roux, how to grow hops and even a bit about hockey.

If your team is split remote and in the office, make sure to only throw team events that can be shared by everyone. This doesn’t mean you can’t go out and have dinner or get drinks after work to celebrate, but make sure to create an event where the remote teams are able to participate.

Needs some ideas of how to include remote workers in a celebration event? Try some of these:

Send them a meal! Call up a local restaurant they like, order their favorite dish and have it delivered when the rest of the team is having lunch. Make sure to put them up on video chat in the meeting room so everyone can talk.
Movie night! Find a campy or favorite movie on Netflix & set up an audio chat. Have everyone on the call start the movie at the same time and enjoy a little MST3K action with team by snarking, sharing trivia, or playing games based on the flick.
Game night! There are ways to play a variety of games online or over video. Great examples are Magic the Gathering, Dungeons and Dragons (checkout Roll20), Pictionary (Using Scoot & Doodle), or Trivial Pursuit.
Cooking lessons! Get a volunteer to teach how they make their favorite recipe. Send out the list of ingredients a few days before hand so all the participants can get them, then teach from the kitchen while everyone cooks. Rotate out the chef so everyone can be the teacher.
Book club! Pick a book, set a time, get some wine and discuss over video. I participated in a remote sci-fi book club that met monthly to discuss the book. We had dozens of folks turning up on the chat. I’ve also done a tech book club, where we would read a couple of chapters a week and discuss how to implement these in our own work.

4. Eliminate Distractions

Now that we eliminated the problems of going remote and staying in tune with the team, there are two things prevent remote workers from being productive at home. Good remote workers know how to limit distractions. They also know how to balance their time. When the you don’t have to leave the building, it becomes easy to get drawn back into work.

Set a routine up. Every morning I get up with my kids, get them out the door to school and feed the cats. Then I shower. Sure, I could work in my PJs, or even without pants, but by showering, I’m setting a stake in the ground saying, “My day starts now.”

I’m not good at taking breaks. So I started using the Pomodoro technique. I set a timer for 25 minutes. During that time I work. No Twitter, Facebook or Youtube. I’ll mute chat and email. When the 25 minutes are up, I’ll take a ten minute break to do some stretching, get a drink or food, head to the restroom. When I come back, I start another 25 minutes. Every few work slots I dedicate to catching up on chat, email, or any other communications I need.

I also have an alarm set to remind me to eat lunch. If I get in a flow, or worse and have a bunch of meetings in a row, I forget to eat. Taking care of yourself first is the most important thing when working remote. I have another alarm set to end my day. Yes, occasionally I run over, but I try to keep my work day under 10 hours. When I hit that, I shut down anything work related, help my family with dinner prep, and enjoy a nice evening with them.

If you have a problem staying off social media, set filters on your hosts file or your router that prevent you from going to those sites during work hours.

Remember you are working. Don’t do house chores unless you are on your 10 minute break. And if you have little kids or pets, get a door and close it.

One more thing I try to do daily is go out for a walk. It’s hard in the Wisconsin winter, especially for someone who is already unstable, but getting out for 20-30 minutes can really refresh you brain and your body.

Last piece of advice I have for remote workers, find an excuse to leave the house for at least an hour every couple of days. It’s best if you can meet with friends. Just don’t let yourself become accidentally agoraphobic.

Comments closed