A Blind Developer’s Perspective on WordPress & Accessibility, Episode 71

Episode Transcript

Carrie: Hey everybody. Welcome to officehours.fm. I’m your host Carrie Dils. I have a feeling this might turn out to be episode #71a. We were experiencing some difficulties getting Amanda’s…Google+ is not behaving…is sort of the long and short of it. Amanda may pop in here in a second. If she doesn’t I will reschedule her because I am really excited about today’s interview and things that Amanda has to show us. If it doesn’t happen today, I promise you it will happen in the future. But until then thank you. Welcome those of you who are tuning in live. I apologize for making you wait. So yeah, let’s just shoot the bull for a second.

 

Podcast picks up with Amanda:

 

Carrie: Oh hey! I see Amanda! I don’t hear her.

 

Amanda: Hang on. I’m going to flip my phone. I don’t know if this is doing video. You are going to have to close your eyes because I don’t want you to get sick.
Carrie: Ok. We’re prepared for the vertigo.
Amanda: Ok. Is that working?

Carrie: We’re looking a wall or something. Teresa. SASS stands for Syntactically Awesome Style Sheets. I can’t speak today. Sorry I’m just a spaz today. I’ve been in this little dark booth out at Lynda.com all week and I think it’s getting to me. What SASS is basically CSS on steroids. Probably the simplest example I can give is let’s say you set a variable called blue to a certain hex color or code that is blueish and then everytime on your site that you needed…or the CSS needed to use that color, you would just use the variable blue. And then if you said…or your client more likely would say….umm….I don’t quite like that shade of blue. Then instead of going in an updating every instance of that in your CSS you would just change that one variable and then it would propagate throughout the rest of your CSS. Pretty cool stuff. Amanda? How are you doing over there?

Amanda: Yeah. I was turning a light on because I’m not sure how much light is available in the room. Ok I think we’re good. Let’s see if we have any questions. If you guys have questions, shoot them over to @cswordpress because it looks like the #hashtag is not updating in my display.
Carrie: Ok. If you can get yourself any closer to that microphone, I would not complain.
Amanda: OK. Hang on just a second.
Carrie: You betcha. Jackie says with Genesis 2.2 coming out anytime now (which we are anxiously waiting on that) what should we be prepared for with client sites? I really believe the development team takes such great care to make sure that all everything is backwards compatible so I wouldn’t anticipate any problems going ahead and updating your client sites which once it rolls out. That being said the disclaimer always back up your sites just in case something goes absolutely haywire. Davinder is asking which Lynda course is cooking? I’ve been for the past nine months or so working on a WordPress DIY series. It’s a series I’m doing in tandem with Morten Rand Hendreckson. And the classes are basically how do you start from scratch and build a…fill in the blank site with WordPress. So a small business site, a portfolio site, a wedding announcement site. Those sorts of things. So Morten is presenting it from just a WordPress perspective and I’m presenting the exact same material, but from a WordPress and Genesis perspective. So it’s kind of fun. We both get the same assets, like the ficticious Business Name and all those sorts of things and then teach the course and go. And at the end it’s fun to see even though we are using the same things we come up with to very different websites. Yeah. Fun. Syn…I was going to try to say SAAS again..Syntactically…never mind. I’m just not even going to do that.
Amanda: Yeah. I think it’s something like Syntactically Swesome CSS or something.

Carrie: Showoff.

 

Amanda: Basically CSS for developers. There we go. That fixes the microphone probably. We know how to fix those.

 

Carrie: Excellent.

 

Amanda: Ok. We’re not going to able to do a screen share which kind of sucks. I wanted to do a  screen share but we’ll manage.
Carrie: You know what? Maybe we can record a little screen cast after the fact and then I can just go back and add it onto this episode. But that’s cool. We’ve got plenty to talk about anyway. Actually Jackie is going to kick us off with a question for you. Actually before we dive into talking about accessibility… Amanda pretend I have never heard of the word accessibility. Break it down for me.

 

Amanda: Ok. So accessibility basically means that you…to put it in a nutshell… and I think this is probably something that was said in the accessibility podcast that you did but it’s basically make sure that your content and your site can be viewed by anybody in whatever way they want view it. So whether that’s on a phone, whether that’s in a different language, whether that’s with a screen reader or some other adaptive technology with a 27 inch retina ready monitor…that’s a really broad really wide definition of accessibility…that’s the kind of the one that I like to use because it means that if I just say well you need to make this accessible for screen readers. Ok that’s fine. But if you go too narrow with it and you say well it’s ok for screen readers but you forgot the dyslexic people. You forgot the actual keyboard users who may not be screen reader users…you left them out.

 

Carrie: There’s all these things. It’s kind of overwhelming; all the things that go into making a website accessible so I really like Jackie’s question. She’s asking what if we want to make a site more accessible. What are sort of the easiest places to start? The low hanging fruit if you will.

 

