Introduction to web accessibility

Presentation transcript

Introduction by Jeanne Arnold

Jeanne Arnold: So I’ll just say good afternoon to everyone my name is Jeanne Arnold for anyone I don’t know I’m the Chief Diversity Officer here and also chairing now the ADA Committee so I first like to thank the ADA Committee members who are on Zoom right now for all their help with planning this is our third annual I believe somebody correct me if I’m not right on that third annual Disability Awareness Month program and we’re very fortunate today to have with us one of our own here Adrian Cooke from our Communications and Marketing and he is the Director of Digital Strategy, Communications and Marketing and he’s going to uh do a presentation for us today that we thought the Committee thought would be very timely since we’re all in this virtual world right now and his presentation is called “Text, Accessibility, and You”. So we’re going to learn I think quite a few things about how to make what we do on the web uh in various scenarios accessible for everyone in the community. So very timely at any time but particularly now that we’re all in Zoom in our virtual world so welcome Adrian and we thank you for taking the time to put this together for us and I’m going to turn it over to you.

Outline

Adrian Cooke: Alright thank you very much Jeanne it’s my pleasure I really am excited at the opportunity to talk about accessibility with everybody and so let me just start off with some some basic information about the format today I have a lot to cover I have slides and I have some demos that I’m going to show everybody so what I would ask is that while I’m doing the slideshow until we get to the Q and A portion I would ask people to turn off their video.

And that will mean that you know the the slideshow makes more sense for everybody thank you secondly please understand that this is being recorded the intention is to publish this on youtube publicly so that people can easily access it the other thing to note is that the the text of this the the speech that the sound will be will be converted automatically to live captions using an automated service called Otter.ai.

So currently you can get to that those captions if you see where it says live on Otter.ai live notes in your Zoom window there’s a drop down arrow and you can use the drop down to view the stream on Otter.ai live notes what that should do is bring up.

A window like this hopefully everybody can see. My my browser window that shows the notes that shows that the text of what I’m saying being automatically transcribed and hopefully without too many errors okay so I’m going to switch over to my slides.

Okay so let me just start my timer okay so the purpose of today’s firstly can people give me a thumbs up if if every if you can see my slides right now taking up the majority of the of the display yes great great perfect thank you all right so my intention today is to provide a presentation that is both informative um about the sort of breadth of digital accessibility as well as providing you with some practical tips and some information about how this can pertain to the work that we all do here at the College the format is going to be I’m going to discuss briefly what assistive technology is and how that relates to digital accessibility then I’m going to do a couple of demos one for captions I’m going to cover some information about captions and do a bit of a demo there I’m also going to provide some demonstrations of of reading some pages I’ve prepared for the purpose of this talk in a screen reader and then I’m going to discuss some of the factors that underlie both of those experiences to give you a sense of the types of things that we are attempting to do at scale across the College website and web presence that will have the effect of scaling that digital accessibility across the site to everybody and then we'll end with some pointers about how to get more information and take any questions.

What is assistive technology?

Alright so the first thing I want to cover is the idea of assistive technology which is also abbreviated as at so you’ll see that throughout my slides today assistive technology is based on the idea that accessibility is for everyone and the the sort of famous within accessibility within digital accessibility circles of the famous sort of story of how accessibility can be for everyone in actual fact is what is known as the curb cut effect—the idea of cutting ramps essentially into curbs was originally begun in the United States around the time that veterans began to return from the Second World War and it’s emerged as one of the things that we all take for granted in our daily life and we all benefit from if you've ever been pushing or pulling something on wheels you would certainly know this firsthand or you know yeah so the idea is that this is true across a lot of things that pertain to accessibility so just because the things that we talk about today uh might be necessary for people with certain disabilities to actually be able to fully participate the addition of accessibility features is generally helpful for everyone.

