“Fuck Yeah, Accessibility” is primarily dedicated to archiving information about ways to make your tumblr more accessible to people with various disabilities. Secondarily, it focuses more broadly on supporting internet-based efforts to empower people with disabilities. It is not the place to come when you want to make your theme prettier. Messages asking for advice or favors that don’t line up with the two goal of FYA will be deleted.

Go to “settings”

No, tumblr is sadly not an accessible website. Some of its key functions are completely inaccessible to screen readers (including the javascript drop-down menus that show you your secondary blogs), it automatically uses all of the commentary for a photo as alt text, and it’s set up to make it very hard for individual users to filter out content that might trigger their migraines/epilepsy/PTSD/addiction/etc. 

Tumblr is a very good website for communicating publicly, and so there’s a strong disability community on tumblr, but it usually comes at a cost.

Also this project sounds unbelievably interesting!

-Devyn

You really should not need paragraphs for your alt text. It’s supposed to be very short, no more than one sentence, really. Image descriptions that are added below the picture can be longer if you want them to be, but for the “image description” box that tumblr gives you the option of filling out? Just quickly say what the purpose of the picture is.

-Devyn

Go to settings and then click “allow anonymous questions.” Ta-da? If it’s still not working after that, I’m not really sure what’s wrong.

-Devyn

kavitiya:

The new customization page is horrid, it doesn’t work on any of my computers >.< But I have found that if you go here  http://www.tumblr.com/customize-classic/
You can edit your tumblr theme the old way.

(submitted by kantala)

thank you so much for this!!! ~kavitiya

I was trying to figure this out, and this is what I’ve managed so far as a response to your question:

The setup of photosets does seem to have captions for each photo in the photoset, which means you could probably describe each photo individually, which would imply that the alt text is actually accessible, if people provide individual captions for each individual photo. (This is a concern when reblogging photosets, and I expect it would take looking at the code source to figure out whether captions were provided when the photoset was initially uploaded, and there doesn’t seem to be any way to edit it). But the way they show up on the dashboard when you click them to look at the stream, is really not very accessible.

~kavitiya

metapianycist:

All you need to install is either Stylish for Firefox or Chrome, or Greasemonkey for Firefox. After you’ve installed Stylish or Greasemonkey, click the “Install with stylish” button (or the “install as a user script” link) to install my user style that hides Tumblr Radar.

oh wow, this is so so awesome. thank you so much for pointing this out, this really helps. i was wondering about that for a while.

~kavitiya

Pause! Pause! Pause! by Atakayam (one of my facebook friends linked to it—but I don’t remember who D:). Anyway! Hopefully this will be helpful for chrome users who don’t want to see moving gifs/automatic animation. Some reviewers do warn that it made their computers operate more slowly, though.

To install extensions in your chrome browser:

1. click “add to chrome” on the extension’s page
2. Click “install” on the pop-up window
3. If the bottom of your browser prompts you, click “continue”
4. Done!

After installing, you’ll be taken to your extensions page (which you can always access by clicking on the wrench icon, going to “tools” and selecting “extensions”), where you can disable/uninstall any of your extensions, or allow them to be used in incognito.

kavitiya:

here are a bunch of scripts / extensions, accessibility guidelines, and the like that may make tumblr a better / more accessible / more pleasant experience.

