Accessibility Awareness

The No Mouse Challenge is a global effort to raise awareness about accessible web design. Try using your website without a mouse. Use the keyboard instead. Is it possible to access all features and operate all buttons, sliders, and other controls?

https://nomouse.org/

The same photo could appear on three different pages and require different alt text for each instance. The alt text for an image can vary, depending on the context of the image, its role on the page, and the intended message.

For people who don't use screen readers, it can be difficult to understand how screen readers work. If you're interested in learning how people use screen readers, check out this demo from Marc Sutton and The University of California San Francisco.

https://youtu.be/dEbl5jvLKGQ

Your site's users need enough time to interact with content and fill out forms. People with disabilities such as blindness, low vision, dexterity impairments, and cognitive disabilities might need more time for things such as forms. Allow users to turn off or extend time limits.

Get in the habit of bringing up accessibility at meetings, in check-ins, and in demos. Bring up things you've done to address accessibility. Likewise, don't be afraid to ask, "Have we tested this on a keyboard?" or "What's the experience like on a screen reader?"

People often ask what accessibility considerations to keep in mind when creating data visualizations. For guidance and advice, check out Sarah L. Fossheim's list of 10 things to do (or not do) when designing accessible data visualizations.

https://fossheim.io/writing/posts/accessible-dataviz-design/

When creating PDFs, avoid using "Print to PDF." A screen reader user may still be able to access the text of PDFs created this way, but heading structure, alternative text, and any other tag structure will be lost. Using "Save As" or "Export" can preserve these tags.

People who want to make the web accessible need to understand the many different ways that people with disabilities use the web. This W3C resource offers a good introduction to how disabled people navigate the web, and barriers they commonly encounter.

https://www.w3.org/WAI/people-use-web/

When using Microsoft Word or Google Docs, don't just make text bigger and bolder to make it a heading. That will work for sighted users, but screen reader users will miss that and just hear it as normal paragraph text. Use actual heading styles, like level 1 through 6.

Some people may be unable to use a mouse, and instead rely exclusively on keyboards, or use assistive technologies such as speech recognition, head pointers, mouth sticks, or eye-gaze tracking systems. If a website is accessible only to mouse users, these people will be excluded.

Some people have disabilities that are directly based on the way they understand and interpret numbers. In this post, Ricky Onsman explains some of these disabilities, who is affects and how, and what web creators can do about it.

https://www.tpgi.com/making-numbers-in-web-content-accessible/

Cognitive load refers to how much working memory or short-term memory someone is using at a time. Minimizing the cognitive load it takes to use your site makes it more accessible for people with cognitive disabilities. Limit what you're asking users to remember to use your site.

Did you know each emoji has a coded description that gets read aloud by screen readers? This demo by Alexa Heinrich shows what happens when a screen reader encounters a post that uses an emoji to function as a bullet point.

https://www.youtube.com/watch?v=MSMsSPT4__A

Some people need to change the way text is displayed in order to read it. This includes changing size, spacing, font, color, and other properties. When people customize text, the text should re-flow so they don’t have to scroll horizontally to read.

https://www.w3.org/WAI/perspective-videos/customizable/

Alexa Heinrich's Accessible Social is a free resource for digital marketers, communication professionals, content creators, everyday social media users, and anyone who wants to learn how to make their content accessible for people with disabilities.

https://www.accessible-social.com/

For beginners, it can be difficult to know what to put in alt text, as well as when alt text is needed and when it isn't. This decision tree from the W3C helps you determine what to do, based on specific situations.

https://www.w3.org/WAI/tutorials/images/decision-tree/

Audio descriptions are necessary for making videos accessible. They narrate the crucial visual elements that would be necessary for understanding the plot without the ability to see the screen. They describe non-verbal cues like gestures, facial expressions, or eye contact.

Vestibular disorders affect people's balance as well as their visual perception of their world around them. Don't make animations, sliders, videos, or rapid movement start automatically, as autoplaying elements could trigger a bad reaction in people who have vestibular disorders.

Plain language is communication that your audience or readers can understand the first time they hear or read it. The terminology you use will vary depending on the audience. Always aim to avoid jargon when possible, especially when you have a broad general audience.

A transcript is the only way to make video or audio content accessible to someone who is both deaf and blind. Transcripts can be converted into braille, to be read on a refreshable braille output device.

