Introduction - University of Guelph - Home Page



How to Make AODA Compliant Web Pages – General PracticesDisclaimer: The procedures regarding different tools and features described within this document are applicable to Windows computers ONLY. Procedures may be different if your computer is running a different operating system (e.g. Mac OS, Linux).Written By: Chance CantwellFor: University of Guelph – Child Care and Learning CentreDate Last Modified: July 18, 2016Table of Contents TOC \o "1-3" \h \z \u Introduction PAGEREF _Toc453152473 \h 4Accessibility Verification Tools and How to Obtain Them PAGEREF _Toc453152474 \h 4Using Accessibility Verification Tools PAGEREF _Toc453152475 \h 5Using WAVE Toolbar PAGEREF _Toc453152476 \h 5Using Web Developer Toolbar PAGEREF _Toc453152477 \h 9Using Contrast Checkers PAGEREF _Toc453152478 \h 9Verification of Elements on Web Pages PAGEREF _Toc453152479 \h 10Title PAGEREF _Toc453152480 \h 10Resizing of Text PAGEREF _Toc453152481 \h 11Navigation without a Mouse PAGEREF _Toc453152482 \h 11Images PAGEREF _Toc453152483 \h 12Document Structure PAGEREF _Toc453152484 \h 14Video PAGEREF _Toc453152485 \h 15Links PAGEREF _Toc453152486 \h 15Forms PAGEREF _Toc453152487 \h 16Code (e.g. HTML code) PAGEREF _Toc453152488 \h 17SiteImprove PAGEREF _Toc453152489 \h 18Training and Support Resources PAGEREF _Toc453152490 \h 19Common Accessibility Issues and Resolution PAGEREF _Toc453152491 \h 20Headings PAGEREF _Toc453152492 \h 20Images PAGEREF _Toc453152493 \h 20Links PAGEREF _Toc453152494 \h 20Lists PAGEREF _Toc453152495 \h 20Spelling PAGEREF _Toc453152496 \h 21Tables PAGEREF _Toc453152497 \h 21Titles PAGEREF _Toc453152498 \h 21Resources Used PAGEREF _Toc453152499 \h 22Appendix: Content Management System Specific Documentation PAGEREF _Toc453152500 \h 23Content Creation Workshop (May 10, 2016) PAGEREF _Toc453152501 \h 23Accessibility, The AODA, and WCAG 2.0 PAGEREF _Toc453152502 \h 23Site Architecture: Structure – Menus – Main Menu – list links PAGEREF _Toc453152503 \h 23The WYSIWYG Editor PAGEREF _Toc453152504 \h 24To Create an Event PAGEREF _Toc453152505 \h 25To Create News PAGEREF _Toc453152506 \h 25To Create a Banner Image PAGEREF _Toc453152507 \h 26Content Management Workshop (May 12, 2016) PAGEREF _Toc453152508 \h 27Creating a Taxonomy PAGEREF _Toc453152509 \h 27Customize a Page – Step by Step PAGEREF _Toc453152510 \h 27Best Practices PAGEREF _Toc453152511 \h 29IntroductionCreating web pages that are compliant with the guidelines set in the Accessibility for Ontarians with Disabilities Act (AODA) is a fairly easy process to do from scratch. If you create your web pages while adhering to necessary standards, most of the work required to make the web page accessible is completed for you. However, trying to edit previously-created web pages to make them accessible may require a bit more effort, especially if you do not know what accessibility issues are present. This document will explain some general practices that can be used to check your web pages in order to determine any accessibility issues, regardless of whether you use a Content Management System (CMS) such as Drupal, web page creation software like Adobe Dreamweaver, or write the code for your web pages manually using a text editor like Notepad++. This document will also describe some of the most common accessibility issues that were found on the website for the Child Care and Learning Centre at the University of Guelph, as well as how to resolve and ensure that these issues are not present for future users of the website.Accessibility Verification Tools and How to Obtain ThemMozilla Firefox has three examples of accessibility verification tools. The following table briefly describes what they are and where you can download them from. Downloading and installing is done by clicking on the button that says `Add to Firefox` on the Mozilla Addons page (URL in ‘Where To Download’ column).Table SEQ Table \* ARABIC 1: Accessibility Verification Tools for Mozilla FirefoxName What It IsWhere To DownloadAccessibility Evaluation ToolbarThe Accessibility Evaluation Toolbar provides a variety of features for web designers/developers to check created web pages for accessibility issues, including report creation. Developer ToolbarThe Web Developer extension adds various web developer tools to the browser, such as code validation tools Contrast CheckerChecks for compliance with the contrast levels, brightness and shine in the color combination of foreground and background of textual content based on the requirements of WCAG 1 and WCAG 2. web developers in testing web resources for accessibility features.Google Chrome also has three examples of accessibility verification tools. All of these are very similar to tools that can be found in Mozilla Firefox, with more information provided in the following table. Downloading and installing is done by clicking on the button that says ‘Add to Chrome’ located on the web page for that specific add-on (URL in ‘Where to Download’ column).Table 2: Accessibility Verification Tools for Google ChromeName What It IsWhere To DownloadColor Contrast AnalyzerChrome extension that allows you to analyze a web page or portion of a web page for conformance with WCAG 2.0 Color Contrast requirements. Developer ToolbarThe Web Developer extension adds various web developer tools to the browser, such as code validation tools Evaluation ToolWAVE is a web accessibility evaluation tool developed by . It provides visual feedback about the accessibility of your web content by injecting icons and indicators into your page. you are using a different browser, you might be able to find similar tools for it. If you are in this predicament, do a search of the Internet using your favourite search engine (e.g. Google, Yahoo, ) for `web developer tool <browser-name-here>’, `contrast checker <browser-name-here>’, and/or `accessibility tool <browser-name-here>’, where <browser-name-here>is replaced with the name of whatever browser you are using, and see if anything comes up. Using Accessibility Verification ToolsUsing WAVE Evaluation ToolNOTE: This guide may not cover all of the features of the WAVE Evaluation Tool.After installing the WAVE Evaluation Tool and restarting the Google Chrome browser window, there should be a grey circle with a letter W inside of it. It would be near the top of the browser window and to the right of the spot where you would type in a web address to navigate to, and appear similar to what is shown in Figure 1.Figure 1: Top of Chrome browser window showing button for WAVE Evaluation ToolThe WAVE Evaluation Tool has numerous features, including the ability to display a web page as text only, disable the styling of the page, viewing the structure and outline of the page, and displaying any accessibility errors. An example of what a user would see when they click on the button for the WAVE Evaluation Tool is shown in Figure 2.Figure 2: WAVE Evaluation Tool featuresIn order to check a web page for accessibility issues, all that is required is to click on the button for the WAVE Evaluation Tool. After doing so, it is possible to view the web page without styling by clicking on “No Styles,” see a summary of issues, as well as more details by clicking on the icon that looks like a flag on the left hand side of the WAVE Evaluation Tool. For example, if you clicked on the button for the WAVE Evaluation Tool while viewing the Parent Information web page of the website for the Child Care and Learning Centre at the University of Guelph, the output would look something similar to what is shown in Figure 3.Figure 3: University of Guelph Child Care and Learning Centre – Parent Information Accessibility ErrorsBy clicking on any red squares boxes that appear, you can determine what errors are associated with any of the items on the web page. Any boxes that are yellow or green are alerts informing you that something is present, such as a form label or a data table. However, a yellow square box may be informing you of a possible problem.You can also display a web page without styling, as well as display the outline of the page. In order to exit the WAVE Evaluation Tool and reset the web page back to its previous state, it is as simple as clicking on the button for the WAVE Evaluation Tool a second time. NOTE: There was a similar tool available for Mozilla Firefox users called WAVE Toolbar, but it was no longer available for download as of (July 13, 2016).Using Accessibility Evaluation ToolbarAfter installing the Accessibility Evaluation Toolbar and restarting the Firefox browser window, there should be a toolbar that looks something like Figure 4 near the top of the browser window, below the spot where you would type in a web address to navigate to.Figure 4: Accessibility Evaluation Toolbar in Firefox (under web address box)The Accessibility Evaluation Toolbar has numerous features, including the ability to disable the styling of the page, retrieve lists of text equivalents for objects (e.g. images) on the page, validate source code and create an accessibility report. Unlike some other tools, the Accessibility Evaluation Toolbar gives users the ability to generate an accessibility report quickly and with little effort. By clicking on “Reports” on the toolbar, and then clicking on “Accessibility Issues,” a list of the accessibility issues on the web page can be obtained. An example of a list obtained for the Parent Information web page of the website for the Child Care and Learning Centre at the University of Guelph is shown below in Figure 5.Figure 5: Example List of Accessibility Issues. By clicking on "Data Dump", an accessibility report can be generated and saved if desired.The listing of options visible when “Navigation” is clicked on the Accessibility Evaluation Toolbar can be of assistance with gaining an understanding on how a web page is structured. These options permit the generation of lists of the various types of objects present on a web page, including headings, links, tables and images. All of the listings are shown below in Figure 6. Figure 6: Options listed under Navigation on Accessibility Evaluation Toolbar If it is desired to save a list for later use, it is possible to do so by clicking on “View Summary”, which creates a formatted list and opens it in a new browser window for viewing and saving. This can be seen in Figures 7 and 8. Figure 7: Example of Navigation List (Headings). By clicking on "View Sumamry," a formatted list can be generated and opened in a new browser window for viewing and saving if desired.Figure 8: Example of formatted list generated by clicking on "View Summary" (Headings)This tool has been tested using Firefox 38.0.3 ESR, but one disadvantage to using this tool is the fact that it may not work on newer versions of Firefox, due to reports of toolbars being deprecated in the browser. Proceed with caution if you are planning on using this tool with newer versions of Firefox.Using Web Developer ToolbarNOTE: the Web Developer Tool in Chrome is likely to be very similar to the version in Firefox; therefore the Firefox usage guide provided here should work for the Chrome version. This guide does not cover all of the features of the Web Developer Toolbar.After installing the Web Developer Toolbar and restarting the Firefox browser, there should be a toolbar that looks something like Figure 9 near the top of the browser window, below the spot where you would type in a web address to navigate to.Figure 9: Web Developer Toolbar in FirefoxSome of the features of this add-on include the ability to disable Javascript on the viewed web page, disables styling and images, view the outline of the viewed web page, and validate HTML code. There is also the ability to manipulate and display relevant information regarding forms on viewed web pages, with more information provided under the subheading ‘Forms’, which is under the ‘Verification of Elements on Web Pages’ heading in this document.Using Contrast CheckersThe contrast of a web page refers to the “relative difference between light and dark areas of a [web page]” (Contrast Definition from ). To check for the contrast on a web page in Firefox, you would hold down the ALT key on your keyboard while pressing the C key, assuming the WCAG Contrast Checker add-on is installed (download and installation instructions are located under the ‘Accessibility Verification Tools and How to Obtain Them’ heading). For example, if you were to do this while on the home page for Google, you would be viewing a Firefox window that looks something like Figure 10. Figure 10: WCAG Contrast Checker Output for GoogleBy clicking on the items marked with a red X like shown above, the software highlights those elements on the web page that either have too little or too much contrast. Also, by clicking on the Color Selector tab on the WCAG Contrast Checker add-on on the left side of the screen, you can select a color for the foreground (text in example) to determine which color will make the red X’s associated with that element in the bottom box of the WCAG Contrast Checker (above the ‘Download capture’ button) turn into green checkmarks. The guidelines for contrast on web pages are detailed below, and were taken from the WebAim Contrast Checker web page:WCAG 2.0 level AA requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text. Level AAA requires a contrast ratio of 7:1 for normal text and 4.5:1 for large text.Verification of Elements on Web PagesTitleIt is a best general practice for a web page to have a title that describes the content of the web page, as well its purpose, or reason why the web page exists. To determine the title of a web page, you can simply hover your mouse pointer over its tab in the internet browser; in Firefox, the tabs are located across the top of the screen, above the spot where you would type in a web address to navigate to. For example, the title of the Parent Information web page of the website for the Child Care and Learning Centre at the University of Guelph is ‘Parent Information|Child Care & Learning Centre’ and is shown in Figure 6.Figure 11: Title of Parent Information web page of the website for the Child Care and Learning Centre at the University of GuelphExamples of web page titles like ‘Untitled Document’ and “Fred’s Website’ are not recommended because they very unlikely describe the content of the web page. However, examples of web page titles like ‘Dale Earnhardt-Wikipedia, the free encyclopedia’ and ‘Canada Computers and Electronics || STARTECH HDMI/HDMI MICRO TO VGA F/F ADAP CONVERTER HDMI TABLET TO MONITOR’ are recommended because they actually describe what the web page displays, and most importantly, makes the web page easier to find by search engines such as Google, Yahoo, and . Resizing of TextIn Firexox, resizing text on a web page is simple; press the ‘ALT’ key on your keyboard, click on ‘View’ on the toolbar that appears at the very top of the browser window, then point to ‘Zoom’ with the mouse on the menu that appears before finally clicking on ‘Zoom Text Only.’ This feature is shown below in Figure 12.Figure 12: Zoom Text Only Feature in FirefoxOnce this is done, you can increase or decrease the size of the text on a web page simply by holding down the ‘CTRL’ key on your keyboard and pressing the ‘+’ key or the ‘-‘ key, depending on whether or not you want to increase or decrease text size. Knowing this, increasing the size of the text to twice its original size will take approximately 5-6 presses of the ‘+’ key. If the web page can still function normally with the text resized, then there is no associated accessibility concern. In order to resize the text back normal, one quick way is to hold down the ‘CTRL’ key on your keyboard while pressing the ‘0’ (zero) key.Navigation without a MouseIn order to test the navigation without a mouse, simply use the ‘TAB’ key on your keyboard and go through the web page. When you are tabbing through a web page, you should notice an outline or some other visual distinction around the element that the keyboard is currently focused on (if not there is an accessibility concern). If you would rather be able to see the tab order without having to repeatedly press the ‘TAB’ key, you can use the “Display Tab Index” option, located on the list of options visible after clicking on the ‘Information’ button on the Web Developer Toolbar. This is shown for the Firefox version below in Figure 13.Figure 13: Information options on Web Developer Toolbar in FirefoxSome important things to note: If the tabbing order is not logical, or you are not able to tab between options without difficulty, there is an accessibility concern. Some people are forced to navigate a web page using a keyboard due to injuries and/or disabilities. These people should be able access all aspects of a web page while using the keyboard, including the features of any video players and other interactive elements.ImagesThere are three types of images that can be displayed on a web page. This section describes these types of images and any associated accessibility concerns associated with them.Decorative imagesDecorative images typically don’t add any relevant information to the content of a page; they are either there to make the page more pleasing to look at or are already described using text on the web page. If a null alternative text value (‘alt’ tag) is not provided in the format of alt=””, the result would be extra information that a screen reader would read aloud to the user. This could distract someone who is trying to use the web page, especially if the image is not related to the content of the web page.Simple Images:Also called informative images, simple images usually display a simple concept that can be described using a short sentence or phrase. The alternative text for these types of images can be a description of what the image contains, however a caption should also be provided near the image describing the image’s purpose. An example is shown below in Figure 14.Figure 14: Example of a simple imageComplex Images:Complex images typically display a lot of information, such as a graph or a map. For these images it is important to have alternative text (‘alt tag’) for the image saying what the image represents, a short bit of text describing the image placed near the image, and a long description placed somewhere on the website that fully describes the content of the image. An example is shown in Figure 15:Figure 15: Complex Image ExampleImportant Note: It is generally not recommended to use images in any location on web pages where the same meaning can be conveyed using only text. Also, it is generally not recommended to use images of text; in this situation, text should be used unless it is absolutely necessary to use an image of text.Document StructureTo determine whether or not a document has proper headings, you can click on the “View Document Outline” option, located on the list of options visible after clicking on the ‘Information’ button on the Web Developer Toolbar. For example, if you were to click on the Outline button while viewing the Parent Information web page of the website for the Child Care and Learning Centre at the University of Guelph, you would be viewing something that looks like Figure 16. Figure 16: Outline of Parent Information web page of the website for the Child Care and Learning Centre at the University of GuelphThere are also various options that can be selected by clicking on the “Outline” button on the Web Developer Toolbar, however, these do not work the same way. These options allow you to outline the different elements of the web pages using different colored lines, which may be helpful for visual thinkers. The Outline options provided by the Web Developer Toolbar are shown in Figure 17.Figure 17: Outline options provided by Web Developer Toolbar in FirefoxThe structure of a web page is especially important. Without structure, navigating the web page is going to be a nightmare, and thus not very accessible for people who navigate web pages using a keyboard, and/or use assisted devices such as screen readers for web page navigation.VideoVideo accessibility involves being able to navigate a video player, and being able to access the content. In regards to navigation, users should be able to use the basic functions of the video player, including the abilities to play and pause the video, as well as rewind, fast forward, mute audio and make the video full screen, regardless of whether or not their navigation tool is a mouse. To determine this, you can simply try to navigate the video player with the keyboard, similar to the way for navigating web pages described in the ‘Navigation without a Mouse’ section. If a video is being embedded into a website, it is recommended that this is done using an inline frame or iFrame; these are accessible for screen readers, however, a title for the frame is recommended to make its focus more clear. An example of a video player is shown below in Figure 18.Figure 18: Video Player ExampleIn regards to content access, some sort of text equivalent of a video’s spoken words should be provided through captions, transcripts or an audio description. Having captions on the video, or a text transcript of the audio that may contain additional descriptions or comments, allows people to read the audio content of the video and understand what is going on. This is especially beneficial for people who are hearing impaired, however, visually impaired individuals can also access transcripts using a screen reader or a refreshable Braille device. Described video, although not essential, is used to describe non-verbal actions being displayed in a video, and is really helpful if the content of a video cannot be described using solely the video’s audio track, especially for visually impaired individuals. LinksLinks are something that all users should be able to navigate, whether they are navigating a web page using a keyboard, a mouse, or any other assistive technologies. In order to test this, try to navigate a web page using both a mouse to click on links, and using a keyboard to navigate to links by pressing the ‘TAB’ key and activate links by pressing the ‘ENTER’ key. If links cannot be used using both a mouse and a keyboard, this is an accessibility concern.Also, the destination that a link connects to should be clearly obvious and intuitive, both within the context of the web page and by itself. For example, a link like the underlined text in Figure 19 makes sense both in the context of the surrounding text and if it was pulled out and put on its own page.Figure 19: Example of a properly formatted linkIf an image is being used as a link, its alternative text (alt tag) takes the place of the descriptive text for text links.Note: It is strongly discouraged to used terms like ‘click here’ for links unless absolutely necessary. The descriptive text of a link should properly describe the destination it connects to, such as what is shown in Figure 19 above. FormsForms generally should be clear, and easy for people to use, regardless of how they navigate the web page containing the form. It is a best practice to make all required information visible and clearly obvious on a form, so that the user does not fill out the form, submit it and lose everything. For example, on the example IT Request Submission Form, shown in Figure 20, all required fields are labeled in bold text to make it clearly obvious that these fields are required in order to have a legitimate form submission.Figure 20: Example IT Request Submission FormUsing the Web Developer Toolbar, by clicking on the ‘Forms’ button and then the ‘Display form details’ option on the menu that appears, and clicking on the ‘Information’ button and then the ‘Display ID & Class Details’ option on the menu that appears, you are able to display the information regarding the inner structure of the form. Also, since the example above takes the form submissions, compiles the information from them, and sends them in individual emails, you would be able to see how the fields in the form relate to the information that you see in the email created from it. An example of what this looks like is shown in Figure 21.Figure 21: Example IT Request Submission Form with ID and Class InformationThere should not be a limit on the amount of time that a user may take to complete a form submission; users should be able to complete a form at their own pace. This is especially important for people with cognitive processing difficulties who may need longer periods of time to complete the form.Properly structuring forms can be of benefit in the following ways:People with cognitive disabilities can better understand the form and how to complete it, as making forms accessible improves the layout structure, instructions, and feedback.People using speech input can use the labels via voice commands to activate controls and move the focus to the fields that they need to complete.People with limited dexterity benefit from large clickable areas that include the labels, especially for smaller controls, such as radio buttons and checkboxes.People using screen readers can identify and understand form controls more easily because they are associated with labels, field sets, and other structural elements.Code (e.g. HTML code)Validating code means checking it to make sure it meets the current specifications for its language. By using the Web Developer Toolbar, you can easily validate code by clicking on the ‘Tools’ button on the toolbar, then clicking on the ‘Validate HTML’ option on the menu that appears, as shown in Figure 22. Note that the Validate HTML option uses the W3C HTML Validator to perform this action.Figure 22: Validate HTML and CSS Options on Web Developer Toolbar in FirefoxWith the W3C Validator, you can also select from options like what is shown in Figure 23 and click on the ‘Revalidate’ button to re-check the HTML code.Figure 23: W3C HTML Validator Options BoxYou also validate the code of you web page that pertains to styling, called Cascading Stylesheets (CSS) by clicking on the ‘Validate CSS’ option on the menu shown in Figure 22. Note that the Validate CSS option uses the W3C CSS Validator to perform this action.Accessibility of web pages is measured using the WCAG 2.0 Success Criteria, with levels A, AA, and AAA, located on the Web Content Accessibility Guidelines (WCAG) 2.0 page.SiteImproveYou can also have your created websites and web pages added to the web site SiteImprove (). The University of Guelph has a campus wide subscription to this web governance tool that has a lot of the same features as the tools mentioned earlier. Its features are broken down into six categories, which are as follows:Quality Assurance: provides an overview of broken links and spelling errors on a website; also provides an inventory of all of the pages, media, scripts, and documents being stored on the website and what locations within the website contain links back to the listed itemsAccessibility: provides an overview of the accessibility issues on a website. In comparison to the other tools mentioned previously, SiteImprove stands out. This is because it not only shows what elements on a web page have associated accessibility errors, but mentions how to resolve them within the context of the Web Content Accessibility Guidelines created by the W3C.SEO: Search Engine Optimization-helps with optimizing a web site so that it appears higher on the results obtained from a search engine, such as Google. Internet users are more likely to select one of the first results when searching for information, therefore companies with higher search engine results tend to gain more visitors to their website, and possibly more business.Policy: assists with making sure that a website complies with a set of user selected policies and standardsResponse: constantly monitors a website and reports on the amount of time it takes to respondAnalytics: provides information on how users access and navigate content on your websiteOut of the six categories mentioned above, the two that will get the most usage are Quality Assurance and Accessibility, although SEO may also receive some usage. The categories that will likely receive little or no usage are Policy, Response, and Analytics, either because the user is unable to access those categories, or because the information provided by those features is not required for the user’s needs.In addition, SiteImprove provides its users with the capability to generate reports with information from all features in each of the categories, with the exception of Response.Training and Support ResourcesThere are various training and support resources you can use to expand your skills and knowledge related to general web accessibility and using SiteImprove, as well as receive assistance if you have a question or concern. Some of these are as follows:SiteImrpove’s Product Overview video briefly describes what SiteImrpove is and what information can be retrieved from the features in each of the various categories. This is a beneficial resources for new users, as well as potential users trying to determine whether SiteImprove is a tool that they would like to use for their needs.Under each category of features contained within SiteImprove (for logged in users), accessed through the drop down menu in the top left corner of the SiteImprove web browser window, there is a link to ‘Support and Video Tutorials.’ This section of the SiteImprove tool permits you to file a support ticket with SiteImprove staff, as well as access tutorial videos that vary in length, usually in the range from one to four minutes. The tutorial videos can also be found on the SiteImrpove Video Tutorials webpage on Wistia, with no login necessary.SiteImprove Academy offers both technical and non-technical accessibility courses, consisting of videos and quizzes. These courses can be accessed by anyone who already has an account for SiteImprove.SiteImprove has created its own digital book with accessibility information and how-to guides for making web pages more accessible. It is called ‘THE ALL-IN-ONE DIGITAL ACCESSIBILITY E-BOOK’, and you can request your free copy by filling out a form on the SiteImprove website. You can also access the e-book on the website for the Child Care and Learning Centre.There may be relevant webinars and other videos posted to SiteImrpove’s channel on Vimeo and/or SiteImprove’s channel on Youtube. At the time of this writing, the selection of videos at these two locations is limited, but more may be added in the mon Accessibility Issues and ResolutionJune 8, 2016A testing strategy was conducted across the website for the Child Care and Learning Centre at the University of Guelph, in order to determine what accessibility issues were present on the website in its current state. These tests were performed using AChecker, a free online web accessibility verification tool, as well as SiteImprove. The most common issues found on the website can be broken down into different categories, which include headings, images, links, lists, spelling, tables, and titles, with information pertaining to Content Management System (CMS) specific methods for resolution are included in the Appendix.HeadingsThe issues surrounding headings are either that there are multiple headings of the same type (e.g. two heading 1’s), with no content in between them, or that there is a heading without any content (e.g. blank heading). In order to resolve these issues, you can either delete a heading that contains no content, add content between two headings of the same type, or change the second heading in the group to a lower heading (e.g. change a second heading 1 to a heading 2).ImagesImages are used on multiple pages throughout the website for the Child Care and Learning Centre. Accessibility issues for these images include missing alternative text, or text contained in images. In order to resolve these issues, it is important that all images have meaningful text alternatives, which can be used in place of the images by assistive technologies, such as screen readers. In the case of images of text, text should be used in place of the image whenever possible; however, the text within the image can also be used as alternative text for the image. For more information regarding image accessibility, please refer to the section in this document entitled “Images,” located under the “Verification of Elements on Web Pages” heading.LinksLinks are commonplace on all of the webpages throughout the website for the Child Care and Learning Centre. Accessibility issues that have been found for links include link text that is not descriptive or missing, and links that are broken (e.g. destination cannot be found), as well as images being used as links without descriptive alternative text. If you are planning on using an image as link, it is required that the image has descriptive alternative text that explains the purpose of the link, and that matches any text presented in the image. For text links, text describing the purpose of the link is sufficient. Also, it is important to verify that a link actually reaches its intended destination when selected, and fixed if necessary. For more information regarding link accessibility, please refer to the section in this document entitled “Links,” located under the “Verification of Elements on Web Pages” heading.ListsLists are groups of items, such as a group of groceries that someone would write on a piece of paper to take to the store with them. The main accessibility issue with lists found on the Child Care and Learning Centre website is primarily caused by content editors who copy a bulleted or numbered list from a document in a word processing program, such as Microsoft Word, and paste it into a basic text editing program such as Notepad, before copying it again and pasting it into the editor for the webpage. Doing so causes lists to be read improperly by assistive technologies, such as screen readers, even though it might read fine to a user with normal vision. Using the proper functionality in the webpage editor to create bulleted and numbered lists will solve these issues; you can create your lists in a word processing program first, but when copying and pasting the list into the webpage editor, always ensure that any bullets and numbering are removed and the proper bullets and numbering are applied.SpellingSpelling issues do not make the content any less accessible for users who use assistive technologies, but spelling issues do make the website content hard to read, as well as make it difficult for users to understand the meaning of the content. Examples of spelling issues include extra or missing letters in words, as well as missing or extra spaces and punctuation marks between words. Fixing spelling, as well as grammatical, issues on a website is the same as what would be performed when proofreading a piece of writing, such as an essay, including making sure proper spelling and grammar are used, as well as selecting appropriate words to convey the desired meaning.TablesSome of the web pages on the website for the Child Care and Learning Centre contain tables that convey information pertaining to various subjects, such as fees and menus. The main accessibility issue regarding tables on the website is the fact that table row and column headers are missing. Adding table row and column headers will benefit everyone who uses the internet, as it not only makes a table easier to read for users who can navigate using a mouse, but also for users who can navigate using only a keyboard or other assistive technologies such as a screen reader. More information related to table accessibility can be found on the Tables webpage on WebAim. Note: there is some code present on this page and on the associated webpage regarding Data Tables, therefore you may want to skip these parts if you do not have technical knowledge.TitlesWhile there were no specific accessibility issues pertaining to titles on the website of the Child Care and Learning Centre, ensuring that all web pages have a descriptive title is very important. This benefits all internet users, as it gives them all the opportunity to quickly and easily find the information they need, regardless of whether they use an assistive technology to access webpages. For more information pertaining to webpage title accessibility, please refer to the section in this document entitled “Title,” located under the “Verification of Elements on Web Pages” heading.Resources UsedURLPURPOSEDATE LAST CONSULTED Examples2016-06-02 Information/Figure2015-03-20 Figure2015-03-21 Information2015-03-21 Figure2015-03-21 Information2015-03-20 Examples2015-03-21 Examples2015-03-21 Information2016-06-07Appendix: Content Management System Specific DocumentationThis section contains documentation specific to using the content management system Drupal for creating and editing webpages for the website of the Child Care and Learning Centre website. This documentation comes directly from handouts presented to participants of the Drupal Training 101 and 102 workshops on May 10 and 12, 2016.Content Creation Workshop (May 10, 2016)Accessibility, The AODA, and WCAG 2.0Review the powerpoint presentation for details.How to Login/LogoutNavigate to your website: uoguelph.ca/sitename/userTo login use your Central Login ID and Password in the user login fields.To logout select the logout option located on the menu bar.Administration Menu Bar: After logging in as a Site Manager or Content Creator, the Administration Menu Bar will be visible at the top of the page. It allows users with the correct permissions to add/view/delete/edit content as well as other administration specific tasks.Site Architecture: Structure – Menus – Main Menu – list linksRoles & ResponsibilitiesAuthors: can create, edit and publish their own contentEditors: can create, edit, publish and unpublish their own content, as well as edit and unpublish content created by others.Site Managers: same as Editors but they can also manage basic site layout, change view categories, titles and number of items to display, and create menus and configure site specific taxonomies. The role of the site manager is responsible for the maintenance of AODA compliancy and monitoring the site to maintain conformity to WCAG 2.0 Standards.How to Find ContentFind Content: All content on your website can be viewed by selecting Content on the Administration Menu or the Find Content shortcut located below.Searching for Content: Search existing content on your site by using the Filter and drop-down menus to select a particular content type and status.Update options: Edit, delete, publish or unpublish individual or multiple items.How to Create ContentAdd Content: To create new content on your website, select the Add Content shortcut.Content Types: Banner, Event, Feature, News, Page, Social Media.Creating a Basic PageThe Basic Page content type is used for static content that can be linked to the main navigation bar. This is one of the most “basic” content types and can be very flexible.On the Administration bar, select Add Content.Select Page.Enter a Title.Categories: If you have Page Categories defined, select the appropriate one.Body: enter the information that you want displayed on your web page.File Attachments: optional to add any file attachmentsIf you have authority to publish right away, select Published in Publishing options.Select Save when you are done.The WYSIWYG EditorThere are a few items that need to be explained with our current version of our WYSIWYG such as adding Images, Tables and creating Links that are WCAG 2.0 AA compliant.Adding ImagesGo to the Body section of the page.From the WYSIWYG Editor click on the Image icon.Click on: Browse Server.Click on: Upload Create thumbnails (select size) - Choose file - UploadSelect the desired image, then click: Insert fileAdd Alternative Text (unless the image is decorative)must reflect the purpose of the image (i.e.?description and function)Click on: OKAdding TablesThe WCAG 2.0 standard for table settings dictates that table markup must be properly structured to differentiate and properly link between header and data cells.Click on Table Icon in the WYSIWYG editorEnter the number of columns and rowsAdd a Caption (if a title is not provided elsewhere)Add a Summary (optional but recommended if the table is complicated and information not provided elsewhere)Click on: OKBegin entering your dataTo modify an existing table: right-click on a cell - additional options will be displayedAdding a LinkThe WCAG 2.0 standard for links dictates that the purpose of each link can be determined by the link text alone.Do not use: To search the internet <click hereUse this format instead: Visit <Google’s webpage>To create a link in the body section – click on the link icon in the Editor:Insert the URL that you want to link to:External links - use a link copied from the browser (i.e.?uoguelph.ca.)Internal links - use page name from the browser (i.e. uoguelph.ca/pagenameProtocol automatically changes to <other>Email Address – change Link Type to <E-mail> - enter email addressTo Create an EventSelect Add Content at the top of the administration bar.Select Event.Enter a Title. (Mandatory)Select Category (if desired)Enter the starting and ending Dates and Time. (Mandatory)Enter a Location.In the Body field enter the details and summary of the information.Sections: optional (but recommended if defined by your site manager)A Taxonomy for Event_headings needs to be created by your site managerExamples of headings: Dinners, Public Speakers, Workshops, ConferencesFeature Image: add a feature image (optional – posters)Add Alternative TextAdd a Caption (optional – can add additional information such as a photo credit or information available in your body section.)Add any files relevant to the Event or a related websiteInclude a descriptive Title.Select Save when you are done.To Create NewsOn the Administration bar, select Add Content.Select News.Enter a TitleIf you have page categories defined, select the appropriate one.Enter Written by (optional)In the body field enter what you want displayed on your web page.Add a feature image (optional)Add Alternative Text (if not decorative)Add a Caption (optional – can add additional information such as a photo credit or information available in your body section.)Enter any tags or keywords that help categorize and organize your article.External link: optional - can create a click-through to an external news articleProvide URL to the articleLeave other fields blankDisplays as a teaser item – click on it to be forwarded to the articleIf you have the proper authority to publish right away, select Published in Publishing options.Select Save when you are done.To Create a Banner ImageSelect Add Content at the top of the administration bar.Select Banner.Enter the required information: Title, Headline, Headline Link.Title: Used for internal purpose (Mandatory).Headline: Appears on the image.Headline Link: can link to any website - if internal link, use the page nameAdd Banner Image: Image – Choose File – Select the image, then click on: UploadEnter Alt textSelect the Order (random order by default, 0 = first, 1 = second)Enter optional information: Category, Summary, KeywordsCategory: if applicableSummary: appears below the headlineKeywords: like tags, a filtering mechanismSelect Save when you are done.To Activate the Banner on the Front PageSelect Structure at the top of the administration bar.Select Blocks.Two options: The Static banner is RECOMMENDED.Static banner: View: B1 - Image slider (Banner): Block – Manual Slide show banner: View: B1 - Image slider (Banner): Block – AutoplayAfter selecting your view, you can drag it up to the Top Bar block region or select Top Bar from the dropdown menu.Select Save Blocks.Content Management Workshop (May 12, 2016)Creating a TaxonomyDetermine the appropriate profile type (i.e. Profile)Create a list of associated terms (i.e. Participant, Researcher, External Partner)Add the terns to the appropriate taxonomy category (i.e. Profile category)Go to: Structure – TaxonomyClick on: add terms (…for the appropriate category – i.e. Profile category)Enter a term Name: ParticipantSAVEOptional stepsFind the term # for each Term Name that you create: Go to: Structure – TaxonomyClick on: list terms (…for Profile category)Click on: editRecord the Term #: (i.e. Participant = 122)Located in the URL: (e.g.) for each term name (i.e. Participant, Researcher, External Partner)Retain a list of Term Names and #(e.g.)Profile CategoryParticipant – 122Researcher – 123External Partner - 124Feature CategoryParticipant – 125Researcher – 126External Partner - 127Customize a Page – Step by StepTo customize a pageClick on: Customize this page (…button located at bottom of homepage)Select the desired area by clicking on <+> (…located on right)TopLeft sideMiddle columnRight sideBottomSelect one: View panesNew Custom Content (…located at bottom)MenusTo configure a View paneSelect the desired area by clicking on <+> (…located at bottom)Select: View panesSelect: View: FT3 – Featured item teaser list – then click on: Finish – then, SAVETo change the title of a View pane:Open the view pane (click on Settings icon)Click on: Override the title – then click on: FinishOpen the View pane again (click on Settings icon)Enter your new titleClick on: Finish – then, SAVETo filter specific features into your View pane:Open the view pane (click on Settings icon)Enter the Term # (i.e. Feature Category – External Partner = 127)Click on: Finish - then SAVEApproved View panesView: E3 – Upcoming events teaser listView: F3 – Browser FAQ by CategoryView: FT3 – Featured item teaser listTo configure Custom ContentClick on: Customize this page (…button located at bottom of homepage)Select the desired area (i.e. Top) by clicking on: <+> (…located on right)Select one: New Custom Content (…located near bottom), then enter: Administrative title (i.e. Welcome Message)Title (i.e. Welcome to…)Add content into the Body sectionClick on: Finish – then, SAVETo configure a MenuNavigate to the Menus page: Structure – MenusClick on: Add menuEnter: TitleSaveTo add links to your MenuClick on: Add link (…for the desired Menu)Add required informationMenu link title (required)Path (include full URL)Enter optional informationDescriptionShow as expanded (Recommended)SaveSave configurationTo customize a page with your MenuNavigate to the homepage, then:Click on: Customize this page (…button located at bottom of homepage)Select the desired area (i.e. Right) by clicking on: <+> (…located on right)Select one: Menus – Select: desired menu – Click on: Finish – then, SAVEBest Practices1. Design & ConsistencyMake sure all text can be highlighted and read aloud so that screen readers and reading tools can access them.Create a website that can be used by as many as possible, in as many ways as possible according to user needs.All functionality can be used without a mouse – from the keyboard alone.All functionality can be used with a mouse.Text, headings, buttons, fields etc. that are logically connected must also be visually connected.Have a consistent design throughout the website.Follow known website conventions.Follow the standard for the format you are publishing in (for example HTML 5 syntax) - this will optimize your website for many different platforms and user agents.2. LinksMake sure not to give instructions based solely on a location of content, such as ‘In the box to your right’. Supplement with a heading as well.Make link texts that can be read out of context. Avoid ‘Click here’, ‘Read more.’Broken links negatively affect users perception of your website, yet all too often it is the basics like this that are overlooked. There should be no broken links on your website.Website link texts can be problematic. The outcome is often that people revert to using ‘read more’ or ‘click here’, which are not only inaccessible to a number of users but also make no sense when taken out of context.3. ImagesAvoid images of text where possible. Where not, make sure that text alternatives are equivalent.Provide alternative text for images. These must reflect the purpose of the image:Decorative: no alternative text.Having a function: Describe the functionality.Linking: Describe destinationUsers can adapt color and font according to specific needs.Ensure none of your content will cause seizures - avoid rapidly flashing content.4. Colour ContrastMake sure that the color of the background and the color of the text are sufficient contrast to each other. That way people with low vision can also read it.Make sure that you do not give information by use of color alone, such as saying “In the green box you will find”. Otherwise it can create problems for both users with low vision or no vision, or people with color blindness.5. Keep it smallAs a general rule of thumb, documents and files should not be bigger than 10MB otherwise they will cause a range of frustrating problems for the user. For example, it may slow the speed of your site, cause problems if you have a responsive design or create a serious dent in mobile users’ data plans.Keep it short. Metadata includes things like Alt descriptions, summaries, and other descriptive text. Ideally, Meta descriptions should be no more than 150 characters or else you risk important information being cut or too long to be useful. ................
................

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

Google Online Preview   Download