Smartstaff
2,091
edits
Changes
m
[[File:a11y-disability.png|thumb|none|500px|The four disability classifications (Visual, Hearing, Movement, Cognitive)]]
Visit Related links: * [https://www.canada.ca/en/employment-social-development/programs/accessible-canada.html Canada.ca (Towards an Accessible Canada)] and * [https://parl.ca/DocumentViewer/en/42-1/bill/C-81/royal-assent parl.ca (An Act to ensure a barrier-free Canada)] * [https://www.tbs-sct.canada.ca/pol/doc-eng.aspx?id=23601 tbs-sct.canada.ca (Standard on Web Accessibility)]
[https://developers.google.com/web/tools/lighthouse/ '''Google Lighthouse''']- Free - provides an accessibility audit at the page level.
[[File:a11y-lighthouse.jpg|thumb|none|500px|Screenshot of Google audit]]
Whenever possible use Use a single linear logical layout. Single column layout layouts are preferred for usability and Accessibility.
→California AB 434
=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.Disabilities may be permanent, temporary, or situational. 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|alt=four images of disabilities, Cognitive|500px|The four disability classifications (Visual, Hearing, Movement, Cognitive)]]
===Visual===
===Cognitive===
This classification includes people with developmental delays, dyslexia, autism, ADHD, Down syndrome , anxiety and may be expanded to include non-native speakers and the elderly.
==Assistive Technologies==
Eye tracking devices, switches, sip and puff devices, refreshable braille keyboards, screen readers and screen magnifiers.
[[File:a11y-tech.jpg|thumb|none|alt=photo of Assistive devices|500px|Assistive devices: eye tracking, a switch, sip and puff device, refreshable braille keyboard]]
==Screen Readers==
The most commonly used screen readers are:
* JAWS (Job Access with Speech) used with Chrome: [https://support.freedomscientific.com/Downloads/JAWS%20 Download] | [https://webaim.org/articles/jaws/ Instructions]* NVDA screen reader: [https://www.nvaccess.org/download/ Download] | [https://webaim.org/articles/nvda/%20 Instructions]
* Apple’s OS X VoiceOver (built in screen reader for the Mac)
Visit the [https://www.ada.gov/ ADA website] to learn more.
===California AB 434===
California legislation mandates all state agencies and entities must display signed certification demonstrating the website's adherence to the Web Content Accessibility Guidelines (WCAG) 2.0 or higher.
Visit the [https://leginfo.legislature.ca.gov/faces/billNavClient.xhtml?bill_id=201720180AB434 ca.gov website] to learn more.
===European Accessibility Act (EAA)===
The '''Accessible Canada Act''' (BILL C-81) applies to the government and federally regulated private sector.
===AODA (Ontario, Canada)===
Visit [https://www.aoda.ca/ aoda.ca (Accessibility for Ontarians with Disabilities Act)] and [https://www.ontario.ca/laws/statute/05a11 ontario.ca (Accessibility for Ontarians with Disabilities Act, 2005)] to learn more.
==Accessibility Overlays, Toolbars and Plugins==
Accessibility overlays for websites may be called by different names such as plugins, apps, software, and toolbars. They are marketed as a complete solution for accessibility. Unfortunately, this is not true. An overlay on your system or a public website will not make your system accessible or compliant. An overlay is not a substitute for good design, content, coding, or testing. Some people argue that overlays (toolbars) in and of themselves are discriminatory. Other vendors have created plugins to disable these overlays. People with disabilities find overlays annoying as they effect performance and have the opposite effect of what is intended.
For further reading, here are some articles on the subject:
* [https://overlayfactsheet.com/ Overlay Fact Sheet]
* [https://www.a11yproject.com/posts/should-i-use-an-accessibility-overlay/ Should I use an accessibility overlay? | The A11y Project]
* [https://www.siteimprove.com/glossary/accessibility-overlays/#:~:text=Accessibility%20overlay%20tools%20are%20automated,plugin%2C%20app%2C%20or%20widget A guide to accessibility overlays | Site Improve]
* [https://krisrivenburgh.medium.com/toolbar-plugins-widgets-for-website-accessibility-arent-ada-508-compliant-7e7b649e20ba Toolbar Plugins/Overlay Widgets for Website Accessibility Aren’t ADA Compliant | Kris Rivenburgh]
* [https://karlgroves.com/automated-lies-with-one-line-of-code/ Automated Lies, with one line of code | Karl Groves]
* [https://www.linkedin.com/pulse/dont-get-scammed-why-you-should-avoid-quick-fix-web-alfredo-mercedes#:~:text=Accessibility%20Overlays%20are%20not%20a%20substitute%20for%20good%20design.,exist%20in%20the%20first%20place:// Don't Get Scammed: Why You Should Avoid Quick-fix Overlays For Web Accessibility | Fred Mercedes]
Additional browser extensions exist to block accessibility overlays, such as [https://www.accessibyebye.org/ AccessiByeBye].
==Testing for Accessibility==
[https://wave.webaim.org/extension/ '''Wave toolbar'''] - (Free ) - Browser extension that annotates possible problems inline at the page level.[[File:a11y-wave.png|thumb|none|alt=Screenshot of software|500px|Screenshot of Wave]] [https://accessibilityinsights.io/docs/web/overview/ '''Accessibility Insights for Web'''] (Free) - Browser extension that annotates possible problems inline at the page level[[File:A11y-accessibility-insights.jpg|thumb|none|alt=Screenshot of software|500px|Screenshot of Accessibility Insights]]
[https://accessibilityinsightsdevelopers.iogoogle.com/docsweb/webtools/overviewlighthouse/ '''Accessibility Insights for WebGoogle Lighthouse'''] - (Free ) - browser extension that annotates possible problems inline Provides an accessibility audit at the page level[[File:A11y-accessibilitya11y-insightslighthouse.jpg|thumb|none|alt=Screenshot of software|500px|Screenshot of Accessibility InsightsGoogle audit]]
[https://chrome.google.com/webstore/detail/siteimprove-accessibility/efcfolpjihicnikpmhnmphjhhpiclljc '''Siteimprove'''] (Free) - Browser extension that provides an overview of accessibility issues at the page level
[[File:siteimprove.jpg|thumb|none|alt=Screenshot of software|500px|Screenshot of Siteimprove]]
[https://chrometenon.google.com/webstore/detail/siteimprove-accessibilityio/efcfolpjihicnikpmhnmphjhhpiclljc '''SiteimproveTenon'''] (Trial) - Free - browser extensionDisplays code snippets and guidelines[[File:siteimprovea11y-tenon.jpgpng|thumb|none|alt=Screenshot of software|500px|Screenshot of SiteimproveTenon]]
[https://tenonchrome.iogoogle.com/webstore/detail/axe-devtools-web-accessib/ lhdoppojpmngadmnindnejefpokejbdd '''TenonAXE DevTools'''] (Free) - Trial - display code snippets and guidelines.Browser extension with a paid tier of upgrades[[File:a11y-tenonaxe.png|thumb|none|alt=Screenshot of software|500px|Screenshot of TenonAXE in Google Chrome DevTools]]
===Other Tools===
[https://validator.w3.org/ '''W3C Markup Validator'''] - Check the markup validity of web documents (HTML, XHTML, etc.)
[https://jigsaw.w3.org/css-validator/ '''W3C CSS Validator'''] - Check the markup validity of CSS
[https://accessible-colors.com/ '''Accessible Colors'''] - Check the contrast ratio of text over a background including size and weight.
* Test for [[usability]].
* Consider a 3rd party audit.
==Our Design, Development, and Testing Methodology==
Our '''design''' methodology uses an inclusive framework like WCAG. The design process starts with empathetic research and analysis, followed by the POUR methodology. We ensure our experiences are Perceivable, Operable, Understandable, and Robust. This allows us to pay special attention when designing for people with a diverse range of sight, hearing, movement, and cognitive ability such as dyslexia, autism, and anxiety. This also includes disabilities that are permanent, temporary, or situational. The design methodology and reviews happen before and after changes are made and includes feedback loops with the community as changes are deployed and amended.
Our '''development''' methodology is similar to the design methodology in that it takes into account similar factors. This includes but is not limited to writing accessible code and following best practices as outlined within WCAG and by W3C. We conduct internal code reviews and use automated testing tools such as SonarQube to continuously inspect code.
Our accessibility '''testing''' methodology follows WCAG standards and the standardized baseline testing as prescribed by [https://ictbaseline.access-board.gov/introduction/ Section 508]. In addition, we may retain outside auditors and experts to assist in aspects of the quality assurance process. We also use automated testing tools.
=Accessibility - Advanced=
Links must be descriptive (describe destination, state the purpose or what will happen).
[[File:A11y-links.png|thumb|none|alt=Screenshot of good and bad links|800px|Links and buttons need to describe destination, state the purpose or what will happen.]]
Examples of good link/button text are: "Open budget" "View demo", "Start application", "visit smartsimple.com"
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|alt=Screenshot of table syntax with scope||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.
Don't use '''BR''' tags to create visual space. Wrap your text in a '''P''' tag or a block level element such as a '''DIV''' and add a class or style if needed to control the visual space. The only appropriate place to use a '''BR''' tag would be for poetry, song lyrics and arguably address fields. When a screen reader encounters a '''BR''' tag it will stop reading, requiring the user to move forward to the next line manually. Using a double '''BR''' tag is therefore very cumbersome for users of assistive technology. Visit [https://www.w3.org/TR/2011/WD-html5-author-20110809/the-br-element.html w3.org (the BR Element)]
[[File:A11y-br.png|thumb|none|alt=Screenshot of good and bad usage of the BR tag|800px|Don't use BR tags to create visual space.]]
===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|alt=Screenshot of good and bad nested tags|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. Visit [https://www.w3.org/International/questions/qa-b-and-i-tags www.w3.org (Using B and I tags)]
[[File:A11y-bold.png|thumb|none|alt=Screenshot of bold and strong tags|800px|Use Strong and EM tags not B and I tags.]]
===Underlined Text===
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 instead of many tabs. You may also want to consider enabling or disabling the '''Title Bar Navigation Pane'''. 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|alt=Screenshot of jump to menu|800px|The optional <strong>Title Bar Navigation Pane</strong> as seen on a Level 1 grant.]]
When configuring portals, each portal section '''Title''' will display as an '''H2''' heading. If you want the text specified for '''Caption''' of the '''Main Menu''' link to be displayed as an '''H1''' heading, toggle on '''Display As Title'''.
[[File:2020-a11y-display-as-title.png|thumb|none|alt=Screenshot of headings|800px|The setting to have the Main Menu link displayed as a Heading 1 inside a portal.]]
[[File:2020-a11y-home.png|thumb|none|alt=Screenshot of portal with headings||800px|How the <strong>H1</strong> and <strong>H2</strong> headers look when using the white paper theme in a portal with <strong>Display As Title</strong> toggled on.]]
===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/ Contrast Checker] or [https://webaim.org/resources/contrastchecker/ WebAIM's Contrast Checker]
[[File:A11y-contrast.png|thumb|none|alt=Screenshot of color combinations with contrast ratios|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]].
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.
[[File:A11y-color-alone.png|thumb|none|alt=Screenshot of list using color well and badly|800px|Do not use color alone to convey meaning.]]
===Include Text Alternatives for Media===
'''Alt''' text must describe the purpose or intent of the media.
[[File:A11y-alt-tag.png|thumb|none|alt=Screenshot of software|400px|An image as displayed on a record using the Upload - Multiple Files Storage set to Media Library.]]
===Write for Web Applications===
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.
[[File:a11y-columns.png|thumb|none|alt=Screenshot of single column vs multiple column|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|alt=Screenshot of chart|600px|Single column performance and user confidence.]]
By contrast multiple column forms can lead to:
* Create problems for assistive technology such as screen magnifiers
[[File:A11y-reading-order.png|thumb|none|alt=Screenshot of reading order options|600px|Multiple column forms can cause problems with reading order.]]
Visit [https://baymard.com/blog/avoid-multi-column-forms baymard.com (Avoid Multi-Column Layouts)] for more details on the design issues surrounding multiple column layouts and why they are best avoided.
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|alt=Screenshot of time out screen||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.