Amanda: The easiest place to start with making a site accessible honestly is going to be learning markup. Make sure you have that down because markup is kind of the foundation of everything. So get that down first. Plus if you learn markup first…it’s like you can learn about Aria and things like that but that’s not going to do you a bit of good unless you actually know markup first. Because it assumes that you are familiar with markup. So start there first. The next thing I would say as far as making a site accessible, there’s a W3C resource. There’s WCAG actual guidelines and then there’s and understanding WCAG that they have on their site. So that’s a good point; a good place to start as well. But I really think probably the easiest place to start is going to be learning markup because if you start reading the W3C guidelines, they are fine. As far as comprehensive…as far as the most comprehensive stuff that’s out there that’s it. But it’s going to make your eyes bleed if you sit there and read all of it, because you’re going to be like Oh my God! This is wow!
Carrie: I didn’t even get to…sorry to properly introduce you before we dove in. I’m doing everything backwards today. But welcome to the show Amanda Rush. Amanda is a WordPress developer and accessibility consultant. Amanda if you would kind of just give us the rundown. Who you are. What you do and how you got into doing what you’re presently do with WordPress?

 

Amanda: So I am…let’s see…I have a computer science background. So I got my bachelor’s degree that was in and part of that was learning HTML. So we learned Pascal and different languages like that and data structures…and  whatever. But one of the requirements that we had was an HTML course. This was back in the late 90s so something like CSS was…yeah. I don’t even think it den existed at that point. It definitely wasn’t important. Everyone was doing in line styles. And accessibility was still really easy…well comparatively easy at that point. So I did that. I learned HTML. I started building websites. They were really ugly because I don’t do front end design. I’m a backend developer. So I learned HTML, I learned PHP, JavaScript all that other nice stuff. So I did the whole build your own website. Code it from scratch because you’re totally awesome in your developer thing for a while. And then I got over myself because I was like well so what to do this one thing and I don’t want to code it myself. So I started looking. I found WordPress on accident. I was Googling for the problem I was trying to solve. I was actually using this other blogging platform system thing that I don’t even think exists anymore. I started Googling around and I was just kind of like I don’t really want to hack your code to just make this one little thing work, so I started Googling and I found WordPress on accident. I was like oh! This can’t be that hard to install. It’s a database and PHP scripts. At that time WordPress didn’t have any JavaScript I don’t think. That was back in 2005, so I don’t think it had any. If it did, it was very little. So I got it installed and I started playing with it as a blogger and was kind of like…oh! This is great. It does what I want to do and I sort of hacked on themes. Then I got to a point at work where my job software had become completely inaccessible. So I was basically getting paid to come to work and do nothing because they were like well we can basically…like you can just leave. We know our software is not accessible and we don’t know when we’re going to make it accessible. We’re really sorry about that. So we could give you a severance package. I was like no. You’re going to make this accessible and I’m going stick around until you do and you are going to pay me until you. So I did that. I hacked on WordPress during the day. That was kind of my reason for going to work. So for a brief time I got paid like $8.00 an hour to work on WordPress stuff. So I did that. I started to work on themes but I’m not really a CSS person. I know CSS but I can’t check the CSS and what it does. So I really hate working with CSS. So I was like ok. Back end development sounds like it’s really a cool idea. Write option screens and make stuff do stuff and as far as functions and things like that. So that’s kind of what I do with WordPress. And then I worked on of course Utility Pro. I will totally work on other people’s themes but I am not going to write a theme from scratch. It’s never going to happen because I have to literally, when it got to the CSS aspect of it, or SASS or whatever I have to literally get somebody to check it. Write a line. Ok. Does this visually look ok? No. Let’s go back and fix this. Write another line and it would be that same process the whole time. So I’ll never write a theme from scratch but I will definitely customize themes as far as function and the actual markup they generate and stuff like that. And then I actually end up writing a lot of custom plug-ins for sites that don’t end up in the repo because they’re custom…one time. You know that one site is probably going to use it, but nobody else will use it because it’s a some kind of off-the-wall custom post type or off-the-wall functionality. The likelihood that somebody else is going to use it is pretty slim. So I don’t put them in the repo. I do actually write a lot of custom plug-ins that do function. And stuff l like that. So, let’s see. I worked for Freedom Scientific for a while which is the biggest screen reader developer. They developed JAWS for Windows. I did work for them for a while. I did support. I was in all their queues. Which meant I talked to banks and I talked to Microsoft and Sun Microsystems and all these other big organizations. So I did that. I also did…you know if customers would call…I would help them install JAWS or sort out video issues. Because screen readers are amazingly video centric. They rely on… for the most part they rely on the display chain…at least in Windows they do. It is because they literally need to know what’s coming through the video capture to determine what is going on the screen. If they don’t have that…you can use it but you’re not going to get much information out of it. So I did a lot of that and helping people sort out display chain issues because display chain is a mess on Windows. I did that for a while and then once I lost that job…it was like literally they sent an email that literally said your hours have been reduced to zero.
Carrie: Reduced to zero.

