Smartstaff, administrator
3,574
edits
Changes
→Table Syntax
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===
Example: in '''TH''' tag add '''scope="col"''' or '''scope="row"'''.
===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 Spanishand '''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 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===
===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.
[[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===
