101 Wednesday - Web Accessibilty

The purpose of the session is to share knowledge on issues of web accessibility. We would like to make this site easy to negotiate for all of its community and thus hope for feedback on ease of navigation / use / loading for everyone. Anyone who has questions, answers, or resources to share is encouraged to join the discussion. Since our goal is to remain as easy and user-friendly as possible, we ask that the technically experienced both avoid jargon and respect the different priorities of those who don't want to change their Internet habits. The purpose is to improve websites, not readers' tech skills. Answers, suggestions and links to resources will be collected and organized into a 101 guideline that will be permanently available here.

We would like to get the ball rolling by asking a number of questions.

1. Are there any parts of the website that are difficult to negotiate for those who are using a screen reader?


2. Are there any parts of the website that could be coded/designed in a way that would be more friendly to those using screen readers?


3. Would members of our community prefer that long posts were partially hidden "behind the fold", kept as they are now or continued (by hyperlink) on a sibling site?


4. Do any of our readers find parts of the site difficult to read/negotiate? If so can they suggestions as to what could be done to make it easier/more friendly?


5. In your opinion what makes a website easy to use / easy to read?


6. We would appreciate feedback if the embedded poll in the previous posting didn't work for you.

UPDATE: FEEDBACK REQUESTED

We are trying out three different spacing widths for the Blogs of the Slacktiverse section of the sidebar.
Section 1 begins with Aaaaaaaaaargh (dispensinggrace)
Section 2 begins with CarbyB
Section 3 begins with hagrus
Section 4 begins with Laiima

Let us know which spacing is easiest for you to read.


NOTE: Our primary concern is that there were members of our community who found the original spacing (see Section 4) difficult to read. The goal is find the design easiest to read not the design which is most attractive.

 

---

The Board Administration Team
(hapax, Kit Whitfield and mmy)



Comments

[Froborr]

I have an opinion on only one question:

3) I strongly prefer not hiding parts of posts, I find that "behind the fold" thing annoying.

[Phoenix]

What Froborr said. I don't like behind the fold either.

I don't have a lot of input on the rest of this - overall I think the site is pretty accessible and easy to read. Good text size, good formatting style, etc.

[MercuryBlue]

Helpful links: Nerdy PSA: Accessibility Tips for the Casual Coder and that post with the code for highlight-to-read screenreader-skippable text.

[Amaryllis]

Me three, as the kids used to say.

I don't have any special issues, I read this blog on a standard monitor. My aging eyes appreciate the readable font and black-on-white layout, but I understand that there are those who feel otherwise.

I prefer a site that's not more cluttered with extra "stuff" than it has to be. I like the simple look of this one.

[Hashmir]

Also against the fold, but I'm a 21-year-old male with perfectly fine eyesight, no mobility problems, a powerful desktop machine and fast internet -- so I'll be fine regardless of what we end up doing.

Incidentally, as an aspiring developer (web and otherwise), I will be greatly interested to see what people might have trouble with that I haven't thought about before.

[Mmy]

I really value feedback on what makes the site pleasant to read from our community. There are many tweaks that web design manuals suggest that I am not going to try if they don't make things better for people and instead make them less enjoyable. I don't want to "do code" simply for the sake of doing coding.

[Carrie]

I like behind the fold for pretty potentially triggering stuff, but I've already expressed that opinion and I think that issue is already resolved. Otherwise, I do not like behind the fold very much.

Simplicity is key, I think. This layout is almost spartan, but I sort of like it that way. It's clean and easy to read, though I think that the "Blogs of the Slacktiverse" deal on the sidebar has everything slightly too close together. But I'm being really nitpicky.

I'm sort of having a tiff with non-monotype fonts with serifs, so part of me wants to suggest that the font be changed to Helvetica, but that is really nitpicky.

[MercuryBlue]

...ten gets you one this comment appears before the one I posted with links to resources on screenreader accessibility.


For reasons known only to TypePad MercuryBlue's previous comment had been put in the spambox. TBAT retrieved it, dusted it off, and put it back into the comment thread.

[Mmy]

@Carrie: I'm sort of having a tiff with non-monotype fonts with serifs, so part of me wants to suggest that the font be changed to Helvetica, but that is really nitpicky.