Amanda: Yes. Reduced to zero. I swear the email exists. It’s in my Gmail. I will forward it to anybody who wants proof. But it definitely happened. So I went back to school and I was like…Ok. Maybe I can just go back into mainstream computing. And so I said all right. There are all the certifications Cisco, Linux and Security and whatever. I was doing security sort of anyway but I hadn’t been formally trained at that point in it. So I went back the school. I took the all the courses but I couldn’t actually pass the certifications because they weren’t accessible.

 

Carrie: Were they online exams?

 

Amanda: They were…I’m sorry…I’ve got to get a cable because my phones about to…please don’t die me.

Carrie: Best episode ever!

Amanda: Oh yeah. This is totally the best episode ever. The tests were a combination of online…hang on…your going to face the ceiling for a second. They were a combination of online and literal like VMware virtualization. And at the time they also had…and I think they still have…like you have to do things like…here is a diagram. Figure out what’s wrong with this diagram in the case of the network topology or something like that.
Carrie: I’ll tell what’s wrong with the diagram. It’s not accessible.

Amanda: Exactly! And so we are fighting…there’s the Cisco Academy for the vision impaired which is where I teach my WordPress course…is fighting with Cisco right now to make those accessible. I think the NFB is involved or something. I’m not sure to what extent they are involved. But there’s some stuff and we’ve been fighting over this since apparently since 2002 and I kind of wandered in the middle of it. The same thing with Red Hat certification. I can take the classes and I did actually manage to get to though the first level of certification but it just wasn’t worth trying to maintain that cert because of is how inaccessible everything was. I had to hire a reader. God! You hope it’s not you know somebody that that has no experience with computers whatsoever. So they don’t know how to read anything and then you’re just like ok. And so you spend half your time sort of trying to decipher what they’re actually reading and then plus actually take the test. Are you still there?

 

Carrie: Yeah. I’m listening and thinking…I thought you were going to say I hope your reader didn’t have bad breath.
Amanda: That too. You totally don’t want that either. So then, the security one was the same thing. Like I could take the classes and read the books all day long and I did actually I took the first level Security+ certification but actually just getting through all the certs was not going to  happen and keep them maintained. And for a lot of those jobs you have to have the certification. They don’t care really…they care what you know…but to even get in the door you have to have the certification. So I was like ok. So this isn’t going to work. So at that point I was like well maybe I can do this WordPress thing full-time. But I really didn’t know if anybody else was doing it. I knew people were building themes and I kind of heard sort of stories and whatever, but I wasn’t really sure if I could pull that off. But I was like…well there’s nothing else going and I’d rather not be part of the 80% unemployment statistic in the blind community, so I was like well, let’s give this a shot and see what happens. That’s kind of where I got to where I am. Yeah. That made sense.

 

Carrie: Awesome. Well I’m glad that you found a home in WordPress and even more still on the WordPress accessibility team.
Amanda: Yes. I love the WordPress accessibility team and I’m so glad that it exists. I stumbled into that, too. They had founded that I think in 2010. I want to say 2010. I stumbled into it in 2012. I literally found it on accident. I was like yea! Somebody else wants to make WordPress accessible! They’re great and I’m really glad that they exist. With Slack being kind of inaccessible as it is at this point, we just wrote…support…actually WordPress support just wrote some documentation to get an IRC client to work with Slack. So I’m kind of excited to actually get that working and participate more in WordPress accessibility again.
Carrie: Awesome. We got a question from Jackie for you. Can you talk about the plug-ins? She’s asking to help Genesis and how those changes will affect Genesis 2.2. So say for example you’ve got Rian’s Genesis accessible plug-in installed. And you update to Genesis 2.2. Will that then nullify some of the functionality? Is this question making sense?

 

Amanda: Yeah. What’s going to happen with Genesis 2.2 and the accessibility with Genesis 2.2 is actually that in order for you to make a child theme more accessible you have to actually make the function calls. So there’s one for headings, there’s one for menus, for the navigation menu…there’s one for skip links and there’s another one. I can’t remember what it is. Sorry about that. You know I what? I am completely drawing a blank on what that third one is. I think it might be the read more but I’m not sure. But as far as what it’s going to actually do to your current sites? Unless you make those function calls in your child themes or unless you’re using Utility Pro…hint, hint… go get it. You’re not actually going to be able to take advantage of those accessibility features. So to answer your question like Genesis 2.0…it was either your question or somebody else’s…Genesis 2.2 is not going to…so you update it and boom your site becomes accessible. With the exception of some of the back end stuff like the site layout; checkboxes. Those of those were fixed. I know Rian did probably a lot of the coding…we she either did coding or she yelled at people. Either one is fine. I know that’s going to be the most noticeable change. But as far as your front end, your theme aren’t going to take advantage of that until you actually add those function calls. You can just add them to functions.php and then style appropriately. Like specifically for the headings one. It’s going to change the headings structure and make the headings more logical, which fixes all the widget issues. That’s the biggest issue with widgets…with a lot of the Genesis widgets is that the headings structure is not logical at all.

 

