EASI's WEBINAR SERIES ON SOCIAL MEDIA

---

 

TWITTER AND ITS ACCESSIBLE ISSUES AND SOLUTIONS

(Transcription)

Presenter:

Dennis Lambrée

 Hello. I'm Marisol from EASI and I want to welcome everyone to the webinar on Twitter and its accessible issues. Our presenter Dennis Lembrée. Now I'm going to turn the mic over to Norm Coombs.

 We have a free public webinar coming up on February 10th on the non‑visual desktop access browser, screen reader. So there is a screen reader that's open source that used to be pretty primitive but it's getting more and more sophisticated every time. And I thought people might like to know about it and it's going to be on Wednesday, February 10th. And the time is going to be 1 o'clock Pacific, 2 Mountain, 3 Central, 4 Eastern. A presenter is from Australia. And he's kind enough to sort of do this in the middle of the night.

 Second announcement is our webinar part of the series next week on Facebook is going to be postponed. The presenters were unable to make it. And I'm getting some other presenters. Got some pretty interesting ideas cooking. And I should have them lined up soon. So we'll have the next webinar will be on the 15th. It will be Marisol talking about YouTube. And probably the 22nd we'll have the third webinar out of sequence. But in any case, I'll e‑mail everybody when I get the Facebook webinar down. Sorry about that. It causes me more headache than it causes you. But we'll get it done and I promise to find some good people for you to learn about Facebook and accessibility. So watch your e‑mail, if you're on this e‑mail list you'll surely get an e‑mail about it. And certainly by the time you come back on the 15th to learn about YouTube, we should have all the details nailed out.

 We do have another four week fee based series free to the webinar annual members starting early March, I think it may be March 1st, but I've forgotten exactly. No, I think it's March 2nd. But in any case it's going to be on daisy. Most of the people making daisy books will be doing production daisy for lots of students. But it's possible using word to get a free plug‑in and produce your own personal daisy so even if you don't expect to be doing any mass production, it's something to learn about. So the free one and learning about the daisy series go to our web page, easi.CC and click on webinars. So if you want to come to the free one, you can register there.

 If you're interested in the daisy series, you can read about that there. And if you're a member, you'll get special mailings about it. So I've taken all the time I should and I want to give all the rest of the time to Dennis. Marisol and I attended a conference in Colorado last November and I noticed on the program a thing on accessible Twitter by some man who developed a special accessible interface for Twitter. So Marisol and I went. And there was Dennis Lembree, he gave a very good presentation, very clear. And the interface he's come up with is really simple, easy to use and even some people without disabilities find it cleaner and simpler. Enough from me and I'll turn that program over to Dennis. Dennis, you're the boss.

 Thanks, Norm. Thanks for that great introduction. And thanks, Marisol, also. And welcome everybody. Again my name is Dennis Lembree. And like Norm, I'm out here in California. And although I'm originally from Michigan. But anyhow, so I'll be presenting on Twitter and web accessibility. And if you have any questions feel free to type them in the box. I may or may not answer them right away. But I will see them. Or you could always e‑mail me anytime at info at accessible Twitter.com or at webaxe@gmail.com. Which is a podcasting blog that I also do on web accessibility. So let's get started. Twitter and web accessibility.

So here's the topics we'll go through just real briefly what is Twitter. Then I'll explain some accessibility issues with Twitter.com website. I will briefly go through a few different accessible Twitter applications. And then we'll be talking about accessible Twitter.com, the site that Norm mentioned that I wrote starting, let's see, I guess it became available like almost a year ago. So we'll talk about the different ways accessible Twitter.com approaches and attempts to fix what I like to say, corrects or fix many of the accessibility or usability issues. We'll talk about some other benefits of web accessibility and using web standards. Those kind of come through throughout the presentation. And then I came up with a few ideas on actually writing a tweet to make it more accessible or maybe less inaccessible. Okay.

