Avoid jargon whenever possible. When you have to use terms that might not be commonly known or used among your audience, explain what these terms mean. If you can't avoid a lot of specific terms, include a glossary of terms that users can refer to when needed.
Accessibility Awareness
@a11yawareness.bsky.social
Helping you better understand web accessibility for people with disabilities. Created by @patrickmgarvin.bsky.social.
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.
Consider your site content that is routinely updated, like weather maps, Covid charts, or stock graphs. Screen reader users encounter maps and charts where the image has been updated but the alt text hasn't. This can lead to confusion. Always update alt text when updating images.
Don't forget to add alt text on Instagram and Facebook, too. When you forget, the auto-generated alt text is not as helpful, complete, or accurate as human-written alt text. A.I. can't know the purpose of a photo. Always add your own alt text on Instagram and Facebook.
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. www.lflegal.com/global-law-a...
Global Law and Policy
The legal framework gives us permission to dream what is possible. Lizzie Kiama (Kenya) at Microsoft Ability Summit 2021 Welcome to LFLegal's Digital Accessibility Global Law and Policy page. The…
lflegal.com
In his post, "Automated testing won’t solve web accessibility," Eric Eggert explains that at its core, accessibility is about how people interact with computers. Automated tools might help identify issues, but they aren't a replacement for human expertise. yatil.net/blog/automat...
Automated testing won’t solve web accessibility · Eric Eggert
Over the past few years, accessibility companies have started to develop tools that claim to find accessibility problems automatically. Often the idea is that “automated testing is not quite there…
yatil.net
Sighted users often use bold or large fonts to create the appearance of headings in documents. People using screen readers have no way of understanding these visual cues. Use heading styles from the styles menu to correctly format headings.
Some are suggesting you deliberately write inaccurate or confusing alt text, because they say this confuses AI scrapers that are analyzing images. The purpose of alt text is to help people who cannot see the image. Deliberately misrepresenting the image is a gross misuse of alt text. Don't do it.
You might personally choose not to use AI, but you might not have a choice as to whether your team or office uses it. If your organization is using AI to write alt text, always review it to make sure it's accurate and appropriate. AI won't necessarily understand how or why an image is being used.
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. www.w3.org/WAI/perspect...
Customizable Text
Short video about customizable text for web accessibility - what is it, who depends on it, and what needs to happen to make it work.
w3.org
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.
Intentional misspellings of words 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.
Chartability is a resource to help make data visualizations and charts more accessible. It's organized into principles with testable criteria aimed at making sure people with disabilities are able to access data. chartability.fizz.studio
Chartability
Chartability is a set of heuristics (testable questions) for ensuring that data visualizations, systems, and interfaces are accessible. Chartability is organized into principles with testable…
chartability.fizz.studio
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.
Color contrast affects readability on the web and in print. It is especially important for users who are low vision or for users who are colorblind. Good color contrast means all users can see your content no matter the device they’re using or the lighting of their surroundings.
An emoji has a coded description that gets read aloud by screen readers. Putting emoji in between text could cause confusion or make content less clear. It's best to put emoji at the end of written content.
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.
Capitalization affects how people read hashtags or how people hear them on screen readers. Use #camelCase or #PascalCase in hashtags instead of lowercase. You could have #DoctorWhoRewatch ("Doctor Who Rewatch") or #doctorwhorewatch ("doctor whore watch.")
In hashtags, it helps if each new word starts with a capital letter. Otherwise, sighted users could see a string of letters and not immediately know where one word ends and a new word begins. Capitalized words also help screen readers properly read out the hashtag.
Don't forget transcripts for video and audio. These will help blind users and low-vision users, deaf and hard-of-hearing users, people with ADHD, and people with audio-processing disorders. Transcripts also benefit search engines, people in quiet spaces, and people in a hurry.
Screen reader users can navigate from heading to heading. If HTML headings are used correctly, this allows users to get a basic outline of content and find the information they’re looking for. The highest heading level is <h1> and <h6> is the lowest. developer.mozilla.org/en-US/docs/W...
<h1>–<h6> HTML section heading elements - HTML | MDN
The <h1> to <h6> HTML elements represent six levels of section headings. <h1> is the highest section level and <h6> is the lowest. By default, all heading elements create a block-level box in the…
developer.mozilla.org
When creating a transcript, timestamps are useful, especially for synchronized transcripts. Include speaker names when there is more than one speaker in the video.
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. www.youtube.com/watch?v=MSMs...
Taylor Nation Emoji Bullet Point Tweet
Demonstration of what a tweet with emoji used as bullet points sounds like when read by a screen reader. The tweet also uses a "show more" cut, which isn't accessible when the tweet is seen in the…
youtube.com
For people just getting introduced to accessibility concepts, the number of resources can be overwhelming for people who don't know where to start. These 10 tips from Lireo Designs can be a good way to introduce your team to the basics. www.lireo.com/10-ways-to-i...
10 Ways to Improve Accessibility on Websites and Social Media - Lireo Designs
My 10 tips for making your website and social media more accessible, whether you're a blogger, photographer, writer, designer, or developer.
lireo.com
Automatic transcription can be much faster than manual transcription, but it's not as accurate. Humans can catch errors that software may miss because of background noise or poor audio quality. Always review and edit transcripts before publishing.
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.
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.
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." www.w3.org/WAI/tips/des...
Designing for Web Accessibility – Tips for Getting Started
Summary
w3.org
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.
People often have difficulty reading content when there isn’t sufficient contrast, so it's important to have high color contrast. TPGi’s free color contrast checker tool allows you to determine the contrast ratio of two colors by using an eye-drop tool. developer.paciellogroup.com/color-contra...
Colour Contrast Analyser (CCA) - Vispero
Colour Contrast Analyser (CCA) Use Vispero’s free color contrast checker to optimize your content – including text and visual elements – for individuals with color-blindness or low vision…
developer.paciellogroup.com