Fuck Yeah, Accessibility

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)

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--

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?

The ALT Tag is intended to communicate text as an alternative for the image. This is very different from how many users create Image Descriptions on Tumblr. For example, an image description might say “A yellow triangle with an exclamation point in the center,” but the ALT Tag should really read, “Warning.” The subtle difference is that communicating the idea is more important than communicating the visual.

In light of this, the best solution to the problem is better writing on the part of the blogger. Unless an image is purely decorative, any text that follows it should indicate the relevance of the image. Why is this image important to your post? If Tumblr lost all its image data in a crash, would this post still make sense to a sighted user? Most posts don’t pass this test, even with Image Descriptions.

Tumblr’s Photo upload tool is inherently unfriendly to screen readers. Even if you include an image description, Tumblr is set up in such a way that it will read ALL the caption text TWICE. This is particularly bad when images come with long text posts beneath them. Additionally these descriptions are easily lost after several reblogs, rendering them useless and adding confusion.

Instead, use Tumblr’s Text tool. Why? Because with the Text tool you can provide actual HTML friendly image descriptions that screen readers will love. And with every reblog, the description will stick with the image. No need for crowd sourced solutions. Here’s how to do it.

Select the “+ Upload photo” option in the upper left hand corner. This will open your browser’s image upload dialogue. Select the image and choose OK. This will add the image into the post area. 

Now highlight the image you’ve uploaded and select the “Insert/edit image” tool. This will open a small image properties window. 

Now describe your image in the image description field. Remember to keep your description short. Less than 90 characters. If there are additional nuances you wish to highlight about the image, you should cover them in the text post following the image. Remember to describe only the facts of the image. Don’t include your opinions, save those for the text post following the image.

You’ve now uploaded an image that most screen readers will have an easy time handling.

Additional Benefits With This Method:

You can post multiple images in one post and avoid the horrible Flash photo slideshow. 

Problems With This Method:

You lose support for high quality images. This can be overcome by linking to the image hosted somewhere else that supports high quality images, like Flickr. 

This also complicates content source links. If you’re afraid of your images being stolen, try including watermarks and linking each image to your personal portfolio. However even with a regular image post, you risk people stealing your content. 

Comments, Thoughts, Concerns or Improvements?