You may have even just a quick point on that last slide you may have even noticed that that’s true with things like watching uh youtube or television with captions on and the sound off for example another important framing piece for this is that the web content accessibility guidelines which we we refer to in training and I may refer to in conversations with campus partners is a set of guidelines that we are required to meet in order to remain in compliance uh with the accessibility expectations that are placed on us and that regulate us because the excess not to put too fine a point on it but accessibility is the law in the past year I've had a good opportunity to learn about this because we and we were investigated by the U.S. Department of Education’s Office for Civil Rights—this was actually the reopening of an existing investigation; in any case it was successfully concluded—but it’s the type of thing that can happen at any time and since the website is constantly changing we definitely need to make sure that we are keeping it accessible as we develop the site and as we add content to it.

So this gets back to my question of what is assistive technology and for anyone who’s seen the movie Aliens uh with Sigourney Weaver I thought this might be a good analogy because what assistive technology does is it is essentially sits on top of technology that we’re already using so in this in this analogy the technology we’re using is is the web page the content we’re viewing in the web browser that would be Ripley, Sigourney Weaver’s character, represented by the person inside of the suit here and the assistive technology is the power loader the suit that makes her more powerful than she otherwise would be because it is it is using the existing technology that the browser in this case assistive technology to voice to add additional functionality.

Some of the types of assistive technology that exist it covers quite a wide range so I just want to give you a quick survey magnification is probably one of the most common forms of assistive technology and probably so common that we don’t even necessarily think of it as assistive technology but I’m certainly finding as as I’m getting older and my eyes aren’t quite what they used to be that magnifying content is often necessary and so magnification is a is a typical example.

For people uh for whom colors might not be as easy to discern as they are for a lot of people then there are various there’s a various range of color tools that are available from things like creating a color inversion which is what you see in in the two examples here the first image has been inverted using a setting in mac os to invert the colors in the display other kinds of color tools that are more possibly more common would be.

Tools that enhance contrast so nothing quite as dramatic as in this example but macOS and Windows have tools that will increase the threshold of contrast between foreground and background colors this is also something that is quite important for color on web pages as well.

Another form of assistive technology which we’ll come back to is the screen reader the screen reader converts text into speech so we’ll come back to an example of that this is a screenshot from the voiceover utility in macos and then captions which describe audio as text an interesting thing about captions that might not be obvious is that captions are they they describe what is happening in the scene not not simply the the script or not simply the spoken content you might be familiar with this when it comes to seeing captions that that introduce music or that describe sounds or even captions that describe when audio is intentionally not present if that wouldn’t be obvious.

So to summarize assistive technology is software that modifies the behavior of other software and critically its ability to do that is dependent on the quality of the information that we put into the underlying software.

1. Reading a meeting

So now we’re going to look at a few examples of where the idea of text and text provided in a particular way can help to turn something that would otherwise not be accessible into an accessible experience as I mentioned at the outset of this meeting and and showed in a brief screen share Zoom captioning is something that I’m currently using for for this talk though the captions themselves are not appearing directly in Zoom Zoom has the ability to Zoom has the ability to allow an integration such that the captions would appear in Zoom I tested a few tools and I went back and forth with with eric in it who’s responsible for administering our Zoom account and there are some limitations or issues with the way that certain technology would be integrated into the into our college account and so for that reason the tool that I’m using today as a demonstration is appearing in a separate window I’ll come back to that window in a moment to show you and to show that people have joined us since we started but the main point here is that it is possible to have Zoom captions appear in the Zoom window but the probably the easiest way that you would be able to have that happen is if you assign a meeting participant to type captions live during during your meeting sessions so if that’s possible that’s something that you can do right now I’ll also provide a screenshot in a moment to show how to turn that on and I’m certainly available and we'll be publishing notes on on the website to to to get to give you a sense of how to do that this is a screenshot of the situation that we currently have in our session today this is based on a test that jaron and I were doing yesterday this is this is how you might go about using Zoom in a situation where you were using the technology that I’m using today which is a which is a software called a service called otter ai so you would need to have the captions open in a separate window.

