#a11y

[fallonturing]

Disabled people shouldn't have to be perfectly nice or kind when we ask for accommodations and inclusion. We shouldn't HAVE to ask.

Furthermore, we usually ARE being nice when we ask; ableds just take any request that they do the bare minimum for us as if it's a great slight to their honor.

[rikaklassen]

In addition to Pride, it's also Deafblind Awareness Month. Remember to add alt text and video transcripts to your pictures and videos. (And transcripts for your audio.) Thank you!

[guerrillatech]

[wdapteo]

curb cut effect: adding transcripts to videos not only helps deaf/hard of hearing people and it's essential for a more accessible fandom environment, it also helps phannies scrolling tumblr on company time. I wanna know what it's being said in a video and I don't have headphones right now!!!!!

[askablindperson]

How do screenreaders navigate all the complex HTML and UI elements on a webpage? Like header bars and buttons and sidebars and other dividers on a page, and things like that.

This one may unfortunately be a little bit above my pay grade. I don’t know too much about the technicalities of HTML or web coding.

What I can tell you is that most of those elements are announced when we land on one and that we often use shortcut keys to jump to useful elements. We can quickly jump between headings, links, buttons, combo boxes, and form controls. If these things are not marked up properly, it can interfere with our ability to navigate the Page efficiently.

One of the most common accessibility barriers we face is actually unlabeled buttons. This is especially prevalent in mobile apps. It is not uncommon for me to download a new trendy app, only to open it and find that every single button in it is completely unlabeled so all I hear everywhere I touch is “button.” As you can imagine, this can make even the most simple apps completely unusable. Buttons must have accurate labels, not just the visual appearance of one. If the visual image on the button says submit, then the actual label should also say submit. This can also be a problem sometimes with unlabeled links.

Similarly, headings that are not actually marked as headings are a common issue. This is most common in documents rather than proper webpages—often times someone will make a word document and they will make a fake heading by just changing the font size to 40 without actually choosing the heading style. When a heading isn’t actually properly marked as a heading, this means that to a screen reader, all of that text is body text so we cannot use the heading shortcut to skip to different sections with different headings. Jumping between headings is a major way that many of us navigate webpages and documents quickly and get a sense of what kinds of information are present without having to manually arrow through all of it. It’s one of the closest things we have to skimming.

For things like side bars, these are often considered regions which we can also jump to with a shortcut. Sometimes these are also not correctly labeled or marked which can make them a little bit harder for us to find or understand what we are looking at when we are manually tabbing through links on it. However, if by sidebar you meant the visual divider, we do not interact with that element.

Dividers in general are not meant to be interacted with by a screen reader because it just adds clutter. One common piece of accessibility advice given is actually deliberately not to describe purely decorative dividers, such as a swirly line between paragraphs, because it adds unnecessary elements for us to move through and adds no functional benefit to us.

Beyond these things, my understanding of how it all works on a technical level comes to an end. I can tell you how I use a screen reader and I can tell you how I navigate websites in general terms, but I am definitely not a coder or web designer of any kind so I can’t get too far into the weeds of how it all works under the hood. I hope this is a useful enough explanation though to answer the broad strokes of your question.

[nasa]

For the Benefit of All: Assistive Tech Developed from NASA Tech

What do modern cochlear implants and robotic gloves have in common? They were derived from NASA technology. We’ve made it easier to find and use our patented inventions that could help create products that enhance life for people with disabilities.

October is National Disability Employment Awareness Month, which highlights the contributions of American workers with disabilities – many of whom use assistive technology on the job. Take a look at these assistive technologies that are NASA spinoffs.

Low-Vision Headsets

The Joint Optical Reflective Display (JORDY) device is a headset that uses NASA image processing and head-mounted display technology to enable people with low vision to read and write. JORDY enhances individuals’ remaining sight by magnifying objects up to 50 times and allowing them to change contrast, brightness, and display modes. JORDY's name was inspired by Geordi La Forge, a blind character from “Star Trek: The Next Generation” whose futuristic visor enabled him to see.

Cochlear Implants

Work that led to the modern cochlear implant was patented by a NASA engineer in the 1970s. Following three failed corrective surgeries, Adam Kissiah combined his NASA electronics know-how with research in the Kennedy Space Center technical library to build his own solution for people with severe-to-profound hearing loss who receive little or no benefit from hearing aids. Several companies now make the devices, which have been implanted in hundreds of thousands of people around the world.

