2018-07-25 UDL at the Library: Building Accessible Websites
Hello. Everyone, I'm Carolyn, Martin and I'm hosting, this session of the webinar series, Universal. Design for Learning, accessibility. At the library, today. Is our third session in this four-part series where, our presenter, will cover some basics, of accessible. Web content. Creation and. I'll introduce her in just a bit. But. Before we get started I would like to review a few tips on how to use our webinar system, you've. Already been muted as you join the webinar which means you will not be able to unmute yourself, after. Our presenter is finished and we have time you will have an opportunity to verbally, ask questions, and make comments but, for now you can type your questions, and comments in the chat box but, just make sure that they are going out to all participants. So we can all see your questions. We. Would appreciate it if you could take some time now to fill out a survey for us the, link is there in the chat box and. Just. Take a some. Time here to fill, out a couple questions and, it's nothing personal it's just to give us a better idea of who we are reaching in these sessions they'll, give you a few seconds to fill that out before we move on. You. You. For. Attending today's. Session whether, you're, tending, to live or via the recording, you can get a Medical Library Association C, credit and if. You would like to receive this credit please stay on the webinar and at the end we will provide you with information on, that but, please keep in mind we, would appreciate your taking evaluation. Whether you want the CEO or not. As. I. Mentioned, earlier. The, session focuses, on creating, an accessible web content, our, presenter, is anna marie golden, who is an IT accessibility. Specialist, here at the university of washington she. Is passionate about the web and making accessible, to people of all abilities and, was, a word that do-it 2013. Trailblazer, Award for her work to, increase accessibility on, the Internet so. Welcome Anna Marie we're looking. Forward to your presentation. Hello. As. Carolyn, said i'm anna marie golden, my first name is anna marie i'm an IT accessibility. Specialist, with accessible, technology, services, a part of University, of Washington information. Technology, so. My specific area, of expertise. Is web accessibility and it's, my job to provide support, and outreach, to our campus web community, to help them make their websites more accessible to, students faculty staff and visitors with, disabilities and in, this webinar today, I'll talk about accessible, web content, creation basics. To, help you ensure your web content is accessible to people with disabilities, so, these are things you can start doing today to, increase the accessibility of, your web sites and you, will get the most out of this webinar if you already have a good grasp of HTML.
So, Let's do the poll now. Okay. So in, the. Polling. Section, that just popped up I've got two questions what is your expertise. With HTML. And which, content, management system, do you use for your website. Responses. Are rolling in. You. I'm going to close the poll now it looks like most people have responded. So it looks like people have 20 more, seconds to submit their final answers. They have are in process and haven't submitted yet. Okay. So. Hopefully you should be. Able to see the results now. Agree. And, thank you guys for taking the time to answer that close questions. You. Okay. So I'm going to share my screen now. To, continue the webinar. Okay. So, today this webinar will cover the. Definition, of accessibility, general. Guidelines, heading. Structure, lists. Images. Links. Color, and tables. This. Webinar will not cover how to code in HTML or, how to create, a website. So I'd like to start off today with a couple of quotes from Tim berners-lee the inventor of, the World Wide Web the first, quote is the, power of the web is in its universality. Access. By everyone, regardless of, disability, is an essential, aspect and, then. The second, one the, dream behind the web is of a common information, space in which we communicate by, sharing, information, so. I share these quotes with you today because, more than ever effective, access to information technology. Is essential, to living in our society, the, Internet has really changed, how we do many things we handle a lot of things on the internet today that, we used to do in person, over the phone or, even through the US Postal Service but. Access is often impaired, by technologies. That are inaccessible, or unusable, making, it difficult for people with disabilities, to participate in, society and, at. The bottom of this slide I've included a link to the original HTML. Specification draft. I encourage. You to check it out and notice simplicity. In presentation. Because. In the beginning the web wasn't a very visual medium it. Was created on the idea that researchers. Could easily share, research, documents. With each other. So before we go any further I think it would be helpful if we're all on the same page with what accessibility means, so. Let's define what we mean by accessible. Accessible. Means, that, individuals. With disabilities are, able to independently acquire. The same information. Engage in. The same interactions and. Enjoy. The same services within. The same timeframe as individuals. Without disabilities with. Substantially. Equivalent ease of use now. This definition. Came, out of the University of Montana resolution. Agreement with the offices, civil rights in 2012. And, this. Is actually the definition the, courts have been using. Of. Accessible. In deciding, lawsuits, that have been brought against, owners of inaccessible. Web content. So, first I'll go over some, general guidelines, to making your web content more, accessible. Assistive, technologies, rely, on a web pages markup, to relay content, to users even, screen, readers used, by folks who are blind they don't actually read, the screen they, read the underlying, markup, of a web page and using, the semantic, nature, of each HTML, element, they, relay that content, to users who are blind so. That's why it's so important, to use HTML. Elements, semantically, or, for their intended, purpose so. Each HTML, element, has its own purpose and it's important, to use each element, for that intended. Purpose in other words what I'm saying is use, the correct element for the job and never, choose an HTML, element solely, for its appearance. When. It comes to visual appearance it's best to use cascade. Style sheets, or CSS for. Formatting, i really. Suggest minimizing. The use of inline styles, especially. Font and image sizes, and the, reason for this is because depending, on user browser, technology. Combinations. Inline. Sizing, can disable a user's ability to zoom to larger, sizes for, better visibility. Many. And this is important because many users with visual impairments. Often use screen magnification, software. So. They can zoom their screens to very large sizes to accommodate their visual, impairments.
With, A better view of a web page so. Really be mindful of your inline, styles, as these are the last styles, to take precedence when, a web page loads so, they really have the propensity to, overwrite, styles, as presented. In the site's cascading style sheets and all. I realize, out, that are you heading might. I interrupt for a second um someone. Is saying that um you're a little, bit quiet and I was wondering if you're able to move the microphone closer. To you oh okay. Let, me, spell. Um-- is this helping you're. A little. Bit louder I think, okay. How about now, yeah. I think you're much, better okay. Now is good yeah okay great. Thank you for letting me know that. Okay. And then realize, also that depending, on how your content management system. Is set up you may not actually have access to, your website style, sheets. Okay, so an accessible. Heading structure, is essential. To accessibility. So. Really. How do we usually, identify headings. On a webpage so. A few, common. Characters. Characteristics. Of headings are they, often use a larger, size font maybe. They use a different style and font a different, color and maybe. The text is bolded so, it, would seem then based on this criteria that. Headings are entirely visual, in nature but that's not true it. Also, provides. Structure, and context. For assistive, technology users. So, it is very important, that visual, headings are marked up as HTML. Headings because, they need more than the visual to interpret, this structure, to assistive. Technology, users, so. HTML, defines. Six levels of headings with one being the topmost level through. Six at the lowest level and in, providing this structure, for users, it's very, important, that headings, are in order without skipping levels, because this provides an outline of your page content, so. On the right side of this slide I have, an outline of headings to show how they create an outline of page content. The, heading 1 or the h1, heading provides. The title of the pages main content, the. Next heading level is a heading 2 or an h2, heading and it is a major section, heading and then. Following, that. Heading, would be a heading, 3 or an h3, heading and it provides a subsection. Of a heading 2 and so. On so this pattern follows. Four headings four five and six as sub. Headings of the, next higher heading, and the, result, is you end up with, an outline of the pages content so. Let me just provide, a note about skipping, heading, levels, skipping. Having heading levels is considered. Bad practice and. Really should be avoided. Also. A proper, heading structure is really good for search engine optimization because. Search engines use, headings, to index, the content and the structure of web pages. So. This, slide contains, an animation, that shows how, to create headings, in a content, management systems. Visual, editor, so. First, I'll add some text, to the editor, to save time. Then. I'll need to toggle the. Top toolbar, toggle, to. Expand, the toolbar. And then. I select, text and then from the editors drop-down, menu, I select header. Two, for. The first heading on my page and now it is an HTML, heading now, note there was no option for header 1 this.
Is Because the h1, on this page occurs, in the banner and it, provides the title of the pages content so, it is fixed for this website and I am unable to change it as a content, editor and then. The remaining headings, would fall under this h2. So. I'm going to select them and designate, them as h3. Headings following, the appropriate nesting. Level for a proper, heading structure. Okay and, then. We'll. See what the HTML. Markup, looks like underneath, that. Okay, so just a note about the mark-up here you may notice that my paragraphs, aren't marked up as paragraphs and they appear as regular, text, from, this for this example I'm using a wordpress instance. That automatically, designates. Text, as HTML. Paragraphs, at the, time this page is rendered in the browser, so. I'll run through this animation, again once, without pausing. So you can see that in its entirety. You. You. I paste. In my text I, toggle. The toolbar, toggle. I select. My text and. That, I designate, the appropriate, the appropriate, heading level for that. You. You. You. And then. There's the markup, for that example. So. Accessible. Images are, another really fundamental, piece in web accessibility. What, would the web be like without images, it, would be pretty boring with just text wouldn't it but. What about people who cannot perceive images, well, that's where alt text comes in. Alternative. Text or alt text, is an, attribute of the image tag that provides a textual equivalent, to an images, meaning or purpose, every. Image on your web page that conveys meaning needs, to have alt text so all users, regardless. Of ability are. Able to access the information of those images so, assistive. Technologies, relay, this alt text to users because because. They are unable to read images they need this information in a form they can read, so they can relay that to users and, then. When an is when an assistive, technology. Encounters. An image on a web page first. It will announce that it is a graphic, and then, it reads the alt text, to users, so it's really not necessary, to save photo of in your alt text unless. There's really a specific reason to do that in the context, of the pages content. So. What, about decorative, images, images, that do not convey meaning well. If an, image does not convey, meaning, and is being used solely for decorative. Purposes use, no alt text, in other words alt equals quote, quote, this. Allows assistive, technologies, to skip over and totally ignore the image, so. Maybe, you're wondering well what if I just leave the alt text out won't that work well. No. Not really what, happens, if alt text is omitted entirely. Assistive. Technologies, will read the path and file name of the image instead, and this most likely won't, make sense to users and then they may wonder what they have missed in the image that they cannot see, so. I also, strongly. Urge you to use text, for text, instead, of images, of text the. Reason for this is that some users, with low vision use. Screen magnification, software, to, enlarge the screen for better visibility. But. What, happens when we substantially, in large images, they. Pixelate, so. Then when it comes to images, it can be hit and miss for, these users because, many images pixelate.
When Zoom to very large sizes, rendering. Them unreadable, for, these users. Okay. This, slide contains an animation, that shows how, to create alt text, in a, content, management systems. Visual, editor on the left. Side of the slide is an image of strawberries, that I want to add to my web page and the, visual editor is on the right of my slide. So. To add this image, to my web page with alt text, I'll click the add Media button, in, the visual editor and once. I've gone through the process of selecting my image file for uploading, I'm presented. With a dialog, box containing, a form for, the image attachment, note, the text box labeled alt text. Here, is where I'll enter my alt text, for this image. Okay, and then, the. Sample, HTML, markup, at the bottom of this slide shows, how the alt text gets added to my image markup, so, I'll let this run through one more time without, pausing, so you can see it again. You. You. You. Okay. Creating. Lists successively, will also make your wind content, more accessible, the. First thing you can do for accessible, lists is to make sure your lists are marked up as hTML, is in the HTML, markup so. I've often come across lists. On websites, that look like this but they are not actually, marked up as lists in the HTML, instead. They were created, with text, items that, were preceded, with dashes, well you, know visually it sure looks like a list but structurally, it is not a list and it just doesn't work well for assistive, technology, users, an actual. HTML, list, provides, context. To users, when. A screen, reader user encounters, an HTML, list it, first announces. That it is a list then. It provides, the number of items in the list this. Allows users to know items in a list are related, and how many items there are in the list the. Screen reader also provides, users with the option, to skip over the list if they wish so. There are three types of HTML. Lists today. I'll cover the most common ones ordered, list and unordered, list I won't, cover definition. Description, lists, in this webinar because they really aren't used that all. An ordered. List is, also, known as a numerical, list so. Use an ordered list when, the order of contents, in the list matters, I have. Placed the HTML, markup for a very simple, two item ordered list on the left side of this slide and, on. The right side you can see what this list would look like as rendered, in the browser on, a web page. This. Slide contains an, animation, that, shows how, to create ordered. Lists in a content, management systems. Visual, editor, so. First I'll type out a couple of words and. Then. I'll select them, and. These. Items will become my list items for this list, once.
They're Selected I'll. Use, the numbered list. Button. To create my ordered list, now. I have a completed, ordered, list of two items and then. I'll expose, the HTML, markup, so you can see what that looks like for, an HTML, markup ordered, list and, then. I'll run through this once, without pausing. So you can see it again. You. And now, I have my numbered list. And there's. The HTML, markup for that list. An. Unordered. List is also. Known as a bulleted, list use. An unordered, list when, the order of the items. In the list does, not matter, so on, this slide I have placed the mark-up for a very simple two item unordered. List on the left side and then. On the right side of the slide you can see what this list would look like on a web page. On, this. Slide I have an animation, that shows how, to create unordered. Lists in a content, management systems, visual, editor again. I'll start out by typing, a couple of words and then I'll select them and these. Items will, become my list items for this list once. The items are selected I'll. Use. The bulleted, list button to create my unordered list, and now. I have a completed, unordered. List of two items and then. I'll expose, the HTML. Markup, so you can see what that looks like for an HTML. Marked up unordered, list and, then. I'll run through this once again without pausing, so you can see that again. So, I type out my words. I select, them and hit the, bulleted, list button, there's, my unordered list, and there's. My markup for that list. There. Are a few things you can do to ensure your links are accessible. The. First is to use meaningful. Link text to provide context, for users about a links, purpose, or destination. This. Means the link text, make sense out of context. When read by itself so. That's important, because screen, reader users, have this whole whole, other way of navigating, they. Can bring up a list of links on a web page just, by using a keyboard shortcut, to help them quickly find the information they. Are looking for when. This list is populated with, link text such as click, here or read more, users.
Don't Have enough information to decide whether they want to click those links the. Only way they can tell with these links are for them is to, follow them and then, this can be time-consuming and, frustrating for. Users when they land on content, they weren't looking for or were interested in I, also. Highly. Suggest, omitting, the use of target, attributes, such as the target, equals underscore, blank, attribute. That forces, links to open in a new tab, this. Can turn into a bad user experience quickly. Because, it is it essentially, breaks the back button, users. Who cannot see the screen may not know a new tab has opened up and when they hit the back button to get back to where they started nothing. Happens, because their browser history, does, not follow them into the new tab so. Then it can be really difficult. For. These users, to get back to where they started from so, for best usability. It's really. Best to let users decide, where links will open and. Underline. Your links, since. The inception of, the web links. Have been underlined, and users know they can click, text, that is underlined, many. Designers, think the underlines, mess, up their visual, designs, and they remove them without realizing, that, there really is a purpose, to the underline it allows. Them to stand out on the page from regular, text, and I'll, talk about links that are only recognized, through color later in this webinar. Links. Should also look like links, and not buttons, to avoid user confusion, there, are fundamental. Differences in the behavior of buttons and links that can confuse, users. Many. Assistive, technology, users are keyboard-only. Users, for. Example it actually, it really makes sense that users who are blind do, not use a mouse right, they, cannot see where the pointer is on the screen and they, can't see where to click either so. Navigation. For, these users really occurs by tabbing, through items on a webpage using, the keyboard and through, keyboard, shortcuts. So. When these users tab to a link the, link is then activated, by using the Enter key when. These users tab through a button, the, button is activated, using the space key, another. Major difference between, buttons. And links is that a link navigates, users, to other contents and a. Button defines, an action, such as submitting. A form. And. If you use link images, on your website instead, of describing the image the, alt text should instead, describe, the links purpose, or where, the user will go when they click the link. Documents. Should, alert or, excuse me document links, should, alert users that a document, will open when. Users click the link and this can be done in a couple of ways, one. A document. Icon with alt text, for example if, it's a PDF document, you can use the PDF, icon with, alt text, that reads PDF. Document. Or, to. Alert, users by making it a part of the link text. This. Slide contains an, animation, that shows how, to create links, in a content, management systems, visual, editor so. First, I will click the insert edit link button, in the editors toolbar, and, the. Insert, edit link dialog. Appears, in the. Insert edit form. Dialog, I'll enter, the URL for, my link into, the URL text. Box. And then. Next I'll enter the link text into, the link text text box and. Then. I'll click the add link, button to, add the link to my web page. Once. The link is added to my web page I see the link complete, with link text, unfortunately, this link does not have an underline because, I'm still looking at it in my editor but if we, were looking at the actual web page it would be underlined. So. Your, mileage may vary with the underlines, depending, on how your browser and editor is set up and, then. I will expose, the HTML. So, you can see what. The mark-up looks like for this link and. Then. I'll run through this once more without pausing. So you can see it again. You. Enter. My URL. And the. Link text. I add, that link to my page and. Then. I'll expose, the HTML. Markup. You. Next. Is accessible. Color and first, I'll talk about color contrast. It. Is important, to maintain an adequate color, contrast. Between foreground, items. And their backgrounds. Because, some users with visual impairments, are unable, to distinguish. Text, from its background when the contrast, is poor this. May prevent them from consuming. The content on your webpage because they simply cannot read it so.
On The right side of the slide I have two images of a tabular, style navigation. Menu the top. Image has very poor contrast, and the, text appears to be washed out this. One totally, fails the color contrast test. Now. Contrast. That with the image on the bottom the. One on the bottom has much better contrast. Between the text and its background and it's, much easier to read than the image above it. So. How do we measure color contrast. Well. There, is a formula, but, seriously, there is an easier, way there. Are a number of color checkers, out there in the form of browser plugins, web based tools and standalone, applications. Many. Of them are free so, it isn't necessary, to pay for one and I'll, talk about two, examples today the. Color contrast analyser. From, the Paciello group that, has eyedroppers. To grab any color from anywhere on the screen and then. The, color contrast checker, from web aim that, allows you to lighten and darken colors. To find an accessible color, combination. And I'll show you how these tools, work in the next few slides. This. Slide contains an. Animation, to, show how the color contrast, analyser from the Paciello group works, on. The. Left of the slide are two text boxes one. That has good color contrast and, one that has poor color contrast. And then, on the right side is, the dialogue, for the color contrast analyzer. This. One is actually a standalone, tool, so. To, use this tool first. I'll simply, click on the foreground color of the eyedropper. And then, I'll use it to select the foreground, color and, then. Once I've selected the foreground, color the hex number of the color automatically. Appears, in the tools first, hex, text, box. Next. I'll clip the cart click the background eyedropper. And use. It to select the, background color and the hex, number, for, this color also appears. Automatically. This time in the tools second, hex text, box and the, tool automatically. Tells me that this color combination, passes. The color contrast test. The. Process, is the same for, the next text, box I'll. Select. The foreground, color. And the. Hex number for that color appears, in the tools first, hex textbox. This. Time I'm going to leave the background color because, I've used the same background color for this textbox, as the first and we, can immediately see, that this color combination, does not pass the color contrast test, the. Really nice thing about this tool is that it can be used for more. Than evaluating. Websites, you, can also use it to evaluate, your documents. For adequate color contrast. To and then, I have the link to this free, tool, located. At the bottom of this slide and I'll, also run, through this once more without pausing. So you can see it again. I'm going to select my foreground, color. Going to select my background, color and these, colors pass, in. The. Second example I select. My foreground, color and I. See that this immediately. Fails. This. Slide contains, an animation, to show how the color contrast checker, from web aim works this. Tool works a little differently, than the last one is I actually have to add the hex number, of the colors I'm evaluating. And then, I can drag the progress, bar to lighten, or darken a, color until. The combination. Of the two passes, the color contrast test. So. I'll begin by pasting.
A Hex, color for, a color I know that, does not provide, adequate color, contrast. With this current background color, so, initially, we see toward. The bottom there that. This. Does. Not pass the color contrast test. Because. My foreground, color is not dark enough with the background, I'm. Going to drag the foreground, colors, progress. Bar until. The combination. Of these two colors passes, the contrast, test also. The link to this free, tool is located. At the bottom of the slide and I'll, run through this one more time without pausing. So you can see that again. I'm. Going to add my foreground, color it. Fails, I move. The progress, bar, until. It passes in all areas. Another. Aspect of accessible. Color is meaning, it is, a good idea to avoid conveying. Meaning through color alone, because. We may not perceive color in the same way that others do not, that it's wrong to convey meaning through color but, what I'm saying is it really shouldn't be the only way to convey, that meaning. Also. Provide a backup so. On the right side of this slide I've provided a couple of examples. Of what I'm talking about when I say to provide a backup. The. First set of images each. Show a version, of the same link note. That the second, one is underlined. Ever, since the inception of the web links, have been underlined, and people know they can click on something that is underlined, so. Underlining. Links, provides the perfect backup. The. Second set of images, show, a set of carousel, lentils, and for those who have not heard this terminology, before, lentils. Refers, to the, dots at the bottom of an image carousel also. Known as an image slider which. Provides the pagination, indicators. For the number of slides available in, the carousel and also. Indicates, which image, or slide is currently in view so. Comparing, this second, set of images, note, how the first, image, indicates, which, slide is in view by color alone as we, see that first dot is a different, color. Now. Note. The differences, in the second, image this, one uses numerical. Information and, LU of the traditional, dot type lentils, and I, can see which slide is in view by the different, shape in addition, to color so. This provides a great backup. You. And, the. Final topic for today's webinar is accessible. Tables. Sometimes. It really makes sense to display data using, a table and this is okay providing. The table, presents tabular. Data and was, not used for formatting, purposes. So. To provide you with a bit of context. Think about the way you read a table. Okay. Usually. It is row by row from. The top down reading. Each cell in each row from left to right so this makes perfect, sense for the presentation. Of data but. When used for formatting, content. It may not make sense when, read to screen reader users, in this manner and that's, why I suggest. Using tables, only for, tabular data. When. Creating tables it's. Important, to use proper, table markup, so, assistive, technologies, can relay the correct, relationship between, the table headings and the, table data so. To create this relationship begin. By marking up table, heading rows using. A tee head element, the. Tee head element, is placed, above the tee, body element, and in, addition, within the table rows the data for each individual, cell should. Be placed within a th, element instead, of a TD, element and we'll see an example of this coming up in the next slide but first. Going. Back to the way you think thinking. Of the way you read a table, what. If you have access, to the cell data but. Not the heading it falls under well. This might make it very difficult to understand, the relationship, of the tables data so, this is where the scope attribute. Comes in, use. The scope attribute. To, designate, the scope for each table heading, the. Scope relates, the table heading information, with the table cell data so. What that means is when, a screen reader user tabs, through the table, cell by cell the. Heading information is read in addition, to, the data of each cell providing. Context, on the relationship. Of the tables data so. If the scope of the heading is a column, then. The scope at, buuuut needs to be attributed, as call, co l if, the. Scope of the heading is a row then. The scope needs to be attributed, as row and if. Your table has both column, and row headings, then both scopes need to be attributed. So both headings, are read with cell data. This, slide contains, a table markup, example. On the. Left side of the slide is the completed, markup, for a simple, two column, four row table.
Note. That I've used the T head element, and I've, used the th, elements. For. My table headings and the, scope of this table, is called, four column, so. This table is excellent, for accessibility, but also when, the table headings are marked up correctly in this manner it, allows the table data to, scroll independently. Of the table headings so, for this very. Small table it may, not be very important, but, if you have a table that is longer than the content, area that holds, the table it is very useful and, visual. Size can be relative. To remember. How some users with visual impairments, have their screen zoom to very large sizes, for a better view, it's. Also helpful, for smaller screen, sizes - such, as those found on various mobile devices, and. Then on the right side of this slide you can see how this table, is rendered. In the browser. Note. That my headings are presented, in bold text by default, so, this eliminates the need to actually bold, this text, and then, if this if, the columns of this table were wider you. Could also see, that the headings are natively centered, by default, and, then. Below this table, I've, included, a bit of CSS styling. That, I used, for the visual, appearance, of this table I included. This just, so you can see which styles, I've applied and know, that these were, not styled, this way by default but, it really does make for easier, viewing as, I present this table, to you today. And, that's. What I have for you today a lot. Of times in my line of work web. Folks ask me where to get started with web accessibility, because. In the beginning it can seem very daunting. So, today I've talked about the basics, and if you start with the best practices I talked about today you. Will substantially, increase the, accessibility of your web sites now note, that this doesn't mean your site is fully accessible, but, you are off to a good start and know, also that when your site is accessible, it makes, it better for everyone not, just people with disabilities so, regardless, of ability or, device being used it. Should. Just work. Thank, you Anna Marie for bringing, our attention to what all goes onto into making website. Content accessible. And what. We can do to work, towards. Making our web sites more so and I know I have, learned some things that I should be doing and so, I really appreciate your sharing, your expertise, so. Now it's time for our audience. To ask questions or, to make comments, and you, can feel free to put, those in the chat box just please make sure it says all participants, or if. You would like to avert beliee ask. Your question just click on that little hand icon where, it's just, above the chat box there on the right and Maddy will unmute. You I know. We do have one, question, that for sure that was in the chat box um and, it, said can you explain, what, happens, to a page, when. There is more than one. Heading. One listing, oh. Sure. So. Remember. How I talked, about how screenreader. Users, have this whole other way of navigating.
Well. One, of those keyboard, shortcuts, that they use to, bring up, they. Can bring, up not just links, on a web page but, also other, items including. Headings, so. They can bring up a list of the headings. Or, they. Can actually do. The keyboard shortcut, to just navigate, through the page on those headings. So if you have a heading structure, that's out of order and then. They press the keyboard shortcut for, the next heading. Oftentimes. The screen reader will say no. Next heading even. Though there are next, headings because it's looking for that next level of heading and, you. Know it's not seeing that next level of headings so then it thinks, maybe the content, is done and so, sometimes this can lead to screen. Reader users, missing, content that's, there just because they don't know it's there because their screen reader was telling them no, next heading. Thank. You I. Know we have someone asking about. That. The presentation, will be recorded and, yes it is being recorded and it. Will be posted on this. Link, that I'm putting in the chat box give. Us a little bit of time we've. Had a lot of webinars but. We will post it there when it is ready just. Scroll down to past classes, and if. People want the slides. Annamarie, do, would you mind being contacted, to offer, those yes. That's perfectly, fine my, email, address is up on the screen right now so. Feel free to take that down and email me. And, someone. Else has asked a color contrast analyzer, had a checkbox that talked about colorblindness, can you explain what. Selecting, it does. So. It, will allow. It. To evaluate based, on that, different. Visual impairment, so I, know they have a number of simulators. On their website, as well that, help, simulate. Different, types of disabilities, and different types of vision problems, so, I think what this one does is, just. Analyzes. Based on you, know selecting, that item, that you're. Analyzing for, someone who may be color blind. Because. You know some of those things, would.
Actually Pass the color contrast test so there's, a, few different types of color blindness, so the most common one is red and green and then. There's also like blue and yellow so. Blue and yellow actually, provide a decent, contrast. Depending, on which few of them you're using and in fact I. Actually. Went, down and took a tour of lighthouse for the blind several, years ago and one. Of the first things they pointed out while I was there was. That the, colors were that the walls were this color. Of dark blue and. Apparently. It helps people with vision problems. Be, able to actually perceive, it better and so, a lot of times like when they're viewing text, I actually, created, a website for a group of deaf blind folks one time and they. Told me that this provided, better contrast, for them so, there was a feature on the website that allowed them to click. It and the site would change into those colors, for better contrast. So. While. It may provide you know better contrast, for one group of people if I'm color blind and, I can't really tell the difference between blue, and yellow and that's probably going to be a problem for me. That's. Helpful. Yes. It is thank you and we. Have another one when, you said links should be underlined, is that primarily, for links within the, text or does it include, a bull a list of links I would. Also include it in a bulleted, list of links. Because. Well if you start adding it some places and not other places, then you end up with inconsistencies. On your website, that could you. Know confuse, some users who might have certain. Types of cognitive impairments. Any. Other questions. I have. A question and maybe this is rather naive but I was wondering, how. Oft House Pacific, do you have to be with all text. Actually. You, know it seems like it would be so simple but I actually consider, alt text, kind of an art form because. You know you. Think, the, saying, you know an image can. Say a thousand, words well, we, don't have room for a thousand, words when we write alt text, so, actually. Maybe I should have mentioned this I actually, suggest, limiting. Alt, text, to a hundred characters, or less if at. All possible and. The reason for this is the way that screen readers kind of chunk up the data so. It'll go through and read. The hundred. Characters, and then it pauses. While. It buffers, for the next chunk of data and, sometimes. This pause can be long and then users think there's no more content, so, I suggest, leaving it to a hundred characters or less and then, if you, need two. More, to describe, a more complex, image, i really. Suggest, using, the longdesc. Lomg. Des, see. That. Allows you to add, a longer description. Of an image that, can either be on the same web page or, on, a different page link, to a different page. And. If. That long desk is that a website, or is that something oh I'm. Sorry that's an HTML, element okay see. Thank. You anyone. Else. Well. I if. You have questions later I'm sure Annamarie, would be open, to having. You contact, her Matti, put her email link there in the chat box and as. Well as you can see it there on the slide, we'll. Go ahead and move on, and. Just let you know about. Taking. The. Survey the evaluation, for, receiving. Seee credit, from the Medical Library Association, now. You've got the link, there in the chat box and also. We would appreciate any. Feedback whether, you want the Cee or not so, if you wouldn't mind taking that survey, we really, would appreciate it, if you. Are watching the recording you can still receive, this credit, for. The webinar sessions up to six months the live presentations. And this, is the third of four sessions.
Focusing, On accessibility, you. Can go to the link that is in, the chat box but let. Me put that in there again and. You. Can register for our last session which will be on procurement. And if you haven't already and each. Of these sessions will. Be recorded. And right, now we have one of them listed there just scroll down to past, classes, and as. We have time we have several webinars this month and we will get those up there as soon as we can and you. Can review. The, recording, or send, it to others that may be interested. And. I. Just. Wanted to give. Ana Marie a big thank you for, presenting. This, wonderful, information and, thank. You all for attending and we hope you can come to our last session thank. You.
2018-08-14 09:45