Otter.ai the the version I’m trialing right now it doesn’t come cheaply it costs thirty dollars per month per host so I would pay thirty dollars as a host per month to have the ability to do this it does come with a bunch of other features but just know that that that is something to take into account interestingly there may be a free option through google if you’re giving a google slide presentation which I literally just learned about five minutes before starting this presentation so I haven’t tested it and I’m not using it today but if I learn more about that I’ll definitely add that to my notes as well on our website to get going with captions in Zoom you have to ensure that in the Zoom website you log into your account and you need to make sure that the in meeting advanced settings have closed captioning turned on and you'll probably want save captions uh turned on as well so that you can get a transcript of the captions that would that were shown live integrated into Zoom during the session.

The service I’m using today because it’s a separate web service it actually saves the captions uh separately just for what it’s worth and then in the Zoom player there’s also controls that you can use to do things like set the size of the captions once you've activated the feature and here’s another one that I also quite like which is always showing meeting controls one of the things I don’t particularly like personally in Zoom is how the controls disappear when you’re not you know we’re not hovering your mouse over the over the Zoom window so in this case the you can you can just force them to always be on and that’s why that’s an accessibility feature I find that’s really useful.

Okay oh I did say I would do another uh brief screen share so I’m just going to do that quickly let’s just see how that’s going all right so hopefully what you can see is my browser window and hopefully it’s about to update with the words that I’m saying now it’s a little bit like watching siri on an iphone sort of gradually get things more correct or maybe less correct after it’s heard you and processed the information all right back to the slides.

2. Hearing a website

So that was captions that was the idea of being able to read something that you would normally listen to or watch in this case in the second example I want to show you the idea of hearing something that you would normally watch or read.

What I’ve done here and I want to give you some a little bit of background for the for the page that I’ve prepared here I’m going I’m about to switch over to play this video and the way I prepared this was I wanted to get some content for this test that was essentially real world content so what I did is I I looked for some I looked at some content that was recently shared in the new engage gettysburg site if you haven’t checked it out definitely give it a look engage.gettysburg.edu and this is a post that was created by a participant in engage gettysburg by user and engaged gettysburg advertising the existence of an upcoming event and I just want to put in context that this this event did have some reasonably good very brief uh but reasonably good summary of the information that was in the included flyer that was shared so it isn’t completely an inaccessible piece of web content in and of itself so that’s why I've entitled this slide a less accessible page and this side slide a more accessible page and so what I’m going to do is show you both and demonstrate the difference between them okay.

Screen reader: Note: this page is for demonstrating screen reader accessibility problems. See web accessibility and inclusive design link for additional details. First name last name’s profile photo link First main last name link single right pointed angle quotation mark gettysburg college link campus recreation link 20 hours ago join the financial well-being committee to get answers tips and advice for staying financially well during the covenant 19 pandemic this will take place via Zoom on friday october 30th at noon https gettysburg dot Zoom us slash j slash xxxxxxxx link pictures uploaded by first name last name link do great work stevens hall.

Adrian: Okay so let me see if I can switch to… Okay so what you should be seeing now is the live version of this web page in my browser and what I wanted to point out firstly I removed the information from this that identified the poster because there’s I’m not I’m not wanting to to anyone to feel singled out here uh that’s why the Zoom link was xxxx however you can imagine from this from hearing this that what you would have heard instead of that is a is a random string of letters and numbers and then when it came to the image itself the screen reader voiced some information it said that there was an image uploaded by a particular user first name last name however it didn’t provide any information about what was in that image which may leave a user wondering what they are missing in other cases and it certainly it certainly happens the user who posts the announcement might not include information text information at all so in this case the key information was included in the post as I said it’s not a completely inaccessible page but if there was critical information in a flyer and that information is not encoded into the web page as html text then it would probably not be available to the user unless it was also jammed into a metadata element called alt text inside of the image and generally when people are posting images and not posting text they're also not thinking about text so often the two things go side by side okay and now I’m going to share another version.