Robotic Gloves

Ironhand, from Swedish company Bioservo Technologies, is the world’s first industrial-strength robotic glove for factory workers and others who perform repetitive manual tasks. It helps prevent stress injuries but has been especially warmly received by workers with preexisting hand injuries and conditions. The glove is based on a suite of patents for the technology developed by NASA and General Motors to build the hands of the Robonaut 2 humanoid robotic astronaut.

Smart Glasses

Neurofeedback technology NASA originally developed to improve pilots’ attention has been the basis for products aimed at helping people manage attention disorders without medication. The devices measure brainwave output to gauge attention levels according to the “engagement index” a NASA engineer created. Then, they show the results to users, helping them learn to voluntarily control their degree of concentration. One such device is a pair of smart glasses from Narbis, whose lenses darken as attention wanes.

Anti-Gravity Treadmills

A NASA scientist who developed ways to use air pressure to simulate gravity for astronauts exercising in space had the idea to apply the concept for the opposite effect on Earth. After licensing his technology, Alter-G Inc. developed its anti-gravity G-Trainer treadmill, which lets users offload some or all of their weight while exercising. The treadmills can help people recover from athletic or brain injuries, and they allow a safe exercise regimen for others with long-term conditions such as arthritis.

Wireless Muscle Sensors

Some of the most exciting assistive technologies to spin off may be yet to come. Delsys Inc. developed electromyographic technology to help NASA understand the effects of long-term weightlessness on astronauts’ muscles and movements. Electromyography detects and analyzes electrical signals emitted when motor nerves trigger movement. Among the company’s customers are physical therapists developing exercise routines to help patients recover from injuries. But some researchers are using the technology to attempt recoveries that once seemed impossible, such as helping paralyzed patients regain movement, letting laryngectomy patients speak, and outfitting amputees with artificial limbs that work like the real thing.  

To further enhance the lives of people with disabilities, NASA has identified a selection of patented technologies created for space missions that could spur the next generation of assistive technology here on Earth.

Want to learn more about assistive technologies already in action? Check out NASA Spinoff to find products and services that wouldn’t exist without space exploration.   

Make sure to follow us on Tumblr for your regular dose of space!

[childrensward]

Making Accessible Interaction Banners - a Guide by Binoo "ChildrensWard"

Interaction or "DNI" (do not interact) banners are a staple of the age regression community, but too often are they made without taking accessibility in mind, whether it's because they're unreadable, have excessive eye strain, or aren't marked with alt text.

Therefore, in the hopes that I can help people out with this, I decided to write a mini guide on how to make your banners accessible for as many people as possible!

Under the "read more" cut, this guide will cover the following:

Fonts, and how to choose the best ones

Text, and what your interaction banners should say

Colour contrast, and why it's important in making your graphics accessible

Eye strain, and why it generally should be avoided

Alt text and image descriptions, and how to write them

And an example of an interaction banner I made using the criteria I've written in this guide!

So, without further adieu, let's get into the real meat of this guide!

Fonts

