Headings and labels need to describe the content they are identifying in the content. This means when you have a H1 is should describe the page as a whole. Labels need to describe the data they are collecting. Seems simple. And usually it is. Let’s look at some examples of when it isn’t as clear.
Comments closedIt’s been a busy week in my house, so I’m going to keep this quick. One of the issues I often see flagged by other accessibility testers is that something doesn’t work with keyboard navigation. The vast majority of times I revisit these, it turns out the tester doesn’t fully understand how screen readers work. I want to highlight a few items for folks.
Screen readers typically have 3 main modes. The virtual browser, forms, and application.
The virtual browser is when the screen reader technology is intercepting the keyboard input and uses that to execute a function in the browser for you. When we press tab we jump to the next active item. Pressing the down arrow will read the next line, chunk, or set number of characters in a paragraph. Here’s a short list of common commands:
When a user encounters a form element, the screen reader should automatically shift to the forms mode. There usually is ab audible sound to indicate this. This mode moves the screen reader out of the way to interact directly with the page via the keyboard. This limits how to navigate to using only the Tab and Shift keys to move among the active elements in the form.
In this mode you need to have the role=”application” and then the screen reader again gets out of the way of the keyboard. However, even if you use active controls navigating between them is completely up to the author. They will work with Space & Enter to activate, but the author really needs to define the navigation scheme and controls to use the tool.
Don’t flag an issue for not being keyboard accessible with a screen reader on unless you can identify it is an application or is also not accessible without the screen reader.
There’s way more to this, but the great folks over at Tetralogical have a great screen reader misconceptions article and a full break down of commands.
Comments closedIf you are anything like me, you don’t want your data sold to third parties. You probably run ad blockers. Maybe a VPN. Some governments are trying to help by requiring the site to declare what cookies are used and providing the user to opt out. But the current method of displaying this information tends to have some serious accessibility issues. I have another way of thinking about them I’d like to propose.
Leave a CommentI’ve been encountering a pattern lately of developers trying to do things right when it comes to live regions, but not understanding how they essentially work. This tip is to provide a super high level on how they function.
Leave a CommentTechnology is moving at an ever rapid pace. Some of the recent “AI” things to come along is one area that comes to mind. AI has its flaws and used incorrectly can do great harm, but it also can also improve the quality of life for others. Don’t stop them from using tools that help them, no matter your belief of such tools.
Ok, that’s the tip. You don’t have to read further. But if you desire to continue, I need to let you know what comes next is me processing an interaction I had that spawned today’s quick tip.
1 CommentThe internet today far exceeds what we initially thought it could be. We’ve advanced so far that we can replicate desktop applications running in the browser. Cloud-based software is everywhere. We’ve crafted frameworks to speed up development and solve the hard parts of server-client communication.
But the same problem keeps happening. We keep rebuilding interactive components using custom coding. And we forget all the things we need to do to make them accessible.
Today I’m looking at a why we should be using more native HTML controls and fewer custom ones. I’ll show you what is included if you use a native control.
Comments closed
I’m taking a break today from my normal work of auditing and coaching clients on how to make their digital properties more accessible to celebrate Global Accessibility Awareness Day. GAAD is a time when industry professionals, accessibility advocates, and disability defenders make a concerted effort to bring the conversation to the front.
Now this may sound like what I do every day, and it is. My company asks us to do volunteer work, giving back to the disabled communities around us. And you may say to yourself, “Doesn’t Nat already do that?” And yet again fine reader you would be correct. I spend a significant chunk of my free time serving on the board of directors for the Wisconsin Council of the Blind and Visually Impaired. I contribute to the W3C.
But I’m not walking away and making excuses. This year I reached out to VeDA and volunteered to help them with their accessibility. I’m currently working on the audit, but once that is done, I will also help them repair the code base.
Take some time today to do volunteer in making someone’s life better.
Comments closedMore than once I have spoken about giving the user control over their experience. Too often we make assumptions about how things should work, but in the end those assumptions always forget someone. Providing a set of tools for the user to control the situation or experience allows us to have the most rich and dynamic experience we can build, but one that any user can get behind even if they can’t do all the fancy bells and whistles.
One such example is animation in social media. We love (I know I do) to post animated gifs, videos, vines, and cool new web animations in a place where our friends and colleagues can see. For me, many of these (especially videos and animations) will trigger a vertigo attack. The wrong kind of animation could cause someone with photo-sensitive epilepsy to have a seizure. I have a little faith left in humanity and hope no one posts these kinds of things with the intent to harm, but we can do better.
I’m not asking you to stop posting these. Instead I’m asking to give your followers control. If you come across a video full of violence, profanity, or sexual content while at work (or somewhere you would be embarrassed to get caught viewing it), you appreciate when that video has a NSFW (not safe for work) tag on it. We have learned what this means and now have the choice to view it or save it for when we are less likely to be embarrassed if caught.
We also have TW (trigger warning) for articles that contain descriptions of sexual assault, abuse, or suicide. We recognize that some people out there will be dramatically affected if they read these things, so we let them know up front it could happen. They can then choose to keep reading or not. They have the choice and the control.
So, I’m pushing for two new tags. One warns users that the content may cause dizziness, the other warns against possible seizure inducement.
DZY, short for dizzy, but a clear concise item that takes up no more than 4 characters (if including the octothorpe – #). It communicates that the following content may cause some vertigo, motion sickness, or dizziness in some users. Putting this in a tweet with a link allows users like myself to decide if they want to click on it. The user has control. They can click through knowing they will see movement (knowing goes a big way in prevention), or if they are having a bad vertigo day (like I am right now) they can avoid it completely.
SZR, short for seizure, is the same concept but for things that strobe and flash. Nothing should ever be created in a strobing or flashing manner that riggers epileptic attacks, but if you aren’t sure if it will, you can now warn your followers and users that something is coming that could.
Leave a CommentLast fall I met the great hosts of CtrlClickCast at CSSDevConf and they were gracious enough to invite me on the show. I got together with Lea & Emily last week and recorded an episode on Accessibility. It was super fun! I hope to do more podcasts (but I need a better mic!).
The episode is now live! Go listen to it. Really, right now. I’ll wait. It’s about 50 minutes long and Emily and Lea have had the show nominated for the Net Awards recently, it’s a really great show.
Here is a direct link to the full transcript.
I’m not embedding the podcast here because I want you to go to iTunes or Stitcher and subscribe. And after you listen, give a review!
Comments closedLast week I encountered a pseudo 3D animated gif from Doritos that autoplayed while viewing my Twitter feed. This gif was brightly colored, and its “3D” effect triggered a vestibular attack and migraine. As I looked more into the issue, it isn’t just Twitter who does this. It also happens in our Instagram, Vine, Facebook, and Snapchat feeds, just to name a few. Now some of you will tell me, “those channels are meant to work that way.” True, but what if due to advertising, or worse hacking, someone uploaded a gif worse than this Doritos one that autoplayed and triggered a photosensitive epileptic seizure? Who is responsible?
I would say whoever uploaded the gif is certainly responsible, but isn’t the platform as well? Do these really have to autoplay? When it comes to ads, is anyone checking to see if the ads meet certain standards? In radio and television, they don’t turn down ads because they don’t like the content, but if the ad promotes violence, cruelty, causes medical emergencies, or harm to the public, they will refuse to air it. I argue that those similar rules need to apply to the social networks we enjoy as a primary source of content.
I personally want an apology from Doritos for causing me pain. I know it wasn’t done on purpose, but that doesn’t mean it couldn’t have been avoided. Good marketers and user experience professionals need to know the audience and if their audience might have a medical condition that this type of ad would bother, then need to change that ad.
I’m also asking Twitter, Vine, Facebook, Instagram and all other social media platforms to put controls that prevent autoplaying of videos and gifs. The user needs to have control over their experience if movement may trigger physical pain.
And for those of you saying I shouldn’t use the Twitter web interface, why is it there if not to be used? Typically I use my phone, but as a consultant I am on many different machines in a week, some of which can’t have clients installed, and sometimes I’m in buildings where my phone won’t work for security reasons.
Comments closed