Carrie: So currently the heading structure and widgets is an H4. Will that then become an H2 or fall into actual context?

Amanda: It’s going to fall into context. So when you change the headings…oh let me think… yeah. It is going to fall into context. If your site starts with an H1; heading level 1 and then you know you have some heading levels at 2…they are going to… I think there are two things that are going happen. 1) Your widget headings are going to fall into context. 2) When you start adding headings to content, if you are with a heading…if your article or title is at H2, your headings in that article are then going to become logical. It’s going to override. So if you try to enter H4 before H3, it’s going to override that. It’s going to give you H3 and then H4.

 

Carrie: Cool. So if you’ve got your styling then…if you styled on say sidebar H4 instead of widget title then it could potentially throw your styling off and you’d have to update your styling.

 

Amanda: Yes but I think that they tried to make sure that Genesis 2.2…has Genesis 2.2 dropped? I’m really sorry, I’ve been out of the loop for the last couple of days.

 

Carrie: They’re on their release candidate right now.

 

Amanda: Ok. So it is on release candidate. I knew it was either to be release candidate or to drop and I couldn’t remember which one it was. But the new sample theme that’s coming with it is going to actually give you some style samples that you can either copy wholesale and just go straight copy pasta with it. Or you can go based on those examples and say ok so I know what I’m styling. I know what elements and what classes and whatever that I need to use. So I can change my styles appropriately that way. So you are going to get a guide basically. It’s going to give you a very well documented…as usual, sample theme to play with. So you will definitely have that.

 

Carrie: Awesome. I love you, Rian and Gary in particular. You have done so much to push to making Genesis more accessible and I love all that’s going to happen in this 2.2 version. It’s just good move in the right direction.
Amanda: It is totally a move in the right direction and I’m really glad that Studio Press decided to do that because it’s going to…now obviously like you’re going to be able to make changes to the child theme. You’re still going be responsible and your clients are still to be responsible for making sure that their content is accessible. That’s going mean make sure that your widgets have alt attributes. Meaningful alt attributes and stuff like that. So it’s not going to completely take all of the work out of making stuff accessible but it is definitely going to make things a lot easier. I have a client that I’m actually trying to switch over to…trying to get him to stop using underscores and just use Genesis. It’s going to make things a lot easier. But he’s really picky about his accessibility. He knows his accessibility very well. But I’m trying to get him to just switch because we’ve got these function calls and whatever and it will definitely help a lot and make your development workflow a lot quicker than having to write all of your own accessibility for underscores or something out of the box.
Carrie: So sorry to interrupt you, but underscores as is…or out of the box is…how does it rank with accessibility like on a 1 to 10 scale?

 

Amanda: Out of the box…like as far as accessibility is concerned it’s actually really good. I just hate developing with it because I hate writing a bunch of templates and template parts…whatever. Let me just disclose. I’m a Genesis…you know…fan boy…uh… fan girl.

 

Carrie: I think you’re in good company here.

 

Amanda: Yeah. Genesis really does development a lot quicker. Even if you’re having to write custom post type archives… which I’ve kind of been mired in the last week or so. It’s still quicker than doing it with something like underscores. But I think underscores is a good starting point if you’ve never themed before. If you’ve never written a theme, it is a good place to learn best practice and there is a lot of accessibility in underscores. I just hate using it because I hate 50 million files in my theme directory that are just straight up templates and whatever. It’s all over the place. I’ve got to figure out what am I editing to fix this one little thing? But that is a preference thing for me.

 

Carrie: I feel you. Yeah. That’s part of the reason I moved to Genesis as well. Jackie brings up a really great point. She knows the answer. But let’s talk about it and share the love. She’s asking can you talk about how you should be using headings properly for semantic meaning versus styling? So maybe I just want something to really big on the page so I make it an H1. Is that ok to do?

Amanda: That is…ok. So the way headings work is you should…so a page should only have one like H1. It’s really the biggest heading that you have, obviously. Your headings should be logical. So while headings are not necessarily an accessibility feature of HTML they are technically a styling feature. For semantics they need to be logical not just for accessibility but for search engine optimization as well. Because search engines really like that and the people really like that when you do you have a logical structure. So to do something like…you’ve got something that you maybe wouldn’t stick in a heading but you still need it to be kind of big and kind of out there. You know you could use something like an M tag or a strong tag. Probably M actually I think would be better tag. Ok I’m getting geeky…I’m kind of geeky about my markup. So that’s kind of how I would do it and then use styling to do it. But don’t use a heading tag just because you want to make something bigger. Does that make sense?