Okay so in this version that I’m about to play there’s a few key differences so I’ll play it through and then I’ll discuss what they are.

Screen reader: Note: this page is for demonstrating screen reader accessibility problems c web accessibility and inclusive design link for additional details coronavirus and your financial health first name last name’s profile photo link first name last name link single right pointing angle quotation mark gettysburg college link campus recreation link 20 hours ago join the financial well-being committee to get answers tips and advice for staying financially well during the cold day 19 pandemic this will take place by a Zoom on friday october 30th at noon join Zoom meeting link event details we’re all concerned about the impact of covid19 on the health and wellbeing of our family and friends at times like these we also need to consider our personal finances career and slasher education date friday october 30th 2020 time 12 0 0 to 12 45 pm stream join Zoom meeting link event flyer figure flyer shilling event details in nine grad smartphone app link event flyer do great work stevens hall

Adrian: Okay so now I’m going to switch over to the live web page so I can scroll around on it.

Okay so this is in the accessible version that you just heard announced by the screen reader oh and by the way I didn’t say this but the reason why I’m doing recordings of the screen reader is because I find that switching between all these applications is hard enough and assistive technology such as a screen reader can sometimes get confused and sometimes all the elements that I can see don’t show in the Zoom so that’s why I did them as a recording rather than actually having my screen reader read this page to you right now so what’s different about this one the first thing is that I added a heading to this page because there wasn’t actually in this in the post where I found it on the site there wasn’t actually a heading for the event and so I added a heading because in the context of this page it makes sense to announce what this is what this content is that you that the user is about to hear and as we’ll see in a little bit headings are a key feature of ways that you can make your content accessible to someone using assistive technology so I added and heading level two so we have a heading level one already on the page that’s this one here I added a heading level two here the next thing that you'll notice is that I i actually converted the the literal URL into link text so it simply says join Zoom meeting as you can see the underlying URL is the same but that means that what the screen reader will do is it will voice the words as you heard join Zoom meeting rather than reading out an entire URL.

Now it didn’t take especially long for the screen reader to announce the previous URL but you could probably imagine that if you’re sharing something like a google docs link or just in general having having the words describe the link is what is what we should be doing and that is definitely something that automated testing tools will pick up on so it’s always good practice to instead of using literal URLs in your digital content to use actual words and let the link do the job of getting people to the page there might be some exceptions to that here and there especially if you’re promoting like a domain name or showing something at the end of like a youtube video or showing a very short URL but generally speaking uh it’s a good idea to do this with with links oh and the other reason actually is that a thing that assistive technology can do is bring up a menu of all of the links on a page so if that menu ends up being simply a list of URLs it’s very difficult to use so that’s that’s a key reason why this is important next thing you’ll notice is that I added uh what’s called a heading level three to to this which is further subdividing the content on the page so that there is a section called event details then in that section I included information that was in the flyer so that it isn’t relegated to the flyer so the idea is I’m trying to invert the relationship between the flyer and the text so instead of the text being the text that’s available to the screen reader instead of that text being a sort of poor or minimal reflection poor substitute or minimal reflection of the information in the flyer I want it to be the main event and have the flyer be supplemental it’s not that the fire can’t exist but if there’s a lot of text in it that text needs to be available to to people on the page and generally speaking if we are asked to place in in my team if we are asked to place by campus partners a large amount of text in images on the site we will often ask in return that we convert that to literal text to html and and try to separate out the image uh from the text so for example a postcard that or something that is like a postcard that you might share on say instagram wouldn’t be appropriate for us to share on the College website what we would want to do is take that background image and present it separately and then present literal text as the text in the image and remove it from the image in this case because it’s a print flyer I just allowed the whole thing to be here but made sure that it was possible to get to that information without it it might seem peculiar that I allow this information to exist twice I think that if you’ve worked with me for any length of time especially when it comes to issues like search engine optimization my my mantra is generally don’t duplicate content but in this case I think it’s important because what we’re doing is ensuring that if a user was using a screen reader and invoked the menu to to bring up the headings and navigate by headings they might go directly to event details and skip this paragraph here and so if they did that it would be useful for all the information to appear in one place the other reason is simply that it probably aids readability if someone’s in a hurry regardless of whether they're using a screen reader or not they might see event details and and notice this little block of content here and just sort of intuitively go there with their eyes and so when the information is really important it can pay to repeat it on the same web page okay let’s go back to slides.

