ACCESSIBLE DESIGN
•
0 likes•320 views
This document discusses making course content more accessible. It begins with an introduction to accessibility and a discussion of common digital materials used in courses like documents, presentations, videos, and websites. It then outlines the "6 core skills" of accessibility: 1) using headings, 2) formatted lists, 3) hyperlinks, 4) color and contrast, 5) alternative text for images, and 6) captions for videos. For each skill, examples are provided of how to implement the skill accessibly as well as examples of poor implementation to avoid. The document emphasizes that starting small with even a few of these skills can greatly improve accessibility without much additional effort.
![How comfortable are you with your
accessibility practice?
[ 60 seconds with a partner ]](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to ACCESSIBLE DESIGN
Similar to ACCESSIBLE DESIGN (20)
More from Ann Fandrey
More from Ann Fandrey (7)
Recently uploaded
Recently uploaded (20)
ACCESSIBLE DESIGN
- 1. With Accessible Design in Schoology Ann Fandrey | @annfandrey | January 29, 2018 Empowering Learners
- 2. How comfortable are you with your accessibility practice? [ 60 seconds with a partner ]
- 3. Our 90 minutes together this morning: Accessible thinking + course website usability 6 core skills demo + discussion Slides Students & the 6 core skills Accessible thinking + course website usability 6 core skills demo + discussion Slides Students & the 6 core skills
- 4. Images Word docs PowerPoint Google AppsVideo PDFs Embedded tools (Quizlet, Notability, etc.) Your course website
- 5. UsThem Us
- 8. We will never achieve “100% accessible”
- 9. Simple actions (just 6!) on the part of everyone can improve the accessibility of digital spaces by 80% ...and you’re already doing some of them!
- 10. Accessible things you’re already doing Spell check Define acronyms Avoid jargon Spelling out abbreviations
- 11. Images Word docs PowerPoint Google AppsVideo PDFs Embedded tools (Quizlet, Notability, etc.) Your course website
- 13. It is more work. AND if you add it into your workflows, it becomes just the way the work is done.
- 14. 6 Core Skills
- 16. 1 Headings
- 18. 3 Hyperlinks
- 19. Anatomy of a hyperlink embedded descriptive starts with keyword
- 21. Worksheet on Where the Red Fern Grows descriptive (so you know where you’re going before you click)
- 22. Where the Red Fern Grows worksheet starts with keyword
- 23. Click here for instructions on making pie. Click here for instructions on making pie Click here for instructions on making pie Pie-making instructions (new tab) Interactive Pie Quiz
- 24. Poor example of hyperlink use in an email Hello Dr. Soandso, Thank you for contacting our office. We would be happy to assist with the redesign of your course website for COUR 3001. A project of this nature typically takes 8 weeks; the preliminary timeline document is here. In advance of the kick-off meeting, please read and initial the memorandum of understanding in this Google doc: https://docs.google.com/document/d/1BA94RehVApmCXKIDYMfx_4oOO yU77A1VnwuX_ryqHec/edit#slide=id.g11a2c1da02_1_54 Then review this blog post that describes our philosophy for usability and accessibility, and request a new Moodle site using the request form Thank you, Thomas Whitehead Sandy Soandso redesign of COUR 3001
- 25. Poor example of hyperlink use in an emailSandy Soandso redesign of COUR 3001 Hello Dr. Soandso, Thank you for contacting our office. We would be happy to assist with the redesign of your course website for COUR 3001. A project of this nature typically takes 8 weeks; please see the preliminary timeline. Important: in advance of the kick-off meeting, please: 1. read and initial the memorandum of understanding (Google doc) 2. review this blog post that describes our philosophy for usability and accessibility, and 3. request a new course website Thank you, Thomas Whitehead
- 26. 4 Color & contrast
- 27. Contrast ratio is brightest : darkest
- 28. Avoid rainbow color schemes
- 29. Avoid rainbow color schemes
- 31. You’re always safe with black and white
- 32. Add a highlight box behind text to create contrast over images
- 33. Add a highlight box behind text to create contrast over images
- 34. I need to emphasize these three words
- 35. I need to emphasize these three words
- 36. I need to emphasize these three words
- 37. I need to emphasize these three words
- 39. I need to emphasize these three words Don’t do this! (Looks like a hyperlink)
- 40. I need to emphasize these three words Don’t do this! [Hard to read]
- 45. Here it is in Google Apps
- 46. What would you like to know?
- 47. A diagram that shows relationships among organisms. A branching, treelike diagram in which the endpoints of the branches represent specific species of organisms. It is used to illustrate phylogenetic relationships and show points at which various species have diverged from common ancestral forms. Cladogram showing 3 families of the order Crocodilia: Gavialadae, Crocodylidae, and Alligatoridae.
- 48. Image of a gavial: a large, crocodile-like reptile about 350 pounds and 20 feet long, dark gray in color and an elongated snout about 12 inches long with a large boss at the end of the nose. A content page
- 49. An assignment page (not about gavials)
- 50. [ demo ]
- 51. 6 Video captions
- 53. Slides!
- 54. Teleprompter Handouts Visual aids Archival resource
- 55. Gavials ● One of the longest of all living crocodilians ● Native to India ● Snout is adapted to catching fish, its main diet ● Male has a distinctive boss at the end of the snout ● Inhabit flowing rivers with high banks Boss →
- 56. Use layouts instead of text boxes
- 57. Gavials ● One of the longest of all living crocodilians ● Native to India ● Snout is adapted to catching fish, its main diet ● Male has a distinctive boss at the end of the snout ● Inhabit flowing rivers with high banks Boss → Correct color contrast Alt text for text boxes (yes!) Alt text for images
- 58. Order the objects (use Tab key to test)
- 60. PDF, 3 per page with lines for note taking
- 61. Word document, separately prepared for accessibility ✓
- 62. PDF, Notes view where notes include the speaker notes + alt text ✓
- 63. Teaching Students To Make Accessible Contributions
- 65. Start small, but start now. How will you start?
Editor's Notes
- I am not an accessibility expert, I am a person who struggled with what it meant to incorporate accessibility best practices into my instructional design practice We will be talking about both Schoology and Google Apps.
- Who is in the room? How comfortable are you with your accessibility in your practice?
- During our 90 minutes together, we will talk about accessibility thinking and what I mean by that, I will show you the 6 core skills of digital accessibility, we will spend an additional amount of time talking about slides, and I also would like to float the idea to you that we should also be teaching our students these 6 core skills.
- We’re going to be talking exclusively about digital accessibility, and that means not just your Schoology course website, but also the documents you connect to it. We will focus on Google Apps, images, and video.
- I started this work thinking I was doing extra things to my daily work in order to make them accessible for the occasional person who was blind or deaf. I was doing “us/them” thinking. Just tell me what to do and I’ll do it! Was the mentality I had. I thought: this is just extra work for a few people’s benefit, and I saw it as a chore. But now that I’ve been giving this talk around a lot and talking to educators and instructors and instructional designers about their challenges, I begin to see that we all need a balance of both of these things: a balance of understanding who this work will benefit, and some specific things to do.
- Co-led the project to redesign this website for the U of M community and, we hoped, the state of Minnesota. This is some of what I learned.
- [definitions] Accessibility means that the information is designed so it can be read and used by as many people as possible without the need for accommodation Disability is a conflict between a person’s functional capability and the world we have constructed. This is called the social view of disability, which we can contrast with what is often called the medical view of disability, which is that there is something wrong with the person that needs to be corrected. When we do this work, we are giving learners agency to choose how they will be involved in their own learning.
- Here is a liberating concept for us all: we will never achieve 100% accessible websites and documents. There will always be a need for accommodation for someone’s needs.
- However, simple actions (just 6!) on the part of everyone can improve accessibility of digital spaces by 80%. And you’re already doing some of them!
- Accessible things you’re already doing: Spell check Defining acronyms the first time you use them Avoiding jargon, opting for simple words Spelling out abbreviations first before using them
- Another thing you’re already doing: assessing the contextual needs of your students and making decisions about the type of document to provide them based on how many times they will access the document and what they will do with it. For example, when you decide to use Google docs to create your learning materials, you allow the student to choose whether they want to interact with it electronically or download it as a PDF or Word document. You give them agency in this way. Accessibility is all about providing maximum agency to all students.
- In fact, the more work I did in this area, the more I realized: Anything I do in the name of accessibility so that the learner can read either with their ears or with their eyes also improves the usability of the system. Usability is a system’s ability to help the user achieve their goals - helping them achieve their goals empowers the learner. It also helps you be more efficient because it frees you to be having more of what Tom Brandt calls learning conversations (as opposed to non-learning conversations). For students, that usually boils down to 2 principles: findability, learnability, scannability. For instructors, it could be simple maintainability of the course website (the Schoology site).
- That said, it is more work, AND If you accept the 6 core skills into your workflows, it becomes just the way this is done (e.g., the way slides are made, the way agendas are made, the way course videos are made, etc.) I hope to convince you of this: When I first started teaching last semester and got overwhelmed by the amount of other work that goes into it, captioning my videos, which I’d always done faithfully before, suddenly reappeared as an add-on to my workflow. However, I recentered myself and re-added the best practices back in, one at a time, as I had done when I first learned them. Accessibility thinking and accessibility best practices are a process.
- This is not training - this is to make you aware of these. We are putting this resource on a Schoology resource site so you can access it later.
- Where the magic happens: paragraph styles and the list buttons in the rich text editor of your Schoology assignment edit page. Look for the rich text editor in any application if you want to make your text accessible. We also will look at how to toggle between the rich text (normal) and HTML (code) view of your assignment page, but you don’t have to learn this if you don’t want to or don’t feel ready to right now. Understanding just a little bit about how HTML (hypertext markup language) works and what its function is on websites can enhance your accessibility practices.
- Headings. You are using the rich text features to access paragraph styles. Select the text you want to style and then find and select the heading level that makes semantic sense in the document. Headings should be nested within the one of the level that preceded it. This is not just about the visual appearance of the text, it is also about making sure the screen reader or other adaptive technology can find and read headings to the learner, allowing them to scan just the headings in a document to find the information they’re looking for without having to read the whole doc. Demo in Schoology Demo in Google docs
- Formatted lists is the simplest of the skills. Instead of manually creating lists (e.g,. Using dashes and spaces - list item - list item Etc. ...you select the items you want to make into a list and press the list button in the rich text editor. This action also modifies the HTML markup of your page; now, users of adaptive technologies can isolate and listen just to the list items on a page, rather than having to listen to the contents of the whole page.
- This is both a skill and a style to hyperlinks, that is, you must make some decisions in writing accessible hyperlinks in addition to knowing how to use the rich text editor to create them.
- Accessible hyperlinks are embedded, descriptive, and start with a keyword.
- They are embedded in the text that describes where the link goes.
- They are descriptive, so you know where the link leads before you click on it.
- And they start with a keyword or the word that is least likely to be used multiple places on the same page. In this example, I changed “Worksheet on Where The Red Fern Grows” to “Where the Red Fern Grows worksheet” because there may be other links to other worksheets on the page.
- Click here for instructions on making pie, with click here embedded. Not descriptive Click here for instructions on making pie, with link embedded in the whole clause. Descriptive, but doesn’t start with a keyword, and it’s unnecessarily verbose. Click here for instructions on making pie, with “instructions on making pie” embedded. Doesn’t start with a keyword. Pie-making instructions is most concise Best practice is to open in same tab and to let the learner know when you are going to open a new tab.
- Example from “in the wild” where you can see a bunch of things going on that could be improved with better accessibility.
- Vastly improved both for accessibility and usability by writing accessible hyperlinks, and adding a list where content warrants.
- Color and contrast: there are just 2 rules to remember about color, that we need adequate color contrast (strong contrast foreground against background) and that we should never rely on color alone to convey information.
- Contrast is measured as a ratio of brightest to darkest.
- Rainbow color schemes are confusing to the eye because some of the colors have adequate contrast and some don’t. It’s difficult to effectively use a rainbow color scheme, and I recommend to avoid it.
- Even if you put it on a dark background, it’s still not good. Now you have an additional problem with color vibration.
- Most of the time you’ll be good if you just eyeball it. Very dark text against a very light background is a good general starting place. Use the contrast checker at webaim.org/resources/contrastChecker when you’re not sure.
- You are always safe with black and white. Black and white contrast is 21:1 But sometimes you might want to use colors other than just black and white
- The place I usually see color contrast issues is when people try to place text on top of images. This black text is placed on top of an image of the side of a building that has a variety of color. The text reads, “Add a highlight box behind text to create contrast over images.” It’s hard to read, though, because it competes with the background, especially in the darker areas of the image.
- We can improve this slide by doing what the text says: placing a highlight box behind the text. I also added a little transparency to the box, so you could see the image behind it.
- Avoid using color alone to indicate information; some people in the audience will miss it, either because of low vision or because of environmental conditions like bright sunlight or washed out LCD projection in the classroom.
- This example is poor because it uses just the color red to emphasize the words.
- This example is better because it uses color plus boldface to show emphasis.
- You might also use color + size.
- Better, you can use white space to emphasize the 3 words. Less is more, in the case of this slide.
- Don’t use color + underline for emphasis, because it looks like a hyperlink. In digital environments, it will look like a broken link. In print, students will be frustrated they can’t click on it.
- Also try not to use color plus italics, which is hard to read, especially in large doses, and also should be reserved for conventional book titles and foreign words.
- Of course, none of these strategies will work for someone who is using an adaptive technology to read the text, because adaptive technologies most often don’t read the style of the type. If you have something important to point out, consider writing the word Important with a colon.
- What problem might there be with this hyperdoc? Source
- Alternative text, or alt text, is just what it is called: a text alternative to a visual display. Alt text helps a screen reader user get the information that is suspended in an image.
- Schoology provides an Edit Image dialog box that allows you to add an image description. But it doesn’t prompt you for this information until you upload the image and then click the icon at top left of the image. You would enter the alt text for the image into this Image Description field, and it would end up as an alt attribute of the image in the HTML code.
- Format > Alt Text for both Google Docs and Presentations
- If you’ve ever seen a broken link icon on a web page, you know the pain of missing information. You’re not sure whether you’re missing important information or not. If the website where this broken link icon occurs happened to have added alt text to their image, you would be able to view the alt text and at least get an idea of whether you were missing something. Otherwise, you just won’t know.
- Alt text is contextual and depends on your instructional goal for including the image, as well as the level of learner that you teach. In this course web page that shows a picture of a clade that shows the taxonomic relationships among 3 crocodile-like creatures, your goal may be to just show what a clade is. In that case, it may be perfectly appropriate for the alt text to be “A diagram that shows relationships among organisms.” You may be interested in providing a more ornate explanation for more advanced students, e.g., “A branching, tree-like diagram in which the endpoints of the branches represent specific species of organisms. It is used to illustrate phylogenetic relationships and show points at which various species have diverged from common ancestral forms.” However, if you actually are interested in having your students learn the specific species relationships of these creatures, your alt text for this image might read, “Cladogram showing 3 families of the order Crocodilia: Gavialadae, Crocodylidae, and Alligatoridae.”
- In any case, you don’t need to add the words “image of” or “picture of” to your alt text, because the screen reader will already have announced the presence of an image to the learner.
- In the event that your image is on the page merely as decoration, you can either write “decoration” in the alt text field, or simply leave it blank. Some screen reader users prefer one and some prefer the other. And, some systems you encounter will not let you leave the alt text field blank, so in that case you could use “decoration” to get through that screen. Systems sometimes default to reading the filename to the learner, e.g., “gavial.jpg”
- Demo in the Schoology site
- In my quest to incorporate all 6 core skills of digital accessibility into my workflows, I no longer consider my video projects done when I upload them or link them in my learning management system. Instead, I consider my video project done when the corrected captions have been published on YouTube. We will talk about YouTube because Schoology doesn’t have a good, obvious way of adding captions to media files that you host right in Schoology.
- YouTube does a decent job of automatic captioning, but you will always need to correct the captions, if only for capitalization of sentences and proper nouns, and for punctuation. This is a picture of a video I made for my class, and the screen where I can make corrections to the automatic captions that had been generated for me. Besides auto captioning, you also could upload a script, which YouTube will sync with the sound file in the video, OR you could type along with video, a kind of dictation system that pauses the video while you catch up with the typing. Demo correcting captions in YouTube
- Let’s talk about slides and slide decks.
- People use them for so many purposes: as teleprompter or lecture notes, as handouts, as visual aids, and a 4th function I see more and more, which is the slide-as-archival resource. It’s difficult to make slides do more than 1 of these things as one time, and therefore difficult to give good recommendations for accessible slide decks that services all scenarios.
- Just regular slides have a combination of titles and text or titles, text and images. This slide is meant for an archival reference only and will be distributed to students as a Google Slides file. Let’s examine the 5 things that will need to be done to all the slides in this deck in order to make it accessible.
- Use layouts instead of text boxes. In this case we’ll use the one-column text layout and just know that we will need to add alt text to the image, because Google Slides doesn’t include placeholders for pictures.
- We will need to correct the color contrast that’s present in the slide title, add alternative text for both the text boxes and the images. (Yes! For the text boxes as well!)
- We’ll need to order the objects in the order you want them to be read by a screen reader user. If you didn’t use the standard layouts to create your slides, or if you added additional shapes or text boxes to the original layout, the slide software will put them in the order that you created them in. This is a picture from PowerPoint because PowerPoint has a better reordering interface than Google Slides. However, you can do the same thing in Google Slides by using the tab key. You may need to group objects in order to get them in the order you want them in.
- The U of M accessibility resource website has a video tutorial series that will show you start-to-finish how to prepare slides for distribution if you are planning to give students the native slide file or slide deck (either a direct link to the Google Slides or a PowerPoint file ending in .ppt or .pptx)
- OTHERWISE, you should consider providing a separate handout that is not your same slide deck. PDFs of slides that you print 3-per-page or 6- or 9-per-page are inaccessible because the information in the slides becomes an image thumbnail that cannot be read by adaptive technologies. You would need a copy of Adobe Acrobat software and would need to add alternative text to each individual slide image (thumbnail) in order to make the handout accessible.
- Instead, consider creating a separate, accessibly formatted document that includes all the main information of your presentation.
- Or, alternatively, prepare a PDF of the image plus speaker notes (another option in your slide software print menu). Make sure the speaker notes include an alternative text version of the slide content itself, which can serve as both a reminder to you to adopt this practice as you talk through your slides, and also will help screen reader users understand the content of the slides (now images) in your presentation deck.
- We live in a Web-based world, and our world has become much more visual and much less textual than it was during the 20th century. Therefore I would argue that, in the same way that schools taught penmanship in the 20th century, we ought to teach digital accessibility to students today. That these practices become just the way children learn to write and display information in Web-based environments. Student portfolio
- One way to incorporate accessible web writing is to include it in the rubric for writing assignments. This is from the course I’m currently teaching. I separately linked out to the Accessible U website and asked the students to find and read the tutorial on headings. Incidentally, students aren’t used to this at all! Of 20 students, 19 of 20 formatted their heading text to be visually bigger than the body text, but only 6 actually got it right in the HTML.
- The 6 core skills are a lot to start all at once. So we recommend you pick one and start doing it until it becomes a habit, at which point you can