Carrie: Absolutely. Yes. I think that’s something…I know I don’t do a very good job of sharing or passing that along to clients. Hopefully they are maintaining their own content. That’s something that I did in my early days of web development. You want something bigger? Put an H1 tag on it. Put an H2. Yeah. Those are there for meaning not styles. Great point Jackie. Thank you for bringing that up. If you’ve got any questions for Amanda shoot them over to #officefm. I just realized that I forgot to check my Google Q&A app to see if there’s anything hanging out over there. Nope. We look good. Ok. Davinder asked with HTML 5 structure support you can have multiple H1s on the same page? Hang on just a second. Why isn’t my battery charging?

 

Carrie: Uh Oh.

 

Amanda: Ok. There it goes.

 

Carrie: Now we are getting ceiling.

 

Amanda: Oh I’m so sorry about that you guys.
Carrie: That’s all right. It’s a lovely ceiling.

 

Amanda: Ok. There we go. It’s just a ceiling. It needs a ceiling fan actually. I need to go buy a ceiling fan and get it actually put in with a with a string. A little like thing that’s long enough for short people. I’m about 5’3” or 5’4” somewhere in there. I’m always doing things like all hey let’s put the pull thing right up near the ceiling fan blade and let the blind person feel around and try to not to hit the blade land find the string. That’s not cool. So anyway. I need to go do that. Yeah. What was Davinder, am I pronouncing it right?

 

Carrie: I say it Davinder but you know…I don’t know. Davinder you can Tweet about where the pronunciation or the emphasis is on your name goes. So you wrote a post a while back about disabling multiple H1 tags and Genesis HTML 5 themes. What’s the story on that?

Amanda: As far as I know I think that is going to be the case. They are going to be disabled. But do not quote me on that because I haven’t…I tend to not use multiple H1s anyway just because I use headings and obviously I think they’re necessary but I’ll try to not use a heading for the sake of a heading, if that makes sense? But I think they’re going to disable multiple heading level H1s and they’re going to…as long as you’ve done they the accessibility calls…as long as you’ve added those to your functions…and it’s literally like add theme support…something. As long as you do those you’re going to get like the semantic heading structure and it will disable multiple H1s on the page. It will disable on a single page. You’ll have one H1 for the top if you’ve put that in. No actually. Let me take that back. I think it’s not going to do…you know how it does the site title in the tagline and those are headings. I think those might have actually been taken away. I need to double-check that.
Carrie: Well pre HTML5 support, if you look at the original Genesis source code it’s outputting that site title area. There is a conditional in there that just said if you’re on a homepage throw an H1 on it. If you’re on any other page in the site throw up paragraph or a div. I can’t remember what it was now. Interesting that it was that way and then with HTML5 support that got axed. So hopefully maybe that is coming back with accessibility support added.

 

Amanda: Yeah I think that is coming back or I dug into the Genesis code took it out or put it back. I don’t know. I’ve done some so many customizations to rip a function out of Genesis and stick it in a child theme because you know a lot of times there’ll be things like Genesis will do something with… ok… like post format images. That’s a weird function. In the HTML5 markup it adds back like the title and a bunch of other stuff. Well I don’t want it actually doing that. I just want it to give me the actual post format image and then surrounding markup. So I know I’ve customized that one in child themes that are using postal formats because I did actually…I got Utility Pro…I figured out where my post format was. I’ve been playing around with that figuring out how can I get it to support post formats and do the markup data and stuff like that with the way I want to do it. So I found that out the other day with the post format images function. I do think that’s… as far as the HTML5 markup in Genesis… I think they are actually trying to make sure you don’t use the Heading Level 1 for something like for just a site title. That site title is probably not something that you really think is that important…or not important enough to get into H1 anyway…it’s important…but it’s not H1 status important it that makes sense.

 

Carrie: It absolutely does. We’ve got a follow-up question. Can you talk about title tags and where they fit in moving forward? So title tags are…those are little things that go on a your links and I believe this latest version of WordPress ripped that out of…like when you go to add a link…

 

Amanda: Yes. It stripped that out because they are for accessibility they are useless because screen readers are either going to… by a default they are not to read them and nobody turns that on. Nobody wants to read anchor text and title text. I think…and Rebecca Gill can clarify on this, because I do some but not as good as she does…I think they’re useless for SEO as well. It’s just a useless attribute in most cases. I can’t think of any reason why a link with anchor text and a link should almost always needs… well it always need some kind of anchor text actually because either you’re indicating that there’s some text that navigates somewhere else or you’re indicating an icon label…something. So it has to have some kind of anchor text…something to be useful. As far as the title attribute…just say no to the title attribute. Just don’t do it.

 