of course, coding and installing extensions and scripts in the first place isn’t the most accessible thing, so … :(

i’m sorry if my instructions are too vague or complicated or something. also, if you don’t have the spoons or energy to do all these things, that is okay, too. these are just guidelines for things you can do, if you are able to.

several of the accessibility guidelines apply across the internet, too.

also, the scripts and extensions linked here do have various accessibility problems as well (in addition to their being scripts and extensions, um). 

some of these tools just have to do with design and stuff and aren’t really about accessibility.

the following blogs — fuckyeahaccessibility, fuckyeahtriggerwarnings and codeman38 all have lots of posts about accessibility related technical suggestions and guidelines. fuckyeahimagedescriptions has image posts with descriptions.

my tech and accessibility tags here may also be useful.

if you can or want to please feel free to make any suggestions. also, feel free to reblog and add suggestions, or signal boost / distribute / respectfully change / etc.

i will keep trying to update this post; it’s constantly under construction. this will never be a complete or even partially complete post —

---

» To increase font text, click the ctrl and + keys on windows, and the command and + keys on macs. To decrease font text, click the ctrl and - keys on windows, and the command and - keys on macs. I’m not sure about other operating systems..

» When you post links, specify a title in addition to the name and the url. One surprisingly good thing about tumblr that I haven’t seen much elsewhere is that the popup that allows you to specify the url and name for a link includes a title field as well. In the title field, put a description of some kind as to what the link is. (I think this helps for screenreaders? I am not sure). If you’re specifying links via html, the code is <a title=”description of the link” href=”link with the http goes here”>link name</a>

» When writing or editing html, there are ways to format text that are more accessible. For examples: instead of using <i> and </i> to mark italic text, use <em> and </em> and instead of using <b> and </b> to mark bold text, use <strong> and </strong> and instead of using <s> and </s> to mark struck-out text, use <del> and </del>

» Do not set your RSS feeds anywhere to “snippets only”. The accessibility problems with this are detailed here. Also, maybe sure the RSS / Subscribe link is clearly demarcated on your blog— this is really important for people who use RSS readers to read blogs.

» Do not put animated gifs in the sidebar(s), header, footer, or any other general place of your theme of your blog that will show up on every single page / post, etc. This presents serious accessibility issues and is very difficult to deal with.

» Do not have music or videos that automatically play every time your blog or a page of or post on your blog is loaded. At least have a player where the viewer can choose to press “play” or something.

» Tumblr’s mobile view may be a more accessible format to view posts or blogs in; though the reblog/ like and so on controls don’t appear for mobile view pages in non-mobile browsers (and I’m not sure if they do appear in mobile browsers, so..), which is messed up. But basically, you can tack on /mobile to the end of any tumblr post or page url and it should display in a cleaner, mobile format. 

» When usericons (portrait urls / avatars / userpics) show up in posts and themes, they are almost always without alt text descriptions. This is an accessibility issue, and if you can, try to minimize the usage of these non-accessible icons. (There are ways to make them more accessible, but tumblr’s interface doesn’t allow for that much or at all). For example, in replies to replies on posts, often usericons show up— try to have these unenabled, if you can, so that just the username and the text will show up. (With the extension Missing E, discussed later, you can do this).

» If you’re going to post screenshots of things, include descriptions (of all the text and images and whatever else in the screenshot).

» When you post images, include descriptions!

» Here is a guide for a more accessible way to post images since tumblr’s photo post format is so inaccessible. It is important to include descriptions of images in the alt text (important for screenreaders and slow connections and a lot of other reasons). Tumblr’s photo post tool doesn’t allow this, which is… yeah, really messed up. This post details a more accessible way to reblog images that have already been posted or reblogged as photo posts.

» This post details how to add descriptions in the alt text of header images in your tumblr theme, if you have them and they are not specified through css.

» Having links that are only distinguishable from the rest of your text by colour makes your blog really inaccessible for colourblind people. A good way to fix this problem is to make sure links are underlined in your theme — and not just on hovering, but by default. If links are not underlined by default in your theme, you can add css that will make sure that they are — most themes allow for custom css, which you can fill in by entering code in the custom css box under the advanced tab on the customize page. The css code to add is as follows: a { text-decoration: underline !important }

» Adblock Plus can be really, really useful, as it gets rid of all advertisements everywhere on the internet, and ones that still show up can be added manually to the list of ads to be blocked.

» In google chrome, greasemonkey is installed by default, which is an application that will allow you to download and install many of the scripts linked here, as well as a lot of other userscripts that may enhance internet experience in general. In firefox, you need to install greasemonkey before you can install the scripts. I’m not sure if greasemonkey is applicable to other browsers… 

» This is a post that discusses how to stop animated gifs in firefox. Also, in firefox and internet explorer, pressing the ESC key will pause an animated gif — this post talks about that, and also discusses an extension for google chrome that will allow the same thing. The extension is here. This post explains how to keep animated gifs from animating in the first place in opera.

» Missing E is an extension for firefox, google chrome and safari that may improve the experience of using tumblr in many ways — its features are discussed here. 

» Tumblr H8 (greasemonkey script for firefox, extension for chrome) affixes a “h8” button to every post on the dashboard, and if you click it, that post is hidden along with future reblogs of it. The extension doesn’t always work perfectly, but it may be useful. You can still click on the h8ed post notification to see the post.

» A script to hide the tumblr radar.

» Disqus comments allows for a potentially less restrictive, more useful way of commenting on various blogging platforms, including tumblr.

» This post discusses a script you can use to hide your follower count on tumblr.

» Tumblr Savior is an extension that allows you to hide posts on certain subjects or tagged with certain things or that contain certain keywords, etc, that you don’t want to view. You can still click on the hidden post notification (as with tumblr h8) if you want to view the post.

» Tumblr for Chrome is basically the sharing bookmarklet made into an icon that may look prettier or something (but also may be more inaccessible because of the lack of text, though the text pops up in the title when you hover over the icon). 

» The Goodies page in general isn’t accessible anymore if you have endless scrolling enabled, so, yeah, link!

» The tumblr block page — in so far as the block function actually works (which it doesn’t enough), this is a page where you can manage the various blogs you’ve blocked and report them for spam or harassment, and stuff.

» The official tumblr themes page isn’t exactly necessarily intuitively accessible either, so, um, yeah. This may be an easier way to browse through the themes listed and pick one for your blog(s). 

This is a compilation of various things, really—

I’m going to be updating this periodically, but this post is linked to in the pages section of this blog, so, for more updated versions, go there! thank you.

kavitiya:

kavitiya:

which would document (make a directory of?) accessible tumblr themes with pros and cons, point out unaccessible features in various tumblr themes, suggest ways to fix the unaccessible features (code and customization, if possible), and so on.

i really want to do this and am hoping it will motivate me to work more on my own themes too, but i really do need help. probably lots of help.

reblogging again because i really would need help in order to be able to start this up, could you please signal boost this?

Signal boost! I’ll probably reblog the shit out of this when it’s created.

Pretty much anyone who has a hard time processing spoken language will benefit from this.

Yeah, the second one. Alt text is supposed to be pretty short and informative, not necessarily descriptive. Something like “fanart” is fine; something that’s three sentences long probably isn’t. 

Image descriptions below the actual picture, though, are helpful for interpreting the image beyond just knowing what its general purpose is, so longer descriptions that talk about color, detail, references, etc. are helpful for screen-reader users and sighted people who’re colorblind or have trouble processing visual information.

If you have an image in your header, it’s probably inaccessible unless you’ve edited the CSS on your tumblr theme. Fortunately, this is totally possible to do (well, in chrome):

Go to your webpage and right click on the header image that you want to describe. In the drop-down menu that appears, select “inspect element,” which will open up a window full of code at the bottom of your screen. The tag that determines what your header image looks like will be highlighted; it begins with “<img src=…>.” Copy it and click “customize” at the top, right-hand corner of your blog. Open up the “theme” menu at the top, and then choose “use custom HTML.” You can find the code for your header by hitting control-f and searching for the original tag that you copied.

To add your image description, copy and paste it into the tag like this: alt=”[short image description here]”. There should be spaces on either side of this new text. Then just save and close, and your blog will be updated. To check and see, go back to your blog, right click on the header image, and choose “inspect element” again. You should be able to see the alt text in the highlighted area.

When I described the Cheshire Cat picture at the top of my own blog, here’s what the “img” tag ended up looking like:

[Image: a screencap of Devyn’s personal blog with a window containing code at the bottom. The “img” tag reads: <img src=”http://static.tumblr.com/1mpnt4p/H7klndr11/cheshire2.jpg” class=”headerimage” alt=”Black and white drawing of the Cheshire Cat looking down upon Alice”>, and the text that describes the image has an arrow that says “text I added in.”]