Revision as of 14:41, 21 August 2020

Overview

This article is about accessibility as it relates to Platform3. We believe that all people with a diverse range of sight, hearing, movement, and cognitive ability should be able to use the platform, and we strive to ensure anyone can access your system in a way that respects their dignity and independence. This article contains information related to ensuring your system is accessible.

If you have questions or encounter anything that seems like an accessibility issue, please contact our support team.

View our voluntary product accessibility template

Accessibility - Essentials

Disabilities defined

A disability in web accessibility terms is a condition or barrier that limits a person from interacting with or accessing information or functionality of a web application. It is estimated that approximately 1 in 5 people have a disability. Disabilities are generally classified into 4 areas.

The four disability classifications (Visual, Hearing, Movement, Cognitive)

Visual

This classification includes people with low vision and the completely blind as well as people with color blindness or other visual impairments such as vision loss due to injury, cataracts and other factors.

Hearing

This classification includes the deaf and those with a range of hearing loss.

Movement

This classification includes people with Cerebral Palsy, Quadriplegia and a range of restricted movement and may include people with arthritis or other conditions or injuries.

Cognitive

This classification includes people with developmental delays, dyslexia, autism, ADHD, Down syndrome and may be expanded to include Non-native speakers and sometimes the elderly.

Assistive technologies

Assistive technologies are anything used to increase, maintain, or improve functional capabilities. Assistive technologies empower us to overcome or remove a disability. Some common assistive technologies include: Eye tracking devices, switches, sip and puff devices, refreshable braille keyboards, screen readers and screen magnifiers.

Assistive devices: eye tracking, a switch, sip and puff device, refreshable braille keyboard

Common screen readers include:

• JAWS (Job Access with Speech)
• NVDA screen reader
• Apple’s OS X VoiceOver
• Google’s Chromevox
• Android Talkback

Screen readers on mobile devices typically use a gesture-based user interface whereas on desktops they use keyboard-based interface.

Guidelines and Legislation

Guidelines and legislation are constantly evolving and vary depending on your locality. Below are some prominent guidelines and legislation. Visit https://en.wikipedia.org/wiki/Web_accessibility for more information.

WCAG

Web Content Accessibility Guidelines or WCAG for short, is a set of international standards, published by the World Wide Web Consortium (W3C). These standards contain a set of guidelines with testable success criterion. Essentially there are four guiding principles in WCAG.

1. Is it Perceivable: Can I perceive the Interface and information presented?
2. Is it Operable: Can I navigate and operate the application?
3. Is it Understandable: Can I understand the information presented and how to use the system?
4. Is it Robust: Can I use a variety of assistive technologies with the system?

Visit https://www.w3.org/WAI/standards-guidelines/wcag/ to learn more.

WAI-ARIA

Web Accessibility Initiative - Accessible Rich Internet Applications or ARIA for short. ARIA is a set of specific recommended standards for developers. ARIA is generally intended to increase accessibility of web pages with dynamic content and specific user interface components.

Visit https://www.w3.org/WAI/standards-guidelines/aria/ to learn more.

Section 508 (USA)

Section 508 of the U.S. Rehabilitation Act generally requires federal agencies to provide information in an accessible way.

Visit https://www.section508.gov/ to learn more.

ADA (USA)

Americans with Disabilities Act (ADA) generally requires US-based organizations to provide access to information for people with disabilities and prohibits discrimination on the basis of disability.

Visit https://www.ada.gov/ to learn more.

EU Web Accessibility Directive

European Union (EU) Directive on the Accessibility of Websites and Mobile Applications Generally states Public sector organisations across the EU must adhere to WCAG. Websites and apps must comply with EN 301 549 accessibility requirements.

Visit http://nda.ie/Publications/Communications/EU-Web-Accessibility-Directive/ to learn more.

AODA (Ontario, Canada)

Accessibility for Ontarians with Disabilities Act or AODA for short. Visit https://www.aoda.ca/ and https://www.ontario.ca/laws/statute/05a11 to learn more.

Testing for accessibility

The SmartSimple platform is tested for accessibility by a 3rd party (a completely blind computer user) and we also test the system internally. Primary testing is done with the JAWS screen reader.

Download our Voluntary Product Accessibility Template https://www.smartsimple.com/agreements.html

Automated testing

There are a number of free and easy to use tools you can use to test your configuration of the SmartSimple system. Here are three popular browser extensions:

Wave toolbar - annotates possible problems inline and recommended fix. https://wave.webaim.org/extension/

Screenshot of Wave

Tenon - display code snippets, guidelines and recommended fix. https://tenon.io/

Screenshot of Tenon

Google Lighthouse - provides an accessibility audit and recommended fix. https://developers.google.com/web/tools/lighthouse/

Screenshot of Google audit

Other Tools

https://validator.w3.org/ - Check the markup validity of web documents (HTML, XHTML, etc.)

https://webaim.org/resources/contrastchecker/ - Check the contrast ratio of foreground and background color. (colored text over a colored background)

Beyond automated testing

If you want to go beyond automated testing tools, you may consider the following:

• Create your own user group of testers. A group of five people testing often will yield good results.
• Look into getting a 3rd party audit.