Carrie: Indeed. For folks that are listening, if you haven’t checked out Rian’s plug-in (Genesis accessible) go do that. If you just look at the settings for it and see what the options are. You can see right off the bat what the big issues are with Genesis right now. I mean even if you…you should use the plugin…but even if you don’t, you can get an idea for what those are. And title tags, I believe is one of the options.

 

Amanda: Yes. That’s a huge issue with Genesis as it currently stands in stable release. But just don’t do it. Just don’t use the title attribute. I don’t even think I can think of any kind of an outlier case. I’m not going to say that they don’t exist. There’s always something. There’s some exception to every rule but as a general rule no just don’t use it. Using anchor text like you should. Make sure it’s contextual. As contextual as possible etc. If you’re using icon fonts make sure it’s got anchor text to go along with it…standard kind of stuff like that. I would almost always just say don’t use the title attribute.

 

Carrie: All right. Fair enough. We will not use it. I had question and then I totally derailed myself. We’re actually at 12:00 o’clock, but since we started a little late, we can go on for a few more minute. If anybody has a question that they want to get in before we get off the air then get that on in at #officefm. Yeah. So there’s a good discussion going on over on Twitter about the H1 tag thing. By the way if you are listening to this episode after the fact…or any episode after the fact…and want to ever go back see kind of what that Twitter thread was, just do a search on Twitter for #officefm and you scroll back through the archives and have a blast.

 

Amanda: One of these days, I’m just going to learn to leave that search for that #hashtag open. Because I close it and then I go Oh! Well Genesis office hours or officehours is coming up. Sorry. When I started listening to this podcast it was Genesis Office Hours.
Carrie: That’s all right. It’s throw back Thursday.

 

Amanda: Yeah. So we’ll go with that. But then I’ll close it because I’m like ok well there’s nothing going on in the #hashtag and I’ll close it. But my Twitter client at this point for some reason is…it’s not current as far as displaying the actual search. So I’ve no idea what’s going on the #hashtag. Eventually it will catch up. But I should just keep it open like and just let it fill up and whatever. Because if nothing else, it will remind me Hey! It’s 2 o’clock. Tune into officehours and don’t miss episodes.

Carrie: There you go. Really there’s virtually no traffic on the #hashtag except on Thursday. So Yeah. Jackie is just throwing in some really great questions for accessibility. So we talked about the title tag and how that is completely a waste of pixels. What about the image alt tag? How should we be using that effectively for both SEO and accessibility?

 

Amanda: Ok. So the way… just a brief…I’ll try not to get too geeky about how screen readers work. We mentioned the video thing where they have to see what’s actually kind of going on the screen. That does not apply to graphics. It’s only text and then everything else is… there’s a lot of scripting that goes into telling a screen reader how to deal with a particular element. So screen readers are like search engines in that they cannot see a picture. They cannot look at a picture and image and see that it is actually an image or what that image is. So the alt attribute…that is actually very useful. It is used to communicate to screen readers and search engines what an image is…well in the case of search engines so that it doesn’t load. If the image doesn’t load then you know what’s actually supposed to be there. For search engines it just tells Google what that image actually is. What’s in there. Because Google can’t see what’s in your image either. So the trick to the alt attribute that it’s needs to be meaningful. So WordPress does this thing where if you don’t provide and alt attribute it’s going to try to pull it from the filename.Which is almost always useless because…let’s say you take picture with your phone and you’re going to post that picture. Your phone is going to give your images weird names. It could be a name-date or date-timestamp or something psycho like that or something completely off the wall or it’s just a bunch of numbers. So WordPress is going to try…if the alt attribute is not present…it’s going to try to grab that and put that in the alt attribute. If you want to make sure that the search engines know what your pictures are and I know what your pictures are…. I actually like pictures. I like to look at people’s photo blogs and hope that they have attributed their pictures so I know what’s in them…because I actually do like pictures and playing with photos and things like that. So I’ll look at people’s photo blogs to see hey that picture of that really nice sunset that you took…did you alt attribute that so I know what it is or is it just a picture with crazy numbers because you didn’t? So if you’re writing content and you’re adding images…and you should always add images to your content just because people like pretty things. Make sure that it when you add that image that you include an alt attribute that’s meaningful. Like ok. If it’s a selfie or something…oh I don’t know…Carrie sitting at her desk… Carrie playing with a dog or something like that. Something that’s going to be meaningful outside of actually being able to look at that image. If it’s like an info graphic… in that case you’d want to do…an info graphic of something. But you don’t want to put the whole…everything that’s in the info graphic in the alt attribute. In that case you want to do like…so your alt attribute would be something like whatever your info graphic is on. Alternatively underneath that info graphic you’d want to explain what’s actually going on in the info graphic itself. Or if you’re making a list…I’m going to pick on Chris Lema for a minute because he’s actually done this. Plus he writes all the time. It’s a good example for how are you going to do this when you’re writing content on a daily basis. If you’re going to do something like…do an image of a list. I don’t know. Maybe you’ve written a list of stuff, but you wrote it on a piece of paper. So you’re like I’ll just take a picture of this piece paper and they can read the text in the image. Well no. That’s actually not a good idea because you don’t want to put all the text in your alt attribute because it’s going to make it…
Carrie: Ridiculously long.