Okay.

I’m just checking in on time sorry about halfway through okay I think we’re gonna I think we’re gonna do okay here I do have one more demo to show you actually two more demos to show you the next one is pdfs and so what I’ve done so far is I’ve given you a sense of of a very brief introduction to what it what it’s like to listen to a screen reader as it announces the content on a page what I now want to do is show you three different kinds of pdfs in various states of accessibility and I want you to get a sense that that the takeaways I want to come from this is that it is true that pdfs can be made to be accessible but I also would like you to to to be sort of aware that pdfs take longer to get to that state generally speaking than html does in addition to that remediating a PDF it’s like remediating the content on a single web page if we fix a PDF that that is that is not accessible then that singular document is now accessible but content in the website that is repeated can be changed at scale can be changed programmatically so there’s a lot of reasons why minimizing the area that we’re changing as is the case with you know putting content on the website and using the content management system.

That that sort of helps the accessibility effort to scale across the organization the other reason is that generally speaking assistive technology does best when it’s interacting with browsers and that’s especially true with modern browsers they tend to have a harder time with pdfs and pdfs tend to be less accessible by default okay so with all that preamble bear with me in a moment while I bring up my examples.

Okay switching over.

Alright so three examples the first one is kind of based on the idea of a flyer that was created for an event this is a common pattern that we have here at the College. This is intentionally without sound until I try to play it which will happen in a second.

Screen reader: “Warning: empty page”

Adrian: So what happened in that first example is that the I was I was opening in the software adobe acrobat running an accessibility check on it showing that there was no content in the tags panel and showing that further there’s no content in the content panel.

Then when I attempted to have the screen reader announce the content of the page it let me know that there was nothing there for it to actually read okay next example.

I’m just going to pause it here for a moment to explain what’s happening so far so this is an example of a document that this is how this is the accessibility level of this document while it was being created by our staff in communications and marketing and because it was being created in a different application a different generator than the previous one it was created using adobe indesign which is for creating layout for print for print pieces adobe adobe indesign included the text content in the output so unlike the first example you can actually see that even though it isn’t tagged and tagging is a requirement for accessibility there is content in the content panel and as in my demo as I scroll this content panel you can begin to see some of the content that exists that exists and what can happen is a screen reader can fall back from reading the tags to reading the content in the content panel and that’s what we’re about to see.

Screen reader: Protect yourself and others cover your mouth and nose with a mask or cloth face covering around others face masks or face coverings must be worn by all employees working on campus when in the presence of others and in public settings where other social distancing measures are difficult to maintain eg common workspaces meeting rooms classrooms etc clean and disinfect clean and disinfect frequently touch surfaces daily this includes tables doorknobs light switches handles desks computers phones and keyboards learn more at gettysburg.edu coronavirus monitor.

Adrian: The reason I let that play obviously you could you could see where it was going once it got started and once it went to the the next item the reason I let it play through is I wanted you to understand how the screen reader was reading the content in the order it exists in the content panel and in the content panel the coronavirus URL appears to the screen reader immediately after the clean and disinfect panel it also is worth pointing out that the clean and disinfect content was read immediately after the first piece of content on the site well after the heading and that is not the typical order in which content would be that people would expect it to in you know in the us would expect to engage with the content we’re looking for left to right first and then top to bottom so that is something that is incorrect in the in the current version in terms of the practical effect of having the screen reader read the content panel okay last example.