Accessibility - Advanced

If you are a SmartSimple System Administrator you have a role to play in ensuring the configuration of your system is accessible. Here is a list of important information to note when you setup or modify any SmartSimple system.

All links and buttons must be descriptive

If you are adding a link or a button inside your system never say click here! A user with a screen reader tabs from link to link and they will have no idea what will happen when the link is read out of context. Links must be descriptive (describe destination, state the purpose or what will happen). Examples of good links and button text are: “view demo”, “start application”, “enter budget”, “visit Wikipedia”

Also don't label buttons edit or open if there are multiple buttons on a page. Edit what, open what, if there are multiple buttons with the same name how do you know what each will do.

Table Syntax

IF you are using a table for display purposes indicate it with role=presentation and do not use caption or TH. For normal tables the headers need to have TH and table data with TD. Consider adding scope (col, colgroup, row, rowgroup) to headers and a caption. Ensure your content is machine readable by assistive technologies by utilizing the proper semantic structures. Example:

Example: in TH tag add scope="col" or scope="row".

Go to https://webaim.org/techniques/tables/data to learn more.

Nested and closing tags

Nest your tags properly, example if you open a TR close a TR, if you open a SPAN inside a TD make sure you close the SPAN before you close the TD.

Bold and Italics

HTML 5 specification states that important text should be denoted with the strong tag not bold (b tag) and emphasized text should be denoted with the em tag not italic (i tag). Bold and I tags are not perceivable to user agents such as screen readers.

Underlined text

Generally don’t underline text on the web that is not a link. Underlines are strongly perceived to be a clickable link which will confuse and frustrate users. Use strong or em tags to denote importance and avoid the u tag.

Font Tag

The font tag is not supported in HTML5 use semantic elements to indicate emphasis or structure and CSS to handle styling.

Declare language

The system will automatically declare the language of each system generated page, but if you add a static page in a SmartFolder you need to declare the language.

Example in the HTML tag add lang="en" for English and lang="es" for Spanish and lang="fr" for French.

Go to https://www.w3docs.com/learn-html/html-language-codes.html to learn more.

Use title bars (headings) and tabs

Chunk out content using the title bar custom field. These function as headers. This way a user of assistive technology can quickly jump or skip content to get from one section to another. You may also want to opt for longer pages instead of many tabs. Some users find it is easier to scroll down then to navigate using tabs.

Contrast ratio of text and background

The contrast ratio of text to background color must be 4.5 or more to meet WCAG guidelines. You can check color combinations with these tools http://leaverou.github.io/contrast-ratio/ or https://webaim.org/resources/contrastchecker/

Be extra careful if you are placing text over an image as the same rules apply. Visit this article to learn more about changing your systems colors. https://wiki.smartsimple.com/wiki/Branding

Never use color alone to convey meaning

If you add custom content to your system you cannot use color alone to convey meaning as a color-blind user will not be able to see the difference. Make sure any custom content has accompanying text, icons or divide the content up in another way.

Include text alternatives for media

If you are uploading any media to your system, such as an instructions video, you must include closed captioning or a text alternative such as a transcript. You can do this with the multi file upload custom field and the media library settings. If you are uploading static content to a SmartFolder, make sure you include alt tags for your media such as images. Alt text must describe the purpose or intent of the media.

Write for web applications

When writing text instructions or captions or any other text-based content that will appear in your system, keep the following in mind:

• Use the clearest language possible and avoid jargon
• Chunk content into small parts
• Keep sentences under 25 words
• Keep it concise, the more you write, the less likely it is to be read
• Check the reading level of your content. Microsoft Word has a built-in readability check plus there are sites like https://readable.io/ that will check your readability and give you suggestions.
• If you reference a button or link make sure you mention it by name. Do not rely on location or color.

Layout considerations

Do not use location, text size or color alone to mark important information or secondary information. A user with a screen reader is not going to know the second column with smaller text is less important. Whenever possible use a single column layout for usability and to ensure there is no confusion over reading order. This is also helpful for people using screen magnifiers.

Single column layout preferred

CAPTCHA

Completely Automated Public Turing test to tell Computers and Humans Apart (CAPTCHA) is used to ensure robots don’t spam websites with requests. But be judicious when adding CAPTCHA to your system. Although SmartSimple uses the latest reCAPTCHA which is consider accessible, it can be frustrating to users.

Screenshot of reCAPTCHA

Session Timeout

If you choose to setup a session timeout to ensure connections are not left open, remember assistive technology users may take three times longer to complete a task than other users. SmartSimple will automatically alerts users and give them an option to continue working, but try to set your session timeout to something long enough to accommodate all users.

Playing media

If you are using the media library functionality with the multiple file upload field, or if you have added video into other areas of the system, you will notice videos and music do not auto play. Screen-readers navigate by listening, so any sound playing when the page loads will interfere immensely. An exception to this is, if the user specifically requested the video. If you upload your own content or static content into your system ensure it does not auto play. Also, note that content should not flash more than three times in a second as it may induce seizures due to photo-sensitivity.

Page titles

If you are adding static content to a SmartFolder make sure you include a page title tag with some meaningful content.