Helping you better understand web accessibility for people with disabilities, whether you're a student, teacher, journalist… whomever! Run by @patrickmgarvin
Public Key
npub1xjxfg4hfagw6pk00j4rt3sau8jtlznf0se770paltm9aeemgmuxqt7xuhx
Profile Code
nprofile1qqsrfry52m5758dqm8he234ccw7re9l3f5hcvl08s7l4aj7uua5d7rqpz3mhxue69uhhyetvv9ujuerpd46hxtnfduqs6amnwvaz7tmwdaejumr0ds3wtjjx
Author Public Key
npub1xjxfg4hfagw6pk00j4rt3sau8jtlznf0se770paltm9aeemgmuxqt7xuhx Show more details
Published at
2023-07-02T22:20:29+02:00 Event JSON
{
"id": "4d26027bc534b18d66de9924b4c820cd99848ddc9c35047a967eec9ef7cadd79" ,
"pubkey": "348c9456e9ea1da0d9ef9546b8c3bc3c97f14d2f867de787bf5ecbdce768df0c" ,
"created_at": 1688329229 ,
"kind": 0 ,
"tags": [
[
"mostr",
"https://disabled.social/users/A11yAwareness"
]
],
"content": "{\"name\":\"Accessibility Awareness\",\"about\":\"Helping you better understand web accessibility for people with disabilities, whether you're a student, teacher, journalist… whomever!\\n\\nRun by @patrickmgarvin\",\"picture\":\"https://assets.disabled.social/accounts/avatars/109/533/040/682/118/536/original/2ab42e610304e464.png\",\"nip05\":\"[email protected] \"}" ,
"sig": "368215f833846b7a5a0f62f752b43550b9626f0811cb33bd8f3df537a2a68d3e6b763b30001ac76f1a30bc23940f1d2f64db305cf0d13a7167dd3bae18be44b6"
}
Last Notes npub1xjxfg4hfagw6pk00j4rt3sau8jtlznf0se770paltm9aeemgmuxqt7xuhx Accessibility Awareness 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. https://www.lireo.com/10-ways-to-improve-accessibility-on-websites-and-social-media/ npub1xjxfg4hfagw6pk00j4rt3sau8jtlznf0se770paltm9aeemgmuxqt7xuhx Accessibility Awareness Avoid emoji icons in alt text. Emoji icons are a visual element, so it's counterintuitive to add them to non-visual content. You'll likely confuse people with messages that don't make sense. In alt text, use plain text, free of symbols, icons, or any weird special characters. npub1xjxfg4hfagw6pk00j4rt3sau8jtlznf0se770paltm9aeemgmuxqt7xuhx Accessibility Awareness Avoid using emoji as bullet points in social media posts. An emoji has a coded description that gets read by screen readers, and thus could confuse users who think that's part of the content. If you can't use standard lists, use dashes for bullet points or add line breaks. npub1xjxfg4hfagw6pk00j4rt3sau8jtlznf0se770paltm9aeemgmuxqt7xuhx Accessibility Awareness If you put links or hashtags in your alt text, no one will be able to click or select the link or hashtag. It's just going to be read out loud. If you have a link or hashtag to share, that should go in the written part of your post or your tweet, but not the alt text. npub1xjxfg4hfagw6pk00j4rt3sau8jtlznf0se770paltm9aeemgmuxqt7xuhx Accessibility Awareness 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/ npub1xjxfg4hfagw6pk00j4rt3sau8jtlznf0se770paltm9aeemgmuxqt7xuhx Accessibility Awareness If you use the clapping hands emoji between every word for emphasis, screen reader users will hear "clapping hands" after each word. This is true for any emoji. This will be distracting, annoying, and disorienting. The message you're trying to emphasize will likely be lost. npub1xjxfg4hfagw6pk00j4rt3sau8jtlznf0se770paltm9aeemgmuxqt7xuhx Accessibility Awareness 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. npub1xjxfg4hfagw6pk00j4rt3sau8jtlznf0se770paltm9aeemgmuxqt7xuhx Accessibility Awareness Text in all capital letters can be more difficult to read for most people, with and without disabilities. Readability can be reduced with all caps because all words have a uniform rectangular shape, so readers can't identify words by their shape. npub1xjxfg4hfagw6pk00j4rt3sau8jtlznf0se770paltm9aeemgmuxqt7xuhx Accessibility Awareness 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. npub1xjxfg4hfagw6pk00j4rt3sau8jtlznf0se770paltm9aeemgmuxqt7xuhx Accessibility Awareness Avoid writing text that has every letter alternating between uppercase and lowercase. This is difficult for sighted readers to comprehend, especially users with reading or cognitive disabilities. Screen readers won't know to read this, so it will often be gibberish. npub1xjxfg4hfagw6pk00j4rt3sau8jtlznf0se770paltm9aeemgmuxqt7xuhx Accessibility Awareness "Disabled users don't use my website" is a cop-out and a lie. There's no way to know how many assistive technology users are using your site. You can't confidently exclude a large portion of the world's population that has a disability by claiming none of them use your site. npub1xjxfg4hfagw6pk00j4rt3sau8jtlznf0se770paltm9aeemgmuxqt7xuhx Accessibility Awareness Do not cram alt text with keywords just to improve search engine optimization. This will hinder alt text’s true purpose: improving accessibility. Focus on describing the photo's content. Search engine optimization should not be the goal for writing good alt text. npub1xjxfg4hfagw6pk00j4rt3sau8jtlznf0se770paltm9aeemgmuxqt7xuhx Accessibility Awareness 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. npub1xjxfg4hfagw6pk00j4rt3sau8jtlznf0se770paltm9aeemgmuxqt7xuhx Accessibility Awareness 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. npub1xjxfg4hfagw6pk00j4rt3sau8jtlznf0se770paltm9aeemgmuxqt7xuhx Accessibility Awareness 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. npub1xjxfg4hfagw6pk00j4rt3sau8jtlznf0se770paltm9aeemgmuxqt7xuhx Accessibility Awareness People who are new to writing alt text sometimes feel they must describe every detail in every visual, including logos. This is unnecessary and will overwhelm screen reader users. For example, it's OK to write "Google logo" rather than describing the logo in exhausting detail. npub1xjxfg4hfagw6pk00j4rt3sau8jtlznf0se770paltm9aeemgmuxqt7xuhx Accessibility Awareness 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. npub1xjxfg4hfagw6pk00j4rt3sau8jtlznf0se770paltm9aeemgmuxqt7xuhx Accessibility Awareness Many screen readers can produce a list with all the headings on a page. This allows users to browse the list and jump to a specific heading on the page. Write down that list and structure it. Does it make sense if you read it out loud? npub1xjxfg4hfagw6pk00j4rt3sau8jtlznf0se770paltm9aeemgmuxqt7xuhx Accessibility Awareness 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 npub1xjxfg4hfagw6pk00j4rt3sau8jtlznf0se770paltm9aeemgmuxqt7xuhx Accessibility Awareness Don't write generic descriptions for alt text. "Screenshot of a news article" might technically describe an image, but it does nothing to convey the information or context sighted users get from the image. People who can't see the image need the same information and context. npub1xjxfg4hfagw6pk00j4rt3sau8jtlznf0se770paltm9aeemgmuxqt7xuhx Accessibility Awareness First and foremost, alt text must always be informative and descriptive of the content in the image. It can have character and humor, but it still needs to be informative and descriptive. Alt text is not a place to add easter eggs or jokes for sighted users. npub1xjxfg4hfagw6pk00j4rt3sau8jtlznf0se770paltm9aeemgmuxqt7xuhx Accessibility Awareness 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. npub1xjxfg4hfagw6pk00j4rt3sau8jtlznf0se770paltm9aeemgmuxqt7xuhx Accessibility Awareness Do not rely on the A.I.-generated alt text in Facebook or Instagram. The result is vague and useless, like "may be an image of food and text," and "may be an image of outdoors." These do nothing to give users the context and content of an image. npub1xjxfg4hfagw6pk00j4rt3sau8jtlznf0se770paltm9aeemgmuxqt7xuhx Accessibility Awareness 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. npub1xjxfg4hfagw6pk00j4rt3sau8jtlznf0se770paltm9aeemgmuxqt7xuhx Accessibility Awareness Many struggle with writing alt text for charts and other other data visualizations. Amy Cesal's "Writing Alt Text for Data Visualization" hammers home the importance of explaining the chart type, the type of data, and the reason for the chart. https://medium.com/nightingale/writing-alt-text-for-data-visualization-2a218ef43f81 npub1xjxfg4hfagw6pk00j4rt3sau8jtlznf0se770paltm9aeemgmuxqt7xuhx Accessibility Awareness 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. npub1xjxfg4hfagw6pk00j4rt3sau8jtlznf0se770paltm9aeemgmuxqt7xuhx Accessibility Awareness 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. npub1xjxfg4hfagw6pk00j4rt3sau8jtlznf0se770paltm9aeemgmuxqt7xuhx Accessibility Awareness The difference between closed captions and open captions: Closed captions are on a separate track that can be turned on or off. Open captions are captions that are burned into the video, so that they are always showing. The viewer cannot turn them off. https://www.w3.org/WAI/media/av/captions/#positioning-and-styling-captions