Difference between revisions of "Accessibility"

(Other tools)
m (Accessibility - Advanced)
 
(91 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
=Overview=
 
=Overview=
This article is about accessibility as it relates to the SmartSimple platform. 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 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.
 
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.
 
If you have questions or encounter anything that seems like an accessibility issue, please contact our support team.
 +
 +
View our [https://www.smartsimple.com/agreements/ voluntary product accessibility template]
  
 
=Accessibility - Essentials=
 
=Accessibility - Essentials=
 +
 +
==Accessibility Mode==
 +
We highly recommend everyone toggle on accessibility mode on your system.
 +
Enabling Accessibility Mode ensures maximum compliance with accessibility standards for all users, such as ensuring interface elements are keyboard accessible.
 +
 +
Toggle this setting on by going to '''Menu''' icon > '''Global Settings''' > '''Branding''' tab > then toggle on '''Enable Accessibility Mode'''.
 +
 
==Disabilities defined==
 
==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.
 
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.
 
It is estimated that approximately 1 in 5 people have a disability. Disabilities are generally classified into 4 areas.
  
[[File:a11y-disability.png|thumb|none|500px|The four disability classifications]]
+
[[File:a11y-disability.png|thumb|none|500px|The four disability classifications (Visual, Hearing, Movement, Cognitive)]]
  
 
===Visual===
 
===Visual===
This classification includes people with low vision and the completely blind as well as people with color blindness or other visual impairments. Many people develop vision loss due to aging and other factors.
+
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===
 
===Hearing===
This classification includes the deaf and those with a range of hearing loss. Many people develop hearing loss due to aging and other factors.
+
This classification includes the deaf and those with a range of hearing loss.
  
 
===Movement===
 
===Movement===
This classification includes people with Cerebral Palsy, Quadriplegia and a range of restricted movement. Many people develop arthritis and restricted movement due to aging and other factors.
+
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===
 
===Cognitive===
This classification includes people with developmental delays, dyslexia, autism, ADHD, Down syndrome. This classification may be expanded to include Non-native speakers and the elderly.
+
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==
Line 38: Line 47:
 
* Android Talkback
 
* Android Talkback
  
One of the ways these screen readers differ is that mobile devices typically use a gesture-based user interface whereas desktops use a keyboard-based interface.
+
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==
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.
+
Guidelines and legislation are constantly evolving and vary depending on your locality. Below are some prominent guidelines and legislation. Learn more about [https://en.wikipedia.org/wiki/Web_accessibility web accessibility] on The Other Wiki for more details.
  
 
===WCAG===
 
===WCAG===
Web Content Accessibility Guidelines or '''WCAG''' for short, is a set of international standards, published by the World Wide Web Consortium (W3C).
+
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 criteria. Essentially there are four guiding principles in WCAG.
These standards contain a set of guidelines with testable success criterion.
 
Essentially there are four guiding principles in WCAG.
 
  
 
# Is it Perceivable: Can I perceive the Interface and information presented?
 
# Is it Perceivable: Can I perceive the Interface and information presented?
Line 53: Line 60:
 
# Is it Robust: Can I use a variety of assistive technologies with the system?
 
# 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.
+
Visit the [https://www.w3.org/WAI/standards-guidelines/wcag/ W3C's page on WCAG] to learn more.
  
 
===WAI-ARIA===
 
===WAI-ARIA===
Web Accessibility Initiative - Accessible Rich Internet Applications or '''ARIA''' for short.
+
'''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.
'''Aria''' is a set of specific recommended standard for developers. ARIA is generally intended to increase accessibility of web pages with dynamic content and newer user interface components.
 
  
Visit https://www.w3.org/WAI/standards-guidelines/aria/ to learn more.
+
Visit [https://www.w3.org/WAI/standards-guidelines/aria/ W3C's page on ARIA] to learn more.
  
 
===Section 508 (USA)===
 
===Section 508 (USA)===
Section 508 of the U.S. Rehabilitation Act generally requires federal agencies to provide information in an accessible way.
+
'''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.
+
Visit [https://www.section508.gov/ Section 508] to learn more.
  
 
===ADA (USA)===
 
===ADA (USA)===
Americans with Disabilities Act (ADA) generally requires US-based organizations to provide access
+
'''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.
 
to information for people with disabilities and prohibits discrimination on the basis of disability.
  
Visit https://www.ada.gov/ to learn more.
+
Visit [https://www.ada.gov/ the ADA website]to learn more.
  
 
===EU Web Accessibility Directive===
 
===EU Web Accessibility Directive===
European Union (EU) Directive on the Accessibility of Websites and Mobile Applications
+
European Union (EU) Directive on the Accessibility of Websites and Mobile Applications Generally states in regards to web applications that Public sector organisations across the EU must adhere to WCAG standards. The European standard for technology accessibility in the public sector is known as EN 301 549.
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.
+
Visit [http://nda.ie/Publications/Communications/EU-Web-Accessibility-Directive/ National Disability Authority website] to learn more.
  
 
===AODA (Ontario, Canada)===
 
===AODA (Ontario, Canada)===
Accessibility for Ontarians with Disabilities Act or '''AODA''' for short.
+
'''Accessibility for Ontarians with Disabilities Act''' or '''AODA''' generally states you must adhere to WCAG guidelines.
Visit https://www.aoda.ca/ and https://www.ontario.ca/laws/statute/05a11 to learn more.
+
Visit [https://www.aoda.ca/ the official Accessibility for Ontarians with Disabilities Act website] and [https://www.ontario.ca/laws/statute/05a11 the Ontario government page] to learn more.
  
 
==Testing for accessibility==
 
==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.
+
Platform3 is tested for accessibility by a 3rd party (a completely blind computer user) and tested by SmartSimple employees. Primary testing is done with the '''JAWS''' screen reader on desktop computers.
  
Download our Voluntary Product Accessibility Template https://www.smartsimple.com/agreements.html
+
[https://cdn2.hubspot.net/hubfs/6704953/1_-_SmartSimple_Voluntary_Product_Accessibility_Template.pdf Download our Voluntary Product Accessibility Template (PDF)]
  
 
===Automated testing===
 
===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:
+
There are a number of free tools you can use to test your system. Here are a few popular browser extensions:
  
  
'''Wave toolbar''' - annotates possible problems inline and recommended fix. https://wave.webaim.org/extension/
+
[https://wave.webaim.org/extension/ '''Wave toolbar'''] - annotates possible problems inline.
 
[[File:a11y-wave.png|thumb|none|500px|Screenshot of Wave]]
 
[[File:a11y-wave.png|thumb|none|500px|Screenshot of Wave]]
  
  
'''Tenon''' - display code snippets, guidelines and recommended fix. https://tenon.io/
+
[https://tenon.io/ '''Tenon'''] - display code snippets and guidelines.  
 
[[File:a11y-tenon.png|thumb|none|500px|Screenshot of Tenon]]
 
[[File:a11y-tenon.png|thumb|none|500px|Screenshot of Tenon]]
  
  
'''Google Lighthouse''' - provides an accessibility audit and recommended fix. https://developers.google.com/web/tools/lighthouse/
+
[https://developers.google.com/web/tools/lighthouse/ '''Google Lighthouse''']- provides an accessibility audit.
 
[[File:a11y-lighthouse.jpg|thumb|none|500px|Screenshot of Google audit]]
 
[[File:a11y-lighthouse.jpg|thumb|none|500px|Screenshot of Google audit]]
  
 
===Other Tools===
 
===Other Tools===
https://validator.w3.org/ - Check the markup validity of web documents (HTML, XHTML)
+
[https://validator.w3.org/ '''W3C Markup Validator'''] - Check the markup validity of web documents (HTML, XHTML, etc.)
 +
 
 +
[https://webaim.org/resources/contrastchecker/ '''Web Accessibility Contrast Checker'''] - Check the contrast ratio of foreground and background color. (colored text over a colored background)
  
 
==Beyond automated testing==
 
==Beyond automated testing==
If you want to go beyond automated testing tools, you may consider the following:
+
Automated tools may present false positives and may not catch usability errors. As such you may want to:
  
* Create your own user group of testers. A group of five people testing often will yield good results.
+
* Create your own user group of testers (A group of five people is often recommended as optimal for testing).
* Look into getting a 3rd party audit.
+
* Test for [[usability]].
 +
* Consider a 3rd party audit.
  
 
=Accessibility - Advanced=
 
=Accessibility - Advanced=
If you are a SmartSimple System Administrator you have a role to play in ensuring the configuration of your system is accessible.
+
If you are a System Administrator you need to pay special attention to ensuring the configuration of your system remains accessible. Here is some important information to note when you modify your system.
Here is a list of important information to note when you setup or modify any SmartSimple system.
 
  
 
===All links and buttons must be descriptive===
 
===All links and buttons must be descriptive===
If you are adding a link or a button inside your system never say '''click here'''!
+
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 will have no idea what will happen when the link is read out of context.
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).
 
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”
 
  
===Form tables properly===
+
[[File:A11y-links.png|thumb|none|800px|Links and buttons need to describe destination, state the purpose or what will happen.]]
Mark table headers with '''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. Also make sure you 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. Example:
 
  
Example: in '''TH''' tag add '''scope="col"''' or '''scope="row"'''.
+
Examples of good link/button text are: “view demo”, “start application”, “enter budget”, “visit smartsimple.com”
  
Go to https://webaim.org/techniques/tables/data to learn more.
+
Also do not use '''open''' as a button label especially if there are multiple buttons on a page. If you are opening or editing something, be sure to describe or accurately label what you are opening. That way, your screen reader users will know what each button does.
 +
 
 +
===Table Syntax and adding HTML===
 +
If you are entering HTML into your system and adding a table for display purposes, consider indicating it with '''role=presentation'''. Tables headers should use '''TH''' and table data should use '''TD'''. You may also wish to consider adding '''scope''' (col, colgroup, row, rowgroup) to headers. Ensuring you are using proper semantic structures will ensure your content is machine readable by assistive technologies.
 +
 
 +
Secondly make sure you open and close your tags properly. If you open a '''TR''', '''TH''', '''TD''' or '''DIV''' make sure you have a closing '''TR''', '''TH''', '''TD''' or '''DIV'''. Just because it looks right in your browser does not mean it will be machine readable by assistive technology.
 +
 
 +
[[File:A11y-scope.png|thumb|none|400px|Use proper semantic structures if you add HTML to your system.]]
 +
 
 +
Visit [https://webaim.org/techniques/tables/data WebAIM's page on creating accessible tables] to learn more.
 +
 
 +
===Nested tags===
 +
HTML tags should be '''nested''' in a proper order, meaning that the tag opened most recently is always the next tag to close. Example if you open a '''SPAN''' inside a '''DIV''' make sure you close the '''SPAN''' before you close the '''DIV'''.
 +
 
 +
[[File:A11y-nested.png|thumb|none|800px|Nest tags in proper order.]]
 +
 
 +
===Bold and Italics===
 +
HTML5 specifications state that important text should be denoted with the '''STRONG''' tag not the '''B''' tag for bold text. In addition, text should be denoted with the '''EM''' tag not the '''I''' tag for italicized text. Avoid using the b and i tags as they are not perceivable to user agents like screen readers.
 +
 
 +
 
 +
[[File:A11y-bold.png|thumb|none|800px|Use Strong and EM tags not B and I tags.]]
 +
 
 +
===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''' or header 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===
 
===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.
+
Your system will automatically declare the language on system generated pages, but if you add a static content or a page in a [[Smart Folder|SmartFolder]] you will need to declare the language.
  
Example in the '''HTML''' tag add '''lang="en"''' for English and '''lang="es"''' for Spanish.
+
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.
+
Visit [https://www.w3docs.com/learn-html/html-language-codes.html ISO Language Codes] to learn more.
  
 
===Use title bars (headings) and tabs===
 
===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.
+
Chunk like content under the '''Layout – Title bar''' custom field to make it easier to navigate to sets of content. The '''layout – title bar''' custom field is '''H2''' (heading level 2). In contrast the name field at the top of object pages is an '''H1''' (heading level 1). By using the title bar field, people using assistive technology can quickly jump or skip content to get from one header (section of content) to another.
 +
 
 +
Note: Many users prefer longer pages over many tabs. Some users may find it difficult to navigate between tabs, especially scrolling tabs when there are more tabs then can fit on screen. Also, your users may prefer to scroll down over navigating left to right as this a common practice on mobile devices. For these reasons your users may prefer longer pages with title bars over many tabs. You may also want to consider enabling the '''Title Bar Navigation Pane'''. Enabling this setting will display a navigation pane on your forms that allows your users to easily navigate between various titled sections of a form. This setting is found under menu icon > global settings > branding tab.
 +
 
 +
[[File:2020-07-ticket-111287-1.png|thumb|none|800px|The optional Title Bar Navigation Pane as seen on a level 1 like a grant.]]
  
 
===Contrast ratio of text and background===
 
===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 this tool. http://leaverou.github.io/contrast-ratio/
+
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/ Contrast Checker] or [https://webaim.org/resources/contrastchecker/ WebAIM's Contrast Checker]
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
+
[[File:A11y-contrast.png|thumb|none|400px|Contrast ratio of text over different backgrounds and the WCAG requirements]]
 +
 
 +
Be extra careful if you are placing text over an image as the same rules apply. System colors can be modified by changing the [[Branding|branding]].
 +
 
 +
===Never use color alone to convey meaning===
 +
When adding content to your system be mindful you cannot use color alone to convey meaning as a color-blind or visually impaired user may not be able to detect the difference. Make sure content you add has accompanying text, icons or divide the content up in a meaningful way.
  
===Don't only use color to convey meaning===
+
[[File:A11y-color-alone.png|thumb|none|800px|Do not 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 or divide the content up in another way.
 
  
 
===Include text alternatives for media===
 
===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.
+
When you upload media such as images to the '''Upload - Multiple Files Storage''' custom field set to '''Enable Media library'''. The '''Alt''' tag will be the title which the user can edit after the upload. By default, the '''title''' and '''Alt''' tag use the file name. Screen readers and other assistive technology rely on this '''Alt''' text to describe an image for the visually impaired. It’s also useful to have if the image fails to load.
 +
 
 +
When uploading video to the '''Upload - Multiple Files Storage''' custom field set to '''Enable Media library''', if you enable '''Closed Captioning''' users can upload closed captioning files in multiple languages.
 +
 
 +
If you are adding custom content in a SmartFolder and calling it elsewhere in your system, make sure you include '''alt''' tags or transcripts for your media in the HTML.
 +
 
 +
'''Alt''' text must describe the purpose or intent of the media.
 +
 
 +
[[File:A11y-alt-tag.png|thumb|none|400px|An image as displayed on a record using the Upload - Multiple Files Storage set to Media Library.]]
  
 
===Write for web applications===
 
===Write for web applications===
Line 158: Line 203:
 
* Keep sentences under 25 words
 
* Keep sentences under 25 words
 
* Keep it concise, the more you write, the less likely it is to be read
 
* 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.
+
* Check the reading level of your content. Microsoft Word has a built-in readability check plus there are sites like [https://readable.io/ Readable] 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.
 +
 
 +
Here are some articles on writing for web applications:
 +
 
 +
* [https://uxplanet.org/16-rules-of-effective-ux-writing-2a20cf85fdbf 16 Rules of Effective UX Writing - UX Planet]
 +
* [https://www.nngroup.com/topic/writing-web/ Writing for Web Articles & Videos- Nielson Norman Group]
  
 
===Layout considerations===
 
===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.
 
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.
 
[[File:a11y-columns.png|thumb|none|500px|Single column layout preferred]]
 
  
 +
Whenever possible use a single column layout for usability and Accessibility.
  
 +
[[File:a11y-columns.png|thumb|none|600px|Single column layout preferred]]
 +
 +
Some studies suggest single column forms can be filled in faster and people feel more comfortable filling them in.
 +
 +
[[File:A11y-single-column-performance.jpg|thumb|none|600px|Single column performance and user confidence.]]
 +
 +
By contrast multiple column forms can lead to:
 +
 +
* Skipped fields
 +
* Data entered into wrong fields
 +
* Confusion over reading order
 +
* Create problems for assistive technology such as screen magnifiers
 +
 +
[[File:A11y-reading-order.png|thumb|none|600px|Multiple column forms can cause problems with reading order.]]
 +
 +
[https://baymard.com/blog/avoid-multi-column-forms This helpful article] provides further details on the design issues surrounding multiple column layouts and why they are best avoided.
  
 
===CAPTCHA===
 
===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 all users.
+
'''CAPTCHA''' or '''Completely Automated Public Turing test to tell Computers and Humans Apart''' is a challenge–response test used to determine whether or not the user is human. '''CAPTCHA''' is intended to prevent spam. Spam, in this regard is considered any kind of unwanted, unsolicited digital communication, typically advertising entered into online forms by bots.
 +
 
 
[[File:a11y-recapthca.png|thumb|none|500px|Screenshot of reCAPTCHA]]
 
[[File:a11y-recapthca.png|thumb|none|500px|Screenshot of reCAPTCHA]]
  
===Session Timeout===
+
Although our system uses the latest '''CAPTCHA''' which is consider accessible, CAPTCHAs are criticized in both the Accessibility and User Experience communities. CAPTCHAs are criticized primarily because they are frustrating to use as they add a hurdle to the user’s process.
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.
+
 
 +
Your system comes with both the Google reCAPTCHA and an alternative CAPTCHA. The alternative CAPTCHA is intended for jurisdictions that do not allow communication with Google CAPTCHA servers.
 +
 
 +
You can choose where, when and which CAPTCHAs will appear in your system by going to the '''Menu icon > Global Settings > Security Tab'''.
 +
 
 +
===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. As such you might want to consider a timeout of 90 minutes or something between 30 minutes and 3 hours depending on your users and the type of data in your system.
 +
 
 +
If you use the session timeout, your users will get an alert with an option to continue working if they have been inactive for the set time.
 +
 
 +
[[File:A11y-timeout.png|thumb|none|400px|The display of the session timeout alert seen by users if they have been inactive for the specified time.]]
 +
 
 +
The session timeout settings are located Menu Icon > Global Settings > Security Tab.
 +
 
 +
===Playing media and photo-sensitivity===
 +
If you are using the '''Upload - Multiple Files Storage''' custom field with the media library functionality enabled, your users can choose to play that video and audio. Videos and music intentionally 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.
  
===Playing media===
+
If you add your own media content and supporting HTML into your system, ensure you do not auto play any video or audio media. Avoid using blinking or flashing media that flashes more than 3 times a second as this can induce seizures in users with photosensitivity or epilepsy. See [https://www.w3.org/TR/UNDERSTANDING-WCAG20/seizure-does-not-violate.html this WCAG article] for more details.  
If you are using the media library functionality with the multiple file upload field, or if you have injected 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 would 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 photosensitivity.
 
  
===Page titles===
 
If you are adding static content to a SmartFolder make sure you include a page title tag with some meaningful content.
 
  
 
[[Category:Interface]]
 
[[Category:Interface]]

Latest revision as of 10:16, 24 September 2020

Contents

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

Accessibility Mode

We highly recommend everyone toggle on accessibility mode on your system. Enabling Accessibility Mode ensures maximum compliance with accessibility standards for all users, such as ensuring interface elements are keyboard accessible.

Toggle this setting on by going to Menu icon > Global Settings > Branding tab > then toggle on Enable Accessibility Mode.

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. Learn more about web accessibility on The Other Wiki for more details.

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 criteria. 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 the W3C's page on 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 W3C's page on 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 Section 508 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 the ADA websiteto learn more.

EU Web Accessibility Directive

European Union (EU) Directive on the Accessibility of Websites and Mobile Applications Generally states in regards to web applications that Public sector organisations across the EU must adhere to WCAG standards. The European standard for technology accessibility in the public sector is known as EN 301 549.

Visit National Disability Authority website to learn more.

AODA (Ontario, Canada)

Accessibility for Ontarians with Disabilities Act or AODA generally states you must adhere to WCAG guidelines. Visit the official Accessibility for Ontarians with Disabilities Act website and the Ontario government page to learn more.

Testing for accessibility

Platform3 is tested for accessibility by a 3rd party (a completely blind computer user) and tested by SmartSimple employees. Primary testing is done with the JAWS screen reader on desktop computers.

Download our Voluntary Product Accessibility Template (PDF)

Automated testing

There are a number of free tools you can use to test your system. Here are a few popular browser extensions:


Wave toolbar - annotates possible problems inline.

Screenshot of Wave


Tenon - display code snippets and guidelines.

Screenshot of Tenon


Google Lighthouse- provides an accessibility audit.

Screenshot of Google audit

Other Tools

W3C Markup Validator - Check the markup validity of web documents (HTML, XHTML, etc.)

Web Accessibility Contrast Checker - Check the contrast ratio of foreground and background color. (colored text over a colored background)

Beyond automated testing

Automated tools may present false positives and may not catch usability errors. As such you may want to:

  • Create your own user group of testers (A group of five people is often recommended as optimal for testing).
  • Test for usability.
  • Consider a 3rd party audit.

Accessibility - Advanced

If you are a System Administrator you need to pay special attention to ensuring the configuration of your system remains accessible. Here is some important information to note when you modify your 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 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).

Links and buttons need to describe destination, state the purpose or what will happen.

Examples of good link/button text are: “view demo”, “start application”, “enter budget”, “visit smartsimple.com”

Also do not use open as a button label especially if there are multiple buttons on a page. If you are opening or editing something, be sure to describe or accurately label what you are opening. That way, your screen reader users will know what each button does.

Table Syntax and adding HTML

If you are entering HTML into your system and adding a table for display purposes, consider indicating it with role=presentation. Tables headers should use TH and table data should use TD. You may also wish to consider adding scope (col, colgroup, row, rowgroup) to headers. Ensuring you are using proper semantic structures will ensure your content is machine readable by assistive technologies.

Secondly make sure you open and close your tags properly. If you open a TR, TH, TD or DIV make sure you have a closing TR, TH, TD or DIV. Just because it looks right in your browser does not mean it will be machine readable by assistive technology.

Use proper semantic structures if you add HTML to your system.

Visit WebAIM's page on creating accessible tables to learn more.

Nested tags

HTML tags should be nested in a proper order, meaning that the tag opened most recently is always the next tag to close. Example if you open a SPAN inside a DIV make sure you close the SPAN before you close the DIV.

Nest tags in proper order.

Bold and Italics

HTML5 specifications state that important text should be denoted with the STRONG tag not the B tag for bold text. In addition, text should be denoted with the EM tag not the I tag for italicized text. Avoid using the b and i tags as they are not perceivable to user agents like screen readers.


Use Strong and EM tags not B and I tags.

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 or header 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

Your system will automatically declare the language on system generated pages, but if you add a static content or a page in a SmartFolder you will 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.

Visit ISO Language Codes to learn more.

Use title bars (headings) and tabs

Chunk like content under the Layout – Title bar custom field to make it easier to navigate to sets of content. The layout – title bar custom field is H2 (heading level 2). In contrast the name field at the top of object pages is an H1 (heading level 1). By using the title bar field, people using assistive technology can quickly jump or skip content to get from one header (section of content) to another.

Note: Many users prefer longer pages over many tabs. Some users may find it difficult to navigate between tabs, especially scrolling tabs when there are more tabs then can fit on screen. Also, your users may prefer to scroll down over navigating left to right as this a common practice on mobile devices. For these reasons your users may prefer longer pages with title bars over many tabs. You may also want to consider enabling the Title Bar Navigation Pane. Enabling this setting will display a navigation pane on your forms that allows your users to easily navigate between various titled sections of a form. This setting is found under menu icon > global settings > branding tab.

The optional Title Bar Navigation Pane as seen on a level 1 like a grant.

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: Contrast Checker or WebAIM's Contrast Checker

Contrast ratio of text over different backgrounds and the WCAG requirements

Be extra careful if you are placing text over an image as the same rules apply. System colors can be modified by changing the branding.

Never use color alone to convey meaning

When adding content to your system be mindful you cannot use color alone to convey meaning as a color-blind or visually impaired user may not be able to detect the difference. Make sure content you add has accompanying text, icons or divide the content up in a meaningful way.

Do not use color alone to convey meaning.

Include text alternatives for media

When you upload media such as images to the Upload - Multiple Files Storage custom field set to Enable Media library. The Alt tag will be the title which the user can edit after the upload. By default, the title and Alt tag use the file name. Screen readers and other assistive technology rely on this Alt text to describe an image for the visually impaired. It’s also useful to have if the image fails to load.

When uploading video to the Upload - Multiple Files Storage custom field set to Enable Media library, if you enable Closed Captioning users can upload closed captioning files in multiple languages.

If you are adding custom content in a SmartFolder and calling it elsewhere in your system, make sure you include alt tags or transcripts for your media in the HTML.

Alt text must describe the purpose or intent of the media.

An image as displayed on a record using the Upload - Multiple Files Storage set to Media Library.

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 Readable 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.

Here are some articles on writing for web applications:

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 Accessibility.

Single column layout preferred

Some studies suggest single column forms can be filled in faster and people feel more comfortable filling them in.

Single column performance and user confidence.

By contrast multiple column forms can lead to:

  • Skipped fields
  • Data entered into wrong fields
  • Confusion over reading order
  • Create problems for assistive technology such as screen magnifiers
Multiple column forms can cause problems with reading order.

This helpful article provides further details on the design issues surrounding multiple column layouts and why they are best avoided.

CAPTCHA

CAPTCHA or Completely Automated Public Turing test to tell Computers and Humans Apart is a challenge–response test used to determine whether or not the user is human. CAPTCHA is intended to prevent spam. Spam, in this regard is considered any kind of unwanted, unsolicited digital communication, typically advertising entered into online forms by bots.

Screenshot of reCAPTCHA

Although our system uses the latest CAPTCHA which is consider accessible, CAPTCHAs are criticized in both the Accessibility and User Experience communities. CAPTCHAs are criticized primarily because they are frustrating to use as they add a hurdle to the user’s process.

Your system comes with both the Google reCAPTCHA and an alternative CAPTCHA. The alternative CAPTCHA is intended for jurisdictions that do not allow communication with Google CAPTCHA servers.

You can choose where, when and which CAPTCHAs will appear in your system by going to the Menu icon > Global Settings > Security Tab.

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. As such you might want to consider a timeout of 90 minutes or something between 30 minutes and 3 hours depending on your users and the type of data in your system.

If you use the session timeout, your users will get an alert with an option to continue working if they have been inactive for the set time.

The display of the session timeout alert seen by users if they have been inactive for the specified time.

The session timeout settings are located Menu Icon > Global Settings > Security Tab.

Playing media and photo-sensitivity

If you are using the Upload - Multiple Files Storage custom field with the media library functionality enabled, your users can choose to play that video and audio. Videos and music intentionally 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 add your own media content and supporting HTML into your system, ensure you do not auto play any video or audio media. Avoid using blinking or flashing media that flashes more than 3 times a second as this can induce seizures in users with photosensitivity or epilepsy. See this WCAG article for more details.