51吃瓜app

Web accessibility means providing all people the opportunity to participate in the online experience fully, regardless of ability. When sites are correctly designed, developed and edited, all users can have equal access to information and functionality without discrimination.

Under the Accessibility for Ontarians with Disabilities Act (AODA), the Government of Ontario requires all websites meet as outlined by (WCAG) 2.1. These guidelines were developed to address barriers relating to visual, motor, auditory, and cognitive disabilities. 51吃瓜app is dedicated to removing barriers and creating equal access to information and content for people with disabilities in order to ensure an inclusive online experience.

An accessibility check should not be the final step prior to the launch of a new website. When it is, many accessibility issues are often identified, leading to a costly redesign and a delayed launch. To avoid this, accessibility must be part of the development process from the beginning, not a check tacked-on at the end.

Whether you are building a new website or reviewing an existing one, 51吃瓜app’s Information Technology and Digital Strategies departments have identified key components within WCAG success criteria to consider, listed below.

A full list of is available by W3C. 

Writing for the Web

Content should be written as clearly and simply as possible and should avoid jargon and abbreviations. If abbreviations are used they need to be expanded on first use on each page or landing point. Be especially mindful of redundancy. Unclear or repetitive information can be frustrating for users who rely on screen readers.

Try to keep all your information on one page, instead of several. If the information needs to be outlined in several areas on the web, still keep all the information on one page, and link to it from the other pages. This way when changes happen, you only need to apply them in one specific area as opposed to many. Having redundant content on the website is what helps create conflicting information. Chances are, when updates are needed, they will be made in one area, but neglected in another.

As mentioned, a simple workaround to avoid this is to create a link to the main information page from the other misc. pages.

Use of Colour

Colour is an important asset in web design, being used to enhance aesthetic appeal, usability, and accessibility. However, some users perceive colour differently, thus colour should never be the only way of conveying information. Consider people using text-only, limited-color or monochrome displays and browsers will be unable to access information that is presented only in color.

• Graphs and charts should always include accompanying data (numbers, text) that adequately convey what the visual represents.
• Additional visual cues should be included for links or controls where colour alone is used to identify them. This includes underlining hyperlinks so they can be easily distinguished from surrounding text. 

Colour Contrast

While colour is vital to web design, it’s important to ensure all colours used have adequate contrast between the foreground and background to ensure text is distinguishable.

The WCAG 2.1 requires colour combinations to meet the following contrast ratios:

• Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
• Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.
• Large text is defined as 19 pixels (1.2 em) and bold or larger, or 24 pixels (2 em) or larger.

is a great tool for determining the accessibility of various foreground/background colour combinations. 

Heading Hierarchy

Headings (represented as < h 1 >, < h 2 >, etc. tags) were once primarily used as a stylistic choice. However, with focus shifting from design to function, headings must now operate primarily as a structural tool. These are especially important for those using screen readers.

With headings, remember the focus should be on logical hierarchy:

• The title of your page should be the only heading using the tag. The tag is the most important in terms of hierarchy.
• Ensure all subsequent headings follow a proper parent/child relationship.
• Avoid skipping heading ranks as it can make the content confusing in terms of navigation. Different levels of subheadings should be underneath main headings, for example a H3 would be nested under a H2.
   

Good Heading Structure
H1 - Page Title

H2 - Section Heading
H3 - Subsection Heading 1
H3 - Subsection Heading 2

H2 - Section Heading
H3 - Subsection Heading
H4 - Subsubsection Heading
 

Bad Heading Structure
H1 - Page Title

H3 - Section Heading 1 (H2 has been skipped)
H4 - Subsection Heading

H1 - Section Heading (H1 is being used twice) 

Bypassing Blocks or Skipping Navigation Links

Consider that, each time the user with disabilities navigates to a new page within your website, they must tab through all navigation links and other ancillary content before getting to the main content area of the page. To make this experience less frustrating, it’s good practice to add a button to “Skip to Main Content”. There are a variety of ways to do this. For more information on creating skip navigation and code examples, visit . 

Self-Describing Page Links

Ensure hyperlinks are self-describing and make sense out of context. While popular practice, links like “click here” or "learn more" do not provide any useful information to someone using a screen reader. Hyperlinks should be descriptive and link to nouns that are context-specific.
 

Good Links

Learn more about Equity, Diversity and Human Rights

Learn more about the

Download the Accessibility Report (PDF)

Bad Links

to Register

about Equity, Diversity and Human Rights

Alternative Text for Images

Providing text alternatives (alt text) for any non-text content is important. All images must have text alternatives that describe the information represented in them.

• Alternative text should be concise and meaningful.
• Typically limited to around one hundred characters or less.
• Use punctuation and sentence structure.
• Avoid beginning descriptions with "image of…" or "graphic of…" 
• Contextually appropriate with surrounding information.