Screen reader: Protect yourself and others face masks cover your mouth and nose with a mask or cloth face covering around others face masks or face coverings must be worn by all employees working on campus when in the presence of others and in public settings where other social distancing measures are difficult to maintain eg common workspaces meeting rooms classrooms etc tissue box monitor your symptoms employees must conduct symptom monitoring every day before reporting to work anyone who is sick should remain at home and not report to work employees should not return to work until they have been fever-free for at least 24 hours without fever-reducing medication.

Adrian: So in that final example there’s a couple of things to note firstly the content was read from left to right first before going from top to bottom the reason that that’s the case is because over here on the left hand side in the tags panel that’s the order in which the content is tagged and what I did was I and and it’s definitely hard to see and it doesn’t pass accessibility contrast standards for sure but this is the the the the outline that acrobat provides around the content I highlighted the the specific figure group it’s like a figure and a caption so that you could see that when when the screen reader was reading h1 it was reading the content at the top of the document protect yourself when it was reading the second piece of content it was uh sorry here we go when I was reading the second figure that was the one selected in the tags panel and then finally we got to this third item in the in the in this particular part of the tag tree.

What is there to say about that and how does it pertain to you I think the most important takeaway from this would be that pdfs pdfs come from a world in which the intention is to print color on paper and while it’s possible for a lot of the documents that we create and share internally to exist as digital documents they were often created in order to print and the idea there is that they would be a fixed size and width and they would have layout which is entirely appropriate to that medium but the problem comes in when we are making that content accessible on the web because if we simply put things that were intended for print onto the website without remediating them first using the the the the careful tag structure in this column here then what we are doing is systematically disadvantaging people who depend on assistive technology and that’s not really a situation that we can get ourselves into in the same way in in the print world I mean there are obviously accessibility issues with print but when it comes but I guess the point is when it comes to the web if we’re putting content on the web we have an obligation to make it accessible and to do that with a PDF often takes longer the other thing I’ll note about a PDF is that as documenting complexity increases so does the time it takes to remediate all of these features or in fact to generate it as accessible in the first place that is nowhere more true than when it comes to forms one of the ways in which the web content accessibility guidelines ups the ante for forms is that it requires us to make them fillable and keyboard interactable so that means that a user who’s ex who is exposed to a form who is presented with the form they need to be able to use a screen reader to fill it out and that means that if your form even if it’s perfectly passes all of the tag checks and everything and you get all those beautiful green check boxes in the accessibility checker it won’t pass the standard if it’s a form and the form fields are not keyboard fillable so if I can’t tab through that form and fill my text into the fields then it won’t pass the standard because again we would be systematically disadvantaging people who depend on that as the way to interact with the form so that leaves us with a dilemma sometimes what is the solution it can be that we make the PDF fillable and we do do that in certain cases generally speaking I would I would say let’s see if we can make it into a web form it’s going to generally be much easier for the end user to interact with that form and it'll usually take a lot less time all right just wanna switch back to my slides now see how we’re doing for time.

Okay.

These slides by the way will be available to you after the fact and so so will all the links in them if you would like to delve further into this question of what it’s like to actually be blind and use a web you depend on a screen reader I did find a really good example and I've i've put the screenshot in here with the captions on at at the point in this this is a one-hour presentation that involves a blind user using a screen reader on a live like on a live Zoom meeting and what they were doing is navigating two different websites using their screen reader and one of the things you’ll notice if you watch this video is that there’s there are points at where the user gets stuck and it takes the user a while to recover from from being stuck and you can see the cursor moving around the screen and you can see certain things happening but that user doesn’t have vision so what we've been doing today is you've been able to see for the most part the people watching this would have who have who have vision would have been able to see that the screen reader was was highlighting the areas of the page it was moving through obviously a blind person doesn’t get that aspect of it so it’s an important thing to think about that blind people are people without any vision or who have severe vision impairments would be completely dependent on that text in order to move around and this was the this was the the presenter’s answer to the question would you contact a company whose website you visited if it wasn’t accessible and when pressed he eventually said if it was a severe enough problem I’d probably just do business elsewhere so that I think that’s a really important thing to think about for constituencies that we are trying to engage as well as just for the way that our users would interact with our content and maybe drop off and go elsewhere but we would be underserving them and if our content was inaccessible okay the next part of my presentation is to introduce you to some of the ways that we can avoid these issues.