Amanda: Yeah. The screen reader is just going to go…graphic, graphic, graphic graphic; something…for lines and lines of text…which is annoying. Long desk is another one. But that one has  limited support as far as screen readers and browsers. Let’s get into a big huge mess about them. Which browser supports what. Anyway Long desk is not something…theoretically it would be a good idea but it’s just not well supported. So in that kind of a case you’d say ok so here’s a picture of my list right? List of stuff…I don’t know…things. And then underneath that picture you would need to explain or actually write out what’s on that list because having that list on a piece of paper and taking a picture thinking ok they can read the text from the picture…well the search engines don’t know what that is either. So there’s probably some really awesome things on a Chris Lema list…and I don’t remember what the post was. There was one particular post and he doesn’t do it all the time, so I’m picking on him. But I’m only picking on him because he writes all the time and definitely uses images a lot and things like that. In that kind of a case you do like a list…so having a picture of your list is cool but then because the search engine is not to know what’s on your list either if it’s in your image… make sure that you just write out some explanation or something of what’s in the list below that. So that’s kind of how you deal with those lists and info graphics and things like that are not just sort of a stock photo. Alt attributes are good. They are your friend. Use them. Except if it’s a decorative image, in which case it doesn’t need it. But if it’s part of the content and it is meant to convey something other than like an ornamental thing then yeah definitely alt attribute it.

 

Carrie: Is there a way via HTML to designate an image as decorative?

 

Amanda: Umm…There is not a decorative attribute unfortunately. You would designate an image as decorative… I don’t want to say it’s a judgment call. It kind of something like… ok let’s say…I don’t know you do a CSS border right? Your doing CSS3 sort of art kind of thing…decorative sort of ornamental things that you might do in a border, right? If let’s say you were actually using a file for that. No actually I got a better idea. Let’s say you’re using a background image right? So themes like Utility Pro…and there’s a bunch of the other Genesis ones that give you background image support right? That’s a decorative image and it’s not really meant to convey anything that is sort of important to the content. It’s just decorative. It’s there for decoration right? It’s there because it looks pretty and it makes your site look pretty and whatever. So that kind of an image doesn’t need an alt attribute. It won’t take it. If you’re going to do a background image through your media editor the themes won’t even display an alt attribute. They just don’t. It’s just a purely decorative image at that point. I think that’s probably the best example of decorative versus non-decorative.
Carrie: Yeah. That’s a great example. So the lessons we’ve learned today. Title tags bad…alt tags…yea!
Amanda: Yes.
Carrie: Go forth and implement those things. We’re going to take one last question from Davinder. Zooming out to the broader business world. He asked if for corporate clients versus small businesses, who is embracing an accessible online presence faster?

 

Amanda: I think corporate clients. The reason I’ll say that is because a lot of things about accessibility is that…especially if you don’t start with accessibility at the beginning of your project. If you get to a point where you’re at that sort of the end of a project or the middle of a project and you say ok well I want make this accessible. At that point it literally becomes a time vampire and it becomes a money vampire because you are then in a situation where you’re going in and you’re having to remediate all kinds of stuff. Like ok I would love to value price accessibility. I would love to because I hate hourly billing. But you can’t because 9 times out of 10 you come in at the end of a project and then somebody says oh by the way I need to make it accessible because I’ll get sued. Or because I’m getting complaints or because I’ve finally been made aware of accessibility and I really didn’t mean to discriminate against any of my users. So I want to make my stuff accessible. Then it becomes ok. We can make this accessible but now it’s going to cost like just tons and tons and tons of hours just to fix it. I’m going to have to bill you by the hour because I got I’ve got to paid,. But it literally does become like that whole thing about you know you don’t hourly bill because of conflict of interest. No. That is not there in accessibility because you are literally going to spend all those hours remediating… or are telling developers how to remediate accessibility. I kind of like to, as an accessibility consultant get my hands dirty in the code itself. I find that developers are a lot more willing to do accessibility and listen to you and do what you tell them basically if you say to them…hey I’m in this in this with you. I’m not here to work against you. I’m here to work with you. I will get my hands dirty in your code and we will figure out how to actually solve this problem. So solve the original problem that you’re trying to solve and do it accessibility. I think that for me anyway that gets a lot more…because I try not to focus  on things like buy-in. I can talk about this for hours on and we might have to do another podcast or something because we had so many technical difficulties… but I tend to look at something like buy-in as ok are you really interested in not serving disabled clients or people that might benefit from accessibility which is pretty much everybody? If the answer to that is no…you are totally willing like that’s what you want to do, then you’ve already bought into accessibility at that point. There is no point in me trying to sort of get you to buy-in to all the talking points necessarily. I’m just interested in and are you interested in serving all of your customers? The answer that is almost always yes. So at that point then we look at ok so these guys are part of your customer base too…and by the way nondisabled people are really going to like your accessibility features too. So then we can start looking at especially if you catch it the beginning of a project it becomes a lot less expensive. But if you catch accessibility at the end or you are in a situation where you’ve taken on a project and you want to make it accessible then it does become a huge just money pit and whatever. Because you are literally going to spend hours and hours and hours remediating stuff. So work smarter not harder. Do accessibility at the beginning and work it in along with security. So like you’d never try to bolt on security at the end of a project. Don’t do it with accessibility either.

