mastodon 4.7.3Helping you better understand web accessibility for people with disabilities, whether you're a student, teacher, journalist… whomever!
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.
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.
Don't buy into the myth that "accessibility is only about adding alternative text to images." Alt text is important, of course. But there is so much more to accessibility, including headline structure, functional controls, color contrast, link text, plain language, and more.
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.
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?
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.
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.
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.
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.
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.
Hyperlink text should make sense when read out of context. Screen reader users can navigate from link to link, and can listen to links in a list. When navigating this way, only the link is read. So "click here" or "read more" won't make sense.
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.
The best time to start thinking about and talking about making a website accessible is at the very beginning, before any content or code has been written. But the second best time is right now.
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?"
When writing alt text, focus on what is actually in the image. Any relevant information that isn't describing the image itself should be in a caption below the image, not in the alt text. This includes photo credits, permissions, and copyright information.
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.
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.
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.
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.
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.
Don't use color alone to convey information. Marking required fields by only using colored labels won't help people who use screen readers or who can't distinguish colors. If using color, also add text like asterisks and/or "required."
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.
Automated captions and transcripts can save time so that you don't have to manually transcribe on your own. But automated captions and transcripts aren't 100% accurate, so they need manual editing before you publish them.
https://www.w3.org/WAI/media/av/captions/#positioning-and-styling-captions
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.
Make sure that interactive elements that can be accessed by using a mouse, pen, trackpad or touch are at least 24 by 24 CSS pixels. This helps people with low vision and/or limited motor control select the intended element without accidentally selecting nearby elements.
If you pair light colors (yellow text on white background) or dark colors (dark blue text on black background), users will struggle to read your content. Understanding color contrast will help you better serve all users, especially those with low vision.
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.
When possible, organize pages with headings to help users scan page content for what they're looking for. Statements allow you to put the keywords first. Both sighted users and screen reader users benefit if words they expect are at the front of headings.
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
Intentional misspellings of words for memes (and other things) can confuse people. This includes people with cognitive and reading disabilities, and those learning the language. Depending on how much the word is misspelled, screen readers might not pronounce it like the actual intended word.
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.
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.
"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.
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.
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.
Automatic captions make it difficult to watch videos because the viewer is forced to decipher misspelled or mistranslated words that appear in a string of text without any punctuation. These can be distracting and disorienting. Always edit your captions before publishing.
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.
Everyone who works on a website has a role to ensure the site and its content are accessible. This resource from Vox Media breaks down some accessibility tasks by job role, including content creators, designers, developers, project managers, and testers.
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.
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.
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.
The term "overlay" refers to any product using third-party source code to change a website's front-end code to attempt to improve accessibility and avoid legal risks. But no overlay can truthfully promise it can make a website fully conform with existing accessibility standards.
Everyone who works on a website has a role to ensure the site and its content are accessible. This resource from Vox Media breaks down some accessibility tasks by job role, including content creators, designers, developers, project managers, and testers.
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/
Looking for information on accessibility laws? Lainey Feingold has a resource on digital accessibility laws and policies that she's updated over the years. Though not exhaustive, it has great insight, histories, explanations, and links.
https://www.lflegal.com/global-law-and-policy/
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/
Meryl Evans' "Why and How to Create Accessible Social Media and Website Content" introduces content creators to basic accessibility considerations for links, hashtags, emojis, alt text, transcripts, and more.
