Accessible Web Design - Maine DOE – July ... - Maine CITE



Accessible Web Design - Maine DOE – July-August 2019Part 2 – AdvancedJohn Brandt, Training CoordinatorMaine CITE Coordinating Centerjbrandt@maine- Today’s digital environment involves the use of content and materials that take many forms. Word processed documents, presentation applications (PowerPoint), PDFs and images, are the norm. However, to comply with laws and polices we need to ensure all digital materials are fully accessible to everyone.In this presentation, the issues and methods related to the creation of accessible digital documents will be discussed. Procedures for assessing content for accessibility and team work-flows that can ensure your digital content successfully meets accessibility standards will be examined.WelcomeLearning objectives:How do people with disabilities “access” digital content.What are the laws/rules that pertain to web accessibility.How can I tell if my website is accessible to people with disabilities?What resources are available.People – RefreshBlind & low vision.Braille. Can be hard-copy or “refreshable.”Large Print. Can be hard-copy or “digital.”Screen readers are AT that:Converts text-to-braille or text-to-speech.Provides a means of Navigation.Need “description” for video materials.Deaf & Hard of Hearing.Media contacting “Spoken words” need:Captioning – video with spoken word content.Transcripts – audio only content.MobilitySwitch technology (Stephen Hawking).Cognitive.Many and varied.Approaching Accessibility - RefreshEverything is in flux. Technology is changing, techniques are changing, needs are changing.You can never know everything. Rapidly growing field.People change…not that any two people are the same, but evolution does take place.Moving target…Accessible Digital Documents - RefreshWebsite ContentDigital “Office” Documents (word processor, presentation, spreadsheet)Digital Conversion Documents (PDF)Correspondence (e-mail, e-newsletters social media)Audio-Visual Content (podcasts, videos, animations)Digital Content gathering tools – (surveys, questionnaires, forms, tests/assessments)Desk Top Publishing (newsletters, posters, fliers, infographics)Part 2: Advanced Correspondence (e-mail, e-newsletters social media)Audio-Visual Content (podcasts, videos, animations)Digital Content gathering tools – (surveys, questionnaires, forms, tests/assessments)Desk Top Publishing (newsletters, posters, fliers, infographics)HIT-P – still appliesHeadingsImagesTablesPresentationCorrespondenceE-mailE-News – news-blasts – (e.g., Constant Contact, MailChimp)Social Media – (e.g., Twitter, Facebook, YouTube, “image sites”)Issues with CorrespondenceE-mail is still a “primitive” technology. Started in the 1960, e-mail was originally an ASCII text-only communications medium. Eventually, more functionality was added, but anything other than ASCII must be converted using MIME – Multipurpose Internet Mail Extensions. The “protocols” for sending and receiving e-mail are also very primitive for any number of reasons. Many modern E-mail “clients” (local software) have the capacity to send and receive both “plain” text (ASCII) and HTML content. But not all mail clients or mail servers can handle this, so you need to make sure your rich HTML message will be “readable” when it is reduced to simple plain text. Some Assistive Technology will use the plain text version of your e-mail content (not the HTML).Not all e-news/e-blast systems can create accessible e-mail.Not all social media systems are accessible!Not all social media “access points” (i.e., portals) are accessible (web vs mobile).Some social media are inherently inaccessible. Some people will be using “dial up,” older computers/OS, and need to use the plain text version. Many, many people have the HTML mail settings turned off.People have short attention spans (<5 seconds) – they will not read long correspondence (TL;DL – Too Long; Didn’t Read)Accessible Correspondence - EmailIn its basic form, simple e-mail is very accessible. Problems occur when you start to add anything beyond basic text (ASCII)Images, tables, and other objects may not be accessibleImages and object require Alt description which may be difficult (or impossible) to add.Layout may be done with Tables which messes up reading orderAvoid backgrounds and colors that affect contrastWhen using links in the correspondence, it may be difficult or impossible to embed the link. If you can embed, remember to use meaningful linksRemember that if you send attachments, they too need to be accessibleEmojis or “ASCII-Art” may not be interpretable by AT devices. Note: Latest version of MS Outlook now has MS Accessibility Checker – use it.Accessible Correspondence – E-News or E-blastSame issue as for E-mailMany of these services will provide an “accessible theme” – if not, go “vanilla” or add a “text-only” version.Use Descriptive Subject Lines – think about this a lot!Maintain a Logical Order – check your theme for responsiveness (for mobile devices) as most e-mail is read on mobile. Make sure reading order works.Use Headers when you can, but make sure they make sense if converted to plain text.(Usability) Keep it short and sweet – people have short attention spans. Don’t send a whole newsletter.FMI –help/accessibility-in-email-marketing/resources/guides/accessibility/blog/article/email-development/email-accessibilty-in-2017/Accessible Correspondence - Social MediaImages need Alternative DescriptionsVideos need captioning and Description (see below)Podcasts need transcripts (see below)If you “share” you should try to determine that the original posting is accessible. If not, or not sure, probably should pass on these.Everything must work with keyboard/switch controls (not mouse only).(Usability) Emojis can cause problems for lots of people, not just folks using AT.(Usability) CamelCase #HashTags are recommended – but this is controversial. (Usability) Exercise good Social Media Netiquette. Accessible Video/AudioAll video needs to be closed captioned if it contains human speech. All audio only content can be transcribed. Live transcription/captioning can usually be accomplished using CART (Communication Access Realtime Translation). All video need description (Sec 508 Refresh).FMI, see Maine AEM webinar of April 2018 - and TranscriptsMethods for creating accessible transcriptsPre-production – create a script. When planning a podcast it makes sense to create, at the very least, an outline of what you plan to talk about. From here, you can add to your outside the specific text you plan to use. Here you should carefully work on your text to make the timing and pacing efficient and enjoyable to listen to and make sure you cover everything you want to say. The resulting script does not need to be read exactly as written, although you should not stray too far from the script. The final script in digital form becomes the basis of the transcript that can be used to make the podcast accessible. Simply edit the script to make it match the final audio and you have made your podcast accessible content.Post-Production – There are a number of options for doing this:Manually transcribe the content using a word processor. Caution: When performing manual transcription, it obviously helps to be able to type fast, ideally fast enough to keep up with the speakers. Approximate words per minute rates are around 150–200 for typical podcast speakers, and 40–80 for average-to-good typists. That difference creates a problem.Use of transcription software. This is specialized software that combines a media player with a text editor. You play the media and start typing what you hear (as fast as you can), pause, rewind a bit, repeat. – see Resources for a list.Text-to-speech software. This again is specialized software where the computer attempts to transcribe the spoken text. Results vary based upon the quality of the audio, the speed of the speech and the presence of any accents or speech variables. Again, many resources to choose from.Transcription service. A professional service where you send your audio content to a transcription business and pay to have the content transcribed. See resources.Delivering accessible podcastsPosting audio content and controlsAccessible Controls. While modern content management systems running the latest HTML and advanced browser technology make posting an audio file to a website is generally very easy (It usually simply involves adding a short line of code), accessibility guidelines call for ensuring the audio “player” has accessible controls. This means that people who are using assistive technology (AT) like screen readers and switches can start and stop the recording as necessary. The native HTML 5 audio player is accessible. If you are using a podcasting service or alternative method of serving up your audio content, you will need to test to ensure the delivery system is accessible to AT.Posting transcript. The posting of the transcript is very easy and can be either an attached and downloadable accessible file (e.g., word processor file) or HTML content at the same location as the audio file. Examples of Accessible PodcastsThis American Life - and Freakonomics - Accessible Videos and AnimationsVideo – content created with a “recording” device such as a camera (video or film).Animation – created by an artist/cartoonist. Primarily “drawn” or fabricated and recorded. Designed to convey movement. Videos and CaptioningTypes of CaptionsOpen Captioning. Open captions, also known as burned-in, baked on or hard-coded captions, are seen by everyone who watches the video (or film). Open captions are a permanent feature on the video and can’t be turned on and off. Open captions are often used for videos which are being played on website video players that don’t have closed captioning functionality.Closed Captioning. The term "closed" (versus "open") indicates that the captions are not visible until activated by the viewer, usually via the remote control or menu option. The caption content resides in a separate file and is added or layered on top of, or next to, the video content during playback. The differences. While both versions are acceptable for accessibility purposes, the Closed Captioning method provides the user with greater usability as they are often able to control the font type, size and color of the caption. In some video playback systems, the user may also be able to control the location of the closed captions.Synching with actions in the video. Unlike the podcast, the creation of captioning is not limited to simply creating a transcript of all the spoken text. For video content, the transcript must be broken down into sections and synched with the action in the video. This is done with the use of timestamps.Methods for creating/editing CaptionsManually transcribe. Methods for creating closed captioning are similar to transcribing audio-only/podcast content. Because of the need to time stamp and synch caption content, the process is usually done in post-production (see CART below). Captioning transcription can be done manually with a simple word processor or by using specialized software. Similar to podcasts, there are also many options and resources for the DIY (do-it-yourselfer), but given the need to make timestamps, the software and the techniques are more complicated. One of the advantages of using specialized software is the ability to get the caption synched correctly. Sometimes this becomes an art form!Automated systems. There are many automated captioning systems (a Google search will reveal many) that will use text-to-speech technology to convert the spoken content into written text, however, results will vary. The best example of this is the automatic transcription feature built into You Tube. With the click of a switch, YouTube’s servers will create a synched text transcript of the audio portion of any video that is uploaded to their system. Depending of the quality of the audio, the results may be very good or very poor. Fortunately, the person who owns the YT channel can download the automated caption file and edit it off line, or used the built-in caption editing tools and perfect the transcript file on the YT site. YT will also allow content developers the option of uploading a prepared caption file or simply a transcript. The YT system will then synch the new caption file with the video automatically.Outsourced bination of manual and automated. Similar to the method described above which uses the YouTube automatic captioning system followed by manual editing, many commercial captioning firms will use their own combination of automatic and manual transcriptionManual only systems. Some captioning vendors will only use specially trained professional transcriptionists to create the caption content and time stamps. CART. Communication Access Realtime Translation or CART is live captioning of audio-only, or video content. CART is primarily used during live events (such as this webinar), but the recorded text can also be edited and used in post-production for video that will be archived and made available for later viewing. Delivering accessible video contentVideo player and controls. This is a controversial area. As with audio-only/podcast content, the player used to view the video content, along with the synched caption content must be accessible to people using assistive technology (AT). Unlike in the audio-only realm, there are many video players used, many of which are not accessible. Unfortunately, there is no native support for closed captioning built into HTML5 standards. I have provided a link to some articles on the topic with some video players that have been reported to be “fully accessible.” However, there are other articles on the web that suggest that all is not perfect. See Captioned content and controls. If closed captioning is used, the video player must also allow for captions to be turned on and off. Ideally, the video player provides the use the ability to resize and change the color, background or type of font, however, this is not a current requirement in the accessibility guidelines.Examples of Accessible Video - Captioning ResourcesCaptioning Video on Maine CITE - captioning-video/DescriptionVideo description (sometimes also called “audio description”) is audio-narrated descriptions of a television program's key visual elements. These descriptions are inserted into natural pauses in the program's dialogue. Video description makes media more accessible.Is required for television/cable, but slow to be developed. Larger markets.Challenging to accomplish – may be highly subjective.Became part of the requirements in the USA with “refresh” of Section 508 in 2017.Might be accomplished with separate textual description.“Moving target”…Videos and DescriptionWhat is it and can I do this myself? As noted, to meet current accessibility guidelines, all pre-recorded video content must provide something called “audio description in addition to captioning of the audio portion of the video recording. Audio description is sometimes referred to as “video description” or “descriptive narration,” so we will refer to it as “description” to avoid any confusion. Although description has been around for many years, the requirements in web accessibility guidelines were elevated in WCAG v 2.0 and are now required even to meet Level A of the guidelines. Description is defined as: “narration added to the soundtrack to describe important visual details that cannot be understood from the main soundtrack alone. In standard audio description, narration is added during existing pauses in dialogue.” It is noted that, “where all of the video information is already provided in existing audio, no additional audio description is necessary.”Description is difficult to do without training. Unfortunately, there are few professional description services (AST – Caption Synch; 3-Play Media) at this time and there are no automatic systems (that I am aware of). There are several training programs around the country.Challenges many. Currently, there are few free services in this area. I could find no free editing tools. Standards are still in draft form despite the fact that Section 508 has now adopted WCAG v2.0. Description is difficult to accomplish, and training is strongly encouraged. This is one aspect of accessibility that you may wish to outsource to professional services. Two major vendors – 3Play Media and AST/CaptionSynch. Prices range from $12 to $20 per minute to provide both captioning and description. It is often necessary to pause sections of the video to “fit in” description. If there is no time for recorded audio description, then the videos will need to be re-edited to make time, or an additional version of the video with time for recorded AD will need to be edited.Integration of the final video production with both captioning and description presents additional technological hurdles. 3PlayMedia does have a proprietary player that will serve up the three stands of content (video, captioning and description), but without this, video content owner may need to create two versions of their production, one with description and captioning and one with captioning only. Examples of Audio Description and see also AnimationUse the same rules for Video/Audio Description (if needed).Some animations are “demonstrations” – make be able to integrate the verbal description into the animation.If the animation does not have spoken language, it may still need Description. Alternately, the use of equivalent text may meet the accessibility guidelines.Accessible Digital Content Gathering ToolsSurveys, tests, questionnaire, formsThis kind of content creates unique challenges to content creators who need to ensure accessibility. Most Digital Content Gathering Tools ultimately come down to something developers call a Form. In its simplest manifestation a Form is a labeled “input box” or “checkoff” system. The respondent is asked to enter information into the input box or selectedm by checking off a response, their “choice.” In nearly all cases, the information that is gathered, is used to make some decision or sometimes, it is just collected as data to be used for some research. And in nearly all cases, this is best accomplished through the use of some digital content gathering tool as opposed to making the response on some paper form. Common Issues with Digital FormsClear directions are not provided.The order of content is not “logical” or is confusing.Input boxes or checkoffs are not labeled or linked to the “ID”“Submit” button is called something else or poorly located.Items that are marked as “required” cannot be seen as such by AT devices.Use of some scripting that does not work with AT – must work for keyboard-only users.All of the other issues (check: color contrast, use of Tables, text-boxes, reading-order, etc.)Accessible Digital FormsBest solution – pick/purchase a form generating service (e.g., SurveyGizmo, SurveyMonkey) that will make accessible form and learn how to use it correctly.Choose a form template that has accessibility in mind (not all of them will be)Check your created form with automated tools and real users (before you buy).Once you have successfully created an accessible form, it can be “cloned” and re-used unlimited times.Caveats on Accessible Digital FormsGoogle forms may be accessible – inconsistent.Google forms may only work with Google Chrome and within a Google environment.Avoid PDF or “Office” form generators as they are really designed for paper.Issues with Desk Top Publishing (DTP)(Newsletters, posters, fliers, infographics)Paper is not accessibleSoftware designed to create paper output will probably not produce accessible digital content or require an excessive amount of extra time to make it so. DTP software that produces “untagged” or “untaggable” content will never be accessible.MS-Word, HTML, EPUB or DAISY will be the best format (see below).Accessible DTPAll of the Accessibility guidelines thus described apply to DTP documents.If there are no automatic tools for testing, you will need to have real people, using real AT test the content. It is generally a good idea to stay away from using this software if you need accessible content.File formats – which ones are accessible?Adapted from Accessible Publishing Best Practice Guidelines for Publishers – Accessible Books Consortium: are many different file formats being used in the publishing industry and these vary in the degree to which they can be seen as being “accessible”. No file format is automatically accessible – it is entirely possible to produce inaccessible publications in any format. For most purposes, the file formats that you are likely to use are:Microsoft Word – for many print-impaired readers (particularly in the education sector) this file format offers the easiest route to accessible information as the text content of the file is easily mutable and it can contain all three elements of structure, content and appearance. Unfortunately, these files can be problematic to supply as your content will have gone through many cycles of revision since its initial creation in Word, and the original Word file often bears no relation to the finished version of the text. Creating a useful file in Word may mean creating a new Word file at the end of your production process. The ubiquitous nature of Word means it is often seen as the ‘best’ option, but requests for Word files sometimes indicates a lack of awareness of what other accessible formats are available.DAISY – Digital Accessible Information Systems. This has become the foremost specialist standard format for use in the creation of accessible versions for the print impaired, but is not widely used (or even known) by publishers. It can, however, be the most accessible file format available. It is essentially an XML based e-book format created by the DAISY Consortium, an organisation which represents libraries for people with print disabilities. A DAISY book can be explained as a package of digital files that may include: one or more digital audio files containing a human or pre-recorded synthesised narration of part or all of the source text; a marked-up file containing some or all of the text; a synchronisation file to relate markings in the text file with time points in the audio file; and a navigation control file which enables the user to move smoothly between files while synchronisation between text and audio is maintained. Specialist DAISY players can play the audio, read the text using Text to Speech and navigate through the book in a flexible way. The DAISY Standard allows the producer full flexibility regarding the mix of text and audio ranging from audio-only, to full text and audio, to text-only. The DAISY Consortium offers an open suite of software tools – “The DAISY Pipeline” – designed to assist in the creation of DAISY files which also has increasing support for conversion to EPUB 3. Recent additions to the Pipeline include a “Save as DAISY” add in for MS Word – see Further Resources for links to this tool. The Pipeline also has increasing support for conversion to EPUB 3.EPUB – This is rapidly becoming the universal “e-book” format for commercial publishers, and as version 3 becomes more widely available is likely to be increasingly seen as the format that is most suitable for both commercial exploitation and meeting accessibility needs. EPUB is an open standard for e-book creation and distribution and is the most common file format for commercially-available e-books. It can be “read” on almost all e-reader devices (with the exception of Amazon’s Kindle – and even there, most Amazon Kindle books start life as EPUBs and are converted to the Kindle format prior to distribution). The latest version, EPUB 3, combines the ease of creation and expressive capability of HTML, with a host of accessibility options, and it has been adopted by the DAISY Consortium as its next generation digital standard delivery format, to replace the specialist DAISY format. For publishers, this means that the same file format used to deliver mainstream commercial e-books can also deliver optimum accessibility to print-impaired readers. It is constructed using ordinary HTML5 and CSS (cascading style sheets), so publishers are familiar with the basic technology, and a rich set of authoring and production tools is available. On top of this, EPUB 3 defines a range of features that improve navigation and accessibility, such as detailed structural markup and the ability to include pre-recorded speech synchronised with the text (called ‘media overlays). EPUB 3 also allows accessible video, mathematical and technical content (via MathML), and interactivity. Using EPUB 3, publishers can make their mainstream commercial products highly accessible. For more detailed guidance and information see O’Reilly’s free e book Accessible EPUB 3. The IDPF also publish guidance at e-books – These files can be among the most accessible on the market. By using the predominant Web technology, you ensure that your customers with disabilities will be well-practiced in using the file type with their assistive technology. Customisation within Web browsers is simple and well-known. As these books are played in Web browsers, your work to make the files highly flexible will benefit a wide audience, including users without disabilities. Also, customisations that users have already set up to access the Web will likely carry over this type of eBook directly. Some versions of HTML e-books can incorporate MathML, providing access to maths and sciences to people with disabilities.XML files – More specifically all types of XML files that logically tag book files (using a proprietary or a standard DTD (document type definition) or schema, such as DocBook) have the potential to be extremely accessible. They contain structure and content but not appearance. However, end users (and those who support them) are unlikely to have the specialised XML skills needed to make use of them, so these files are likely only to be suitable when dealing with people with an unusually advanced technical capability, with technically skilled commercial organisations, or intermediary organisations that support people with print disabilities. Normally, these XML files are transformed into a distribution format, such as EPUB 3 or DAISY, before being made available outside the organisation which creates them.LaTex files – can sometimes be a suitable choice, particularly for mathematical and technical material. Publishers who receive manuscripts in TeX or LaTeX, or who use these formats in their typesetting process, may be able to supply the files in this format for accessibility purposes. However, they are suitable only for those print impaired readers who have the necessary technical skills (or have access to them).InfographicsInfographics (a clipped compound of "information" and "graphics") are graphic visual representations of information, data or knowledge intended to present information quickly and clearly. They can improve cognition by utilizing graphics to enhance the human visual system's ability to see patterns and trends. Similar pursuits are information visualization, data visualization, statistical graphics, information design, or information (Source Wikipedia: )Infographics present many access challenges.If the infographic is presented digitally, using a “text version”, the following are recommended:Plan Heading Structure EarlyEnsure all content and design fits into a logical heading structure.Consider Reading OrderThe reading order should be the same as the visual order.Provide Good ContrastBe especially careful with light shades of gray, orange, and yellow. Check your contrast levels with our color contrast checker.Use True Text Whenever PossibleTrue text enlarges better, loads faster, and is easier to translate. Use CSS to add visual style.Watch the Use of CAPSAll caps can be difficult to read and can be read incorrectly by screen readers.Use Adequate Font SizeFont size can vary based on the font chosen, but 10 point is usually a minimum.Remember Line LengthDon't make it too long or too short.Make Sure Links are RecognizableDifferentiate links in the body of the page with underlines or something other than color alone.Design Link Focus IndicatorsEnsure keyboard users can visually identify a focused link. Use the standard dotted line or other non-color designators.Design a "Skip to Main Content" LinkA link for keyboard users to skip navigation should be at the top of the page. It can be hidden but should be visible when it receives keyboard focus.Ensure Link Text Makes Sense on Its OwnAvoid "Click Here" in link text. Other ambiguous links, such as "More" or "Continue", can also be confusing.Use Animation, Video, and Audio CarefullyIf used, provide a play/pause button. Avoid flashing or strobing content: It can cause seizures.Don't Rely on Color AloneBecause users often can't distinguish or may override page colors, color cannot be the only way information is conveyed.Design Accessible Form ControlsEnsure form controls have descriptive labels and instructions. Pay close attention to form validation errors and recovery mechanisms. Source: Accessible Infographics from WebAIM See also: ThoughtsWhen converting from one document to another – “detritus” – junk in the form of bad code, formatting differences and gobbledygook will get into the final version. Make sure you “clean up” before sharing with the publicRemember this is a moving target – don’t lose hopeNew technologies will make some of these things easier in the future but will also bring new and interesting challenges – job security.Practice! Final, Final ThoughtsGet a guru on your team!Develop a workflow to ensure public-facing documents are vetted.Practice, practice, practice.Have fun, call if you need help!Where do I get help?The following sites have lots of links to global references on these topics. The Maine CITE resources are updated regularly.Accessibility in Information Technology (State of Maine) - Maine CITE – Accessible Web Design - accessible-web-design/ Maine CITE – Accessible Digital Documents - accessible-digital-documents/ ResourcesWebAIM - W3C – WAI - WAI/ Section 508 - Supplemental InformationResourcesYour one stop shop from Maine CITE accessible-digital-documents/WCAG- Accessible PDF TR/2014/NOTE-WCAG20-TECHS-20140408/pdf.htmlGOALS Project – Cheatsheets – great resource to use the employees or students - resources/cheatsheets/Accessibility of Office Documents and Office Applications - adod.idrc.ocad.ca/Microsoft – Creating Accessible Word documents - support.en-us/article/Creating-accessible-Word-documents-d9bf3683-87ac-47ea-b91a-78dcacb3c66d Check for accessibility with MS-AC - support.en-us/article/Check-for-accessibility-issues-a16f6de0-2f39-4a2b-8bd8-5ad801426c7fAccessible Excel Spreadsheets - support.en-ie/article/make-your-excel-documents-accessible-to-people-with-disabilities-6cc05fc5-1314-48b5-8eb3-683e49b3e593Colour Contrast Analyser (CCA) - resources/contrastanalyser/ WebAIM ResourcesMS Word - techniques/word/Accessible PDFs – techniques/acrobat/Google Accessibility – Products - accessibility/all-products-features.html Accessibility for Libre OfficeAccessODF – checker for Writer - accessodf.General discussion about accessibility - get-help/accessibility/ Adobe – Training resources for accessibility - accessibility/products/acrobat/training.htmlAdobe InDesign Accessibility - accessibility/products/indesign.html ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download