Carrie: Great tip. I love that loaded question. Would you like the most customers to be able to use your website? Yes. (giggles) In that case let’s talk about accessibility features.
Amanda: Yeah. That’s kind of like how you have to do it because I think that even with developers even with stuff…as frustrated as we…look the accessibility community…we get frustrated with a lot of stuff because we are completely overworked. There is more accessibility work than we have people to get done. So there is a lot of you know accessibility is just kind of like…everybody’s going like Oh God. Not the alt attribute again! But that being said, I think that especially with a lot of developers it’s not that developers don’t care about accessibility it’s that a) you don’t know. Because the information that is out there for accessibility is really not awesome. There is information but it’s really kind of hard to find and it’s kind of…you have to know what to search for and so it really is difficult for developers I think because there is this whole systematic non-education thing. We also know…like we’re aware of it…and it would probably take about $2 million to fix it. Like we’ve actually had these discussions. How we fix the education problem? I think with developers and accessibility it isn’t that they don’t care about accessibility it’s that they just literally don’t know how. They start learning about this stuff and are completely overwhelmed because it’s like Oh I just got an accessibility audit. What the hell am I supposed to do with this all of this? You’re giving me all this information and I don’t know what to do with this. I think that’s kind of where developers sort of get overwhelmed and are just kind of like I don’t know how to deal with this. My brain is going to shut down and I’m just not going to. I think that’s really what happens.
Carrie: I think you’re spot on. Not to sound self-promoting but I wrote a good series on web accessibility  I think it’s a good series. I can’t believe I just said that. I wrote a series that’s geared toward developers over on my site Carriedils.com that if you’re listening to this and you’re new to accessibility, it sort of breaks down the overview of things that are involved and how you can start making simple steps in the right direction. Amanda? We are going to have to wrap up. Will you pretty please promise me that we can do a little screen cast and append it to this episode?

 

Amanda: Yes if you can give me like 20 minute. I’ve got something I need to finish up for somebody else. But if you can…we can totally like will jump on Skype and screen share and I’ll sit here for a couple of hours and do stuff.
Carrie: Dang! I didn’t mean you had to do immediately but…
Amanda: I this whole thing. I had it all planned out. Like I had written…like I had some code…that I was really kind of like going to…Google+ just really made me angry. Because I was like no! You just ruined my whole thing. So yeah I’ll totally do it. We can either do it today or we can do it tomorrow or something. Yes. We will totally do a screen capture and add it to this episode because that was definitely the whole part of…kind of one of the big things I would wanted to do today. We probably do another podcast just because we had all the technical difficulties. I honestly could talk about this for hours. And between like the technical aspects of accessibility and accessibility philosophy…and all this other stuff like I could go on for hours and hours.
Carrie: So if someone wanted to find you online and chat you up on accessibility issues, where can they get ahold of you?

Amanda: You can hit me up at…so Twitter is CSWordPress. That’s the professional one. You’re definitely like welcome to follow my personal twitter but you follow at your own risk. That one’s @megarush1024 but that one’s kind of where I let my hair down and stuff just happens. You can Skype me. What is my Skype handle? AJRush1. I’m almost always online. You can email me at Amanda@customerservant.com and then you can visit my website at customerservant.com. Which I so need to write more for. I know I also need to get up a portfolio of all my testimonials…because I have a bunch of case studies written for work that I’ve done. I just need to sit down and actually code a portfolio…some kind of styling and whatever for Utility Pro so the portfolio looks good and the testimonials look good. So yeah I know I need to do that as well. That’s where you can find me and if you send me Twitter mentions and stuff like that, I’ll get back to you pretty quick most of the time. But I’m definitely open for a chat.
Carrie: Awesome. Thank you so much for coming on and sharing. I look forward to chatting more with you. Thank you to everyone who was able to tune in live on the show and if you’re catching us after that, well I’m glad you’re here too. Well Amanda. Have a wonderful afternoon and to everybody out there. We’ll see you next week. Bye!