Modules also have the ability to add images, and as a result of a recent update, all modules now have alt text. When given the option it is important that you add alternative text to all images on your web pages.

For more information on proper use of alternative text concepts, please visit. For a full list of success criterion for various non-text content types, please refer to . 

Images of Text

Images of text are often used to ensure a specific design style is achieved. However, if an author can use text (HTML, CSS) to achieve the same visual effect, they should present the information as text rather than using an image. When CSS is used correctly, it alone can be used to control the visual presentation of text in maintaining a design style while still being accessible to all.

For better understanding of proper use and exceptions, visit . 

Forms and labels

Forms are used for a variety of different functions throughout a website—including search, login, registration, commenting, and purchasing.

• Provide instructions to help users understand how to complete the form and individual form controls.
• Use the element, and, in specific cases, other mechanisms (e.g. WAI-ARIA, title attribute etc.), to identify each form control.
• Keyboard focus order should match the visual order of the form.
• Notify users about successful task completion, errors, and provide instructions to help them correct mistakes.

For a complete overview for creating accessible forms, please refer to . 

Tables

Data tables are used to organize data with a logical relationship in grids. Accessible tables need HTML markup that indicates header cells and data cells and defines their relationship. 

Assistive technologies use this information to provide context to users. Tables should only be used for tabular data, not page layout.

• Use table headers ( element) to markup all column or row headers, and data cells ( element) for content.
• Define the scope of each header, indicating whether it’s a column or row header. The value of the scope attribute can either be “col” or “row”.
• When possible, avoid merged cells and empty table headers.

Tables without structural markup to differentiate and properly link between header and data cells can create accessibility barriers. For more information, visit . 

PDF

Under the Web Content Accessibility Guidelines (WCAG) 2.0, PDF files are considered web content and become an extension of your website.

If the PDF file is a form, consider using Google Forms instead.
If the PDF file is a document, consider converting it into a web page instead.

If you absolutely need to upload a PDF, take a look at these useful materials on making existing PDFs accessible:

Remove any older/duplicate PDF you may have on the Assets Server. Prospective students can find outdated content through Search Engines, so it’s important that you remove anything that is no longer applicable. This will help reduce our overall PDF count as well.

It is important to note that PDFs can only be tagged in one language for accessibility, so be sure to create separate files for English and French content.

If you have older, outdated PDFs living on the Assets Server, please have them removed. Although they may not be linked on Laurentian.ca, users may still find them through search engines.

The fewer PDFs we have in our server, the better!

There are a variety of free tools available in order to thoroughly test the overall accessibility of a website.

Manual Testing

Accessibility is not a wholly technical endeavour, because accessibility is primarily about the human experience. Manual testing is an important first step in determining the overall effectiveness of a website’s layout and design, and an easy way to find initial points of frustration.

Try to navigate a website using only a keyboard, using a combination of the “Tab” and “Enter” keys.

• Are you able to access all links, buttons, menus, or interactive components such as accordion panels, pop-up navigation menus or carousels?
• Are you able to pause an image carousel?
• Can you see where your cursor is located on the page?
• Does the cursor follow a logical path from top to bottom, left to right or does it jump around? 

Screen Reader Testing

A screen reader is a common way for persons with disabilities to access online content. Understanding how screen readers treat your website and content can provide valuable information in ensuring all visitors have the same experience. You’re also more likely to catch redundant or poorly crafted content when you’re forced to listen to it and not skim visually.

Try navigating a website using a screen reader with your monitor turned off. If you are using an Apple computer, you can try the built-in screen reader utility called , which can be found in the accessibility settings. If you are using Windows, you can download a free screen reader like .

Another great universally available tool for content editors and developers is , a Google Chrome extension.

While using a screen reader, here are some things you should be listening for:

• When announcing the link to home (typically associated with the logo on the site) are you able to tell where the link directs you from what is being said? What about other links? Does what is read to you give context as to where it will lead?
• If there is more than one menu, are you able to tell which menu you are on and what link you are on within that menu?
• For all forms, are you able to tell what information is expected of you when you are asked to input text (i.e. does it speak something like “enter search terms”)
• Is all of the on-page content read to you?
• Does the alternative text of an image give appropriate context as to what the image is about/its value to the overall story? 

Automated Testing

There are many free tools, plugins, book-marklets and applications available to test the accessibility of a website. Although automated tools are great to determine compliance issues and errors from a content or developmental perspective, they should never be the only method used to validate conformance with accessibility guidelines. Accessibility is about the human experience.

Here are the tools 51吃瓜app recommends for automated testing:

• by Toronto Metropolitan University is an accessibility visualization book-marklet.
• is offered both on their website and also as a
• by sa11y is a valuable tool but only checks colour contrast ratios. Similarly, is a great tool for determining the accessibility of various colour combinations as you develop a new website.