I personally would prefer that font however in the early days of The Slacktiverse my attempts to introduce sans serif font was not greeted with enthusiasm.

[Phoenix]

@Hashmir, you're only 21?! Good grief. There is a very high concentration of people on this board who are extremely young, extremely wise, and a heck of a lot better at expressing very well-thought out opinions than I was in my earlier years. And I was pretty good! :-P

Color me impressed.

[Samantha C]

I actually like the idea of posts going partially behind a cut, just because it de-clutters and makes it easier to scroll. I'd leave three or four paragraphs open and the rest just to click to open. That way, if I'm reading comments on a post from 3 or 4 days ago, I don't have to scroll past the entire length of every post that was made since it went up. And if I'm not interested in the most recent post, something behind a cut makes it harder to get irritated with how long I'm scrolling just to see if I missed anything, and easier to make sure all the new posts since I last checked in are visible.

Especially for a community that regularly continues to discuss posts for weeks after their posting date, I think it'd help to limit how much space each post takes up on the homepage.

[Ms. Greyduck]

I would like it if the "Comments" button/link text could be larger or a button so I could find it better. I would also like it if it were possible to have the left side of the website a fixed width as well as the right side bar so when I change browser size (or put it on the big monitor so I can read it better) I don't lose my place because text shifts wildly up and down. As another nitpick item, the blue "Posted by: Avatar" text is kinda hard for me to read. (note: just need new glasses but they cost too much, not using a screen reader but I do use a second monitor)

It might be nice if older articles could go "behind the fold" so if I want to navigate down to one from last week, it wouldn't take me so long scrolling. By older, I'm thinking 7 days old and it goes behind the fold.

[MercuryBlue]

Thanks, TBAT.

Seconding Ms. Greyduck on putting older articles and only older articles behind the fold, with the caveat that if that's too much trouble for TBAT, then it shouldn't be done.

[Anonymous Al]

When I first tried to post this comment, I didn't enter my email address and was presented with a captcha, which is definitely an accessibility problem. Audio captchas could be implemented, but they would be inaccessible to someone who's deafblind. I've seen alternative challenge-response tests used by other sites, but I'm not sure how effective they are vs. captchas. Would it be possible for TBAT to consider adopting an alternative system?

Another accessibility improvement would be making the "Blogs of the Slacktiverse" header an HTML heading. One of the great things about this site is that most headers are actual headings, which makes navigating the site with a screen reader very efficient. Since this section isn't, however, it's easy to completely miss it if navigating by heading.

I really appreciate this community's willingness to ensure web accessibility on the site. It's been my experience that many people seem to be indifferent or hostile towards web accessibility concerns. I also appreciate the fact that users of assistive technologies are actually being consulted, as I've also noticed that many have misconceptions about web accessibility. Many web developers seem to think that making their pages accessible means sacrificing design or functionality, which is certainly not the case.

[Laiima]

Please, no Helvetica, or other sans serif fonts. They make my brain hurt.

[zigforas]

I actually like the idea of posts going partially behind a cut, just because it de-clutters and makes it easier to scroll. I'd leave three or four paragraphs open and the rest just to click to open. That way, if I'm reading comments on a post from 3 or 4 days ago, I don't have to scroll past the entire length of every post that was made since it went up. And if I'm not interested in the most recent post, something behind a cut makes it harder to get irritated with how long I'm scrolling just to see if I missed anything, and easier to make sure all the new posts since I last checked in are visible.

I second what Samantha C said.

[MaryKaye]

For various reasons I send and receive email as plain text, and do not use the Windows mail interface. As a result any Web site that attempts to put me into an email sending mode simply fails.

A lot of web sites do, nonetheless, succeed in getting me to send "mail"--the petition web site does it, I don't know how. Maybe one of their techniques could be used here?

My biggest problem with this site is knowing when a discussion is over. If a new thread has a hot discussion it pushes mentions of earlier ones off of the "recent" list very rapidly, and then I have to go through contortions to find out if there are new messages on old threads. (Get into the old post, go to the *second* page of comments, edit the URL to refer to the last page of comments.) I don't know if there is any way to get one-button access to the last page of comments, but boy, that would be helpful. Alternatively, "these threads have had activity within the last 24 hours" would be great--if it's technically feasible.

[interleaper]