3. The magic of structured text

So basically the idea here is that the web was intended to originally intended as a way to share documents and documents in the in the sense that the web was was invented for to be marked up using hypertext hypertext markup language the t part of that is text the hyper part refers to linking the linking of documents and the markup part is what we’re going to focus on here that refers to the idea of structure or giving meaning to the content.

I was trying to think of a good metaphor for how to how to get across this idea and I i settled on this idea of a of a silverware drawer that didn’t have dividers versus one that does if you can imagine trying to find the right utensil if you if you couldn’t see especially let’s say you were trying to find a specific one it might be very difficult to do that in an unstructured uh in an unstructured container which is kind of what you would have if you just dumped all of the text from like a print document onto into like the alt text part of a of an image it ends up being unstructured the content is there but it ends up being like a river of text that they have to work their way through whereas a an organizer provides structure so that you can at least have a fighting chance of going directly to the thing that you’re interested in.

And in that sense structure equals meaning it’s the idea of what is often referred to in in front-end web development as adding semantics or adding the correct semantics to a page it would be possible in a document to mark the conclusion part of let’s say an article or a paper by calling it conclusion and separating it with with vertical space above and below and maybe bolding it or making it a different font size but the really important thing to do is actually to mark it up as semantically a specific kind of content and in this case this green text it’s com it’s the conclusion to to a piece of writing so there’s a big difference with what a screen reader can do with text that might be bolded or larger versus text that is is wrapped in a semantic tag that gives it meaning and this is where I wanted to show you the last example because headings are so important if you took two messages away from today when it comes to providing to making screen readers have an easier time with our site it would firstly be make sure that that there is a text version and that when there are images those images are described with alt text the the next thing would be making sure that your document has headings okay so here’s the last example prepare it now.

Screen reader: Headings menu screen reader test accessible coronavirus and your financial health coronavirus and your financial health you are currently on a heading level 2 headings menu screen reader corona event deep event details you are currently on a heading details you are currently on a heading level 3.

Adrian: So that was a quick example but what I wanted to demonstrate there is that the as as as as I was using the screen reader I was able to use my keyboard to invoke a headings menu.

And then I was able to use my arrow keys to navigate that headings menu and that was jumping me and jumping the screen reader and and the the text that it was announcing to that part of the page and the longer the document is the more important it is for users to be able to get around the page that way and so adding headings and adding structure to the pages in this way it’s kind of like adding those dividers in the silverware drawer and making it easy to go directly to the content in question so those would be the those would be the the real takeaways from today make sure that there’s a text version of all of your content make sure it is marked up semantically so that it has meaning and in particular make sure that there are subheadings to to organize the document so that people can find their way around.

Web accessibility resources

So this is the final part before we move to some questions so just to attempt to to sum up here these are the things that I've i've just outlined the one thing oh and I i probably earlier mentioned that we tend to prefer html and that would be my advice to everyone as well basically we want to make accessible we want to make our content as accessible as possible so the the thing that you can do after one two and three being curious and understanding what this experience is like for people who use assistive technology making sure that images have text have alt text to describe them so that they can be announced using the screen reader and then using heading structure the next thing would be to prefer html over other document formats so I already covered that that general idea but it is really important if if we receive a request from a campus partner to to get something on the site and it comes to us as a PDF a question that will often ask is does this need to be a PDF and we see that as the beginning of a conversation to really try and figure that out because if it can be html then it probably should be unless there’s a really compelling reason not to and those definitely exist and then the final idea would be to allow time and just to to understand that for larger or more complex documents or if the answer to the previous question is yes it does need to be a PDF that definitely takes time to get right.

