Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
How to Make AODA Compliant Web Pages – General Practices Disclaimer: 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 Cantwell For: University of Guelph – Child Care and Learning Centre Date Last Modified: July 18, 2016 Table of Contents Introduction .................................................................................................................................................. 4 Accessibility Verification Tools and How to Obtain Them ............................................................................ 4 Using Accessibility Verification Tools ............................................................................................................ 5 Using WAVE Toolbar ................................................................................................................................. 5 Using Web Developer Toolbar .................................................................................................................. 9 Using Contrast Checkers ........................................................................................................................... 9 Verification of Elements on Web Pages ...................................................................................................... 10 Title ......................................................................................................................................................... 10 Resizing of Text ....................................................................................................................................... 11 Navigation without a Mouse............................................................................................................... 11 Images ..................................................................................................................................................... 12 Document Structure ............................................................................................................................... 14 Video ....................................................................................................................................................... 15 Links ........................................................................................................................................................ 15 Forms ...................................................................................................................................................... 16 Code (e.g. HTML code) ............................................................................................................................ 17 SiteImprove ................................................................................................................................................. 18 Training and Support Resources ............................................................................................................. 19 Common Accessibility Issues and Resolution ............................................................................................. 20 Headings.................................................................................................................................................. 20 Images ..................................................................................................................................................... 20 Links ........................................................................................................................................................ 20 Lists ......................................................................................................................................................... 20 Spelling .................................................................................................................................................... 21 Tables ...................................................................................................................................................... 21 Titles ........................................................................................................................................................ 21 Resources Used ........................................................................................................................................... 22 Appendix: Content Management System Specific Documentation ........................................................... 23 Content Creation Workshop (May 10, 2016) .......................................................................................... 23 Accessibility, The AODA, and WCAG 2.0 ............................................................................................. 23 Site Architecture: Structure – Menus – Main Menu – list links ......................................................... 23 The WYSIWYG Editor........................................................................................................................... 24 To Create an Event .............................................................................................................................. 25 To Create News ................................................................................................................................... 25 To Create a Banner Image................................................................................................................... 26 Content Management Workshop (May 12, 2016) .................................................................................. 27 Creating a Taxonomy .......................................................................................................................... 27 Customize a Page – Step by Step ........................................................................................................ 27 Best Practices ...................................................................................................................................... 29 Introduction Creating 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 Them Mozilla 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 1: Accessibility Verification Tools for Mozilla Firefox Name What It Is Where To Download Accessibility Evaluation Toolbar The Accessibility Evaluation Toolbar provides a variety of features for web designers/developers to check created web pages for accessibility issues, including report creation. https://addons.mozilla.org/enUS/firefox/addon/accessibility-evaluationtoolb/ Web Developer Toolbar The Web Developer extension adds various web developer tools to the browser, such as code https://addons.mozilla.org/envalidation tools us/firefox/addon/web-developer/ Checks for compliance with the contrast levels, brightness and shine in the color combination of WCAG foreground and background of textual content Contrast based on the requirements of WCAG 1 and https://addons.mozilla.org/enChecker WCAG 2. us/firefox/addon/wcag-contrast-checker/ Support 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 Chrome Name What It Is Where To Download Color Contrast Analyzer Chrome extension that allows you to analyze a web page or portion of a web page for conformance with WCAG 2.0 Color Contrast requirements. https://chrome.google.com/webstore/detail/colorcontrast-analyzer/dagdlcijhfbmgkjokkjicnnfimlebcll Web Developer Toolbar The Web Developer extension adds various web developer tools to the browser, such as code validation tools https://chrome.google.com/webstore/detail/webdeveloper/bfbameneiokkgbdmiekhjnmfkcnldhhm WAVE Evaluation Tool WAVE is a web accessibility evaluation tool developed by WebAIM.org. It provides visual feedback about the accessibility of your web content by injecting icons and indicators into your page. https://chrome.google.com/webstore/detail/waveevaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh If 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, Ask.com) 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 Tools Using WAVE Evaluation Tool NOTE: 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 Tool The 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 features In 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 Errors By 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 Toolbar After 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 Toolbar NOTE: 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 Firefox Some 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 Checkers The contrast of a web page refers to the “relative difference between light and dark areas of a [web page]” (Contrast Definition from Dictionary.com). 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 Google By 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 Pages Title It 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 Guelph Examples 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 Ask.com. Resizing of Text In 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 Firefox Once 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 Mouse In 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 Firefox Some 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. Images There 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. a) Decorative images Decorative 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. b) 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 image c) Complex 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 Example Important 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 Structure To 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 Guelph There 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 Firefox The 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. Video Video 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 Example In 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 nonverbal 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. Links Links 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 link If 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. Forms Forms 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 Form Using 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 Information There 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 Firefox With 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 Box You 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. SiteImprove You can also have your created websites and web pages added to the web site SiteImprove (http://siteimprove.com/). 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: 1. 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 items 2. Accessibility: 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. 3. 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. 4. Policy: assists with making sure that a website complies with a set of user selected policies and standards 5. Response: constantly monitors a website and reports on the amount of time it takes to respond 6. Analytics: provides information on how users access and navigate content on your website Out 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 Resources There 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 EBOOK’, 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 future. Common Accessibility Issues and Resolution June 8, 2016 A 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. Headings The 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). Images Images 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. Links Links 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. Lists Lists 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. Spelling Spelling 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. Tables Some 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. Titles While 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 Used URL https://www.uoguelph.ca/studentaffairs/childcare/parentinformation http://dictionary.reference.com/browse/contrast http://webaim.org/resources/contrastchecker/ http://www.w3.org/WAI/tutorials/images/decorative/ http://www.w3.org/WAI/tutorials/images/informative/ http://www.w3.org/WAI/tutorials/images/complex/ http://www.vipleague.sx/motorsports/291751/1/nascarxfinity-series-drive4clots.com-300-live-stream-online.html http://www.queensu.ca/accessibility/how-info/videoaccessibility http://webaim.org/techniques/hypertext/ http://webaim.org/techniques/hypertext/hypertext_links http://www.w3.org/WAI/tutorials/forms/ http://validator.w3.org/ http://jigsaw.w3.org/css-validator/ http://www.w3.org/TR/WCAG20/ http://webaim.org/techniques/tables/ http://webaim.org/techniques/tables/data https://ccswbs.gitbooks.io/uog-drupaltraining/content/index.html PURPOSE Accessibility Examples Information Information Information Information/Figure Information/Figure Figure DATE LAST CONSULTED 2016-06-02 2015-03-19 2015-03-20 2015-03-20 2015-03-20 2015-03-20 2015-03-21 Information 2015-03-21 Information Figure Information Accessibility Examples Accessibility Examples Information Information Information Information 2015-03-21 2015-03-21 2015-03-20 2015-03-21 2015-03-21 2015-03-21 2016-06-06 2016-06-06 2016-06-07 Appendix: Content Management System Specific Documentation This 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.0 Review the powerpoint presentation for details. How to Login/Logout 1. 2. 3. Navigate to your website: www.uoguelph.ca/sitename/user To 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 links Roles & Responsibilities Authors: can create, edit and publish their own content Editors: 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 Content Find 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 Content Add 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 Page The 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. 1. 2. 3. 4. 5. 6. 7. 8. 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 attachments If you have authority to publish right away, select Published in Publishing options. Select Save when you are done. The WYSIWYG Editor There 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 Images 1. 2. 3. 4. 5. 6. 7. 8. Go 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 - Upload Select the desired image, then click: Insert file Add Alternative Text (unless the image is decorative) – must reflect the purpose of the image (i.e. description and function) Click on: OK Adding Tables The 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. 1. 2. 3. 4. 5. 6. Click on Table Icon in the WYSIWYG editor Enter the number of columns and rows Add 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: OK Begin entering your data 7. To modify an existing table: right-click on a cell - additional options will be displayed Adding a Link The 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 here Use this format instead: Visit <Google’s webpage> To create a link in the body section – click on the link icon in the Editor: 1. Insert the URL that you want to link to: External links - use a link copied from the browser (i.e. www.uoguelph.ca.) Internal links - use page name from the browser (i.e. www.uoguelph.ca/pagename o Protocol automatically changes to <other> Email Address – change Link Type to <E-mail> - enter email address To Create an Event 1. 2. 3. 4. 5. 6. 7. 8. Select 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 manager – Examples of headings: Dinners, Public Speakers, Workshops, Conferences 9. Feature Image: add a feature image (optional – posters) – Add Alternative Text – Add a Caption (optional – can add additional information such as a photo credit or information available in your body section.) 10. Add any files relevant to the Event or a related website – Include a descriptive Title. 11. Select Save when you are done. To Create News 1. 2. 3. 4. On the Administration bar, select Add Content. Select News. Enter a Title If you have page categories defined, select the appropriate one. 5. 6. 7. 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.) 8. Enter any tags or keywords that help categorize and organize your article. 9. External link: optional - can create a click-through to an external news article – Provide URL to the article – Leave other fields blank – Displays as a teaser item – click on it to be forwarded to the article 10. If you have the proper authority to publish right away, select Published in Publishing options. 11. Select Save when you are done. To Create a Banner Image 1. 2. 3. 4. 5. Select 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 name Add Banner Image: Image – Choose File – Select the image, then click on: Upload 1. Enter Alt text 2. Select the Order (random order by default, 0 = first, 1 = second) 3. Enter optional information: Category, Summary, Keywords – Category: if applicable – Summary: appears below the headline – Keywords: like tags, a filtering mechanism Select Save when you are done. To Activate the Banner on the Front Page 6. 7. 8. 9. Select 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 – Autoplay • After 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 Taxonomy 1. Determine the appropriate profile type (i.e. Profile) 2. Create a list of associated terms (i.e. Participant, Researcher, External Partner) 3. Add the terns to the appropriate taxonomy category (i.e. Profile category) a. Go to: Structure – Taxonomy b. Click on: add terms (…for the appropriate category – i.e. Profile category) c. Enter a term Name: Participant 4. SAVE Optional steps 5. Find the term # for each Term Name that you create: a. Go to: Structure – Taxonomy b. Click on: list terms (…for Profile category) c. Click on: edit d. Record the Term #: (i.e. Participant = 122) i. Located in the URL: (e.g.) https://aodaclient.uoguelph.ca/aodaworkshop/taxonomy/term/122/edit?destination=admin /structure/taxonomy/profile_category e. Repeat for each term name (i.e. Participant, Researcher, External Partner) 6. Retain a list of Term Names and # (e.g.) a. Profile Category i. Participant – 122 ii. Researcher – 123 iii. External Partner - 124 b. Feature Category i. Participant – 125 ii. Researcher – 126 iii. External Partner - 127 Customize a Page – Step by Step To customize a page Click on: Customize this page (…button located at bottom of homepage) Select the desired area by clicking on <+> (…located on right) 1. 2. 3. 4. 5. Top Left side Middle column Right side Bottom Select one: 1. View panes 2. New Custom Content (…located at bottom) 3. Menus To configure a View pane Select the desired area by clicking on <+> (…located at bottom) Select: View panes Select: View: FT3 – Featured item teaser list – then click on: Finish – then, SAVE To change the title of a View pane: Open the view pane (click on Settings icon) Click on: Override the title – then click on: Finish Open the View pane again (click on Settings icon) Enter your new title Click on: Finish – then, SAVE To 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 SAVE Approved View panes View: E3 – Upcoming events teaser list View: F3 – Browser FAQ by Category View: FT3 – Featured item teaser list To configure Custom Content Click 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 section Click on: Finish – then, SAVE To configure a Menu Navigate to the Menus page: Structure – Menus 1. Click on: Add menu 2. Enter: Title 3. Save To add links to your Menu 1. Click on: Add link (…for the desired Menu) 2. Add required information a. Menu link title (required) b. Path (include full URL) 3. Enter optional information a. Description b. Show as expanded (Recommended) 4. Save 5. Save configuration To customize a page with your Menu Navigate 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, SAVE Best Practices 1. Design & Consistency • Make 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. Links • • • Make 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. Images • Avoid 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 destination • Users can adapt color and font according to specific needs. • Ensure none of your content will cause seizures - avoid rapidly flashing content. 4. Colour Contrast • Make 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 small • As 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.