Generally it's possible to modify how your browser handles mailto: links. In Firefox 3.6, it's Edit > Preferences > Applications; find mailto in the list and select an option from the list. Gmail and Yahoo are on the list of options or you can set your own preferred application. Apparently in Firefox 5, it's Tools > Options > Applications.

This doesn't take away from the accessibility issue-- I only mention this in case it helps anyone in the short term.

[Nenya]

Anonymous Al: I'm really curious now--how do people who are deafblind access the Internet? I ask because I'm nearly deaf, and I rely hugely on my eyesight. I know a lot of people who are blind or have sight difficulties use audio technology (screenreaders etc). I'm just trying to imagine how I'd use the Internet if I couldn't compensate for my hearing by being able to read text or whatever. Braille and sign language don't seem like they would work on a computer screen.

Maybe I need to Google!

On the main topic: in general, I adore the plain, simple, clean design of the site as we've had it for the last couple of years. It's restful to me after al the gazillion sites with fifteen different ad sections and five different sidebars (OK, I exaggerate, but not by much). FWIW I'm nearsighted but have glasses sufficient to my needs, so visually, eyestrain from a long viewing session is about the worst ofvisua my problems.

Can I put in a vote, though, for including transcripts (or links to lyrics) when there are videos in posts, whenever possible? Especially if the video contains information important to the content of the post. "Congressman Carpathia said this today about same-sex marriage: [video]" is extremely frustrating when you know you probably won't be able to understand one word in five of what zie said. :( (I know transcripts aren't always available, but when they are, it's wonderful.)

[Pthalo]

The deafblind can access the internet with something called a refershable braille display. The computer translates the text of the website into braille code, and there is a device attached to their computer which has little pins that move into the shapes of the braille letters. The user can alter the speed at which they read. These devices tend to be quite expensive.

Also, machine braille is harder to read than braille transcribed by a person who knows Braille. Braille is a code, like the English alphabet, but it is a very complex code with a lot of rules to save space, because one braille letter is a lot larger than a printed letter. So there are braille letters that represent common groups of letters like "th" and "and" and "ing". These vary from language to language based on that language's characteristics -- German Braille has a special letter for "sch" which isn't needed in English. Hungarian Braille has a letter for "sz" and "ty" which aren't needed in English or German. In English Braille, there is also a character called dot 5 which changes the character that comes after it. An m by itself is an m, but "dot-5 m" represents "mother". So a word like "mothers" is written in three letters: dot-5, m, s. But dot-5 m for mother is only used where it is pronounced like the word "mother". the "mother" in chemotherapy is not written as "ch" + "e" + "dot 5" + "mother" + a + p + y. It is written as "ch" "e" "m" "o" "the" "r" "a" "p" "y". This is generally obvious to a human writing something in Braille but not to a machine.

There's another expensive device called a braille printer which can print text in Braille. This text can be prepared on a computer by a person who knows Braille or there are some programs to automatically translate a webpage into Braille. This suffers from the same machine braille translation problems that the refreshable display has, but it is better than nothing.

Not all deafblind people are fully deaf and fully blind. Many of them are legally blind, and/or have varying degrees of hearing loss. Depending on the extent of the hearing/vision loss, they may use magnifying programs on a large monitor in connection with text-to-speech to access the internet.

They may still have problems with capchas due to their disabilities -- they are designed to be hard to read, after all.

Embedded videos tend to be inaccessible to the blind, the deaf, people in rural areas who do not have access to broadband internet, and people who only access the internet in internet cafés and libraries, all for different reasons. For a blind person, the best solution to a video is a described video: there is a voice over explaining relevant visual information that is happening on screen. For the deaf, the best solution is subtitles or closed captioning, or an audio transcript. For the deafblind, the best solution is a printed transcript of the video that includes the text and a description of important visual things that happen in the video (this solution works for the sighted deaf and the hearing blind as well). People without access to broadband internet are usually reluctant to spend an hour downloading a 5 minute youtube video and also appreciate just being able to read a transcription of what was said in the video. And people in internet cafés/libraries may not be able to turn the sound on, so they benefit from captions/subtitles/transcripts as well.

