The Town of Mono's website has been built to meet the Website Content Accessibility Guidelines (WCAG), up to 2.0, level AA. Level AAA and WCAG 2.1 implementations have been made where practical and where capabilities exist to do so.
The Town's website has implemented best practices to make the accessibility features available to the user agent. Included on this page is a summary of the website's accessibility, categorized in the same way as WCAG.
During the development of this website, the best practice was to make accessibility features the default where and when practical. For example, all graphic elements and user interfaces have been designed to meet or exceed the contrast requirements for Level AAA and the text size is by default 1.125 rem (approximately 18 px for the default settings of most browsers). WCAG considers text that is 18 point (~24 px) and larger or 14 point and bold or larger (~18.67 px) as "large text."
If you encounter a web page or section that of the Town's website that is does not seem to be in compliance with WCAG, please contact us. Comments about ways that the accessibility of the pages could be improved are always welcome.
Using & Understanding Accessibility Features
Recommended Audience: Anyone looking to access or support access of accessibility features and those who are interested in the accessible features available on this website.
This website's accessibility features can be accessed in ways that should be intuitive and familiar with others accessible websites. Some websites may provide alternative ways to access items, such as the skip navigation links, or different keys for browsing through tab interfaces.
This section provides an overview about where and how specific accessibility features can be accessed.
Skip Navigation Links
In addressing Success Criteria for Guideline 2.4, specifically 2.4.1: "a mechanism is available to bypass blocks of content that are repeated on multiple web units," the Town's website has a link to skip the navigation menu. This links is presented as one of the first items for both users browsing via keyboard and using the tab input and users who are browsing with a screen reader or other similar technologies.
All elements on this website that are meant to be interactive (e.g., links, buttons, etc.) can be actioned with a keyboard interface.
Tips for navigating the website with only a keyboard:
- The tab key moves from one interactive element to the next in a logical order
- The Shift + Tab keys will go back to the previous element
- The left and right arrow keys can navigate through tabbed content.
Sliders/carousels are website components that navigate through a list of items. This website uses both automatically timed sliders that progress from slide to slide with a set time and a static slider that needs a user input to progress to the next slide.
An example of a timed slider can be found on this website's home/main page.
To meet the criteria for Guideline 2.2, users can progress through a timed slider at their own pace by pressing either the slider dots or the slider buttons that navigate to the previous/next slide. Users are able to press the buttons with a mouse or locate the slider buttons through the tab key on a keyboard.
To meet Guideline 1.4.4, this website already uses larger than normal text at 1.125 rem (~18 px) and has been tested to ensure text can be zoomed up to 200 percent without loss of content or functionality.
The easiest way to scale the text size is to increase your browser's zoom. A keyboard shortcut for this is to press the Ctrl key and the "plus" symbol (+).
In addition, rem units are used for the text size. REM is the size of the root element. On this site, visitors can change their preferred font size in their browser settings and this will increase/decrease the text size throughout this website. While the font size has been tested to scale up to 200% to keep the visual layout, font sizes above this may break the visual layout.
This website has multiple ways that visitors can navigate its content:
- Search: visitors can enter keywords into the search bar or on the search page
- Navigation Menu: the navigation menu contains almost all of the main pages on the website
- Sitemap: The sitemap contains the structure of the website with all of the main pages. Additionally, the sitemap contains a complete list of all the site's links.
- Breadcrumbs: visitors can use the breadcrumbs at the top of pages to navigate through the structure of the website
- Related pages: Where appropriate, some pages contain links in a sidebar to related pages or items.
Recommended Audience: visitors who are interested in the specific implementations of the accessibility features. Some technical knowledge may be required in reviewing this section.
Principle 1 – Perceivable
Information and user interface components must be presentable to users in ways they can perceive.
1.1 Text Alternatives
- Text alternatives (alt attribute) have been provided for all non-text content that requires it.
1.2 Time-based Media
- This guidelines is used for media such as audio/video-only, audio-video, or audio and/or video combined with interaction. Likely the only media on this website that meets this criteria may be embedded videos from a live event (such as a Council Meeting) that will have the option to display captions. Media on this website is linked or embedded from other websites.
- This website uses semantic tags (Nav, Main, Section, Article, Aside, etc) to order the elements and text on its pages.
- Content is nested within appropriate headings in hierarchical order.
- Text is mostly avoided in images. Where it is not, the text in the images it not required for interpreting the visual and is instead for decoration or to provide a similar aesthetic to the visual branding.
- Links and components receive a visual indicator when they receive keyboard focus
- Contrast on this website should meet or exceed the Contrast requirement for Level AAA (contrast ratio is at least 10:1)
- Resizing text: user agents can use zoom on web page to magnify pages up to 200% while preserving general structure of the website's layout, font sizes where practical use the rem measurement to allow another method of controlling the size of the fonts on the page by the user
- This website does not use background audio
- Text line-height is specified to be 150%
Principle 2 – Operable
2.1 Keyboard Accessible
- This website is keyboard accessible. To navigate through pages with a keyboard, press the Tab key; pressing the Shift and Tab key will go back to the previous focused element. When navigating tabbed content, the left and right keys will go to the next/previous tab.
2.2 Enough Time
- On this website, sliders/carousels and an occasional modal on the home page are components that need consideration for this requirement. A user can change a slider/carousel on this website from being timed to manual by pressing the forward/back buttons. The modal on the homepage provides a timer when the modal will close. There is a link to more information or to view the notice where there is no time limit on the modal.
2.3 Seizures and Physical Reactions
- This website does not use any components that should flash more than three times in any one second period and does not violate flash thresholds.
- A 'Skip to Content' link is available on all pages of this website that have the navigation menu/bar or other types of repeated content. The link is accessed as one of the first items when using keyboard navigation (the Tab key) or when using a screen reader
- Multiple ways of accessing content are available, including: the navigation menu, the search, breadcrumbs, related content, and more.
- Links have anchor text that use call to actions or are believed to be descriptive about where they will redirect users
2.5 Input Modalities
- Everything on the site should be able to be operated with a single press.
- Labels have been included where appropriate. For elements with no text label, the attributes aria-label or aria-labelledby have been applied.
Principle 3 – Understandable
- Most text is left-justified on this website, except for some components or sections that may be centre aligned
- Links can be determined by the font colour and the visual underline received on hover/focus
- Lang attributes have been set on this website
- Jargon and technical terms are defined where appropriate
- The navigation menu's items always occur in the same relative order in all of its instances on this website. Other repeating elements also follow this same logical.
- Components on this website have been designed to be similar if they have related functionality
- Components on this website should behave in consistent ways
3.3 Input assistance
- Primarily relating to form fields, a required field or require format is identified by a tooltip to the user. Acceptable values and formats are provided either in the input label or subsequent description as appropriate.
Principle 4 – Robust
- This site uses technology that follows best practices for writing clean, semantic HTML and CSS code.
4.1.2 Name, Role, Value
- Attributes have been added to elements to help with accessibility. All elements have attributes required for WCAG 2.0, Level AA as required in AODA. Further efforts have been made to achieve WCAG 2.0, Level AAA where feasible and the new criteria for all levels in WCAG 2.1 where feasible.
Items Not in Compliance
If you have discovered any component or content on this website that seems to be out of compliance with the WCAG 2.0 Level A or AA, please contact us. We would also love to hear from you if you have recommendations about new accessible features you would like to see on this site.
Do you think you or someone you know might benefit from a screen reader? A lot of browsers have extensions that allow a screen reader to be installed. Here are some specific options:
- NVDA: free, requires PCs running Windows 7 SP1 and later. There is an older version available for Windows Vista & XP.
- Google's Chrome browser has a screen reader extension built by Chrome. You can add it to Chrome in the Chrome Web Store for free.
- iOS: VoiceOver is a built-in feature that can be enabled in the accessibility features
- Android: TalkBack allows you to interact with touch and receive spoken feedback. It describes your actions, gives you feedback about your location, and even has a braille keyboard to enter 6-dot braille on your screen
Learn more about WCAG and the different standards that are recommended or in development to help make the web more accessible.
Learn more about AODA and the requirements for Ontario websites.