Smartstaff
2,014
edits
Changes
m
Go to Visit [https://webaim.org/techniques/tables/data WebAIM's page on creating accessible tables] to learn more.
HTML 5 specification states HTML5 specifications state that important text should be denoted with the '''STRONG''' tag not bold (the '''B''' tag) and emphasized for bold text. In addition, text should be denoted with the '''EM''' tag not italic (the '''I''' tag)for italicized text. Bold Avoid using the b and I i tags as they are not perceivable to user agents like screen readers.
Go to Visit [https://www.w3docs.com/learn-html/html-language-codes.html ISO Language Codes] to learn more.
Here is an article on avoiding multiple column layouts [https://baymard.com/blog/avoid-multi-column-formsThis helpful article] provides further details on the design issues surrounding multiple column layouts and why they are best avoided.
If you add your own media content and supporting HTML into your system, ensure you do not auto play any video or audio media. Also, note that media content should not flash more than three times in a second as it may induce seizures due to photo-sensitivity.
→Accessibility - Advanced
===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 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 If you are opening or editing something say , be sure to describe or accurately label what you are opening. That way , your screen reader users will know what each button will dodoes.
===Table Syntax and adding HTML===
[[File:A11y-scope.png|thumb|none|400px|Use proper semantic structures if you add HTML to your system.]]
===Nested tags===
===Bold and Italics===
[[File:A11y-bold.png|thumb|none|800px|Use Strong and EM tags not B and I tags.]]
===Font tag===
The font tag is not supported in HTML5 use . 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 [[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 and '''lang="fr"''' for French.
===Use title bars (headings) and 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/ Contrast Checker] or [https://webaim.org/resources/contrastchecker/WebAIM's Contrast Checker]
[[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.Visit this article to learn more about System colors can be modified by changing your systems colors. https://wikithe [[Branding|branding]].smartsimple.com/wiki/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 another a meaningful way.
[[File:A11y-color-alone.png|thumb|none|800px|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. So, make sure you name files appropriatelyScreen 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 htmlHTML.
'''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.]]
* 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/ 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-2a20cf85fdbf16 Rules of Effective UX Writing - UX Planet]* [https://www.nngroup.com/topic/writing-web/Writing for Web Articles & Videos- Nielson Norman Group]
===Layout considerations===
[[File:A11y-reading-order.png|thumb|none|600px|Multiple column forms can cause problems with reading order.]]
===CAPTCHA===
[[File:a11y-recapthca.png|thumb|none|500px|Screenshot of reCAPTCHA]]
Although your 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.
===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 [https://www.w3.org/TR/UNDERSTANDING-WCAG20/seizure-does-not-violate.html this WCAG article] for more details.
[[Category:Interface]]