My personal preference (having CAPD which makes me effectively Hard of hearing where watching and understanding videos on the internet is concerned) is for videos to either be subtitled or transcribed. Youtube has this neat thing where they autotranscribe videos. It is fun for laughs, but the error rate is multiple per sentence. You can test this by picking any youtube video at random, turning the sound off and autocaptions on.

[Pthalo]

"automatically translate a webpage intro braille" what i meant there was "a webpage" or "a text document" or any sort of text, really. And it's a printer that prints onto paper, like a regular printer. But the paper it takes is a thicker (and more expensive) paper, so that the letters will keep their shape over several reads and won't be smushed so quickly. Reading smushed braille is possible for talented readers of Braille who have been doing it for years, but for people who have lost their sight more recently and are still learning Braille, it can be quite a challenge.

I learned Braille when I was 12, because I found the Braille alphabet on one of my read throughs of the dictionary, and I was the sort of 12 year old who thought about things like "I'm probably going to start losing my vision when I'm in my fourties and require bifocals. By the time I'm in my 70s or 80s I may have trouble reading anything at all. Reading is my favourite pass time, so I should learn Braille now so that by the time I am that old, I won't have any downtime while I'm learning to read a new alphabet with my fingers."

I learned ASL when I was 11 for similar reasons -- I knew that I had to speak louder around my grandparents and figured that it would be so much easier if I didn't have to learn a new language when I was in my 70s. I had other reasons (none involving actually knowing any deaf people), but that definitely part of it.

So, today I have about 15 years of experience knowing Braille. I can read with my eyes closed and all that. I have a slate and stylus (a way of writing Braille by hand) that I play with now and then, and have used it to write letters to blind friends. I wish more people knew Braille, because it is free to send letters in Braille internationally and I like free postage. (The reason for this is that Braille supplies tend to be very heavy and if postage weren't free, and Braille books tend to be much more expensive than printed ones. If blind people had to pay for postage on these things, they would be even less able to afford them. To give you an example, my Braille copy of a Dr. Suess book is over 50 pages long, and the pages are bigger and thicker than most books (about A4 sized).

Despite all of this experience, I can't read smushed Braille myself. And I read very slowly with my fingers. I'm much better at reading Braille with my eyes or writing it.

[Pthalo]

Another group that benefits from subtitles/captions/transcriptions: non native speakers of English. It is generally much easier to read a foreign language than to understand it spoken. With reading, you have time to process things, unknown words are available to be looked up in dictionaries, etc. Their English may be very good, but they may not be familiar with the accent used by the speaker, or s/he may speak too quickly. If there's any background noise, comprehension will go down. Having subtitles in English available means that they can read along as they listen, and this improves comprehension considerably.

[Lonespark]

"Congressman Carpathia said this today about same-sex marriage: [video]" is extremely frustrating when you know you probably won't be able to understand one word in five of what zie said. :( (I know transcripts aren't always available, but when they are, it's wonderful.)

Yeah, this.

[Cat Meadors]

Section 508 doesn't apply to private websites, but it's why I learned most of what I know about accessibility. (Also I got to take a really cool class taught by a guy who was blind and dag, those screenreaders read *fast*.)

Anyway, they have a really good collection of resources: Techtools and somewhere in there you can download a checklist that helps you determine if your site is accessible or not in a nicely methodical way.

[Pthalo]

Transcribing videos can be a lot of work -- you have to replay the video several times to make sure you've typed it all, but it can be good typing practice if you're looking to improve your typing speeds. When I was 13, I finally managed to get off my plateau of 40 wpm to 70 wpm just by trying to type song lyrics while listening to the radio. Whenever it got too fast for me, I just hit return and the picked up whereever they were. When I heard the opening bars of a song I would do a quick "ctrl f" in my text file to find the song in progress and I'd insert my cursor at the end of the first line (the place where I'd missed). After a few listens, I'd have my song lyrics. This is the fastest method I found for transcribing things. I currently type 120 wpm, but when I'm transcribing a speech, it can take me four listens through. When I was typing 80 wpm, it would take me about twice as long. So for five minutes of constant speech, it would take a good typist about 20 minutes of work, or a poor typist 40-60 minutes. For a video with less speech, it will take less time because you can keep typing what you remember in the gaps between speech. Though, I am not the best person for this job because of my own hearing issues. On one transcription (in Hungarian), I wrote "each patient received a beer" (minden beteg sört kapott) instead of "additionally, each patient received" (minden beteg sőt kapott). Since I was taking dictation and the person was looking over my shoulder to make sure I typed everything correctly, this got fixed quickly, but there was a lot of laughter.

