Changes

Jump to: navigation, search

Accessibility

1,514 bytes added, 15:22, 9 September 2019
Table Syntax
=Overview=
This article is about accessibility as it relates to using the SmartSimple system which is a web based process automation 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 contains information related to ensuring your system is accessible.
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 4 four disability classifications]]
===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.
===Hearing===
This classification includes the deaf and those with a range of hearing loss. Many people develop hearing loss due to ageing aging and other factors.
===Movement===
===Cognitive===
This classification includes people with developmental delays, dyslexia, autism, ADHD, down Down syndrome. This classification may be expanded to include Non-native speakers and the elderly.
==Assistive technologies==
* Android Talkback
One of the ways these screen readers differ is that mobile devices typically use a gesture-based user interface where as whereas desktops use a 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 . Visit https://en.wikipedia.org/wiki/Web_accessibility for a more information.
===WCAG===
Web Content Accessibility Guidelines or '''WCAG ''' for short. Is , 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 4 four guiding principles in WCAG.
# Is it Perceivable: Can I perceive the Interface and information presented?
===WAI-ARIA===
Web Accessibility Initiative - Accessible Rich Internet Applications or '''ARIA ''' for short.'''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.
===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.
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.
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 Actor '''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:
==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.
You can download our Voluntary Product Accessibility Template https://www.smartsimple.com/agreements.html
===Automated testing==='''Wave toolbar''' - annotates possible problems inline and recommended fix. https://wave.webaim.org/extension/There are a number [[File:a11y-wave.png|thumb|none|500px|Screenshot of free Wave]]  '''Tenon''' - display code snippets, guidelines and easy to use tools you can use to test your configuration of the SmartSimple systemrecommended fix. https://tenon.io/Here are 3 popular browser extensions[[File:a11y-tenon.png|thumb|none|500px|Screenshot of Tenon]] 
Wave toolbar: annotates possible problems inline'''Google Lighthouse''' - provides an accessibility audit and recommended fix. https://wavedevelopers.webaimgoogle.orgcom/web/tools/extensionlighthouse/[[File:a11y-wavelighthouse.pngjpg|thumb|none|500px|Screenshot of wave toolbarGoogle audit]]
Tenon: display code snippets, guidelines and recommended fix. ===Other Tools===https://tenonvalidator.iow3.org/[[File:a11y-tenonCheck the markup validity of web documents (HTML, XHTML, etc.png|thumb|none|500px|Screenshot of tenon]])
Google Lighthouse: does an accessibility audit. https://developers.googlewebaim.comorg/webresources/toolscontrastchecker/lighthouse/[[File:a11y-lighthouseCheck the contrast ratio of foreground and background color.jpg|thumb|none|500px|Screenshot of Googles audit]](colored text over a colored background)
==Beyond automated testing==
=Accessibility - Advanced=
If you are a SmartSimple System administrator 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”'''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”
Example: [# Visit our website]
===Form tables properly===Mark table headers with TH and table data with TD. Consider adding scope (col, colgroup, row, rowgroup) to headers and Also don't label buttons edit or open if there are multiple buttons on a caption. Ensure your content is machine readable by assistive technologies by utilizing the proper semantic structurespage. Also make sure you nest your tags properlyEdit what, example if you open a TR close a TRwhat, if you open a SPAN inside a TD make sure you close there are multiple buttons with the SPAN before same name how do you close the TDknow what each will do. Example:
{||+Birthdays===Table Syntax===|-! scopeIF you are using a table for display purposes indicate it with '''role="col"|Name! 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"|Birthday, 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="rowcol"|Jackie||April 5|-! ''' or '''scope="row"|Beth||January 14|}'''.
Go to https://webaim.org/techniques/tables/data to learn more.
===Declare languageNested and closing tags===The system will automatically declare the language of each system generated pageNest your tags properly, example if you open a TR close a TR, but if you add open a static page in SPAN inside a SmartFolder TD make sure you need 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 declare the languageuser agents such as screen readers.
English===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.
<pre> </pre>===Font Tag===The font tag is not supported in HTML5 use semantic elements to indicate emphasis or structure and CSS to handle styling.
Spanish===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.
<pre> </pre>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.
===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. 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
===Don't only 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===
* 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===
===CAPTHCACAPTCHA===Completely Automated Public Turing test to tell Computers and Humans Apart (CAPTCHA).Is 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.
[[File:a11y-recapthca.png|thumb|none|500px|Screenshot of reCAPTCHA]]
===Playing media===
If you are using the media library functionality with the multiple file upload field, or if you have injected 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 would 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 photosensitivityphoto-sensitivity.
===Page titles===
Smartstaff, administrator
3,316
edits

Navigation menu