Everyday Accessibility ConfabEdu 2014
•Descargar como PPTX, PDF•
3 recomendaciones•721 vistas
Higher education institutions have not only legal but also ethical obligations to make our websites accessible. As content strategists, we can ensure that any content we publish meets accessibility standards, and we must educate other content creators on our campuses. With an emphasis on practical advice and examples from higher ed institutions, this session will provide you with the tools you need to build a better web for all of your users and to empower your site editors to join you in this mission. Learning objectives: --Learn what accessibility means and how it improves the online experience for all users. --Join us as we move through the content development process from start to finish to address accessibility every step of the way. --Discover how to mobilize your site editors as partners in building an accessible website.
Recomendados
Recomendados
Más contenido relacionado
Último
Último (20)
Destacado
Destacado (20)
Everyday Accessibility ConfabEdu 2014
- 1. EVERYDAY ACCESSIBILITY Sarah Maxell Crosby @choiceofpies Matt Richardson
- 4. Accessibility is essential to the Web.
- 5. Accessibility is a human right.
- 7. Accessibility is our responsibility.
- 8. Who is accessibility for?
- 9. Screen Reader Demo source: http://vimeo.com/cameronmoll
- 10. Accessibility is for all of us.
- 12. W3C’s Web Content Accessibility Guidelines
- 13. A? AA? AAA? AA AAA
- 15. Color
- 18. NAVIGATION
- 20. IMAGES
- 21. Stupid flag
- 22. ALT TEXT CAPTION
- 23. Alt text: Students sitting at tables on Collis Porch.
- 24. Caption: The Collis Center is a hub of campus social activity.
- 25. Caption: The Collis Café is a popular campus dining option.
- 27. Video
- 28. (insert FinAid text example here)
- 29. When should we use CAPTIONS?
- 31. VIDEO CAPTIONING SERVICES ~$2.50 a minute for captioning + transcribing ~$1 a minute for captioning + transcribing ~
- 32. AUDIO
- 33. TRANSCRIPTION SERVICES $1-2.50 a minute depending on speed ~$1 a minute
- 35. Text
- 41. TABLES
- 47. LANDSCAPE SURVEY
- 49. PERSONAS
- 50. Testing
- 52. QA TOOLS Color Contrast Analyser WAVE Accessibility Evaluation Site Improve
- 54. Getting site editors on board
- 55. No color coding Acceptable color contrast levels Clear menu labels Clear and accurate page titles Descriptive links Alt text and captions (not the same!) Avoid text in images Clear, non-visual directions in how-to videos Video captioning Transcripts for audio files Writing for the web (clear, simple, concise) Clear and correctly formatted headers Properly formatted tables (for tabular data)
- 56. TOOLS AND SERVICES Color Contrast Analyzers • WebAIM (online) • Paciello Group (download) Full-Site Testing • WAVE Accessibility Evaluation • Site Improve Readability Analyzers • Writing Sample Analyzer • http://read-able.com Video Captioning • Automatic Sync • Zen Captions Audio Captioning • Casting Words • Rev Transcription Screen Readers • JAWS (free 30 min. trial) • NVDA (free)
- 57. FURTHER READING • WCAG guidelines • Access by Design • WebAIM articles • Training the CMS • Gov.UK Style Guide • PlainLanguage.gov Tips & Tools • Why Higher Ed Needs Plain Language Blogs Karl Groves Paciello Group Digital Echidna
Notas del editor
- Intro Matt & Sarah We work for Dartmouth College’s Web Services group. I am the content strategist and Matt is (title). Our group mainly supports 200 sites for academic and administrative departments and centers. We’re in the midst of migrating those 200 sites from a legacy CMS with very outdated design to new design in Drupal. A lot of the examples that you’ll see today are from our own sites. We are airing some dirty laundry today. I’ll be the first to admit that keeping our content accessible is a huge challenge. For those 200 sites, we have over 500 site editors, so there is a lot of opportunity for error. We’re cleaning our sites up one by one as we migrate. And we’re working on educating those editors. Hopefully some of the tips that we share today will help you with your own accessible content challenges.
- SARAH What is it? Why is it important? How do we make it happen? In this presentation, we’ll define accessibility. We’ll talk about how to create not only accessible content but also accessible content strategy. We’ll give you tools to help you meet your accessibility goals. We’ll discuss how to get your colleagues on board.
- MATT “The power of the web is in its universality. Access by everyone regardless of disability is an essential aspect.” – Tim Berners-Lee, W3C Director and inventor of the World Wide Web If our sites are not accessible, then our community is not complete. We are excluding some user’s insights thoughts and ideas to the detriment of us all.
- SARAH http://www.w3.org/standards/webdesign/accessibility: “UN Convention on the Rights of Persons with Disabilities recognizes access to information and communications technologies, including the Web, as a basic human right.”
- MATT Section 508 of ADA. Examples of lawsuits: Louisiana Tech – Inaccessible online course materials University of Montana – Inaccessible web content (Discussion Boards, uncaptioned video, etc.) Penn State University – Inaccessible web site and course materials
- SARAH We have an ethical obligation to support accessibility. Our mission as higher ed institutions cannot be met without accessibility. Higher ed is about the exchange of knowledge, so if we don’t make our communications accessible, we are not meeting our mission.
- MATT: Approximately one in four (25%) computer users have a visual difficulty or impairment. Nearly one in four (24%) computer users have a dexterity difficulty or impairment. One in five (20%) computer users have a hearing difficulty or impairment. Somewhat fewer computer users have a cognitive difficulty or impairment (16%), and few (3%) have a speech difficulty or impairment. 2003 Microsoft Study http://download.microsoft.com/download/0/1/f/01f506eb-2d1e-42a6-bc7b-1f33d25fd40f/ResearchReport.doc
- Here is a screen reader demo. Aaron Cannon, a web developer who has been blind since birth, shows us how he and other blind users surf the web.
- SARAH The things we do to make our sites work for people with disabilities also make them work better for everyone. We’ll circle back to this idea when we talk about what we can do to make our sites accessible.
- SARAH Accessibility often described as breaking down barriers. Web is used to share knowledge from one person to another. Accessibility asks, how can that sharing be inhibited? What can we do minimize the barriers?
- MATT Web Content Accessibility Guidelines offered by the Web Accessibility Initiative of the World Wide Web Consortium. WCAG offers guidelines. What is WCAG? Explain.
- MATT: Explain A, AA, AAA here. Most people shoot for AA (explain why).
- SARAH For our presentation today, we’re going to focus mostly on content, but it’s important to know about the accessibility issues tied up in web design. There are a lot of great resources about universal design, usability, and accessibility, but we’re going to quickly highlight two that we most rely on here: Access by Design, by Sarah Horton, and A Web for Everyone, by Sarah Horton and Whitney Quesenbery. Full disclosure: Sarah used to be the Director of Web Strategy and Design at Dartmouth. She’s a great advocate for usability and she’s had a big influence on the way our group works. The full text of Access by Design is available online, and we’ll include that link in the resources at the end of this presentation. Before we get into the content, we’re just going to make one point about design. Since our focus is on the day-to-day choices that we make as content strategists that affect the accessibility of our sites, I wanted to talk about one of the elements of design that we as content creators are most likely to influence, and that is…
- SARAH Color. We’ll talk about the use of color to convey information and also color combinations that may inhibit accessibility. MATT Don’t use color to convey information that is not otherwise conveyed in some manner (e.g., color coding is not okay unless coding also happens via text).
- MATT Here is an example from one of our own sites where the site editor used a color-coding system to convey information about major concentration categories. This information isn’t presented in any other way except by color-coding, so it’s not accessible. We’re migrating this site to our new design and new CMS now, and we’re reorganizing this information so that the theses will be clustered first by concentration and then by year, using headers.
- MATT Color contrast: for people with vision impairment that are not using screen readers, you need to have enough contrast between text and background. The exact ratio will depend on whether you’re looking at small or large text, A, AA, AAA. AA, regular: 4.5 to 1. AA, large: 3 to 1. you can test it on a site like WebAim (demo?). Vision impairment is sometimes temporary (e.g., eye infection, wearing an eyepatch, concussion) and vision declines with age. This is another area where meeting accessibility standards actually improves things for everybody. Some viewer’s vision impairment might not rise to the level of disability, but good, clear, legible text definitely improves their user experience. Color contrast analyzer
- SARAH Good IA is good IA. The better it is, the more accessible your site will be for everyone. Menus– make sure all your menus are keyboard accessible. Tell your developer it needs to be. Any part of the screen that needs to be interacted with in some way needs to be keyboard accessible. Page titles. Title tag of page, page title on page. Make sure they are the same. Make sure they clearly and specifically describe what is on the page.
- MATT Ideally when using links you want them to make sense on their own. This is both important for screen readers and SEO. All of these links go to the same place, but some make sense, and some really don’t with some grey area in between. No Click Here No Read More (with exceptions) No title text No random URL linked.
- SARAH Why do images matter for accessibility? We can’t make images visible to a blind person. Reminder: point of accessibility is to offer an equivalent experience, not an identical one. We can’t make images visible to people who can’t see, but we can make the information that the images contain available to the vision impaired through other means (e.g., alt text and captions).
- MATT What makes an image worth of alt text? Ask: is it decorative, or informative? If it’s decorative, no alt text needed. If it’s informative, include alt text. This red flag is an example of an image that does not need alt text. It doesn’t substantially contribute to the experience of the site.
- MATT Difference between alt text (what is pictured in the image) and caption (image in context). Captions can change; alt text is forever. (Example of one image used in different sites.) Alt text and caption should not be identical! (That’s annoying to users using screen readers.) Also be aware of your caption formatting: caption needs to be tied to the image, not just text that you place on the page near the image. (Matt explain).
- SARAH Let’s take this image of students sitting on the porch of the Collis Center for Student Activities. Alt text: Students sitting at tables on Collis Porch. Now let’s look at how we might caption this image in different contexts.
- SARAH The Student Activities website might emphasize the social aspect of this image. Caption: “The Collis Center is a hub of campus social activity.”
- SARAH But if we used this image on the Dining Services website, we’d change the focus to the food that the students are eating. Caption: The Collis Café is a popular campus dining option. Same image, same alt text, different context, different caption.
- MATT No text in images! If you must have text in your images, then make sure that text is accessible elsewhere on the page. Better to have text in text fields – better for search and accessibility.
- SARAH If you think of accessibility at all when it comes to video, most people think of captioning. But accessible video starts with the script. Especially for instructional videos: are you using descriptive, not directional, language? (FinAid Federal Verification video as an example.)
- SARAH Explain revision of script.
- MATT Captioning is time consuming and expensive. Ideally, every video should be captioned. Realistically, that’s not always possible. Our policy: if it’s under 15 minutes ,we always caption. If it’s over 15 minutes and has fewer than 100 views, we don’t caption unless someone specifically requests it.
- MATT YouTube does captioning, but they are notoriously bad. Rhett and Link have a whole series of videos they have made using bad YouTube captions. In this example, they recorded Taylor Swift lyrics, ran them through YouTube captions, and then recorded themselves singing the YouTube caption versions. That’s how “You belong with me” turns into “You’re a gnome with me.” You can manually update YouTube captions. You can also upload your own time-stamped transcript when you upload to YouTube.
- MATT We use Automated Sync, which costs about $180 per hour for captioning and transcription. (4100$ per year) AutoSync also offers just transcription for less, but then you would have to manually edit to add time stamps (time consuming). There are other alternatives, one is Zencaptions which charges 1$ a minute for captioning and transcribing. They have a 10minute free trial and I was pretty happy with the results, but it’s also possible they work extra hard on the free trials.
- MATT Audio, i.e. podcasting. Should publish transcript.
- MATT You can use a transcription service, the average price I found was about 1$ per minute, and more if you need the transcript faster.
- SARAH Flesch reading ease scale – syllable counts and sentence lengths to determine reading ease Fog scale – percentage of words with 3+ syllables. Flesch-Kincaid grade level scale – average student in that grade level could read the text. Laura Creekmore’s presentation from ConfabEdu last year goes into great detail – if you haven’t seen it, find it! There are online readability analyzers that you can run your content through, and we include a couple in the resources at the end of this presentation. What helps these levels? Simple words, short sentences. Which, incidentally, help everyone.
- SARAH Plain language is clear, simple, concise writing that is easy for the reader to understand. Plain language helps everyone.
- SARAH Plain language is a movement that is being adopted by many goverments. Plain language is mandatory for all of Gov.uk. “Gov.UK is for everyone. Users don’t stop understanding text because it’s written clearly. Less literate users may not understand if you use difficult language. Research shows that higher literacy users also prefer plain English because it allows them to understand your content as quickly as possible.” In the US, many government agencies are required to write in plain language. Many states have guidelines requiring certain information, such as insurance paperwork, to be written in plain language.
- SARAH We recently completed our new Financial Aid site. For this project, we knew readability would be very important. Financial Aid is complicated and confusing and stressful. We needed to do as much as possible to make the language on this site clear, simple, accessible.
- SARAH Based on what we knew about the user demographics, we set goals for Flesch-Kincaid, fog scale, and reading level scores. We tested every page on the site, so we could see what content was clear and what needed work. We were able to prioritize the rewriting based on the scores. We focused our attention on the pages that had the worst scores. Not just what words you choose, but how your use them. Is your text well structured? Well chunked out? Do you use clear, appropriate headers? Are they marked as headers or just styled? Screen readers use headers to jump ahead sections (just like our eyes do).
- SARAH Here’s an example of a site that does not do those things. This is our old Sociology department site. We’ve got a lot of text and no headers. There is an attempt to provide some guidance by the use of bold, but that doesn’t help someone using a screen reader. It doesn’t actually help those of us using our eyes very much, either.
- Here’s the new Sociology department site. Same page, essentially the same text, but it’s chunked out with headers that make it easier to skim whether you are using eyes or a screen reader.
- MATT Don’t. Many, many, many site editors use tables in an effort to format large amounts of information that is not, in fact, tabular data. Don’t use tables for design or for text formatting. Use tables for tabular data only.
- MATT This is a bad table. Explain why! How would a screen reader interpret this?
- MATT Here’s an example of a table that is correctly formatted. Clear visible difference between headers and data. Rows and columns are labeled. Table caption (Recent Major Volcanic Eruptions) also nice to have. It’s correct in the code.
- MATT You can see that the rows and columns, the headers are properly labeled as headers (th tag). Scope is correctly set. The scope is “What is being defined by what” – “What is this header defining? The rest of the things within the row or the rest of the things within the column?”
- SARAH What is content? Navigation Text Image Video Audio. But you don’t just jump in and start creating content. You start with strategy.
- SARAH When you build a site, there’s a planning process you go through. If you want to make your content accessible, it helps to have accessibility in mind every step of the way. Accessibility isn’t a filter you apply to a finished product but a lens through which you view every task along the way.
- SARAH Are your peers and competitors doing it right? Can you learn from their mistakes?
- SARAH When you do a content inventory, you may be using an acronym like KECK (Keep, Edit, Create, Kill) or ROT (elimating anything redundant, outdated, or trivial). You should also be reviewing content for accessibility. Add a column to your spreadsheet where you can note accessibility improvements to be made or challenges to be expected and handles.
- SARAH How many of you have created user personas for your site builds? How many of you have created a user persona with a disability? We use personas to externalize our sites, to give us a user’s perspective. It’s important to note that many of those users have impairments.
- SARAH Task navigation, A/B, card sort How could you include someone with a disability? If you’re doing quick tree testing, can you navigate on the page without using a mouse? There are some online services to help with card sorting. Loop11: through their partnership with Knowbility – a non-profit organization focused on increasing technology accessibility to the disabled community – Loop11 offers a way to do comprehensive online accessibility testing. AccessWorks, an extensive database of web-users with disabilities created and managed by Knowbility, reflects a spectrum of visual impairments, hearing impairments, cognitive disabilities, and motor impairments. Loop11 customers can tap into the AccessWorks database for all accessibility testing needs.
- MATT Last step – you’ve completed all the pre-production, created great content, built a great site, and before you launch, you need to do QA. When you’re doing your final sweep, include accessibility checks as part of your QA process. Can you tab through and get to every part of the page?
- MATT You can use tools like SiteImprove to conduct accessibility checks. (Matt explain SiteImprove). Discuss similar tools here.
- SARAH You’ve built a great, accessible site! But the process doesn’t end when you launch your site. You need to make sure that future content meets the same standards. Don’t just make your content accessible; Plan for accessible content. Anyone who will be creating or editing content for the site needs to understand What accessibility is, why it matters, and how to make it happen. Appeal to their empathy. Nobody wants to be the jerk that makes it harder for impaired users to use our sites. Make it part of your training. Make it part of your editing interface. A List Apart recently published a great article by Eileen Webb on Training the CMS. It points out many ways that good microcontent on your editing interface can help editors to succeed. We’ve included the link in the resources section.
- Make it easy for them. Give them a checklist of what they can do when adding content to ensure it stays accessible. Make it part of their workflow and build good habits.
- MATT You can use tools like SiteImprove to conduct accessibility checks. (Matt explain SiteImprove). Discuss similar tools here.