Anyway, there are hearing people in the community who would like to volunteer to practice their typing make videos accessible as they are posted, that would be cool. It could be done by whoever sees a post with a non subtitled video first and has some time on their hands, they leave a comment saying they've got it so that their efforts aren't reduplicated and when they're done they could post the transcript it in a comment. Shorter videos shouldn't take more than an hour. We're a large enough community that there's bound to be someone who has some spare time at any given moment.

If you're the person posting the video, it would only take a few minutes of googling to discover whether the video is already transcribed elsewhere a provide a link to that transcription (something like a president's speech definitely should be already have an official transcription somewhere). And I've noticed that on some websites, without telling you that it's a transcription, they will write the article using almost the same words as the video -- a quick listen to the video and a scan of the article will be enough to figure this out. Then you could write "this video isn't captioned, but the text of the article contains all the same information almost word for word." If you're posting a link to a youtube music video, be sure to post the name of the song and artist so interested people can google for lyrics (and/or a link to the lyrics)

[Hummingwolf]

As someone with a dial-up connection who dislikes the need to open an extra page when a post is continued "behind the fold", I much prefer posts where nothing is hidden unless it is particularly triggering. (I don't have a problem with cuts on LiveJournal or Dreamwidth, but TypePad pages take too long to load with frequent spontaneous reloading and I'm not sure there's anything TBAT could do about that.)

I understand that transcribing videos can be quite difficult, but I would appreciate a summary and direct quotes of some of the more important and/or entertaining bits.

And as someone with frequent migraines who tends to try to distract herself during the milder ones, I like the current layout. It doesn't trigger a headache or make an existing headache worse. The links under "Blogs of the Slacktiverse" have too little space between them for me to read all at once, but since I never do try to read them all at once, that isn't a problem for me.

[Mmy]

I really appreciate all the comments on this thread. I have already gotten some ideas as to what people would like to have changed. Any alterations will be introduced on a "do you like this" basis.


Feedback requested:

I have attempted to get TypePad to see "Blogs of the Slacktiverse" as a header. Did it work?

I have put extra spaces between the first several Blogs of the Slacktiverse links so readers can see what it would look like with that spacing. Should the rest of that list be spaced that way?

[Anonymous Al]

@Mmy: The header is now properly recognized. Thanks.

[Froborr]

I have put extra spaces between the first several Blogs of the Slacktiverse links so readers can see what it would look like with that spacing. Should the rest of that list be spaced that way?

I think the extra spaces look a lot better.

[Timothy (TRiG)]

I think every blog should provide an archive list. Just a list of post titles and dates, with a link to each post. It makes it much easier to scan back for a post you have in mind. So far, the only blog I know which does this is Jesus and Mo.

TRiG.

[Ross]

I'd like to chime in and mention that there are a number of subtitle and captioning formats which have been developed over the years to provide captioning in a better and more flexible way than just "render the subtitles right onto the video so that they can't be turned off and will be distorted if the video is resized or recompressed. So use those. Don't use hardsubs.

I'm really impressed by the basic close captioning system used on TV: unlike, say, DVD subtitles (which are images), the captions are *just plain ordinary text*, and could be, for example, extracted from the video stream and played back on a separate device, rescaled, or even mechanically translated

----

I think extra space between the slactiblogs is good, but that may be too much extra. Maybe about half to two-thirds as much?

[Froborr]

@Ross: Years ago, I helped out a group trying to translate the trailer for Xenosaga II from Japanese to English--my job was converting the raw translation into more idiomatic English and doing timing. We worked with a plug-in for Windows Media Player that worked very much like closed captioning, and used a plain text file with a very small amount of code to indicate on/off times for each line. We could set it to default to a particular font, size, and color (size measured in percentage of height of the video), but the user could override those settings. Pretty cool stuff, and that was 7 years ago, so I'm sure technology has advanced.

On migraines: Thank you muchly for not using significant amounts of yellow, orange, or lighter browns on this page. Pandagon's layout (to give an example), while fine normally, is literally painful to look at when I have a migraine.

[Zigforas]

Alternatively, "these threads have had activity within the last 24 hours" would be great--if it's technically feasible.

Second what MaryKaye said.

[Ruby]

Mmy--I am liking the spacing between the first few Slacktiblogs--makes it much easier to read.

Also weighing in as against the folds...at least for the first couple of new posts.

[Froborr]

Yeah, if you can get 508 compliant you're probably about 90% or more of the way to maximally accessible for everyone (except for language barriers, which are a whole nother matter). I work in online documentation for a U.S. government agency now, and my experience has been that 508 compliance is often hard to get to, but easy to stay in once you're there.

[Mmy]

UPDATE: FEEDBACK REQUESTED


We are trying out three different spacing widths for the Blogs of the Slacktiverse section of the sidebar.

Section 1 begins with Aaaaaaaaaargh (dispensinggrace)
Section 2 begins with CarbyB
Section 3 begins with hagrus
Section 4 begins with Laiima

Let us know which spacing is easiest for you to read.

NOTE: Our primary concern is that there were members of our community who found the original spacing (see Section 4) difficult to read. The goal is find the design easiest to read not the design which is most attractive.

[Froborr]

All four sections look the same to me... (IE 7.0 on Windows XP)

[Deird, who has opinions]

Mmy, I think the first two sections are the easiest to read.

[Froborr]

For the record, I don't mean they all look equally readable, I mean they all look *exactly the same*

[Ruby]

First or fourth sections are best, IMO.

[MercuryBlue]

Four is fine but I defer to those who find it difficult to read. One is fine. Three is too far apart. Two is unevenly spaced, so no.

[Lila]

Re the sidebar: I like 1 best, 2 is fine, 3 is too widely spaced and 4 is too closely spaced.

I am nearsighted and have astigmatism. I wear progressive-lens bifocals, but since they don't have a usable area that's the right focal length for my computer screen, I take off my glasses to use the computer.

[Hummingwolf]

First and second sections are most readable for me. Third one is too far apart. On my computer/browser, section two's spacing looks identical to the spacing of the "Recent comments" list. Is that true for others?

Thank you for your work making the blog accessible!

[Indiana Joe]

I'm partial to sticking longer (or older) articles behind the fold. I have an idiosyncratic browsing style that involves opening a bunch of articles or pages at once, and letting them all download while I read the first. I prefer sidebar style 2, with 1 a close second. 3 is too wide and 4 too close.

[Laiima]

I think the first 2 options are more readable (although I was personally fine with option #4). #3 is too widely-spaced for me.

[Caryb]

This Carbyb gent seems interesting. :P

Anyway- 1 and 2 work best, although I think two is a little wide. Three is too wide, and 4 is too close together.

[J. Random Scribbler]

On question three, if you do decide to hide parts of long posts, I highly recommend keeping the hidden content "behind the fold" on the same site rather than some sort of sibling site. This is a reliability issue; depending on two sites doubles the chance of failure, especially in the long run.

As for question five, I think a simple, uncluttered design makes a site much easier to use, and it makes it work better with assistive technologies as well. This site is a good example of that; two simple columns, no weird color contrasts, no motion. (As long as you turn off the flash ads, anyway.)

Re the spacing options on the blog listing, the first two sections are much better than the old style. Section three is wide enough to be a problem on smaller monitors, by requiring extra scrolling.

[Ms. Greyduck]

I find 2 and 3 easiest to read, 2 being perfectly all right and 3 simply being easier for me to navigate.

[Caretaker of Cats]

Re: Transcribing videos

I like the idea of volunteering to transcribe videos. Since I've never tried to transcribe a video and include visual descriptions, perhaps we could create an example template? Specifically, does one place visual descriptions in brackets or use some other way to indicate what is description and what is transcribed speech? What works best with a screen reader and what is irritating?

[Anonymous Al]

I don't have much of an issue with visual descriptions in brackets. In context, I don't find distinguishing between descriptions and text much of a problem, and it's possible to just check for the brackets. Some people might have difficulty with this, however.

Bracketed commentary is a problem, since it can be difficult figuring out what's speech and what's commentary. A solution to this would be enclosing the speech in block quotes or beginning a comment with "Comment:" or something similar.