We have a guide on our site that and this is based on training that I have done in the past and will return to to offering again which is how to use microsoft word to create content using the idea of document structure I have a video on this that you’ll be able to access in the slides but I’m not going to play it today but you can get a sense of what that’s like and it’s some of the things that I've gone through this afternoon.

It is essentially possible to create content using word whether it goes becomes part of a PDF or whether it becomes stays as a word document even or whether it becomes web content you can’t you can use word as your drafting tool and make it appropriate for all of these things it’s just about how you use word to do that and it’s about ensuring that you give it that semantics and not just change the look of text okay and then finally we this is the this is the place you can go to for everything that that my team uh has that we can publish for you to to provide accessibility resources there we are in the process of building it out still we want to be able to add content that’s appropriate for for beginners for content creators across the College and also for developers and people whose whose interests or job responsibilities tend to the more technical side of things we have things like browser plugins and and and examples of running through those plugins and how we would read that content and I’ll be I’ll be adding some more videos we do have some rather long-winded videos of me right now but I’m going to be adding some shorter ones to give you a quicker uh way to get up and running on how to install a browser plugin and just see if the content that that is on your area of the site is passing the test.

Okay now we come to uh questions and I want to just point out just before I end the slideshow I’m not sure if people are going to have questions and I’m going to throw it open we’ve only got a few minutes left I have received questions in the past and I do want to quickly address them often the the type of question that I would get I don’t want to preempt anyone if anyone already has this one but I want to make sure I cover it the question tends to be a form of does it have to be accessible in these circumstances generally speaking the answer to that question is yes the the the the legislation and the guidelines and the documentation and the way that it is implemented and regulated it doesn’t distinguish between public information private like information behind login whether it’s sent as an email attachment or actually on a public website if it’s the College then we have an obligation to make it accessible okay something my share there and please feel free to turn on your your video if you would like to so I’ll just finish that thought by saying we do have an obligation to make it accessible I definitely understand that it isn’t always possible to make everything completely accessible and so sometimes we have to figure out where users are going and what what is what is the most critical information and and triage it from there I’m certainly I know we’re almost at time but I’m certainly hoping to take any other questions that people may have let’s thank Adrian for this really informative presentation there’s so much to be cognizant of and it’s so good to know we have resources there in him and C&M and in these tools that you've got already on the web guides and so we really appreciate you being our speaker today for our third annual program and probably half a minute if there’s a question from the audience my pleasure.

Questions?

Anybody have any questions that haven’t been addressed?

Lorraine: Adrian I’ll ask a question we you mentioned a couple of times about contrasts and colors I mean how are we to know if we’re putting something up what’s a good background color or not I mean what how would we know what to do with that that?

Adrian: Thanks Lorraine that’s a great question I we have a tool that we use called there are there are many such tools but this one is related to the same folks that create one of the plugins that we use I’m going to pop it into the chat right now but it’s also available at the page of resources that I that I’m including here using that contrast checker you can put in colors or even at the very least select eyeball colors that might be close to the colors that you’re using and what it’s going to do is generate a report for you that explains what the what the contrast ratio of the foreground text color to the background color is this does get get complex sometimes if the background is something like a photograph which has multiple colors it also changes whether or not the on this it depends on the size of the text as well so large text doesn’t have to have as higher contrast ratio in order to pass than say body text but basically short answer to your question there are tools available for this automated tools will try and tell you if it if they detect contrast errors otherwise I’m happy to to explain this and this probably a good topic for a future quick how-to video if you’re working in Word or something like that as well—Word’s accessibility checker will also try and point out low contrast. Thank you, my pleasure.

Jeanne: Thanks Lorraine and thanks again Adrian I think we are out of time I’m sure people have to run but you know where Adrian is he is he’s accessible as well so you can reach him if you need to so thank you again Adrian we really appreciate it this is information we need and it’s great to use as a topic to highlight disability awareness month so thanks again.

Adrian: Absolutely, Jeanne, thanks for the opportunity it’s my pleasure and thank you so much for everyone for for participating.