Fonts are easily the most important thing about an interaction banner! It's how you're going to best convey the contents of your banner in a way that's readable to the viewer. Here's a quick and firty rundown of the different kinds of fonts, as well as which ones you should (and shouldn't!) use for your banner:

Body Copy fonts are your basic Sans and Sans Serif style fonts that you'll most often find on books and websites, because they're some of the easiest fonts to read in smaller text (10-14pt) due to their lack of details. Examples of Body Copy fonts include PT Serif, Arial, Comic Sans, Roboto, and Helvetica Now.

Display fonts are often used for headers and subheaders and include features such as being thick, having unconventional letters, and, on occasion, being in all caps. However, these fonts should not be used for body or small text, as they will be very hard to read. Examples of Display fonts include Futura PT, Elephant, Noto Serif Display, and Shoreditch.

Script and decorative fonts are subtypes of display fonts, with the former having a handwritten quality to them, while the latter are considered to be the fun display fonts. However, you should be very careful with using either of these fonts- not only can they be hard to read on their own, but neither should be used specifically for body or small text in any circumstance. For the sake of readability and accessibility, however, I'd be more inclined to avoid using these fonts.

Text

Aside from the fonts that your text will be written in, the text itself is also a mandatory aspect of your banners. After all, it's what banners are entirely based on, and it's the very thing that tells you who can and can't interact with your posts.

However, there's something important to keep in mind, and that is how much text you're trying to cram into your banner because you're trying so desperately to fit your entire DNI criteria onto it.

What I think is important when it comes to making your banners is to keep any text you have on there as short as possible. If you bombard your banner with all this specific criteria, then you're more likely to make your readers confused, whether or not they happen to be a screen reader user.

When making your banners, ask yourself the following questions when deciding on your criteria:

How likely is it for someone interacting with the age regression or similar communities to fit this criteria? Have I come across a good number of people who fit this criteria that makes it worth mentioning?

Is this criteria at all relevant to the content I'm presenting? Do I need things like inter-community discourse terms from other communities on my banner if I'm making content specifically for age regression?

Is there any "unspoken" criteria that everyone agrees upon that doesn't need to be included? These might include nazis, racists and white supremacists, homophobes and transphobes, ableists and eugenicists, misogynists, anti-choice, etc.

If your answers show that the specific criteria is not relevant, then it's best to leave it out to keep the information on your banner more clear and concise.

Colour Contrast

While colour contrast is something often talked about in web development circles, it's also an important skill to learn when making any sort of graphic design- which is what interaction banners essentially are. Without taking colour contrast into mind, you're left with a banner that may not be easy for most people to read; let alone those with low vision or blindness. We also need to think about things like people who may be using old or outdated monitors, people reading on smaller screens (like a smart phone), and bad lighting and glare. As Contrast Rebellion puts it: aesthetics are important, but aren't the ultimate goal of design.

Okay, so you've understood the reason why colour contrast is important, but how do you put it into action? How do you know your colours of choice are readable?

Well lucky for us, there's many resources out there that help us in choosing the right colours! Here are a few of my favourites:

CSUN: Color Contrast - An introduction article on colour contrast, why it's important, and some examples of good and bad colour contrast choices.

Random A11y - If you don't have any colour combinations in mind, Random A11y is here to help! With it's vast amount of randomly generated colour contrast combinations, you'll have plenty of options to work with. Don't like the combination you're given? Just click on the "new colours" tab to generate a new palette!

Colour Contrast Analyzer - This is a free program for Windows and Mac that helps you with colour checking with a variety of different features; including multiple ways to select colours (CSS color formats, RGB slider, colour picker tool), and a colour blindness simulator.

Accessible Colors - If you don't want to or can't download the program above, then this website works just as fine with checking colours, too! Just enter in the hex codes of your colours, the font size and weight, and which level of conformance you'd like your colours to pass.

Eye strain

A bit of a sore topic for some, but I feel I must put it bluntly for people to understand: making your colours easy on the eyes of the viewer should be your top priority over your aesthetic. Some people, like myself, have certain health conditions that are triggered by eye strain, and by continuing to slap extremely contrasted rainbows on your banners, you're continuing to put disabled people through worsening symptoms, all because you feel the need to retain your aesthetic.

Many of the same resources shared in the Colour Contrast section can also help you to rule out any eye-straining palettes. Also, a general rule of thumb to keep in mind is: if a colour palette is eye straining enough to cause you some mild problems, then it's enough to cause someone with a disability more severe symptoms.

Alt text and image descriptions

I think a lot of us find writing alt text to be daunting- I know I did for a long while, which is why I never wrote any for my posts until recently. But really, once you get the hang of it, it can be very simple and easy to write! Even so, people who don't know how exactly to write alt text often fumble with this- either writing too much or too little, not being clear enough, or just copying the image caption and calling it a day.

Here's some tips and tricks on writing better alt text:

Alt text generally follows the Object-action-context rule. In the words of Alex Chen at Medium: The object is the main focus. The action describes what's happening, usually what the object is doing. The context describes the surrounding environment.

Be specific and concise, and even consider the content of the post or webpage it's on as well. You'll also want to consider the function or purpose of the image, and what you want your viewers to gain from it.

Keep your alt text short, as long descriptions with too much flowery language and filler words can be distracting when using a screen-reader. Generally, most screen-readers will cut off alt text at around 125 characters.

Avoid using "image of..." or "picture of...," as HTML codes will already identify your images as such. However, in this case, mentioning what type of image it is can add context.

Always check for spelling mistakes, as this can affect the user experience, causing interruptions and confusion.

Not related to interaction banners specifically, but avoid including alt text for decorative images that are used to make your post prettier. In this case, insert the word "null" in your alt text fields.

Image descriptions are a little different in the fact that they're allowed to be more descriptive than alt text, considering screen readers won't be able to cut off any alt text at 125 characters. Even so, it's still best to keep your image descriptions as short as possible to save from redundancy and confusion.

Please remember that writing alt text and image descriptions can take a lot of practice and trial-and-error, so don't give up if you can't get it right the first time! Write and rewrite it as much as you need to, or even consider changing your interaction banner altogether if you think it can't be described in words concisely.

An example

Taking what we've learned above, let's take this banner I made just for this post as an example of these characteristics put into action.

In this example, I have chosen the hex colour #4D0000 for my text colour, and the colours #B5F3DC and #E3B158 for my background. According to CCA, the contrast ratios for my colours of choice are 12.8:1 and 7.9:1 respectfully, which both meet the minimum contrasts of 1.4.3 for AA and 1.4.6 for AAA.

I have chosen the font FS Lola Bold, which is a type of display font that's best for headers and subheaders, but not so much any body or small text. I don't have to worry about this though, because I don't have any small text in my banner.

I've also kept my criteria to a simple "No DDLG/CGL interaction," because I feel that this is the most relevant information regarding the content of my blog and the posts I make. Short and simple, yet specific to who I don't want interacting with me. I also like the idea of my favourite fictional characters protecting my blog, which is why I've included another short sentence for it!

Here's an example of what the image description or alt text for this banner could look like:

[Image description: Banner that reads "Toopy and Binoo protect this blog, no DDLG/CGL interaction!" On it are the titular characters from the show. /End ID]

And if I were to have both alt text alongside an image description, then the alt text could be as simple as what the banner reads, which would be:

"Toopy and Binoo protect this blog, no DDLG/CGL interaction!"

Remember, you don't have to go into every little detail with your image descriptions or alt text, because then it can become very confusing for certain people to decipher! Keep it simple and state the minimum.

Closing words

I think that's everything that I wanted to cover in this post. Of course, there's more to accessible design than just text and fonts alone, but when it comes to interaction banners, it's usually the focal point of the images, which is why it's so vital that people with disabilities can also read your banner- especially when they contain important information about your personal boundaries.

Age regressors often pride themselves for the image we've set up for our community, that it's safe for everyone to join and no one will be judged or excluded for who their are. But the reality is, we still have lots of work to do before we're ever at that place, and making our community more accessible is just one of these steps that we should all be encouraged to take. Besides, what kind of message are we sending if we don't take the steps to make our space as accessible as possible? How do you think it'd feel to realize that a community you wanted to join is actively hostile towards you because of the refusal to learn how to accommodate for them? Especially when we have such a huge demographic of disabled people in the community, we can and should be doing better to accommodate for everyone as much as we possibly can.

Learning accessibility is a skill that requires time and practice, and I don't expect anyone to be perfect at it the first time around. The aim of doing these things isn't to make sure that every single thing is 100% accessible in every single way imaginable and with no mistakes whatsoever; but to instead encourage, develop, and incorporate good accessibility practices into our every day lives.

Thank you for reading,

- Binoo

[programminglibrarian]

Creating accessible documents ftw

Celebrate with me, Tumbltown, I completed WebAIM's Accessible Documents course and received my certificate today! Huzzah!

Two main takeaways:

Wow I don't think I could have learned this on my own just surfing the web to figure it out. There was a lot content I'd never heard or considered before.

Darn it all, you really do need to pay for Acrobat Pro to be sure you're doing it right. LibreOffice can generate purportedly accessible pdfs, but to completely vet it I need to buy Acrobat Pro. Thankfully, between this course's clear instruction in both text and video, I was able to learn what I needed without buying a subscription, but it's something I'll have to consider in the future.

Again, this course was well-structured for the busy adult learner who just needs to learn the content without any head games when it comes to test time.