tag:blogger.com,1999:blog-75781130176273386682024-03-13T18:46:01.475-07:00>>> Create AccessibilityDesign for EveryoneMelissa Oliverhttp://www.blogger.com/profile/13758071099912169070noreply@blogger.comBlogger51125tag:blogger.com,1999:blog-7578113017627338668.post-77364587402171678772018-06-24T21:31:00.002-07:002018-06-24T21:31:59.775-07:00ISTE18: Building District-Wide Capacity for Accessible Design<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1SzpGCMcU6KOeaR8dNUQV7LHEKX41wGuO-CJfNFtGOyupQcA97zDso585Xzbc_1tmFytgGdCNDpzAIP1sR35wORG2USjWoNvR2NjpYgSmsVjwnLIPMs2foljVJVIkAi9GB-9HgOXH9Iz8/s1600/CreateA11yWUSD.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Sketch Graph plotting Awareness and Skills leading to Inclusive Communities" border="0" data-original-height="1200" data-original-width="1600" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1SzpGCMcU6KOeaR8dNUQV7LHEKX41wGuO-CJfNFtGOyupQcA97zDso585Xzbc_1tmFytgGdCNDpzAIP1sR35wORG2USjWoNvR2NjpYgSmsVjwnLIPMs2foljVJVIkAi9GB-9HgOXH9Iz8/s400/CreateA11yWUSD.png" title="" width="400" /></a></div>
<a href="https://sites.google.com/wusd.k12.ca.us/createaccessibility/home" target="_blank">CreateA11y @ WUSD</a> is a project that I have been working on within my school district. Its goal is to build awareness, empathy, and increase skills around accessible design to create more welcoming, inclusive online environments and communications that are accessible to our students, staff, families, and community members.<br />
<br />
It began by focusing on a few district-level individuals who were involved with updating our website and has grown into <a href="https://www.youtube.com/playlist?list=PLMWUDev-aKChOTGXt8I2TaL3Og01pIAQB" target="_blank">vlog series</a> shared throughout the district with a short email describing a tip/trick related to accessible design. Along the way, I have done trainings at schools, with our teachers, and with students in classrooms. At all levels of this project, the relationship between awareness and skills is tight which has helped scale the project and build capacity. It is my belief that this is the only way to create transformational change.<br />
<br />
Sharing my story and experiences with inaccessible materials online helps build connections and puts a face to the work. Besides sharing my own experiences, I often have people use a screen reader themselves, attempt to navigate a website without using a mouse or view a website that simulates colorblindness. These exercises cannot replicate the daily experience that a person with disability experiences navigating resources online but they help keep the focus on people rather than just laws and compliance. This exercise can create a powerful emotional reaction among my adult participants. By creating a safe space through sharing my own experience (which never gets comfortable for me) many participants are vulnerable themselves and open up about how they have overlooked the digital accessibility experience of someone close to them. This provides a great opportunity to share Maya Angelou's quote, "Do the best you can until you know better. Then when you know better, do better."<br />
<br />
Heightened awareness means that people are more equipped to be advocates for accessibility. When publishers or vendors come calling and display their products, it warms my heart to hear my teachers push back critically regarding the accessibility of their products. This helps create systemic change within educational technology.<br />
<br />
Heightened awareness also means that people are equipped to support one another. Following a CreateA11y vlog post regarding <a href="https://www.youtube.com/watch?v=bh9JSe5hhk0" target="_blank">Color Contrast and Perception</a>, I heard secretaries who received emails from teachers and district staff with the inaccessible background images described in the video taking action. They thoughtfully reached out to the sender, described the issue, and walked them through changing the background image to make their email communications more accessible. Something simple as a short vlog episode whose topic targets an assessed accessibility need, describes the issue in a compelling way (awareness), and then offers a solution (skill) can empower your users district-wide to make a change.<br />
<br />
Accessibility cannot be the responsibility of one or few. This will not create the capacity needed for change. We all have an ongoing role in accessibility no matter our role in education. I wish this change was faster and the work was easier. I am hopeful as more and more educators engage in this work the effects are obvious with more accessible online materials and spaces. Increasing awareness and building skills within our districts at all levels through a variety of methods can move us closer to creating the inclusive communities we desire.<br />
<br />
If you are looking to start or continue these conversations at your district or school, I'd love to connect and further build capacity around accessibility. <br />
<br />Melissa Oliverhttp://www.blogger.com/profile/13758071099912169070noreply@blogger.com0tag:blogger.com,1999:blog-7578113017627338668.post-42714195854604668142018-01-18T18:59:00.002-08:002018-01-18T18:59:42.143-08:00Adding Alt Text just got easier in Google Docs & Slides<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdvh67iRrjrhaXRqu589d_Wa4lTqgpvV1CveI16Qs4zwtUicFHlqu7qZjsaMdFMux7-cPHV9nYrnQtyHCazU-lDy0p4AeYHxcuN1PIMWEqpKoBfZY_VMGpwO0ZJK0A7E6eihjysksd921n/s1600/AltText+Workflow+%25281%2529.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="half cat picture with alt text menu and steps 1. Select Image, 2. Right click > Alt Text 3. Add description 4. OK" border="0" data-original-height="402" data-original-width="869" height="296" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdvh67iRrjrhaXRqu589d_Wa4lTqgpvV1CveI16Qs4zwtUicFHlqu7qZjsaMdFMux7-cPHV9nYrnQtyHCazU-lDy0p4AeYHxcuN1PIMWEqpKoBfZY_VMGpwO0ZJK0A7E6eihjysksd921n/s640/AltText+Workflow+%25281%2529.png" title="" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
Thank you Google! Adding Alt Text to images in Google Docs and Slides got much easier with <a href="https://gsuiteupdates.googleblog.com/2018/01/more-menu-improvements-in-google-docs.html" target="_blank">today's GSuite update</a>. Now users only need to select the image > right click > choose alt text > write an appropriate description > ok and users have helped create a more accessible document. </div>
<br />
This is a game changer in classrooms. Before the alt text menu was buried at the very bottom of the format menu which depending on your screen size and resolution you would almost never see the alt text menu option. This was particularly challenging working in classrooms with students on 11" Chromebooks. Teaching students to Create Accessibility by adding alt text to their images meant that students had to zoom out to see the alt text option in the drop-down menu or use the alt text keyboard shortcut (control + Option + Y) which isn't exactly memorable. Both of these workflows presented challenges to the consistent use of alt text. Now with an image and a right click, adding alt text is a snap!<br />
<br />
This update is available in GSuite domains set for rapid release today and will be available to GSuite domains set for scheduled release in two weeks.<br />
<br />
Fingers crossed a future update will allow students to edit descriptions when adding alt text to Google Sites. Or, even better would be the ability to edit video captions in Google Drive.<br />
<br />Melissa Oliverhttp://www.blogger.com/profile/13758071099912169070noreply@blogger.com0tag:blogger.com,1999:blog-7578113017627338668.post-12984147882610888022018-01-14T21:54:00.000-08:002018-01-17T21:13:44.057-08:00Closed Captioning & FlipGrid<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgszwGmb8ujzccaQE7wj_I3rlXBHRCIHx_sGGIW3sYGVL_AojIwBUruF7aRH8XMEMzRylwZIjUPBhr1rKhBIIx8Nt5FWHih1WXmEFszrIoF_BzcBJhfwOpU_-7FZ1I7Zngol-AAxbZ66q0U/s1600/FlipGrid+and+CC.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="301" data-original-width="267" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgszwGmb8ujzccaQE7wj_I3rlXBHRCIHx_sGGIW3sYGVL_AojIwBUruF7aRH8XMEMzRylwZIjUPBhr1rKhBIIx8Nt5FWHih1WXmEFszrIoF_BzcBJhfwOpU_-7FZ1I7Zngol-AAxbZ66q0U/s1600/FlipGrid+and+CC.png" /></a></div>
True Confession. I do not have <a href="https://twitter.com/search?q=%23FlipgridFever&src=tyah" target="_blank">#FlipGridFever</a> yet but after my experience this weekend, I'm beginning to warm up to the tool. When the <a href="http://www.flipgrid.com/" target="_blank">FlipGrid </a>buzz began, I played with it but without captions, I quickly caught a #FlipGridCold. To be fair, I did appreciate the ease of use and could see many possible classroom applications.<br />
<br />
Fast forward to this past weekend at the <a href="https://edtechteam.swoogo.com/roseville2018" target="_blank">EdTech Team Roseville Summit</a>. After receiving an email requesting participation in an Event FlipGrid, I took the opportunity to take another look at FlipGrid.<br />
<br />
Other presenters had already recorded videos and I began to watch them and was pleasantly surprised to see a CC button. Since the sound was already off on my device, I continued to watch with only the captions. They were not perfect but there were no really egregious errors. Names were usually wrong and some parts didn't make a whole lot of sense. Since the sound was off, I'm not sure if the errors were because of background noise, audio quality, or enunciation. I wondered whether or not editing of captions was available. This question was quickly answered by a FlipGrid blog post from 1/2/18, <a href="https://help.flipgrid.com/hc/en-us/articles/115004848574-Flipgrid-is-Accessible-for-Everyone" target="_blank">FlipGrid is Accessible to Everyone</a>.<br />
<br />
Even though caption editing is not available FlipGrid says it "should be available in the near future." The blog post described that a transcript could be uploaded. I quickly created a transcript in Google Docs before recording and began trying the auto-captions on my own voice and grid first.<br />
<a name='more'></a><br />
<br />
<iframe align="left" allowfullscreen="" frameborder="0" height="625" mozallowfullscreen="" src="https://flipgrid.com/f6bdfa?embed=true" style="padding: 12px;" webkitallowfullscreen="" width="325"></iframe>Following my first recording, I waited and didn't see the captions. By re-reading the directions more closely, I realized that teachers have to activate Closed Captions under their Grid Settings. Oops! Flipped that switch then I re-recorded my video and published it to my grid. Captions do not immediately appear. You need to wait a relatively short time and then you'll see the CC button when they are available. Watching this attempt, I noticed a number of errors in the captioning such as the word "Collaboration" became "Corporation" or "I'm" became "Hi." You can tell the program really is trying to match actual words with what is being said. There were no made-up, nonsense words just lots of words that didn't make sense in context.<br />
<br />
On that attempt, I didn't initially see where to upload the transcript. Re-read the directions and started another new recording. This recording had fewer but different errors and I uploaded the transcript file as a link. The transcript file functions as an attachment almost not as an upload file with auto sync feature like Google Drive or YouTube has for their videos.<br />
<br />
Finally, I moved on to recording on the Summit grid. Did one recording, added my transcript link and hit publish. There are two errors in the final recording. The practice of the multiple recordings along with advance knowledge of which words the program struggled with caused me to enunciate those words and really try to articulate as clearly as possible.<br />
<br />
In the end, I am warming up to FlipGrid. Not yet feverish, but who knows what the feature holds? I look forward to seeing the edit caption feature. I am concerned that the blog posts says, "Our team is working hard to <i>allow teachers</i> the ability to edit the Closed Captions." I hope this ability is not solely limited to teachers. Empowering students to create accessible media and providing them a platform and interface to achieve this aim helps build awareness and understanding regarding accessibility. You don't need a teaching credential to create accessibility. Everyone is able to create accessibility by making accessible design choices, including students.Melissa Oliverhttp://www.blogger.com/profile/13758071099912169070noreply@blogger.com0tag:blogger.com,1999:blog-7578113017627338668.post-41098238565771172642018-01-06T23:51:00.001-08:002018-01-12T08:24:13.815-08:00Chrome Extensions for Accessible Design<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy4yMj9LRvyBo4u6bVvtnWSH3QePc6bh8e62nLY2rAfHey9XlVigyQ530O0dSNPTjXklSZAYh1n6ObaCBIFWeIJKshF_I34EM80v5FM0gIG3QUBBJo_Z8krw12oLHTzopf4E40LoUYLV1A/s1600/Chrome+Extensions+for+Accessible+Design.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 2em;"><img alt="Chrome Extensions for Accessible Design" border="0" data-original-height="250" data-original-width="450" height="177" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy4yMj9LRvyBo4u6bVvtnWSH3QePc6bh8e62nLY2rAfHey9XlVigyQ530O0dSNPTjXklSZAYh1n6ObaCBIFWeIJKshF_I34EM80v5FM0gIG3QUBBJo_Z8krw12oLHTzopf4E40LoUYLV1A/s320/Chrome+Extensions+for+Accessible+Design.png" title="" width="320" /></a></div>
Recently, I was asked for recommendations for user-friendly Chrome Extensions to help promote accessible design within schools. Here are a few of my favorites that are all free.<br />
<br />
<ol>
<li><a href="https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh?utm_source=chrome-ntp-icon" target="_blank">WAVE Evaluation Tool</a>: This extension will compare your webpage against the Web Content Accessibility Guidelines WCAG 2.0 and identify various errors, including color contrast. </li>
<li><a href="https://chrome.google.com/webstore/detail/nocoffee/jjeeggmbnhckmgdhmgdckeigabjfbddl?utm_source=chrome-ntp-icon" target="_blank">No Coffee</a>: This extension functions as a vision simulator. It is helpful in demonstrating how a website might be perceived by users with various vision conditions including color blindness. This simulation tends to be uncomfortable to participants with average vision and they will look away. When I use this extension in training or classrooms, I point out that users with disabilities do not have this privilege. This brief simulation exercise helps drive home the importance of accessible design.</li>
<li><a href="https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn?utm_source=chrome-ntp-icon" target="_blank">ChromeVox</a>: Chrome Screen Reader. Allows you to experience your materials through a screen reader. ChromeVox is native on Google Chromebooks using the Ctrl + Alt + Z. If you need help using ChromeVox, here are helpful <a href="http://www.chromevox.com/tutorial/" target="_blank">ChromeVox tutorials and user guide from Google</a>. </li>
<li><a href="https://chrome.google.com/webstore/detail/color-contrast-analyzer/dagdlcijhfbmgkjokkjicnnfimlebcll?utm_source=chrome-ntp-icon" target="_blank">Color Contrast Analyzer</a>: This extension will take a picture of a webpage and analyze it against WCAG 2.0 Color Contrast Analyzer.</li>
<li><a href="https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd?utm_source=chrome-ntp-icon" target="_blank">AxeAccessibility</a>: (Geeky) This is my favorite and must-have for anyone working with code and within the Chrome Developer Console. This extension adds an accessibility panel to Developer Console. This is super-helpful because it runs an accessibility checker similar to the WAVE Evaluation tool above but this allows you to see the code at the same time. It is super helpful for making corrections. For example, I continue to improve the accessibility of this blog using this tool by making some tweaks to the template and within the css.</li>
<li><a href="https://chrome.google.com/webstore/detail/extensity/jjmflmamggggndanpgfnpelongoepncg?utm_source=chrome-ntp-icon" target="_blank">Extensity</a>: Not actually an accessible design tool but helps manage the extensions above so that you can easily enable/disable as needed.</li>
</ol>
<div>
<br /></div>
Melissa Oliverhttp://www.blogger.com/profile/13758071099912169070noreply@blogger.com0tag:blogger.com,1999:blog-7578113017627338668.post-58861311400282295302017-11-30T22:11:00.004-08:002017-11-30T22:11:27.982-08:00Open Enrollment <div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOwvev1D5gFSmNLtSanKx18gqnblaYUfenHBl4whS3avJXO6gZ-XW8FqqNJH8tsVnlhNE5M3nLiZb9LUev0GNkEgcDb8q-nocpLymOcbYXHbES0uCd5A0b1eeHEUXfJPbhsqiYoOsu-7ht/s1600/New+Composition_2017-11-30+21-51-37.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="hearing aid" border="0" data-original-height="1078" data-original-width="1600" height="215" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOwvev1D5gFSmNLtSanKx18gqnblaYUfenHBl4whS3avJXO6gZ-XW8FqqNJH8tsVnlhNE5M3nLiZb9LUev0GNkEgcDb8q-nocpLymOcbYXHbES0uCd5A0b1eeHEUXfJPbhsqiYoOsu-7ht/s320/New+Composition_2017-11-30+21-51-37.jpg" title="" width="320" /></a></div>
It is open enrollment time at work which has me thinking a lot about my hearing aids. I'm fortunate to have a full-time job that offers several different health insurance plans to choose from. and I am grateful to have a choice as many people may not. Of the four insurance choices offered for the upcoming year as my plan is being phased out, all cover hearing screenings either at 100% or at 100% following a small deductible payment. However, none cover hearing aids. I have never had insurance that has covered my hearing aids. If I had known this prior to 15 years ago when hearing aids were first suggested, I would have started my Health Savings Account (HSA) much earlier.<br />
<br />
I am on my third set of hearing aids and have paid for all of them out of pocket, costing a range between $2-5K for each pair. With technology always evolving, my rather unique needs, and being a bit of a gadget geek, there are both needs and benefits to upgrading. My latest hearing aids pair with my cell phone and I can Bluetooth stream phone calls, google map directions, music and more which is a huge improvement and worth the investment. I am fortunate to be employed in a good job and have learned to always be saving for my next pair of hearing aids because you never know when they might become unrepairable or my needs may change. It just always makes me wonder how many people that could benefit from hearing aids go without because of their prohibitive cost. And with the all the recent politics around health care, I only fear that even more may go without in the future. Yet another reason why accessibility and access remains so important.<br />
<br />Melissa Oliverhttp://www.blogger.com/profile/13758071099912169070noreply@blogger.com2tag:blogger.com,1999:blog-7578113017627338668.post-86919266422797993202017-10-28T21:46:00.002-07:002018-01-06T22:07:53.437-08:00Create Accessibility at Fall #CUE <div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpgc8LOSSmDmbOMd1sLq-tu0txRxKF0q-IcuXvmyl6mdx8mCYHQYsJ9vql-EpvVjyI3dm52JcjfBON0HsmGoTZpPwxwP1zpzoFfc9deB6VKCaaprJ2q9cLalY_Y9N4JtaxK64vS7sjNHSe/s1600/Create+Accessibility+at+FallCUE.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Create Accessibility at FallCUE" border="0" data-original-height="99" data-original-width="261" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpgc8LOSSmDmbOMd1sLq-tu0txRxKF0q-IcuXvmyl6mdx8mCYHQYsJ9vql-EpvVjyI3dm52JcjfBON0HsmGoTZpPwxwP1zpzoFfc9deB6VKCaaprJ2q9cLalY_Y9N4JtaxK64vS7sjNHSe/s1600/Create+Accessibility+at+FallCUE.png" title="" /></a></div>
That's a wrap for another great Fall CUE! I had the great pleasure of sharing more about Create Accessibility and accessible design. On Thursday evening, I shared some <a href="http://www.createaccessibility.com/2017/10/cue-tip-closed-captioning-in-google.html" target="_blank">workflows for captioning videos in Google Drive</a>.<br />
<br />
On Friday, during the 90-minute workshop session, we created Google Sites with accessibility in mind. Google Sites are easy for students of all ages to use to communicate information, understanding, and learning and provide a great entry into accessible design principles. When students are inserting text, one can teach about the importance of formatting and hierarchy with titles, heading, and subheadings for individuals using a screen reader. Similarly, when images are inserted beyond just showing students how to resize or crop, teach students about alt text. Teach them why alt text is important, when it is needed, how to compose and insert. There are lots of these opportunities to naturally insert accessible design lessons when students are creating google sites, with videos and captions, color choices, and even navigation menu appearance. I still hold fast to the moonshot of a more accessible and inclusive future when students in our classrooms today practice accessible design as they create digital content. Seeing teachers, librarians, and administrators creating more accessible Google Sites brings me hope that this vision is moving closer to reality.<br />
<a name='more'></a><br />
<br />
<iframe allowfullscreen="true" frameborder="0" height="450" mozallowfullscreen="true" src="https://docs.google.com/presentation/d/e/2PACX-1vRyQ14cRULhuc6AVHdt1o7MM4222IL697JdvVxTVlucpaHJsM5aNJB2mbUIfrarjCeu52YI2LjCco-0/embed?start=false&loop=false&delayms=600000" webkitallowfullscreen="true" width="650"></iframe>
<br />
<br />
Later that day, I led a small session on Section 508 and Web Accessibility. As much as I have cringed over the last year when people express frustrations about Section 508 and the "burden" of making digital content accessible, I also find great solace in the heightened awareness that the increased Section 508 complaints have brought to our school communities. I don't believe that the threat of an Office of Civil Rights (OCR) Complaint or lawsuit is an effective motivating factor to create transformative, lasting change in school districts but this climate has resulted in dramatically increased awareness. My hope is that our educational system can work towards moving beyond the idea of accessibility as a checklist for compliance sake and make it about people and access. And when you have #CUE members in the room dedicated to learning more, sharing their ideas and struggles with one another it brings great hope of needed transformative, sustainable changes coming to more students and communities as a result of their dedication to moving beyond compliance for accessibility.<br />
<br />
<iframe allowfullscreen="true" frameborder="0" height="450" mozallowfullscreen="true" src="https://docs.google.com/presentation/d/e/2PACX-1vSaOyZ6AtORvJprmwWiiL7FQCTKnC11-ATJKQaApOedYIr10K573zsLd5j9YqsngLdGIowmB0rBLroX/embed?start=false&loop=false&delayms=600000" webkitallowfullscreen="true" width="650"></iframe>
<br />
<br />Melissa Oliverhttp://www.blogger.com/profile/13758071099912169070noreply@blogger.com3tag:blogger.com,1999:blog-7578113017627338668.post-44191897307866509912017-10-26T20:03:00.000-07:002018-01-06T22:08:15.473-08:00CUE Tip: Closed Captioning in Google Drive<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpfCzPmR9eTiGzZUZXU3F3YBPrBNFJzGaglkh-KP49Kg_E42wIojW72ERKaVlXQbSDd5DGQR63Fheb4XNmQrrG24IfDTx0B6SbiJwE014ou9zkPFV8xeh2yWT7pHqke7gGYdzmayoPUPRI/s1600/Screen+Shot+2018-01-06+at+10.02.32+PM.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Closed Captioning Symbol with Tri-colored Triangle Symbol for Google Drive" border="0" data-original-height="169" data-original-width="194" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpfCzPmR9eTiGzZUZXU3F3YBPrBNFJzGaglkh-KP49Kg_E42wIojW72ERKaVlXQbSDd5DGQR63Fheb4XNmQrrG24IfDTx0B6SbiJwE014ou9zkPFV8xeh2yWT7pHqke7gGYdzmayoPUPRI/s1600/Screen+Shot+2018-01-06+at+10.02.32+PM.png" title="" /></a></div>
Yes, you can Create Accessibility with your Videos in Google Drive! Here are workflows (slide 1) and resources (slide 2) I shared this evening during my CUE Tip presentation at Fall CUE. My dream is that someday Google Drive will offer a native captioning interface that will provide auto-captioning with the ability to edit those captions. Until then, here are some workflows designed for school environments.<br />
<a name='more'></a><br />
<br />
<iframe frameborder="0" height="900" src="https://docs.google.com/presentation/d/e/2PACX-1vThGexMre2LXqB4GMgNVsSWV4DdUEKrjUdd0FRpE09uWqh08pIU-DNK0HaZTcvsLnqrH5kXq2EWEqds/embed?start=false&loop=false&delayms=60000" width="650"></iframe>Melissa Oliverhttp://www.blogger.com/profile/13758071099912169070noreply@blogger.com1tag:blogger.com,1999:blog-7578113017627338668.post-49390779037541416042017-07-05T06:21:00.001-07:002018-01-06T22:17:49.186-08:00Moving the Needle. Create Accessibility One Year LaterOne year ago, I published "<a href="http://www.createaccessibility.com/2016/07/be-change.html" target="_blank">Be the Change</a>" that began Create Accessibility. That blog post was motivated by my experience leaving Boulder, Colorado and the Google Innovation Academy. One year later a lot has happened that even I didn't realize until I did the numbers below.<br />
<h2>
Create Accessibility One Year Later By the Numbers</h2>
<ul>
<li><a href="http://www.createaccessibility.com/" target="_blank">44 Blog Posts Published</a></li>
<li><a href="https://sites.google.com/view/createaccessibility/createa11y-challenge" target="_blank">19 Day #CreateA11y Challenge</a></li>
<li><a href="https://www.youtube.com/playlist?list=PLFys6dUh1FxJfgazUJH2cjHQp8QllCmdO" target="_blank">15 Video Tutorials</a> </li>
<li><a href="http://www.melissaaoliver.com/presentations" target="_blank">8 Conference Presentations</a></li>
<li><a href="https://sites.google.com/view/createaccessibility" target="_blank">1 Google Site</a></li>
<li><a href="https://maoliver17.gitbooks.io/create-accessibility//" target="_blank">1 GitBook</a></li>
<li><a href="https://script.google.com/macros/s/AKfycbwRMgzKtBzlqF-dRCy5AdELuOlh-KPeVi0jXOqrsfqdTa6Ka94d/exec" target="_blank">1 Caption Creator for Google Drive</a> (Collaboration with Jordan Rhea, <a href="http://www.twitter.com/rheajt" target="_blank">@rheajt</a>)</li>
<li>Countless Memories, Friendships, and Learning!</li>
</ul>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLGazf44y5B8K7LgNt3JusnIIZgVEydl30i0wYxRZbHsJ4niWp6N9yE8pvcz0pJooiPKaOxdHZkQSWmh1h36VWXgVqaaWa-7UeEDOC63dOMIfnO7BZoBLUkKiIbOdDMqjYmka7GWOR6iBh/s1600/Create+Accessibility+By+the+Numbers+%25282%2529.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Create Accessibility Infographic" border="0" data-original-height="512" data-original-width="1024" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLGazf44y5B8K7LgNt3JusnIIZgVEydl30i0wYxRZbHsJ4niWp6N9yE8pvcz0pJooiPKaOxdHZkQSWmh1h36VWXgVqaaWa-7UeEDOC63dOMIfnO7BZoBLUkKiIbOdDMqjYmka7GWOR6iBh/s640/Create+Accessibility+By+the+Numbers+%25282%2529.png" title="" width="640" /></a></div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div>
<br />
<a name='more'></a><br /></div>
<div>
It would be great if any one of these solutions actually solved the pressing problem in education that I continue to address with this project. Unfortunately, there remains lots of online materials and platforms that are inaccessible to people with disabilities. Personally, I encounter inaccessible content on a daily basis, attend EDU conferences where videos lack captions, and encounter vendors selling products for school use that are not created with universal design principles in mind. At times throughout the last year, I have felt absolutely crushed by the enormity of this issue and how it personally affects me. I can't hide from it. It's always there. And, I can't remove myself from the conversation. Even though the year is up within the #GoogleEI program, the work must continue.<br />
<br />
It is really difficult to quantify the effect of Create Accessibility during the last year. I still regularly engage with people and vendors who aren't exactly embracing the accessibility mindset yet. However, I believe that the people who direct message me for captioning workflow advice are now captioning and displaying captions on their content. I believe that those conference presenters who I shared objectional content screenshots of the videos used in their presentation are now vetting their videos for accessibility. I believe that those individuals who I have met over the last year and shared aspects of my story and the effects of inaccessibility are now producing and sharing accessible content. I hold fast to the idea that these continued small changes will create noticeable larger changes over time. I believe that the needle has moved just a little towards increased accessibility within the EdTech community. Yet the problem remains and will take more champions and even more solutions moving forward.<br />
<br />
<h2>
The Next Year of Create Accessibility.</h2>
Besides keeping the resources I have already created up-to-date, I have a few new things planned for the upcoming year.<br />
<br />
1) <b><a href="https://www.youtube.com/channel/UCc5xyxuSKc3l8Iqaels5OrA" target="_blank">A Dedicated Create Accessibility YouTube Channel</a>.</b> The shell is created and now just needs some content. I have been inspired by <a href="https://www.youtube.com/playlist?list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g" target="_blank">Rob Dobson's AllyCasts Series</a> that is quite technical with the intended audience of developers. I want to do something similar but with teachers and students as the audience. The prospect of creating and filming a YouTube series is both slightly terrifying and exciting which is exactly why I need to do it. The video format, done well, will be more engaging than print resources and has the possibility of reaching a larger audience.<br />
<br />
2) <b>Ongoing District Level Communication regarding Accessibility.</b> This project I am beginning during the 17-18 school within my school district to communicate regularly to all staff on building awareness and skills around accessibility. As more and more schools are faced with complaints from the Office of Civil Rights (OCR) complaints regarding the accessibility of their websites and other online material, I feel like others will benefit from sharing this communication project.<br />
<br />
3) <b>More Integrated Accessibility Conference Presentations</b>. I have gotten great feedback from my Create Accessibility presentations but the topic doesn't exactly pack the rooms. These presentations tend to attract people who are already working in this area of accessibility and wish to learn more. If I want to create the change I desire, I need to get in front of people who aren't already thinking about accessibility. I've packed rooms with 100+ people on topics such as Google Drawing or Google Slides, so my goal is to develop some presentations where accessibility is part of the content but not necessarily the focus. I believe this will help provide a larger audience needed to move the needle more.<br />
<br />
4) <b>Producing More Accessibility Workflows with Google Apps Script</b>. Working with <a href="http://www.twitter.com/rheajt">Jordan Rhea</a> on <a href="http://bit.ly/captioncreatorforgoogledrive">Caption Creator</a>, I was totally inspired. I've been brushing up on my JavaScript skills using <a href="http://www.codecademy.com/" target="_blank">Codecademy</a> and <a href="http://www.freecodecamp.com/" target="_blank">FreeCode Camp</a> with the hopes of turning some ideas into additional workflows that will provide kid-friendly solutions to improve accessibility.<br />
<br />
5) <b>?????</b>. 525,600 minutes or 1 year is a long time and completely open to possibilities of new partnerships, new skills, and new opportunities for Create Accessibility. I'm excited to see how Create Accessibility grows in the next year. </div>
Melissa Oliverhttp://www.blogger.com/profile/13758071099912169070noreply@blogger.com0tag:blogger.com,1999:blog-7578113017627338668.post-13401769610666628712017-06-30T07:40:00.001-07:002018-01-06T22:18:24.717-08:00ISTE17 Presentation MaterialsIt was an honor to present Create Accessibility at #ISTE17. I had two formal opportunities on the schedule to talk about my #GoogleEI project. There is another blog post percolating describing my overall ISTE experience. Until then, I wanted to share my Create Accessibility presentation materials.<br />
<br />
<h2>
Google Certified Innovators Tell All (Panel)</h2>
I was one of 10 Innovator panelist who shared different aspects of their Innovator experience and participated in the backchannel with those participants joining us virtually. The event was live streamed and is now available on YouTube. Unfortunately for accessibility, the video is auto-captioned and there are errors throughout, including my contribution. Below, I have provided a transcript of my contribution.<br />
<a name='more'></a><br />
<br />
<br />
<center>
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/eEuFlDf8l-0/0.jpg" frameborder="0" height="380" src="https://www.youtube.com/embed/eEuFlDf8l-0?t=27m25s" width="475"></iframe></center>
<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Transcript (27:25 - 29:01)</div>
<div class="separator" style="clear: both; text-align: left;">
<b>Wendy Gorton</b>: Now we have Melissa Oliver who is our Coordinator of Instructional Technology. Also Colorado. and Colorado is about to wrap up their year. So their cohort was the ISTE cohort. So they somehow pulled an entire ISTE out and then came and hung out with us for three days after. So they are some of the most intense that we have every had. But, Melissa, Do you want to tell us a little bit, I'd love to hear about your project now that you're wrapping up after a year of being in the program. Want to share a little bit about what you're up to and your experience?</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<b>Me</b>: My project is around bringing accessible design principles into the classroom and teaching students as well as teachers how to make their digital products accessible to all people including people with disabilities. Very much motivated by my own experience, I'm hard of hearing. I have a moderate to severe hearing loss that is progressive. I'm losing my hearing. And so how can we empower students and build empathy around diversity in creating digital products whether it's videos and adding captions Whether it's building websites and making sure the WCAG guidelines. It's really about that. You can learn more at CreateAccessibility.com And to just reiterate what other folks have said it's really about the community. It's not about the 3 days. It's been about the year and beyond. Even though we are wrapping up our cohort it just continues. And so to have access to so many different people and their ideas and support has been tremendous.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<b>Wendy Gorton</b>: Thanks, Melissa. Give it up for Melissa.</div>
<h2 style="clear: both; text-align: left;">
<br />Create Accessibility: Making Online Media Accessible for More Learners</h2>
<div>
I also presented a one-hour interactive lecture session on different ways to Create Accessibility such as adding captions or alt text. My presentation slide deck is available below as well in the <a href="http://conference.iste.org/2017/program/search/detail_session.php?id=108051198" target="_blank">ISTE program online</a>. </div>
<div>
<div style="text-align: center;">
<br /></div>
</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="caption-line" data-time="1667.519" id="cp-440" style="background: rgb(255, 255, 255); border-radius: 3px; border: 1px solid rgb(255, 255, 255); font-family: "YouTube Noto", Roboto, arial, sans-serif; font-size: 13px; line-height: 1.3em; margin: 0px 2px 0px 0px; padding: 0px;">
<br /></div>
<center>
<iframe allowfullscreen="true" frameborder="0" height="450" mozallowfullscreen="true" src="https://docs.google.com/presentation/d/1J_l4hMO6SWJx2bhxjwBAG2MXohKNhn2qaEOl4RQSr-s/embed?start=false&loop=false&delayms=300000" webkitallowfullscreen="true" width="600"></iframe></center>
Melissa Oliverhttp://www.blogger.com/profile/13758071099912169070noreply@blogger.com8tag:blogger.com,1999:blog-7578113017627338668.post-73886310392540116622017-06-23T16:34:00.002-07:002018-01-06T22:21:21.289-08:00Dear Conference Presenter, <div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW8uOBe3eHXh715rJ7WOQfrllAEc0LZPBDN5TXwe6jl8yfCBvXeSkFz1IETqlwKEDE8shVytXnjWL3_z2rng72N-hJgcEYrPb2Ktppl2RfWaJggbaT4056iyIsapYr7JbtoZmkC4kXKpSW/s1600/5062649123.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="coffee cup on table next to partially complete handwritten letter" border="0" data-original-height="836" data-original-width="1024" height="163" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW8uOBe3eHXh715rJ7WOQfrllAEc0LZPBDN5TXwe6jl8yfCBvXeSkFz1IETqlwKEDE8shVytXnjWL3_z2rng72N-hJgcEYrPb2Ktppl2RfWaJggbaT4056iyIsapYr7JbtoZmkC4kXKpSW/s200/5062649123.png" title="" width="200" /></a></div>
I recently spent the day finalizing session proposals to submit for consideration at some upcoming conferences. Several proposals focus on accessibility. This got me to thinking while I wait to learn of their status. Wouldn't it be great if the acceptance letter included something about ensuring the accessibility of your materials?<br />
<br />
I took the liberty to draft such a letter as a starting point and included it below.<br />
<br />
<div>
<br /></div>
Dear [Insert Conference Name] Presenter,<br />
<a name='more'></a><br />
<div>
<br />
Congratulations! Your session proposal has been accepted at [insert conference name]! [Insert Conference Name] values diversity and the learning experience of all our participants. As you begin to prepare your session materials, please keep accessible design principles in mind to ensure all attendees can access, enjoy, and benefit from your expertise.<br />
<ul>
<li>Caption All Videos. </li>
<li>Provide Alt Text on your Images</li>
<li>Use Accessibility Guidelines on your Website </li>
</ul>
If you should need assistance in creating accessible materials, [insert conference name] has compiled a list of accessible design resources to help get you started. [<a href="https://docs.google.com/document/d/1e8rXgDgI_o7CYsQOH6_BbmbbgA4PvBZuGpVADa8lYLY/edit?usp=sharing">insert link to accessible design resources, here's a draft sample</a>] </div>
<div>
<br />
[Insert Conference Name] looks forward to your participation in making our event successful and accessible to our diverse membership and attendees.</div>
<div>
<br />
Sincerely,</div>
<div>
[Insert Conference Name] Program Committee<br />
<div>
<span id="docs-internal-guid-49eaf82e-74cc-9c88-a0b0-5d4135cdf610"></span><br />
<br />
<br />
Imagine the possibilities if conferences sent something like this to every presenter! One of the many things I've learned over the past year since beginning this Create Accessibility journey and talking with EdTech presenters is that no one intentionally creates inaccessible materials. But rather we design and create based on what we know. If you don't have the personal experience of disability and know that sinking feeling when asked as just one example to respond to a video that you couldn't completely understand because it lacked captions, you may not realize how much something like creating and displaying captions means to a learner like me. This could be one small step in creating more welcoming and inclusive communities by ensuring access to all learners.</div>
</div>
Melissa Oliverhttp://www.blogger.com/profile/13758071099912169070noreply@blogger.com2tag:blogger.com,1999:blog-7578113017627338668.post-84857223630202584432017-04-21T23:31:00.003-07:002017-04-21T23:31:51.054-07:00Day 19: Add Alt Text to Google SitesAlternative Text is an accessible design feature that provides alternative text for images. Alt text is an important design feature for people with low vision or blindness accessing content online using a screen reader. If you have images on your Google Site that are communicating information, then alt text is needed. If images are purely decorative and do not serve a communicative purpose, alt text does not need to be included.<br />
<br />
<h3>
How to Create Accessibility by Adding Alt Text </h3>
<div>
<ol>
<li>Click on your image in Google Slides. You know your image is selected when you see the blue box around it. </li>
<li>Click on the 3 dots.</li>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-2WFQW-E5wq07oOjV6JDT4OjifqFG0nqB0SqqOO4ZGjkIu1XLAAP8Zadsei7bmRJlXrIDVUaRt4RiaJAVEfeVhoNryTdhWMWsp28HLRx-RF_-2lyhErZ5UgNmINKr4qAEPXWpvT7QYfbk/s1600/Screen+Shot+2017-04-21+at+11.00.51+PM.png" imageanchor="1"><img alt="cat outlined with blue box and red square around 3 dots" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-2WFQW-E5wq07oOjV6JDT4OjifqFG0nqB0SqqOO4ZGjkIu1XLAAP8Zadsei7bmRJlXrIDVUaRt4RiaJAVEfeVhoNryTdhWMWsp28HLRx-RF_-2lyhErZ5UgNmINKr4qAEPXWpvT7QYfbk/s320/Screen+Shot+2017-04-21+at+11.00.51+PM.png" title="" width="249" /></a></div>
<li>Choose Alt Text</li>
<li>Type in your desired text > Apply</li>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0AdBGaQxXRnkQF3mD_t7q-WnmMVe7zMk4kx908PEYXKOzavz8swlPeIZA_O_MRDMLUJc290YjVqrNCdLjzWkWELxUyTlkVt-ibYW1SJcOOG4tepadWF1OvWbNj3ZSdp5IRZUTH4LGaVgC/s1600/Screen+Shot+2017-04-21+at+11.07.07+PM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Black and White Cat Description in Alt Text Box" border="0" height="201" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0AdBGaQxXRnkQF3mD_t7q-WnmMVe7zMk4kx908PEYXKOzavz8swlPeIZA_O_MRDMLUJc290YjVqrNCdLjzWkWELxUyTlkVt-ibYW1SJcOOG4tepadWF1OvWbNj3ZSdp5IRZUTH4LGaVgC/s320/Screen+Shot+2017-04-21+at+11.07.07+PM.png" title="" width="320" /></a></div>
<br />
</ol>
<h3>
Current Challenge with Adding Alt Text</h3>
</div>
<div>
It appears that one is no longer able to edit alt text on Google Sites. Alt text, once added, is not editable. In fact, I find that even as I'm typing the alt text, if I make a mistake and use the delete button in an attempt to backspace, it deletes the image entirely rather than allow editing. This is unfortunate that you can't edit the alt text because when you add an image using Google Search, these images often come with suggested alt text that you can add to the description. This would work great for our littlest learners IF users also had the ability to edit these. Below is another cat image, found online with the suggestion "Cat - Free images on Pixabay". If I were to select Set as description, that alt text would be locked in and would not be helpful alt text that added in comprehension with the addition of "Free images on Pixabay." With alt text editing ability, these suggestions would provide a starting point for users to create accessibility. Without alt text editing ability, my fear is that these suggestions actually detract from accessibility. I've used the feedback button to provide this feedback to Google and I hope it will change soon. Editing alt text was possible when the New Google Sites was released and this made it more user-friendly, especially for little ones. </div>
<div>
<br /><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVgn1k6_9z3aun8a4lzQ2SKXAyNuwAXz_FVeIK_lvGckGXWJufXhIIL5He6xdystqD1NmL1J_WNTDPPNUD7hlI9NhixOvUiCeg_eNJBHJdeN8GFQVtrgVlYHFQxMS9IvXd7H3jvoZFnH-n/s1600/Screen+Shot+2017-04-21+at+11.19.46+PM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Alt Text Menu" border="0" height="249" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVgn1k6_9z3aun8a4lzQ2SKXAyNuwAXz_FVeIK_lvGckGXWJufXhIIL5He6xdystqD1NmL1J_WNTDPPNUD7hlI9NhixOvUiCeg_eNJBHJdeN8GFQVtrgVlYHFQxMS9IvXd7H3jvoZFnH-n/s320/Screen+Shot+2017-04-21+at+11.19.46+PM.png" title="" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
For more guidance on writing accessible alt text, I recommend the<a href="http://webaim.org/techniques/alttext/" target="_blank"> alt text resources on WebAIM</a>.</div>
</div>
<br />Melissa Oliverhttp://www.blogger.com/profile/13758071099912169070noreply@blogger.com0tag:blogger.com,1999:blog-7578113017627338668.post-55799926773021770512017-04-20T23:24:00.003-07:002018-01-06T22:24:23.537-08:00Day 18: Creating Accessible Hyperlinks<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi69dwav6HGmtoJe_IdUsNr1EL_f3UFan95xASWRlvteMyGEIrCZ4zyuDnbq9IfnRd9kDYVMseTnuYhz2w-PX7uSKvLeoFO_ZDRLSgnH-6bJatXGCD4p53PoNy5gFt-MTvYykBQXTf2jT7S/s1600/2668834386.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="doorway with sign saying "Internet Open"" border="0" data-original-height="836" data-original-width="1024" height="163" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi69dwav6HGmtoJe_IdUsNr1EL_f3UFan95xASWRlvteMyGEIrCZ4zyuDnbq9IfnRd9kDYVMseTnuYhz2w-PX7uSKvLeoFO_ZDRLSgnH-6bJatXGCD4p53PoNy5gFt-MTvYykBQXTf2jT7S/s200/2668834386.png" title="" width="200" /></a></div>
One of the great benefits of creating digital content is the ability to use hyperlinks and make things interactive. How you describe your link text makes a different for accessibility. Using language like click here or learn more for your link text does not provide the necessary context and guidance for screen reader users to effectively interact with your content.<br />
<br />
Screen readers will announce a link and then read the text that is linked. Here's a scenario for a sentence linking to more information about captioning.<br />
<ul>
<li>Closed Captioning on YouTube is easy. Learn more <a href="http://www.createaccessibility.com/p/captioning-in-youtube.html" target="_blank">here</a>. </li>
<li><a href="http://www.createaccessibility.com/p/captioning-in-youtube.html" target="_blank">YouTube Closed Captioning Tutorials</a> will make creating accessible videos easy.</li>
</ul>
The latter example provides context for your users. Your user would that the link was taking them to tutorials about captioning on YouTube. The first example with the link text, learn more here, doesn't provide much guidance or context for where "here" is taking the user and what exactly they will learn there. For greater accessibility, it is important to write link text that provides users information as to the purpose of the link.<br />
<div>
<br /></div>
<div>
For your reference, the <a href="https://www.w3.org/TR/WCAG20/" target="_blank">Web Content Accessibility Guidelines</a> (WCAG) 2.0 that addresses hyperlinks reads as follows: <a href="http://www.w3.org/TR/WCAG20/#navigation-mechanisms">2.4.4 Link Purpose (In Context):</a> The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general. (Level A)</div>
<div>
<br /></div>
<div>
Today's challenge is to look at a piece of recently created digital content with links and ask yourself whether the purpose of each link is clear? If not, make necessary revisions. WebAIM offers more guidance about <a href="http://webaim.org/techniques/hypertext/" target="_blank">Accessible Links and Hypertext</a>.</div>
<div>
<br /></div>
<div>
This is an accessibility practice that I am working on improving within my own practice. Just like alt tags for images, descriptive links causes the creator to stop for a moment and really reflect on the purpose of the link and the best way to communicate that. When adopting any of these new create accessibility practice into your digital workflow, it takes time and repeated exposures for these practices to become more fluid. </div>
Melissa Oliverhttp://www.blogger.com/profile/13758071099912169070noreply@blogger.com0tag:blogger.com,1999:blog-7578113017627338668.post-40622052308328790082017-04-19T23:59:00.001-07:002017-04-20T00:00:00.389-07:00Day 17: Color Contrast: Tale of Two Signs<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwtQddTkXpJiFdTH2-E-6Zh6vd-eW_1u9h-8dRPMjaRdbY_gZ9uRNEjL37VRGvqaWkDXSkcXz6WVVrgYmlJKY0vom1QqU-75v3xoxKbqDT5ehz6aivpEjPxYYKaOKWKa3APD9RxGE8te2x/s1600/Color+Contrast.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Mexican restaurant digital menu with different fonts, colors, and images." border="0" height="220" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwtQddTkXpJiFdTH2-E-6Zh6vd-eW_1u9h-8dRPMjaRdbY_gZ9uRNEjL37VRGvqaWkDXSkcXz6WVVrgYmlJKY0vom1QqU-75v3xoxKbqDT5ehz6aivpEjPxYYKaOKWKa3APD9RxGE8te2x/s400/Color+Contrast.png" title="" width="400" /></a></div>
I recently went to local, casual Mexican restaurant for lunch that I haven't been to in a while. It's a popular place where you can almost always expect to wait in a line to order before seating yourself. New on this visit, the large menus that used to hang on the wall behind the cashier counter have been replaced by 4 very large TVs displaying the menu digitally. As I waited in line, I kept having to look at the ground because I found the menu so disorienting and provides a great example of how color and contrast affects the perception of digital content.<br />
<h2>
How Design Choices Affect Accessibility</h2>
<br />
<ol><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiGL2mFSbJC94M5lF9qejya1uZv1kEdlac3K-aaY5hofGbwqIZaNG4GGyoRdMn0dXQuBBaUfW6MvHS87kbQc94VjPl6CGnPFxOliVu2Wex9hB4ltzd3ZRmdVRnJtc7PegObaxcJDm6Cbo3/s1600/Burrito+Menu.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="Burrito Menu with different fonts and colors" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiGL2mFSbJC94M5lF9qejya1uZv1kEdlac3K-aaY5hofGbwqIZaNG4GGyoRdMn0dXQuBBaUfW6MvHS87kbQc94VjPl6CGnPFxOliVu2Wex9hB4ltzd3ZRmdVRnJtc7PegObaxcJDm6Cbo3/s1600/Burrito+Menu.png" title="" /></a>
<li><b>Font Choices</b>: Notice that Burritos and other Headers are in a crisp, sans-serif font. Each menu item is in a completely different font with much thicker letters and less space between them which makes that font more difficult to read.</li>
<li><b>Font Colors</b>: The patterned font colors between the mustard color and the white causes the eye to struggle to focus. The choice to lists the menu item in mustard and then provide dots in white and then the price in amber again make this difficult to perceive. Take a moment and count the number of font colors used on the Fresh Squeezed Juice Section of the Menu. <div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIAnBxDhg6-ZkmK-xReqZH5CTi79Q_cnCZSia6KNj3libFplx9oimIpSnAdSAzjBssPWaW0LwfJQlGqAbNyGlYxWZY0aYNiLJWF_zFRze-BZ_9_KKSHNu-g5LIFRlUa-hT-Iglb0G4PpkP/s1600/Fresh+Squeezed+Juice++Example.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="Fresh Squeezed Juice Menu with 7 different font colors" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIAnBxDhg6-ZkmK-xReqZH5CTi79Q_cnCZSia6KNj3libFplx9oimIpSnAdSAzjBssPWaW0LwfJQlGqAbNyGlYxWZY0aYNiLJWF_zFRze-BZ_9_KKSHNu-g5LIFRlUa-hT-Iglb0G4PpkP/s1600/Fresh+Squeezed+Juice++Example.png" title="" /></a></div>
</li>
<li><b>Background Color</b>: The introduction of the semi-transparent gray background text boxes introduces even another color that also allows the background image to bleed through.</li>
<li><b>Background Image</b>: Combine all of the above with the background image that introduces even more colors and details that compete with the text and it makes the menu very difficult to read..</li>
<li><b>Animations and Flashing Images</b>: Not pictured but were also part of the display. Animations, such as fireworks obscured the text as they cycled through and some flashing pictures of food items. </li>
</ol>
<div>
My disability does not affect my vision and I kept having to look away as I stood in line waiting and trying to decide what to order. I never found my desired choice on the menu and just asked for a Taco Salad when I reached the register. Whether or not that was actually on the menu, I have no idea because it was so difficult to read because of color, text, and contrast issues. At that point, you have to question the purpose of the menu. I would return for the food but will probably choose to eat lunch somewhere else because of the menu appearance. </div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8JL90cJdBOqmZreOPx71ueVxuwpxDJN4hx8sy7T92u6FX05UVeLdEgn3opIcbeQFlUKf9VmhTqRkUKFUekSrd9cHbJPEZWbI4doMVc0eB2wvjIxtlj0z2Zm-uPGc0-WWV1IYji-c3ZurF/s1600/Design+for+Everyone.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Design for Everyone Sign with a large stripe in the background & smaller sign describing Oven mitts in black and white" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8JL90cJdBOqmZreOPx71ueVxuwpxDJN4hx8sy7T92u6FX05UVeLdEgn3opIcbeQFlUKf9VmhTqRkUKFUekSrd9cHbJPEZWbI4doMVc0eB2wvjIxtlj0z2Zm-uPGc0-WWV1IYji-c3ZurF/s320/Design+for+Everyone.png" title="" width="257" /></a></div>
<h2>
Color Contrast Matters.</h2>
<div>
Color Contrast matters especially when we approach creating digital content with the mindset to Design for Everyone. This Design for Everyone signage from my local IKEA would have a very different effect if they used multiple fonts and colors. The inclusion of the background colors and the scale of the stripe doesn't interfere with the communication of IKEA's message. And notice, all those design features were eliminated in the Oven mitt description sign to ensure adequate contrast and maximum readability so users can focus on the content.</div>
<div>
<br /></div>
<div>
If you are wondering how to avoid creating a Doc, Slide Presentation, or even a webpage where the colors and contrast interferes with the meaning, The <a href="https://www.w3.org/TR/WCAG20/" target="_blank">Web Content Accessibility Guidelines (WCAG 2.0)</a> provide guidance on how to ensure accessibility of your online materials. In reference to contrast, the WCAG 2.0 guideline reads as follows: </div>
<div>
<br /></div>
1.4.3 Contrast (Minimum): The visual presentation of <a href="https://www.w3.org/TR/WCAG20/#textdef">text</a> and <a href="https://www.w3.org/TR/WCAG20/#images-of-textdef">images of text</a> has a <a href="https://www.w3.org/TR/WCAG20/#contrast-ratiodef">contrast ratio</a> of at least 4.5:1, except for the following: (Level AA)<br />
<ul>
<li>Large Text: <a href="https://www.w3.org/TR/WCAG20/#larger-scaledef">Large-scale</a> text and images of large-scale text have a contrast ratio of at least 3:1;</li>
<li>Incidental: Text or images of text that are part of an inactive <a href="https://www.w3.org/TR/WCAG20/#user-interface-componentdef">user interface component</a>, that are <a href="https://www.w3.org/TR/WCAG20/#puredecdef">pure decoration</a>, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.</li>
<li>Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.</li>
</ul>
Level AA is the expected criteria to meet Section 508 compliance.<br />
<h2>
How to Create Accessibility</h2>
<div>
<ol>
<li>Adopt the mindset to Design for Everyone at the beginning of your creative process. </li>
<li>Build an accessible color palette. Here's a <a href="https://toolness.github.io/accessible-color-matrix/" target="_blank">great accessible color palette builder</a>.</li>
<li>Check the color contrast of your digital work. Here's a few tools:</li>
<ul>
<li><a href="http://leaverou.github.io/contrast-ratio/" target="_blank">Contrast Ratio</a>: accepts rgb, hex codes, and color names and provides the contrast ratio</li>
<li><a href="https://chrome.google.com/webstore/detail/color-contrast-analyzer/dagdlcijhfbmgkjokkjicnnfimlebcll?hl=en" target="_blank">Color Contrast Analyzer</a>: Chrome Extension that will analyze the contrast ratio of a web page or any digital file open within a Chrome tab. Anything outlined in white meets color contrast ratio guidelines, everything else needs to be changed to meet accessibility guidelines.</li>
<li> <a href="http://webaim.org/resources/contrastchecker/" target="_blank">WebAIM Color Contrast Checker</a>: Need rgb or hex codes (I use the Chrome Extension <a href="https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg?hl=en" target="_blank">ColorPick Eyedropper</a>) to check contrast and provides textual guidance about text size and needed ratio to meet the WCAG 2.0 Guidelines</li>
</ul>
</ol>
<div>
Think about the function of your digital content that you and your students create. The function is probably aligned with sharing information, communicating learning, and/or teaching others. If the design of that digital content interferes with the function, then it has failed to meet it's objective. Additionally, there is a likelihood that a segment of the population has been excluded from accessing that information and being part of the conversation. You can help create accessibility by being mindful of design elements like color contrast during the creation process to ensure the ultimate function of your digital content is met. </div>
</div>
<br />
<div>
<br /></div>
Melissa Oliverhttp://www.blogger.com/profile/13758071099912169070noreply@blogger.com1tag:blogger.com,1999:blog-7578113017627338668.post-89823097119071653422017-04-18T23:39:00.002-07:002017-04-18T23:39:58.685-07:00Day 16: Headings and Other Fomatting Features<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH5vFaB6c_-s65BI5lPuyRyt29JKPWRIuvfXKvru3az_1EskiTS4oSVRSprvFJgRsD2p87N2dNBPSqCdlCMpqfofyd8cK7NUHPHX4RNNwhSwdpk_1rwZZsyv7FudBHJ4WkSviNoQYop5aV/s1600/newspaper-433589_1920.jpg" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="212" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH5vFaB6c_-s65BI5lPuyRyt29JKPWRIuvfXKvru3az_1EskiTS4oSVRSprvFJgRsD2p87N2dNBPSqCdlCMpqfofyd8cK7NUHPHX4RNNwhSwdpk_1rwZZsyv7FudBHJ4WkSviNoQYop5aV/s320/newspaper-433589_1920.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><a href="https://pixabay.com/en/newspaper-historic-first-moon-433589/" target="_blank">Image Source</a></td></tr>
</tbody></table>
When reading a newspaper, magazine, or even a textbook, I rarely read these types of text from the beginning to the end, word for word. Rather, I really on text features like titles to capture my interest and let me skip to that particular article. I use Table of Contents to provide navigation to exactly what I am interested in. Within a larger article or textbook chapter, I may scan the headings and subheadings to find the text to read more closely depending on my purpose for reading. I may not read the paragraphs preceding a list detailing the top 5 habits to boost productivity but rather the list of numbers visually draws my focus and attention. As a classroom teacher, I taught my students to be strategic readers as well. Today, much of this type of text is available online but the reading behavior remains the same. I still look for the titles, headings, subheadings, lists, and more to be able to quickly find what I am looking for.<br />
<br />
Now imagine, if you are blind or have low vision, the appearance of the titles and headings may not stand out for you or a screen reader unless you create accessibility. Our students and even some readers may type the title of their story by using the tab key or the even the space bar to center the text, then increasing the size of the text, and maybe even making the text bold. A sighted person may recognize the text as a title but a screen reader will not differentiate that text. Same goes with headings that are created by just changing the font size and position. This formatting will not provide the navigational input that will allow a screen reader to "skim" content similar to how I might visually scan an article and only read the paragraph under the heading I'm interested in. Formatting matters for accessibility. Students can easily be taught these habits beginning very young as they create content using Docs, Slides, Sites, and even blogs. You'll find these formatting features very similar across different platforms and using them ensures increased accessibility.<br />
<h2>
How to Create Accessibility</h2>
<div>
The recommendations below are for Google Docs. The tools are consistent throughout G Suite but you'll find slight differences within Google Sites.</div>
<div>
<ol>
<li>Create numbered and bulleted lists format button on tool bar when creating lists, instead of manually typing 1), 2), etc. and using tab and space bar to create desired look</li>
<li>Use Headings, to help split up your document or webpage to help those using keyboard shortcuts to easily navigate. You can customize the look of your headings in Google Docs by visiting Format > Paragraph Styles. </li>
<li>Beyond Headings, use the other text styles to format your text to include titles and subtitles as appropriate for your document. These can also be customized by visiting Format > Paragraph Styles</li>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCQVMtGsi6MejxMnkmrg-9lJaLpQs3tcV4jvHjqYctib4dEE8yBw7Xz3mYOqBjTn9-e9z3alUru9z7EpDJ23UglRbGU_NP9YUWnFjens455B1YiXY00DbGz7j16FYSdSNIZ7fQl7_FrwLI/s1600/Screen+Shot+2017-04-18+at+11.09.47+PM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Drop Down Menu listing Title, Subtitle, Heading 1, Heading 2, and more" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCQVMtGsi6MejxMnkmrg-9lJaLpQs3tcV4jvHjqYctib4dEE8yBw7Xz3mYOqBjTn9-e9z3alUru9z7EpDJ23UglRbGU_NP9YUWnFjens455B1YiXY00DbGz7j16FYSdSNIZ7fQl7_FrwLI/s320/Screen+Shot+2017-04-18+at+11.09.47+PM.png" title="" width="164" /></a></div>
<li><div class="separator" style="clear: both; text-align: left;">
For longer documents, other text features such as page numbers, headers, and footers will help users navigate your document.</div>
</li>
<li>Use alt text for images. Look for several posts this week and next dedicated to just alt text within images.</li>
</ol>
<div>
<br /></div>
<div>
<br /></div>
</div>
Melissa Oliverhttp://www.blogger.com/profile/13758071099912169070noreply@blogger.com0tag:blogger.com,1999:blog-7578113017627338668.post-24532014260175566362017-04-17T23:22:00.001-07:002017-04-17T23:25:54.485-07:00Day 15: Fonts<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="https://4.bp.blogspot.com/-_C_YDu5GT5g/WO12I5soO9I/AAAAAAAAJhw/F7kwsBcu5MUIon_LYWQLqwz0fPGcTyyDACPcB/s1600/IMG_20170410_175140_374.jpg" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img alt="Idea written multiple times in different fonts" border="0" height="240" src="https://4.bp.blogspot.com/-_C_YDu5GT5g/WO12I5soO9I/AAAAAAAAJhw/F7kwsBcu5MUIon_LYWQLqwz0fPGcTyyDACPcB/s320/IMG_20170410_175140_374.jpg" title="" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><br /></td></tr>
</tbody></table>
It is super easy to get carried away with fonts. Visit <a href="http://fonts.google.com/">fonts.google.com</a> and there are over 800 fonts to explore. Choose a font and it will display even more fonts as popular pairings! With so many choices and great designs, it is easy to go overboard. This is never really a good idea as my recent sketch clearly indicates. Multiple fonts in a document, slide, or website can make the text difficult to perceive and for users to focus on whatever you or your students are trying to communicate.<br />
<br />
Fonts can be organized into families or categories. There are handwriting fonts that look like cursive or more decorative fonts that can make your letters appear like they were written out of logs or even straight from a blockbuster movie opening credits. However, serif and sans-serif fonts going to be much more readable for a broader audience than handwriting or decorative display fonts. A serif font is characterized by little lines at the finishing edges of letters. Times New Roman is an popular serif font. A sans-serif font is without these little finishing lines. Arial is a popular sans-serif font. This blog is published using a consistent sans-serif font throughout.<br />
<br />
Whatever font you and your students choose, it's a good idea to limit the number within a single document to no more than 2-3 fonts. If you are going to add an additional font, keep it in the same font family for a cleaner look. This will make it easier for readers to focus on your content. Users with reading disabilities, low vision, and/or attention difficulties will thank you! <br />
<br />
Look for posts later this week to learn more about color choices and contrast when thinking about text and images!<br />
<br />Melissa Oliverhttp://www.blogger.com/profile/13758071099912169070noreply@blogger.com0tag:blogger.com,1999:blog-7578113017627338668.post-2098457951061470772017-04-16T18:18:00.002-07:002017-04-16T18:18:38.910-07:00Week 2 Reflection: There is No Pixie Dust<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh__gV-GAcZXAawdKLbF1n9AGFqDONmpaw1vInBX5y3R9l_IwtHSlAhDRERYd_epk3sIoQUqEbn-HS37OnmYCHBJvKE371S-c_KAxxyKZAfkzjtuxxyLrIYc23J27j53lRO1EBbOJOu2h3s/s1600/20170416_180356.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Accessibility with Fairy blowing Pixie Dust" border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh__gV-GAcZXAawdKLbF1n9AGFqDONmpaw1vInBX5y3R9l_IwtHSlAhDRERYd_epk3sIoQUqEbn-HS37OnmYCHBJvKE371S-c_KAxxyKZAfkzjtuxxyLrIYc23J27j53lRO1EBbOJOu2h3s/s320/20170416_180356.jpg" title="" width="320" /></a></div>
Spring Break coincided with Week 2 of this challenge and even though I worked a few days in the office, I had more time to devote to finishing up a previously unpublished posts. I also spent time working through a <a href="https://www.udacity.com/course/web-accessibility--ud891" target="_blank">Web Accessibilility Course</a> that is offered by Google and hosted on Udacity. I've only completed a third of the course so far and I've been learning lots more about coding for accessibility and new vocabulary--modals, focus behavior, and skip links and more! This is a big upgrade from my self-taught html skills when I worked for a non-profit academic society building websites and databases in Seattle back in the late 90s. Thankfully, the <a href="https://archive.org/web/" target="_blank">Way Back Machine</a> doesn't have an archive of my work.<br />
<div>
<br /></div>
While updating my web skills this week, I came across an article on CNET about Vin Cert, titled "<a href="https://www.cnet.com/news/internet-inventor-vint-cerf-accessibility-disability-deaf-hearing/#ftag=COS-05-10aaa0j" target="_blank">Internet inventor: Make tech accessibility better already</a>." In this article, Cerf, who is hard of hearing himself makes the claim that accessibility "can't be a pixie dust that you sprinkle on top of the program and suddenly make it accessible, which the the behavior pattern of the past. Accessibility should be a design choice that is rewarded, something a lot of companies have not stepped up to." When I approached web design in the late 90s, you used things like <blink>, <marquee>, and other unfortunate things such as repeating background images because you could. It was new and we must have thought it looked cool. There was little consideration for disability and accessibility.<br />
<br />
I think EdTech is in a similar place. With new products, tools, and companies competing for dollars in the EDU space, there is a rush to market with little regard for accessibility by many. I hear things such as: "Struggling to provide differentiated PD? Here's an online platform to help solve your issues." Or, "Here's a portfolio system that organizing student work easy!" and "Blended learning is the solution to your problems. Our platform provides what you and your students need." In many of these cases, these "solutions" do not offer closed captioning, keyboard navigation support, or make it easy for screen readers to use among things that provide access for diverse users. I agree with Cerf that no amount of "pixie dust" is going to make these products accessible if accessibility was not part of original design process.<br />
<br />
I am not suggesting that educators need to become experts in DOM and modals but I do think we owe it to our students and profession to increase our awareness about web accessibility and apply it to our work and teach our students to do the same. Whether we and/or our students are creating videos, presentations, documents, or any countless other digital products to both facilitate and demonstrate learning, there are workflows we can adopt that improve accessibility and access. <br />
<br />
The last two weeks of this challenge, I have focused on captioning and will now share posts focusing on design features such as headers, alt text, color choice, and hyperlinks that help create accessibility. Ultimately, there is no magic pixie dust to make the digital content we create accessible. We must choose to create accessibility, build awareness, and adopt a mindset that makes accessibility part of the creation process. As we improve our knowledge regarding accessibility we are better positioned to evaluate and question the latest EdTech products, tools, and platforms as to whether they provide access and promote the inclusion of diverse users.<br />
<h1 style="background-color: white; font-family: Panton, sans-serif; font-size: 72px; font-weight: 300; letter-spacing: -0.009em; line-height: 74px; margin: 0px 0px 9px; text-rendering: optimizeLegibility;">
</h1>
Melissa Oliverhttp://www.blogger.com/profile/13758071099912169070noreply@blogger.com0tag:blogger.com,1999:blog-7578113017627338668.post-12697954716788346642017-04-15T22:46:00.001-07:002017-04-15T22:46:18.292-07:00Turbonote: View YouTube Video & Transcript Side-by-Side<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMM25zBTtejAa2xZyhpKdbQ-eVuck261ZpBkCOIYDPG9ge0dWYN7tBVI-euzFIdUVJv7mVeMUI3A04oKRpOH_BqHxBNa9msknQlxrhyCEPdilEd-guZN7Ezzayd-q_leylwDmNs1VEEbtW/s1600/Screen+Shot+2017-04-15+at+5.36.03+PM.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMM25zBTtejAa2xZyhpKdbQ-eVuck261ZpBkCOIYDPG9ge0dWYN7tBVI-euzFIdUVJv7mVeMUI3A04oKRpOH_BqHxBNa9msknQlxrhyCEPdilEd-guZN7Ezzayd-q_leylwDmNs1VEEbtW/s200/Screen+Shot+2017-04-15+at+5.36.03+PM.png" width="185" /></a>When a video is closed captioned on YouTube, there is a transcript available <i><b>below</b></i> the video. These are displayed by selecting More underneath the video title and then choosing transcript on the drop-down menu. The challenge is seeing both the video and the transcript at the same time. You end up scrolling down to the transcript and back up to the video and repeating this cycle to get what you need.</div>
<br />
The <a href="https://chrome.google.com/webstore/detail/turbonote/fhpgggnmdlmekfdpkdgeiccfkignhkdf" target="_blank">Chrome Extension Turbonote</a> solves this issue. With any YouTube video that is closed captioned, this extension allows you to view the transcript<b><i> next to </i></b>the video. I use this frequently for longer videos because it allows me to quickly scroll through the transcript and find the part I'm looking for, click on that text in the transcript and the video will jump exactly to that location. The extension allows you to <a href="http://www.createaccessibility.com/2016/11/why-closed-captioning-easily-navigate.html" target="_blank">navigate a video</a> just like you would in YouTube.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivtPzyEil1O4u8qArrEPpNBqLkQuEMOLXopihsN7F92BbUIHtaw9KpWSc1n3h80fm4E49TKFRTxUImwJb6r2b-rtbkvYBsHt-Zy68OlmxFJEO7kdQ62GzMgpEFSh2DAYzoZbmR4nGGThTG/s1600/Screen+Shot+2017-04-15+at+5.41.20+PM.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Video on the left with transcript of video on the right" border="0" height="243" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivtPzyEil1O4u8qArrEPpNBqLkQuEMOLXopihsN7F92BbUIHtaw9KpWSc1n3h80fm4E49TKFRTxUImwJb6r2b-rtbkvYBsHt-Zy68OlmxFJEO7kdQ62GzMgpEFSh2DAYzoZbmR4nGGThTG/s640/Screen+Shot+2017-04-15+at+5.41.20+PM.png" title="" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="text-align: left;"><br /></span></div>
Turbonote can do more such as note-taking, bookmarking and other features which I have never used. I have used it strictly for the improved interface where I can see the transcript next to the video and avoid the scrolling. It also shows more of the transcript at a time than the YouTube transcript window which I find incredibly helpful. If you are someone who uses transcripts and/or have students who benefit from transcripts, Turbonote provides an alternative interface.<br />Melissa Oliverhttp://www.blogger.com/profile/13758071099912169070noreply@blogger.com2tag:blogger.com,1999:blog-7578113017627338668.post-78720236565689256822017-04-14T23:16:00.004-07:002017-04-14T23:25:50.981-07:00Day 12: Create a "video playlist" in Google Slides<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIKslIDvoLM2WTXzFAiqnSU3svEVZUxjsF89acHg1OrYC9wUD-rJmBrn1VcP8wqFTGHskhoSdLsmyHUByFPeKdG_wsntB2SPfJ6k_bUautnCbIVEE1Lx1OKnL6XpfUBvJNG7rbaMUSJ59j/s1600/Screen+Shot+2017-04-14+at+11.07.31+PM.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Video options with Autoplay when Presenting checked" border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIKslIDvoLM2WTXzFAiqnSU3svEVZUxjsF89acHg1OrYC9wUD-rJmBrn1VcP8wqFTGHskhoSdLsmyHUByFPeKdG_wsntB2SPfJ6k_bUautnCbIVEE1Lx1OKnL6XpfUBvJNG7rbaMUSJ59j/s200/Screen+Shot+2017-04-14+at+11.07.31+PM.png" title="" width="106" /></a></div>
This challenge is for those with newly captioned videos in Google Drive. With the recent Google Slides updates it's easier than ever to use and share videos in environments where YouTube is blocked. Whether you choose to caption Google Drive videos by <a href="http://www.createaccessibility.com/2017/04/day-4-caption-by-uploading-transcript.html" target="_blank">uploading a transcript</a>, <a href="http://www.createaccessibility.com/2017/04/day-9-using-caption-creator-for-google.html" target="_blank">using Caption Creator</a>, or <a href="http://www.createaccessibility.com/2017/04/day-10-voice-typing-google-slides.html" target="_blank">Voice Typing</a>, it is possible to create a closed-captioned playlist of Google Drive videos using Google Slides. With Videos in Slides, it opens up the best of collaboration, students can use the comments feature to takes notes, engage in commentary, and/or easily provide feedback on peer-created videos. Enable the autoplay feature under video options and now it's possible to easily build a collaborative, progressive video story with each slide building upon another. All these files can easily be shared via Google Classroom or embedded in a Google Site for a larger audience. Videos hosted in Google Drive + Google Slides = endless possibilities! <br />
<h2>
How to Create Playlist</h2>
<br />
<ol>
<li>Create New Google Slides File. (<a href="http://slides.google.com/create">slides.google.com/create</a>)</li>
<li>From the Insert Menu, Select Video > Choose Video from Google Drive </li>
<li>To enable autoplay, select inserted video on slide > Choose Video Options on Menu Bar > Check Autoplay when presenting</li>
<li>Add New Slide</li>
<li>Repeat #2-3; until playlist is complete!</li>
</ol>
<br />
<h2 style="text-align: left;">
Iterations of Caption Creator for Google Drive Playlist </h2>
<div style="text-align: left;">
This Google Drive video playlist consists of iterations and my notes from initial testing of Caption Creator for Google Drive back in early October. For the initial testing, I found the shortest video in my Google Drive (48 seconds) and used it as my test. I tried one thing, noted the results, duplicated my original video, and tried another, noted results and repeated the process until there are more than 15 of the same video with different captioning results. Below you have 12 of the attempts on this playlist along with my original notes and links to captioning files. There are LOTS of captioning errors in these videos. You''ll notice SRT file notations in the captions. You're not supposed to see these and it was lots of trials to figure out how to get the format right and make these disappear. Along the way, learned lots of SRT files, transcripts, and captioning in Drive. </div>
<br />
<center>
<iframe allowfullscreen="true" frameborder="0" height="450" mozallowfullscreen="true" src="https://docs.google.com/presentation/d/1ja0-H7-liODwlaouro47iE7G6lfBd98EnHasJzGpnbw/embed?start=false&loop=false&delayms=6000000" webkitallowfullscreen="true" width="600"></iframe></center>
Melissa Oliverhttp://www.blogger.com/profile/13758071099912169070noreply@blogger.com3tag:blogger.com,1999:blog-7578113017627338668.post-19461116025329593782017-04-13T18:25:00.002-07:002017-04-13T18:25:55.833-07:00Day 11: Edit existing Captions in YouTubeToday's challenge is to edit existing captions in YouTube. When people ask for captioning workflow suggestions, my go-to recommendation is to edit existing captions on YouTube if it is not blocked in their school environment. I find this workflow to be the most user-friendly for people new to captioning.<br />
<br />
Whenever you upload a video to YouTube, it automatically creates an auto caption track within a few minutes. (Note: Autocaptions are not produced for really long videos. Just another not to create really long videos!) In February, <a href="https://youtube.googleblog.com/2017/02/one-billion-captioned-videos.html" target="_blank">YouTube announced there were 1 billion autocaptioned videos</a>. The voice recognition software behind auto captioning is continuously improving but my experience watching YouTube videos includes encountering F-bombs, hateful language towards race, gender, and sexuality, and other things that make no sense within auto-captions. Some of the most egregious errors have been thankfully decreasing over the last few months but as a creator putting your work online and sharing it with others, it's important to edit the auto captions and check their accuracy. Publishing these edits will not only create accessibility and make YouTube a friendlier place for people who rely on captions, it will also help get your content noticed as the transcripts created with published captions are indexed by search engines. If your students are posting content on YouTube this is a great lesson for them so that hateful language doesn't become part of their digital legacy.<br />
<br />
<h2>
How to Create Accessibility</h2>
<div>
<b>Prerequisite</b>: Video on YouTube. If you create a video for this purpose, I recommend creating one less than a minute to begin your captioning practice.</div>
<br />
<ol>
<li>Visit your YouTube Video Manager and Choose a Video to caption. If you are new to captioning, I recommend selecting the shortest video on your channel. If you have been following along with the challenge, you might choose your video with the most views.</li>
<li> Edit > Subtitles & CC</li>
<li> Choose [insert language] (Automatic)</li>
<li>Edit</li>
<li>Play your video, check for accuracy and make any necessary edits for content or timings. Make content edits on the left. Timing edits are easier done using the sliders on the bottom of your video</li>
<li>Click Publish Edits when finished.</li>
</ol>
<br />
<div style="text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxvoxxfFk61pMqmFPNPUj9DFt6Pclp135KaaPdweZ9ZCOW5CqhjF55otz0rlM9V-uc-Lw39UKfzaWCvb22Ev67_-7t1UXe41fKUooWwrBgZ9wpvT9m2W4jR2HTqpbveN2rYuFguw43WG6w/s1600/Editing+existing+auto-generated+captions.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="YouTube Captioning Interface with text on the left and video on the right" border="0" height="422" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxvoxxfFk61pMqmFPNPUj9DFt6Pclp135KaaPdweZ9ZCOW5CqhjF55otz0rlM9V-uc-Lw39UKfzaWCvb22Ev67_-7t1UXe41fKUooWwrBgZ9wpvT9m2W4jR2HTqpbveN2rYuFguw43WG6w/s640/Editing+existing+auto-generated+captions.png" title="Editing Existing Autogenerated captions" width="640" /></a><iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/AViRaSQ6kV0/0.jpg" frameborder="0" height="350" src="https://www.youtube.com/embed/AViRaSQ6kV0?feature=player_embedded" width="475"></iframe></div>
<br />
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<br />Melissa Oliverhttp://www.blogger.com/profile/13758071099912169070noreply@blogger.com0tag:blogger.com,1999:blog-7578113017627338668.post-68285780173474846322017-04-12T19:53:00.000-07:002018-01-06T22:26:20.642-08:00Day 10: Voice Typing, Google Slides, Transcripts, & Captions!<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyvoONJSXrlkfsd86M6H5PbyPRgLFZVanWoeeHTq78JGQvngNV_4FtgG83KFv6YfM5HQ0hN6n0X-05hDDh3xS5anWFecyAft4ZPk1FbURWa3by_jWVKyql9sXheQABHpZxbwb-5sHcdPyo/s1600/Screen+Shot+2018-01-06+at+10.25.24+PM.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="486" data-original-width="910" height="170" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyvoONJSXrlkfsd86M6H5PbyPRgLFZVanWoeeHTq78JGQvngNV_4FtgG83KFv6YfM5HQ0hN6n0X-05hDDh3xS5anWFecyAft4ZPk1FbURWa3by_jWVKyql9sXheQABHpZxbwb-5sHcdPyo/s320/Screen+Shot+2018-01-06+at+10.25.24+PM.png" width="320" /></a></div>
The last two days have demonstrated how to <a href="http://www.createaccessibility.com/2017/04/day-8-transcribe-autosync-captioning-on.html" target="_blank">transcribe a video in YouTube</a> and <a href="http://www.createaccessibility.com/2017/04/day-9-using-caption-creator-for-google.html" target="_blank">Google Drive</a>. Today calls for using voice typing to complete the initial transcript. Why? Let's be honest. Sometimes, we do not always record a video with a well-thought out transcript written in advance. Also, for younger students, students without typing proficiency yet, and/or students with motor difficulties, transcribing a video, whether in YouTube or Google Drive, can be difficult. Voice Typing to the rescue! It's not an 100% perfect solution as edits will be required but voice typing will provide users a head start.<br />
<br />
Back in October, I published a blog post describing using <a href="http://www.createaccessibility.com/2016/10/using-voice-typing-to-create-transcript.html" target="_blank">Voice Typing in Google Docs to Create a Transcript Caption File</a>. This remains a viable workflow and now you have more options with recent Slides updates. With Google Slides now offering Voice Typing and the ability to embed videos from Google Drive, here's another captioning workflow with the added benefit of having the video transcript available in the speaker notes for any users who may require them. Very high on my Google update wish list would be the ability to do all of this in a single tab. Sadly, that doesn't work (yet?) and like using Google Docs it requires two tabs open as described below and demonstrated in the video tutorial.<br />
<div>
<br /></div>
<h2>
How to Create Accessibility</h2>
<div>
<ol>
<li>In one tab, open a Google Slides File and cue up Voice Typing (Tools > Voice Typing Speaker Notes) on a blank slide. I recommend resizing the speaker notes box on the bottom so you'll have more space.</li>
<li>In another tab, cue up video in Google Drive that you wish to create a transcript of. </li>
<li>Display these browser tabs, side-by-side. I recommend using a Chrome extension such as <a href="https://chrome.google.com/webstore/detail/tab-resize-split-screen-l/bkpenclhmiealbebdopglffmfdiilejc" target="_blank">Tab Resize</a> or <a href="https://chrome.google.com/webstore/detail/tab-scissors/cdochbecpfdpjobpgnacnbepkgcfhoek" target="_blank">Tab Scissors</a> to more easily display the two tabs side-by-side. </li>
<li>Press play on your video and quickly press the voice typing icon. And let your video play and watch voice typing transcribe it in the speaker notes.</li>
<li>Stop voice typing when video is complete.</li>
<li>Edit transcript in Speaker notes. Correct any spelling, punctuation, and spelling errors. You will probably need to replay parts of your video to capture any content that was missed by voice typing and type it manually into the speaker notes.</li>
<li>Once satisfied with edits, download transcript as .txt file by going to File > Download as. It's important that you are using speaker notes on a blank slide. Any text on the slide would be included in your transcript file which would make it inaccurate for captioning purposes.</li>
<li>Right click on video title found in Drive > Manage Caption Tracks > Upload transcript file you just downloaded > Done </li>
<li>Wait for the autosync process to complete. While waiting, this is a great time to insert the video onto the Google Slide with the transcript if you intend to use and/or share via Google Slides.</li>
<li>Enjoy your accessible video which in slides, also now includes the transcript which can be very helpful for some users.</li>
</ol>
<div>
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i9.ytimg.com/vi/riqEVFIrpPo/default.jpg?sqp=CNDAu8cF&rs=AOn4CLDDhF8d_nsT4iHJiS55o9mJMm7Y-g" frameborder="0" height="350" src="https://www.youtube.com/embed/riqEVFIrpPo?feature=player_embedded" width="475"></iframe></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
If you are curious about the accuracy of Voice Typing, I tested this out several times with the same video in the same environment and had different errors each time. There wasn't necessarily fewer errors over time just different ones which is why editing is important. If you're curious, I've included a comparison of the Voice Typing transcript initially captured in Google Slides before edits and the transcript with edits below. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<br /></div>
<center>
<iframe height="800" src="https://docs.google.com/document/d/1vV-UJ_Sxus_Qz7ljBMpV0BftvQlp-cP0yd5tvNMTrtk/pub?embedded=true" width="650"></iframe></center>
</div>
Melissa Oliverhttp://www.blogger.com/profile/13758071099912169070noreply@blogger.com0tag:blogger.com,1999:blog-7578113017627338668.post-66590926270370803652017-04-11T21:58:00.001-07:002017-04-11T21:58:12.066-07:00Day 9: Using Caption Creator for Google DriveThis is the challenge exercise I'm most excited about and love to share with others because I believe it fulfills a very real need in our schools. Many schools block YouTube for some or all students. Other schools may provide access to restricted YouTube videos but block the ability to create accounts, upload videos, and access its captioning interface. With unlimited storage in GSuite for Education accounts and the recent updates to Google Sites and Slides, it is easier than every to share videos hosted in Drive. Using Caption Creator for Google Drive provides a YouTube-like interface for students to create and edit transcripts to create closed captioned Google Drive videos.<br />
<br />
This was a collaborative project with fellow #COL16 cohort member, <a href="http://www.twitter.com/rheajt" target="_blank">Jordan Rhea</a> of <a href="http://plnnr.net/">plnnr.net</a> who did all the coding and made this vision a reality. Now Caption Creator for Google Drive (<a href="http://bit.ly/captioncreatorforgoogledrive">bit.ly/captioncreatorforgoogledrive</a>) is available and classroom-tested as a viable captioning solution for those working in environments without access to YouTube.<br />
<h2>
How to Create Accessibility</h2>
<div>
<b>Prerequisite:</b> Video stored in Google Drive to caption. If you don't have one, use mine. Download <a href="https://drive.google.com/open?id=0B-0T1FBSTwM8bTh1YklxQjZJdDQ" target="_blank">Create Accessibility Practice Caption Video</a> and Upload to Google Drive. It will take a minute or two to process before being available for captioning. </div>
<ol>
<li>Visit <a href="http://bit.ly/captioncreatorforgoogledrive">bit.ly/captioncreatorforgoogledrive</a></li>
<li>Review and Accept Permissions</li>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU6OpO9sdsahOh_XULsM3Hxom1sz1Yut4Ea7Qi2Eo3wnbuIv-XiCS3kfkcAErHW-xL_bQXwsm4Cs4U_0WL2_qB9vcbx-goXIly16g9xzJ2ITFb5-IysLc8ZAY7HvnedCHhfia16cR1OqIa/s1600/Caption+Creator+Permissions.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Review Permissions and Allow Buttons Surrounded by a Red Box" border="0" height="236" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU6OpO9sdsahOh_XULsM3Hxom1sz1Yut4Ea7Qi2Eo3wnbuIv-XiCS3kfkcAErHW-xL_bQXwsm4Cs4U_0WL2_qB9vcbx-goXIly16g9xzJ2ITFb5-IysLc8ZAY7HvnedCHhfia16cR1OqIa/s640/Caption+Creator+Permissions.png" title="" width="640" /></a></div>
<li>Choose Select a File <div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKZRL0zyIVdV6BpHRQpJkHEKnANAHUlm68suk6U-2oTMI6Fqu4IZhCQiZcI1iDzaOEibOw225QLPj87iC6v_0Zf9Hz2ra1QahoilhsGHCdRSBC7e6RUoNbCuJ3fCzLMFS_N6aXDcY5LvTy/s1600/Caption+Creator+for+Google+Drive.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="115" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKZRL0zyIVdV6BpHRQpJkHEKnANAHUlm68suk6U-2oTMI6Fqu4IZhCQiZcI1iDzaOEibOw225QLPj87iC6v_0Zf9Hz2ra1QahoilhsGHCdRSBC7e6RUoNbCuJ3fCzLMFS_N6aXDcY5LvTy/s320/Caption+Creator+for+Google+Drive.png" width="320" /></a></div>
</li>
<li>Find desired video from your Google Drive to Caption > Click Select</li>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTgutagwFwvbwukB2X3ZUrdqbisZb9yfMXgAvvme-yKHG0Z7vTm3OI626-SBxmV0ntj4r30WocGcWyaUU20PUD4XMYAmph9u93SrYJeLgnB8X2ApqsbGAXrt2WadKSlMhSgEFvct0xFlJl/s1600/Select+a+Video+from+Drive+Caption+Creator.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="229" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTgutagwFwvbwukB2X3ZUrdqbisZb9yfMXgAvvme-yKHG0Z7vTm3OI626-SBxmV0ntj4r30WocGcWyaUU20PUD4XMYAmph9u93SrYJeLgnB8X2ApqsbGAXrt2WadKSlMhSgEFvct0xFlJl/s320/Select+a+Video+from+Drive+Caption+Creator.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<li> Press Play and type your captions in the Top Box. Video will automatically pause when you begin typing and start again after a break in typing. This pause is longer than what you experience on YouTube to account for classroom use. Anything you type in the top box will appear on the bottom. <b>Note</b>: Everything in the bottom box is editable.<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9aajYnMick53jIt8iNkjLaXyOc9Seulahsk0dUpJGD6GbzEYrB7LLa5ZIeom8xYjC_cn-el7dG462Sk8BvneJpS2m2GpyhAQFCYAYGM9ThJtgafXTudR-UGHy2FX50aQdSAINAfhszNhN/s1600/Type+your+captions+below.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9aajYnMick53jIt8iNkjLaXyOc9Seulahsk0dUpJGD6GbzEYrB7LLa5ZIeom8xYjC_cn-el7dG462Sk8BvneJpS2m2GpyhAQFCYAYGM9ThJtgafXTudR-UGHy2FX50aQdSAINAfhszNhN/s400/Type+your+captions+below.png" width="400" /></a></div>
</li>
<li>Once finished with transcribing video, you have choices. I prefer to do edits in the box below. This is where I fix spelling typos, spacing, and punctuation. I also watch the video again and compare the transcript against the video as a final check. I've found that many students prefer to complete edits in a Google Doc. Here they have the benefit of spell check and can use tools like Read&Write to hear the transcript spoken back which can highlight spots that need further editing. Using a Chrome Extension like <a href="https://chrome.google.com/webstore/detail/tab-scissors/cdochbecpfdpjobpgnacnbepkgcfhoek?utm_source=chrome-ntp-icon" target="_blank">Tab Scissors</a> or <a href="https://chrome.google.com/webstore/detail/tab-resize-split-screen-l/bkpenclhmiealbebdopglffmfdiilejc?utm_source=chrome-ntp-icon" target="_blank">Tab Resize</a> makes a split screen easier to go back and forth between the Google Doc and the video.</li>
<li>Edits Complete? Download as a .txt file either within Caption Creator or if using Google Docs File > Download as .txt</li>
<li>Visit Drive > Locate Video > Right Click on Title > Manage Caption Tracks</li>
<li>Choose language and Upload .txt file</li>
<li>Depending on the length of the video it will take a minute or two for the captions to autosync.</li>
<li>Enjoy your accessible video. </li>
</ol>
<div>
<br /></div>
<div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/PgtINtCqvyo/0.jpg" frameborder="0" height="375" src="https://www.youtube.com/embed/PgtINtCqvyo?feature=player_embedded" width="500"></iframe></div>
<br />
I have had students as young as 4th grade successfully use Caption Creator for Google Drive. It does provide a solution for environments where YouTube is blocked. I use <a href="https://drive.google.com/file/d/0B-0T1FBSTwM8bTh1YklxQjZJdDQ/view?usp=sharing" target="_blank">this 30 second practice video with students</a> when introducing the tool. I recommend using this video or a similar short video you or your students have created the first time using Caption Creator for Google Drive. Typing Automaticity will effect use of Caption Creator. However, I always share why captioning is important beforehand and have found that students connect with the purpose of creating accessibility and persevere through any challenges presented by lack of typing proficiency. Additionally, many share that they prefer to watch videos with captions themselves which creates a personal connection to creating captions.<br />
<br />
In most cases classes creating accessible videos will use a blending approach of uploading transcripts used to create the video, editing pre-made transcripts in Caption Creator, or creating the transcript from scratch following video production. Ultimately it depends on the student, the video project and its purpose to determine workflow. Now there are more options available to create accessible video content in Google Drive. When you use Caption Creator with your students, I would love to connect and hear feedback!</div>
Melissa Oliverhttp://www.blogger.com/profile/13758071099912169070noreply@blogger.com0tag:blogger.com,1999:blog-7578113017627338668.post-50482481127438906992017-04-10T22:22:00.001-07:002017-04-10T22:22:24.552-07:00Day 8: Transcribe & Autosync Captioning on YouTube Another method of captioning YouTube videos is to transcribe and autosync. This is my preferred workflow for captioning YouTube content when I don't have a transcript and my video doesn't have music or other sound effects that need to be formatted a certain way. For short videos that are less than two minutes in length, I think this is the best method. An added benefit for creators is that the very act of listening to yourself closely when transcribing helps one recognize verbal tics, awkward pauses, and intonation patterns. Becoming more mindful of these characteristics will improves the quality of subsequent videos over time.<br />
<br />
For longer videos and for students whose keyboarding skills are not proficient yet, this method of captioning can be quite challenging. On Day 11, I will share another YouTube captioning workflow that I recommend in these situations.<br />
<br />
<h2>
How to Create Accessibility</h2>
<div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGaExwhEyWKSE7VkmemGROa47Uvt6ZDkkBFUQGZ1yInNDuFDcu_nnGBvetop_SJv4gGN-kGKc0DsLUfiYKr58xg8iwVw2WqPiqDr3jCr9JZvCPXuwJb0PQ25TZPQzT5dfiTTO02s-Rk0S6/s1600/Screen+Shot+2017-04-10+at+10.07.18+PM.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="Edit with drop down menu with Subtitles/CC highlighted" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGaExwhEyWKSE7VkmemGROa47Uvt6ZDkkBFUQGZ1yInNDuFDcu_nnGBvetop_SJv4gGN-kGKc0DsLUfiYKr58xg8iwVw2WqPiqDr3jCr9JZvCPXuwJb0PQ25TZPQzT5dfiTTO02s-Rk0S6/s320/Screen+Shot+2017-04-10+at+10.07.18+PM.png" title="" width="284" /></a><b>Prerequisite</b>: A short video available ready to upload on YouTube.</div>
<div>
<ol>
<li>Visit your <a href="http://www.youtube.com/">youtube</a> channel and upload a short video.</li>
<li>On the edit menu click the down arrow > Subtitles & CC</li>
<li>Click Add New Subtitles & CC</li>
<li>Choose Language</li>
<li>Select Transcribe and Autosync Option</li>
<li>Begin Playing your video and typing what you hear. Continue until complete.</li>
<li>Click Set Timings. Wait. The longer the video the longer it will take to autosync.</li>
<li>Refresh your captions</li>
<li><b>Highly Recommended</b>: Watch video again and edit text and/or timings as needed.</li>
<li>Select Publish</li>
<li>Enjoy your Accessible Video with Closed Captioning</li>
</ol>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i9.ytimg.com/vi/PtpluZPLsyY/default.jpg?sqp=CPzHsccF&rs=AOn4CLBYhiqsQnQ5xyZ6Sz0Fhr3ED2fwsA" frameborder="0" height="375" src="https://www.youtube.com/embed/PtpluZPLsyY?feature=player_embedded" width="500"></iframe></div>
<div>
<br /></div>
</div>
Melissa Oliverhttp://www.blogger.com/profile/13758071099912169070noreply@blogger.com0tag:blogger.com,1999:blog-7578113017627338668.post-22686806361318879562017-04-09T22:43:00.003-07:002017-04-09T22:43:50.955-07:00Day 7: Week 1 Reflection <div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis0qg9sNEEopLrPnNNKf6AGNg-KRT4AHClEgU2-qiaUuNYzYXpbl_jxVD7jII31atAx4G0bq1Pv5E1Thd9yiKoh_N8bG0o_ZIX0Zu643ogbRXGqPqusMHlKHfQUwWYXfk4kMzxwS8bzeMU/s1600/Reflection+Icon.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Stick person looking into mirror and seeing their reflection" border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis0qg9sNEEopLrPnNNKf6AGNg-KRT4AHClEgU2-qiaUuNYzYXpbl_jxVD7jII31atAx4G0bq1Pv5E1Thd9yiKoh_N8bG0o_ZIX0Zu643ogbRXGqPqusMHlKHfQUwWYXfk4kMzxwS8bzeMU/s200/Reflection+Icon.png" title="" width="160" /></a></div>
Whenever doing something new, it's important to take time for reflection. To create accessibility one must adopt new work habits and workflows to produce digital content. This can be especially challenging when used to established workflows that do not include accessibility as part of the creation process. That is why I love teaching accessible design to students. It is possible to make accessible design workflows, like captioning, part of the creation process and during the process invest kids in the why behind producing content that can be accessed by a wide variety of users.<br />
<br />
Personally, I have found the workflow of producing daily content for this challenge, in fact challenging though I do appreciate the self-imposed restraint of daily content production. I have a ton of unpublished draft blog posts that I haven't published because I wanted to return to them and continue to improve. I look at them now and some are not even relevant because the technology has changed or been updated. This workflow has not only pushed me to publish but also made me even more cognizant of how accessible technology continues to evolve.<br />
<br />
For example, back in October when you uploaded transcripts to Google Drive to caption videos they required the .srt file extension. The file didn't actually have to be in the .srt file format but needed the file extension in order to sync the captions. That is no longer needed. A simple .txt file achieves the same result. It gives me hope that maybe someday it will be possible to push or attach a Google Doc to a video and it will autosync the captions helping to eliminate the step of downloading. Or even better yet, with the update to Google Slides that allows the embedding of Google Drive videos, wouldn't it be cool to be able to produce a transcript using voice typing (Looks for a post on how to do this in Google Docs soon!) within Google Slides that then could be edited for accuracy and added as captions? Anything that streamlines the process and makes it more kid-friendly helps move accessibility closer towards reality.<br />
<br />
Also, this week Apple released Clips that was fun to play with. I don't anticipate using it much myself but it does provide another solution for captioning with its Live Titles that you can see during the creation process. This feedback is huge! The technology still relies on voice recognition which is highly variable and the editing process is terribly cumbersome. But, it does signal the continued evolution of technology in this space that creates hope for a more accessible future.<br />
<br />
Hope you enjoyed Week 1! Coming up during Week 2 of the #CreateA11y challenge, I look forward to sharing more captioning workflows for both YouTube and for Google Drive.Melissa Oliverhttp://www.blogger.com/profile/13758071099912169070noreply@blogger.com0tag:blogger.com,1999:blog-7578113017627338668.post-2061696321336882052017-04-08T20:35:00.005-07:002017-04-08T20:35:46.944-07:00Day 6: Open Captioning on YouTube<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDhsNlBZmgVaF_v3OdCA_0mF5M01ahFO8FMUhCvR338mcqgpzR5VUGXDyOwExR_YszCmCM-G45gG8zP-O6fX4Uzh4D7B9JxmKV14VUnt6P9rlSHNErIkwMuIKWmXaSvi5QM0vg3arxfnko/s1600/%2523CreateA11y+Challenge+Day+6.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="112" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDhsNlBZmgVaF_v3OdCA_0mF5M01ahFO8FMUhCvR338mcqgpzR5VUGXDyOwExR_YszCmCM-G45gG8zP-O6fX4Uzh4D7B9JxmKV14VUnt6P9rlSHNErIkwMuIKWmXaSvi5QM0vg3arxfnko/s200/%2523CreateA11y+Challenge+Day+6.png" width="200" /></a></div>
Today's challenge is to Open Caption a video you own on YouTube. The difference between open and closed captioning is simple. Closed captioning is user controlled and relies on the user to turn on. Programming on television is the best universal example of this. In the US, the <a href="https://www.fcc.gov/consumers/guides/closed-captioning-television" target="_blank">FCC requires shows broadcast on television be closed captioned with few exceptions</a>. Sometimes that is done live for events like the SuperBowl or during News Broadcasts. Otherwise it is done in advance for your typical sitcom. In either case, the user must enable closed captions for them to be displayed. Open Captioning means that the captions are always displayed and the user can't remove them. You see open captioning on media intended for mobile devices or on digital signage. <a href="http://www.createaccessibility.com/2017/04/day-5-apple-clips-with-live-titles.html" target="_blank">My review of Apple Clips</a> and its use of Live Titles is considered open captioning. When you share your Clip with Live Titles the user cannot turn the captioning off.<br />
<div>
<br />
<h2>
Here's how to Create Accessibility</h2>
<div>
<b>Prerequisite</b>: Closed captioned video hosted on your YouTube channel.</div>
<br />
<ol>
<li>Go to your Video Manager in <a href="http://www.youtube.com/" target="_blank">YouTube</a></li>
<li>Choose Info & Settings</li>
<li>Add yt:cc=on to the tags section of your video</li>
<li>Click Save Changes</li>
<li>Enjoy Open Captioning</li>
</ol>
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i9.ytimg.com/vi/aOYS3AY4sLs/default.jpg?sqp=CIzTpscF&rs=AOn4CLDF5J2Qzf20akvYmjqZn1fnB_pCdA" frameborder="0" height="375" src="https://www.youtube.com/embed/aOYS3AY4sLs?feature=player_embedded" width="450"></iframe></div>
<div>
<br /></div>
<br /></div>
<div>
Open Captioning is recommended when the audio quality of your video is less than desirable, if you're sharing your video on social media and will most likely be watched on a mobile device, or displayed on digital signage. As a classroom teacher there are lots of advantages to open captioning content hosted on YouTube. Open Captions will ensure that students see the captions paired with audio. <a href="https://youtu.be/aOYS3AY4sLs">Research suggests</a> that captioning helps promote comprehension and improves memory retention, this yt:cc=on tag will not only create accessibility but can also improve achievement.<br />
<br /></div>
Melissa Oliverhttp://www.blogger.com/profile/13758071099912169070noreply@blogger.com0tag:blogger.com,1999:blog-7578113017627338668.post-79663362532726849822017-04-07T07:33:00.001-07:002017-04-07T07:33:50.845-07:00Day 5: Apple Clips with Live Titles<div class="separator" style="clear: both; text-align: center;">
</div>
I had a completely different blog post written for today but saw a bunch of tweets about Apple Clips that were mentioning VoiceOver, Live Titles, and Captions that piqued my interest and had to try it out myself.<br />
<h2>
<br />What is Clips and how can it Create Accessibility?</h2>
Clips is a new app from Apple that is <a href="https://itunes.apple.com/us/app/clips/id1212699939?mt=8" target="_blank">available for download</a> on iPhone and iPads. It is a video creation tool with different filters, graphics, music, and text available. It was the captioning feature, that is referred to as Live Titles that intrigued me. Live Titles will transcribe or auto-caption what is said in real-time, not after the fact. You even have choices on the appearance of the Live Titles. Clips allows you to create a video, see the captions in real-time, and then edit those captions prior to sharing to different platforms.<br />
<br />
<h3>
How it Works with Live Titles.</h3>
<ol>
<li> <a href="https://itunes.apple.com/us/app/clips/id1212699939?mt=8" target="_blank">Download the Clips app from iTunes</a>. It's free though I did have to upgrade to 10.3 first.</li>
<li>Click on the Speech Bubble at the top and Choose how you want Live Titles to Appear.</li>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4M_0lFZjJLXx4Q43IBBIYe-4-P7mL7WGd8mGP-0vGFRLzQP9hWfzP0tUDcNpAz1aMT8U9HB21XnDFauOn9qmQOGAVJbcarGW89iG-z7DIXgSt0L09Z82XYGzoSxxRwMxbRkkCTcpztscO/s1600/Yeah+Slides.png" imageanchor="1" style="clear: left; display: inline !important; margin-bottom: 1em; margin-right: 1em; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4M_0lFZjJLXx4Q43IBBIYe-4-P7mL7WGd8mGP-0vGFRLzQP9hWfzP0tUDcNpAz1aMT8U9HB21XnDFauOn9qmQOGAVJbcarGW89iG-z7DIXgSt0L09Z82XYGzoSxxRwMxbRkkCTcpztscO/s1600/Yeah+Slides.png" /></a><br />
<li> Begin Recording by pressing the Hold to Record Button at the Bottom.</li>
<li> Release Button when recording complete.</li>
</ol>
<div>
Just 4 steps to record with Live Titles! The auto-transcriptions were pretty accurate on my first several attempts. However, I tested this at home and was in a quiet environment. I imagine that environmental factors, articulation, and audio quality will influence the accuracy of Live Titles. There's plenty of other features such as the filters, graphics, and text that can be added to your video though I did not explore those much. You can even mute the microphone icon and Live Titles, if enabled, will still appear without any audio.</div>
<div>
<br /></div>
<div>
When I made this screen cast demonstrating Clips, I had errors in the captions which led me to investigate the editing process. </div>
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/Amc8NdFG26g/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/Amc8NdFG26g?feature=player_embedded" width="320"></iframe></div>
<div>
<br /></div>
<div>
Sadly, while the recording and enabling of Live Titles in Clips was super easy and intuitive to figure out, the editing process was not! Following the recording of your video in Clips, you can play it and when you pause, an audio icon, editing icon (scissors), and a trash can appear on your screen. In my mind, I thought the scissors would be about editing but no amount of pressing the scissors and then tapping the on-screen captions proved helpful. The 5 steps below is what I eventually figured out.</div>
<div>
<br /></div>
<h3>
How to edit Live Titles.</h3>
<div>
<ol>
<li>Play your Video</li>
<li>Pause your Video</li>
<li>Click on the Captions, not the scissors. Lesson learned. They are unhelpful unless you want to clip your video.</li>
<li>ALL the Captions appear on a screen separate from your video that resembles a basic text editor. Make your edits here.</li>
<li>Click Apply</li>
</ol>
<div>
This is only 5 steps but the interface leaves a lot to be desired! Since the text exists away from your video you don't have a way to pair the audio and the text together easily while editing. It would require going back and forth and repeating these 5 steps multiple times to ensure accuracy. The interface lends itself to correcting spelling errors or adding punctuation. But, it's not user-friendly to ensure accuracy or to insert text that Live Titles failed to transcribe as I demonstrated as I attempted to edit the Live Titles.</div>
</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i9.ytimg.com/vi/qEeL78zxHLg/default.jpg?sqp=CNiSnccF&rs=AOn4CLDwiN-zij83w-m0LdS7usL-TOoyfg" frameborder="0" height="266" src="https://www.youtube.com/embed/qEeL78zxHLg?feature=player_embedded" width="320"></iframe></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
I think Clips has promise in creating more accessible media with the addition of Live Titles. I love that the captioning is live and creators can get that instant feedback during the creation process. My fear is that with the editing not being streamlined to make necessary corrections to these Live Titles, media produced using Clips with Live Titles will be inaccurate and frustrating for caption users. Or, creators will just not use Live Titles to begin with. On the bright side, it's nice to see these technologies evolve and continue to improve over time.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
If you try out Clips with Live Titles, I'd be curious to hear more about your experience. How accurate were your LiveTitles? Did you try editing? How did it go? And if students create using Clips with Live Titles, how was their experience?</div>
Melissa Oliverhttp://www.blogger.com/profile/13758071099912169070noreply@blogger.com0