Many live with the limitations of not understanding numbers and the impact that has on everyday life. Laura Parker's Accessible Numbers project offers guidance on how to design services and write content for people who need help with numbers.

https://accessiblenumbers.com/

"Learn Accessibility" is a course that takes you through the essentials for building accessible websites and web apps. Created for both beginners and advanced users, this course can be taken beginning to end, or used as a reference for specific topics.

https://web.dev/learn/accessibility/

Sheri Byrne-Haber's "Giving A Damn About Accessibility" has great tips on how to deal with people who challenge or dismiss the need for accessibility.

https://uxdesign.cc/giving-a-damn-about-accessibility-6caf90be5a40

A refreshable Braille display is a device that takes a computer screen's text and generates it in Braille by raising and lowering pins through holes on a flat surface. The display refreshes as the user moves through the screen's content.

https://www.afb.org/node/16207/refreshable-braille-displays

For beginners, it can be difficult to know what to put in alt text, as well as when alt text is needed and when it isn't. This decision tree from the W3C helps you determine what to do, based on specific situations.

https://www.w3.org/WAI/tutorials/images/decision-tree/

When writing alt text, focus on what's truly important. In an image with text about a canceled event, the borders of the image are not nearly as vital as conveying that this event is now canceled. A decorative border can be mentioned, but it's not the most important element.

If your organization has Slack, Teams, or any other messaging program, you should have a dedicated accessibility channel. This would be a great way for everyone on your team to learn together by sharing links, posing questions, and reviewing alt text, among other things.

You don't necessarily need to say "image of" in your alt text for users to know it's an image. Screen readers will announce that it's an image. But it can help readers to specify if it's a hand-drawn image, Polaroid, infographic, screenshot, chart, map, diagram, or so on.

Game Accessibility Nexus focuses on video game accessibility. The reviews, articles, and interviews offer insight for both game players and game developers.

https://www.gameaccessibilitynexus.com/

Screen readers are an assistive technology that interprets the information on a screen and translates it to either synthesized speech or Braille output. This helps blind people, people with low vision, and people with cognitive or learning disabilities.

https://www.afb.org/blindness-and-low-vision/using-technology/assistive-technology-products/screen-readers

If you have an election results chart, the alt text needs to communicate the results. "Election results" is not enough. The same rules apply for alt text for images of weather charts. "Weather chart" doesn't cut it and doesn't convey what the chart is actually saying to users.

Any image shared on social media needs alt text. So today, as you share Super Bowl images, memes, screen shots, and more, don't forget alt text. This helps everyone using a screen reader, whether they are blind, have low-vision, have a cognitive disability, etc.

Alt text is not the same as a photo caption. Captions are typically written to support a photo, and usually depend on users being able to see the photo. But alt text is meant to be the stand-in for the photo. The alt text is what a screen reader user gets in place of the photo.

You can now find @A11yAwareness@disabled.social on Bluesky, too!

https://bsky.app/profile/a11yawareness.bsky.social

When creating PDFs, avoid using "Print to PDF." A screen reader user may still be able to access the text of PDFs created this way, but heading structure, alternative text, and any other tag structure will be lost. Using "Save As" or "Export" can preserve these tags.

A common question about alt text is whether or not it's appropriate to mention attributes like race or skin tone. A common response is, "It depends." In this post, Tolu Adegbite explains how race can be relevant and important in providing context.

https://ux.shopify.com/the-case-for-describing-race-in-alternative-text-attributes-a093380634f2

Alexa Heinrich's Accessible Social is a free resource for digital marketers, communication professionals, content creators, everyday social media users, and anyone who wants to learn how to make their content accessible for people with disabilities.

https://www.accessible-social.com

Thanks to everyone who has been so welcoming to @A11yAwareness@disabled.social since joining Mastodon.

You can also find A11y Awareness on Instagram:
https://www.instagram.com/a11yawareness/

On Twitter:
https://twitter.com/A11yAwareness

If you have a hashtag with multiple words, write the hashtag in #PascalCase or #camelCase to help users of screen readers. That helps the screen reader to read out the words out individually, rather than trying to read them in one long word.

Happy to say that Accessibility Awareness finally has a presence on Mastodon! This feed will be similar to @A11yAwareness@disabled.social on Twitter in that it will be a resource of links, tips, tricks, and best practices related to web accessibility. Thanks to everyone who helped build the community on Twitter, and looking forward to connecting with folks on here!