What's Twitter? So I'm assuming you all know what Twitter is. Most of you probably have an account but I thought I'd just put this in there in case somebody isn't familiar with Twitter. And it's also a good link. If you look it up in Wikipedia, they have a lot of good information. Twitter is a free social networking and micro blogging service and website that enables its users to send and read text based messages of up to 140 characters. And then there's a little image of their home page. The issues with Twitter. So there are many issues and we'll get more into them later. But I noticed actually just the other day just from the very start, from the sign‑in page there are accessibility issues. So I thought this would be a fun little exercise to start off. If you're familiar with the Twitter homepage, I have it on the next screen, can you find three items on the sign‑in page that could use improvement?

 So now I'm showing a screen capture of the sign‑in page and it looks pretty clean, actually, this page. And at first it might not look like there would be many issues. It's pretty clean. There's not too much information on there. The design is pretty nice. But I guess anyone with a trained eye could probably pick up on it pretty fast or whatever user agent you have if you go to that page you may notice some issues. Does anyone want to type in something? Maybe you see anything that might be an issue. I'm not seeing anything. Color contract. That's a good one. I don't think that's on my list of three things that I found. But, yeah, there's a text link, a blue text link, a regular blue text link over a light blue background. That could be a color contrast issue. Yeah, click here. Few people saying "click here" definitely. That's one that I put.

 Language combo box. Can you be more specific on the language combo box. One of them I had also had that issue. I'll just move ahead. But yeah, the "click here" was definitely one I found. There was 2 or 3 "click here" links which was totally out of context if you were reading a screen reader or agent and you were going through the links then you'd have no idea what that means. It's not good for usability. So good. One thing that's kind of a pet peeve of mine is the text links are not underlined. And I still think to this day even though a lot of people like to get rid of the underlines, that inherently it should still be there for an accessibility and usability standpoint. It's just clear that that text is a link. Sometimes it's hard to tell if it's a link or not. Especially if you have color blindness or low vision.

 Like in this case, the poor color contrast is an issue. But also, I mean if that link was underlined, I think it would help at least. Let's see. Yes, about the drop down box. I had that. The reason I think that's an issue is because there's no submit button with that select language drop‑down. So there's several reasons why a submit button would help. One of them is just plainly that it would give the user more control depending on what kind of browser he or she is using, you know, it might be difficult to select the language without actually enabling it. So if the submit button was there, you could select the language whatever way you can and then click submit without automatically reloading the page to a new language when maybe you made a mistake and you didn't realize it.

 An adding issue to this is this method requires Javascript. If you change the language it's not going to do anything without Javascript. So the Javascript is an added requirement which is bad because you might not have Javascript in your browser or whatever user agent you're using for one reason or another. Okay. Good exercise. So there's a list of issues with Twitter.com and accessibility. The biggest three issues that I found are one, that the core functionality is not keyboard accessible.

 So obviously that's bad because if you don't have a mouse, if you only have a keyboard or if you have some kind of assistive technology that is keyboard enable, it's just not going to work. And it's not just, you know, functionality that you don't need to use Twitter, it's some of the main core functionalities. And you'll see some of this later in the presentation. A second major issue is headings. And what I feel say poor use of headings on Twitter.com. And another issue is java script. Like I mentioned in that exercise that Javascript is required for a lot of the core functionality. And obviously changing the language is a pretty important feature of the website.

 So if you don't have Javascript enabled then it's just not going to work. Okay. I got a message that I need to be louder. I'll try to speak louder. Just hold on one second I'll try to turn up the volume. That's better. Thank you. Yeah, I just moved the microphone a little closer. Okay. So I was just going over the three main accessibility issues with Twitter at least in my opinion, keyboard accessible, the headings, and requirement of Javascript. All right. So keyboard access. Some of you might have tried this. I certainly do this with a lot of websites, one of the first things I do with analyzing it is go tab through the website. And if you tab through Twitter.com you'll notice that you can't access the favorite reply and delete short cuts.

 So on the right hand side there of the tweet I'm now showing a screen capture of a main, of a Twitter.com page. And when you tab through, well if you mouse over on the right hand side of the tweets you'll get those options to favorite and reply. But if you tab through you will not get those options. And those are pretty core functionality to the Twitter service. Use of headings. Here I'm showing on the right hand side I am showing the outline, the heading outline of the main Twitter page with all the tweets on there once you're logged in. And I ask these questions when I look at the heading, what site is this? The headings don't say that this is anywhere that this is the Twitter website. And then I ask well what's my account name, you know, am I logged in? And I look at the headings and it's still not listed.

 What's there is, you know, it says well send a direct message, home lists following and some other things. But where are my tweets? Can I find my tweets from the headings? Following, trending, save searches, what's happening. Maybe under what's happening. But what's happening is actually where you input your tweet. Where's the menu? Don't see a heading for a menu on there. And then I'm also wondering the footer, they just kind of throw the footer underneath the last H2. Whatever the second level heading is. It used to be under following. Create new or update this list. I'm not sure what that means either. Javascript. Like I mentioned before Twitter uses Javascript. It's a favored. You'll see core actions on followers and following pages. Reply to tweet does actually work without Javascript.

 For some reason reply to tweet without Javascript is one of the only actions that actually works without Javascript. It's kind of funny. But good for Twitter. At least they have a start. Okay. We got a message that there's some trouble with the captioning and the box is being restarted. So I'll just pause for a quick second while we go to the next slide. Does anybody have a question if you want to type in a question about what we've been going over so far? Okay. Got a good comment there. All right. I'll just continue on now. So on this page this is what I was talking about with this list, drop down with some actions for lists on this user. I'm showing there's a screen capture displaying with a distant relative. My graphic artist, friend and relative. If I wanted to put him on a list I'm required to have Javascript. And this other little script next to it, I'm not sure what you call that but it has some other kind of core commands and stuff. I think it's to unfollow him if I wanted to and to direct message and things like that. That little magical button also requires Javascript.

 Some of you might be wondering why do you require Javascript, this is 2010, what's wrong with Javascript? And some of the responses, there are many answers but some, if you're on like a mobile device or some kind of, you know, mobile device that just doesn't have java script available or doesn't work well, maybe the user has the links text browser, that's not going to work with Javascript to my knowledge. Some companies have Javascript just fire walled completely and that would block anybody from using any kind of Javascript. Thank you. That button, somebody commented, allows you to follow, unfollow, set as spammer and block. And then I just listed issues that I feel are problems, accessibility problems.

 It doesn't validate. Same with semantics, the code can be more. Semantic. A lot of the links are unclear. The underlines are removed. And then the hover state is there on some links but then no focus. If you're keyboarding, tabbing through, you won't see the focus only with the mouse. The side bar is mostly, I guess, tools and navigation, is really inconsistent. Some of the information on there, I mean it all changes depending on what page you're on, which I think so a certain extent is all right. But I think some of it, say trends and search can be more consistent on that page as far as consistently labeled and consistently placed location wise on the page and the forms. If you go to some of the forms, the mark‑up could definitely use some help.

 Form fields are missing labels. And fieldset tags, I found a couple used without legends. So somebody in an attempt to make their forms accessible, I think, I'm not sure why they put in the fieldset without a legend. But yeah, that's not going to help too much. The layout width is static, it's not flexible. It's not a must but again, all these things add up. If your layout width of your site is flexible, I think in general, that's more useable and accessible for all different types of screen resolutions. Especially with all the different kinds of crazy mobile devices goes on. If you look at ‑‑ well we'll get into accessible Twitter later. If you open accessible Twitter and you look at it on an 800 X 600 and then you look at it on a 1600 pixel wide screen, it's going to look surprisingly enough the same, almost the same. I should probably add that exercise into this presentation later. That would be a good one.

 Last thing, the custom colors. Users are allowed to change the colors and background images on their Twitter page. I call this the MySpace effect. And then you'll get something that's just not readable, sometimes, a lot of the times. And here's one example of that. So I'm showing a Twitter page customized by someone and it's very difficult to read some of it because it's like this weird turquoise text over a purple background. And then the turquoise text over a white background that's low contrast. I ran the color contrast analyzer on it and it did give me a bunch of failures. So it's not just my opinion. Okay. Good comment. Modern mobile devices are pretty good about resizing based on the content not width as defined by stylesheets. I agree with that. That's a good point. Some mobile devices will go ahead and resize it to fit their screen. I guess it's a good argument though just to, you know, if you have a flexible layout and you're using relative sizing, relative positioning ‑‑ well relative sizing more, than, you know, you're just going to make a more robust site that is going to be rendered better on all types of devices. But thank you for that comment.

 Okay. So Dennis, you say Twitter is so bad. People can use Twitter.com even with a screen reader people can use Twitter.com. It is useable. It still is mostly text based. There's just a lot that can be improved. And that's what I did for accessible Twitter.com. It's a web based Twitter solution. Accessible solution for Twitter. There are several more out there. One other web‑based one is called slander. But that is written more for mobile, mobile devices. If you like you could use it on a desk top browser. You'll just have to try it out. I guess it's a matter of personal preference. The next one is called Qwitter. That's the desktop client for screen readers. And another one is TwInbox previously Mctwit. There's a plug‑in for Outlook. I know one Twitter, blindtwit, he uses it. That's pretty much all he uses. So those are some accessible solutions to Twitter.com.

 So we are talking about mostly web accessibility. So we're going to go through accessible Twitter.com and talk about all the ways that this site addressed those issues that we just went over. So first of all, Twitter.com is I like to say a fully it is written in ‑‑ it is 100% valid code except for those of you what have multiple Twitter accounts like I do, it's easy to see which one you're logged in as. All links are keyboard accessible. And I do use the focus state as well as the hover pseudo states. Use of headings. On the right hand I show the ‑‑ what site is this? Well the H1 shows the accessible Twitter. Is my account name or information here? Well the first H2 actually is my info. So under that my info heading you'll have your user name and general information that I pointed out on the right part of the screen.

 Where are the tweets? Tweet roll. That's an accessible Twitter. That's the main page, the tweet roll is what I call it. And that is where the tweets here. Where's the menu? There's two H two tags with the menu. The website application. And tweet menu. So that is the secondary menu with the links for like direct messages and mentions and search and all the main Twitter functions. And also I'd like to point out under tweet roll under the tweets, for each one the author's name for each tweet is actually a heading. It's an H3 under there. So that's just another way a user can navigate or be able to associate a tweet with the user.

 Okay. So before I go on I'd like to respond to this question: What are your thoughts on desktop clients such as tweetdeck? Well I consider myself a web accessibility specialist so I really wouldn't want to talk to the desktop clients so much. I have used a couple of them and I think they're really good but not really ‑‑ as far as I know accessibility wise, they're very poor. But I can't really say for sure. Like I said I'm more of a web accessibility specialist and I don't normally use a screen reader or assistive technology. But I have used a few desktop clients to feel them out. I'm not too familiar with accessibility issues. But they do, I wish they concentrated. I know, from what I hear they do have some major accessibility issues and I wish they'd fix them because they are some really neat applications. Javascript.

 Okay. Going back to the slides. Accessible Twitter is fully functional without Javascript. And the way that came to be is because accessible Twitter only uses Javascript to enhance behavior. So everything works where service side refleshes and PHP service side functionality, but Javascript is used to enhance behavior, progressive enhancement. And that is something that I'm not sure it hasn't ‑‑ it's slowly, slowly catching fire like web accessibility. But it's definitely paramount in making robust website or application. And basically it means making everything work without Javascript and then add in Javascript to enhance the behavior. And there's a technique, Jeremy Keith is one of the founders of this technique hijacks. There are some Ajax features in accessible Twitter.

 Part of the reason it's accessible is because, you know, it just works server side normally. And the calls are intercepted or hijacked with Javascript, if it's available and then enhances the behavior and uses Ajax. And all of this, of course, the best way to do that is using unobtrusive Javascript. It can include things like CSS. You do the right mark up and then you add CSS. You could enhance it more with say CSS three and do some even more enhancement. So your site will look even better if you're using a browser that supports CSS three. So I'm repeating this slide from previously just to remind us about some of the other issues with Twitter.com, about the code doesn't validate, links aren't clear. The form mark‑up needs some help. The custom colors.

 So here it's just showing how accessible Twitter.com fixes these issues. The code is very semantic. The links are clear. Like I mentioned the hover and focus states. Good color contrast. The navigation is consistent. Very consistent. It's the same throughout the whole application. Form mark‑up is accessible. All the fields have labels and fieldset tags have legends which describe the portions of the forms. The layout width is flexible. And custom colors are not implemented to eliminate that possibility that somebody is putting in some crazy colors. So to do a check I did run this through the color contrast analyzer and the result was zero failures.

 There's my new buddy John in that screen capture. Are you considering an option ‑‑ here's a question from a user. Are you considering an option that would allow custom colors but also allow local user to trump them with preferred local CSS stylesheet? Well I suppose at anytime a user could implement the local CSS stylesheet. I have not considered an option that would allow custom colors. That's a good idea. I could add that to my wish list. But there's a lot of more primary issues and functionalities I'd like to tackle. So this is not my full time job. Although I am keeping the development cycles open and the task lists are right on the home page. So if anybody has any more ideas or wants to know what's going on, all you have to do is go to accessible Twitter.com and check it out. But thanks for the suggestion.

 Okay. Back to the slides. More features of accessible Twitter. So besides some of the core functionality of Twitter like reply and favorites, mentions, I've added the search feature was added. But more recently was saved search feature is implemented and the user search is also now implemented. So you can just go to the one search page and all three of those options are there to search tweets and to use your saved searches and you can search for users in the third area. The trends page lists the weekly, daily, and current trends. The popular links page that pulls popular links from this tweet mem service. Question. Did the popular links come from identi.ca/net. If you mean the fee, they come from the [Unintelligible] service. The open source micro blogging platform. No, the code. Maybe we could correspond after the presentation.

 Basically the whole site is written with PHP. Okay. So, yeah, most of it, the site, most of it is just using PHP and using the different AP Is to get the information. Okay. Then I've added on the feature about every page displaying the user's information. And again, I think that's really valuable because the first, one of the first things I noticed on Twitter.com is that when I sign in I don't even know who I'm signed in as. If you go to another page, another user's page it's even harder to tell. So I think that's really valuable. No hidden links. On Twitter.com, in that mouse over area those features are links. You can't see them. And when you mouse over them, you can see them but ‑‑ accessible Twitter.com doesn't play any games.

 There's not a lot of show, hide, and mouse overing and things like that. It's just right there. Each tweet has all the links displayed visually and not hidden with Javascript and it's just much more straight forward and easy to see what your options are and what you can do. Another features added as I mentioned before aria landmark roles. Aria is the new W3C speck. It stands for accessible rich Internet applications. So it gives ‑‑ it's a great great way for web applications to have the chance to be accessible in using a lot of these attributes and the way to mark‑up your code so it's more accessible. And one of the things that you can do is add what's called landmark roles.

 So on main important sections of your website you could add these attributes that help the navigation through the website or web application. So you could specifically mark an area that's used for navigation or search or the header or banner. And those have been implemented on accessible Twitter. Okay. I'm going to go through some quotes from users and I'm not doing this to toot my own horn. I'm doing this because a lot of these quotes basically back up what I was talking about. But the first thing and maybe the most important thing was that a very popular and big website service can be made accessible for people who are, were originally unable to use it. So one user said "wow, you have really made my day. I'm smiling once again. I'm ‑‑ so that was a really nice comment to receive. That one was actually on my blog.

 I think I got that on my blog but the rest of them were quotes straight from Twitter. You can easily navigate by several methods, skip links ‑‑ which I haven't talked about. Skip links, form fields, heading. Very effective with a screen reader. And now aria, you can use that aria code to very easily navigate. Really easy with Braille display to use. Someone else writes from now on my default web interface for Twitter. Keyboard accessible equals touch accessible. So that's a good point really for web standards and web accessibility in general. If you build a site using these techniques and making it robust and making it keyboard accessible, then your site is going to be accessible for a whole new range of user agents and assistive technologies. Because you are doing that, then it just opens the door.

 So this person, I'm not sure if this person is using some kind of touch assistive technology. But they're at least pointing it out. Seems to work nicely in Lynx. My Twitter won't let me login and mobile site won't show followers. I think this person was at some sort of web conference and was having problems logging in or getting into Twitter. And ultimately for one reason or another opted to just access the Internet from Lynx and go to accessible Twitter.com and it worked well. And I tried it later and it was pretty neat to see that it does work. Liking it more than Twitter.com. Cleaner, easier, fun. Love this. So clear and easy dyslexia.

 So there's a comment about any kind of learning disabilities and dyslexia is a good example of something, if you have that condition, you know, you want something that is clear, is consistent and you're less likely to be confused in the interface. If you want to read more quotes there's always more on the website. There's a good list of articles to written about accessible Twitter. Future enhancements. So I've gone through a lot of the features and added features of accessible Twitter but there's still a lot more to be done. There's always something to improve, enhance and incorporate. Some of those things include like Twitter lists. That's something ‑‑ well it's not so new anymore but it was a newer feature of Twitter. That was partially implemented.

 You can view your lists that you have already created, well you can view the names of them and when you click on them you can view the actual tweets on that list. Caching data for trends and popular links. And better error handling. I think that's come a long way. You will notice one issue once in a while when the API is getting hit pretty hard in the middle of the day you will see once in a while some kind of goofy errors. When accessible Twitter when the page is rendering, once in a while you will get some crazy error. If you get that, I apologize. I'm working on that. Just refresh the page and it should come up. But I'm going to have to play the blame game. I think the Twitter API has a lot to do with that.

 I'm still trying to figure that out. And functionality to upload photos is definitely on the list. And open authentication which is something Twitter is going to push this year. And that is instead of using your user name and password to sign on, it's the other way. You basically go into the Twitter website and allow access and then return and get authenticated in that way. Okay. Other benefits of web accessibility and web standards. So most of us probably know web accessibility is good. Hopefully most of you know using web standards is just as good. And there's a lot of cross over. And with usability as well. There's a lot of cross over between all three of those things.

 So if you're using web standards and accessibility, your site is going to be ease easier for people to use and. These techniques, it will be better, just like it will have better functionality with assistive technology including text browsers and Braille devices as we saw with those user comments. Keyboard accessibility opens the gate for many other types of input devices. Providing clear, consistent content and navigation benefits those with cognitive impairments. Like we saw with dyslexia. Use a mobile ‑‑ use of mobile device is possible. Definitely with a phone like an iPhone it's really fast and really clean. It works just as well on there as it does on a desk top browser. And a droid.

 Okay. I threw in, this is a new slide, just some guidelines I thought might be good to give about writing accessible tweets. This presentation was all about basically getting at Twitter and the tweets and the services but creating that content is a whole nother side of the story. But this is just a few points to help with that. So probably the biggest thing is abbreviations. Don't overuse abbreviations and get too clever or tricky with them because it could be difficult for somebody with impairments or even somebody that doesn't have a disability to figure out what you're saying. So keep that to a minimum. Shorten the link URLs. So for a link in your tweet you don't have 50 or you're not using 50 or 60 characters for just a link which, you know, can be disruptive for different reasons.

 Use simple language. And don't use a foreign language without saying so or, you know, don't mix languages without making it obvious by either stating, you know, that this is a different language or like maybe at least enclosing it with quotes. Okay. And that's it. Here are my contact details. I have three main websites besides accessible Twitter.com. I'd just like to point out Twitter accounts here, accessible Twitter is spelled T‑W‑I‑T‑R. And web axe is a blog. And we're just about out of time. So there was a quick question. Please enter that now and maybe I can take one quick question. Somebody has posted interesting links more on accessible tweets for disasters. Okay. Nothing else is coming through. Great. It's 10 o'clock. Thank you everybody.

 Thank you Dennis. A great job. Not only a great presentation but a great tool in accessible Twitter.com. And I'm aware that more and more education institutions are tying into Twitter and this will be very useful for them. So as long as anybody wants to hang around and Dennis wants to hang around that's fine. But officially we're ending. Thank you.

 Yeah, I can hang around for a few more minutes. So if anyone has any questions.