We implement 508 and WCAG compliant websites so that people with all types of disabilities, whether it be physical, mental, or visual impairment, have access to our sites.
How we do this
- We use base themes which strive to meet the W3C's WCAG 2.0 or above. This will help satisfy the requirements of the ADA.
- We implement good SEO structures (which mimic good ADA structures).
- We implement responsive design strategies that that can present complex data in hierarchical structures, capable of being navigated by audio cues.
- We believe that users should be able to personalize how content is presented. We enable users to change color schemes and text size displays allow them to have a better user experience.
- We test sites using a combination of automated and manual testing.
- We use good practices in using semantic markup in page templates and report design to define content hierarchy (e.g. primary head is h1, secondary head is h2, etc.).
When we do this
- We strive to produce work that is accessible to people of all abilities, regardless of client. However, we recognize that the level of accessibility compliance and prioritization can be influenced by budgetary and contractual implications.
- We aim to do accessibility work continuously, as part of our agile process. Accessibility scans should be performed on a per-ticket basis and signed off on before work is considered complete.
- Accessibility should NOT BE left until the end of a project.
General Accessibility Guidelines
- Form elements are built with meaningful labels and form buttons include descriptive values.
- Images should have meaningful alternative text (alt tag) by default. We recommend making alt tags manditory for content editors.
- Decorative images or images with no content use should either have a null alt tag (alt="") or rendered as CSS background images.
- Color should not be used as the sole method of conveying content or distinguishing visual elements.
- Color alone is not used to distinguish links from surrounding text unless the luminance contrast between the link and the surrounding text is at least 3:1 and an additional differentiation (e.g., it becomes underlined) is provided when the link is hovered over or receives focus.
- The page should be readable and functional when the text size is doubled. We need to use rem font-sizing to make the text scales as expected when the web-page is zoomed-in. Also provides reliable text-resizing in smaller browser widths.
- Need to have adequate line spacing (at least 1/2 the height of the text) and paragraph spacing (1.5 times line spacing).
Making Accessible Links
- Links should be meaningful on their own. Don't use words like: "link", "click here" or "read more".
- Don't capitalize links: Some screen readers read capitalized text letter by letter.
- Avoid ASCII characters. Text alternatives are recommended for ASCII smiley faces. If a link involves dashes (17 - 18 years), it is better to replace the hyphen with "to". Screen-readers do not read all ASCII characters.
- Avoid using URLs as link text. Screen readers read URLs letter by letter. Use descriptive link text.
- Keep link text concise.
- Generally, restrict the number of text links on a page. An exception to this rule is pagination/alphabetized links and these should include further contextual information/link text.
- Be aware of pagination and alphabetized links: To make pagination links accessible, add text like "Go to page 1 | 2 | 3 .." before the pagination links. For alphabetized links (eg. glossary links), add a descriptive title before the links. See attached screenshot.
- Always alert the user when opening new windows. It is important to alert visually-challenged users that a new window has been opened. The best way to indicate that a link opens in a new window is to add text to the link, such as "(opens in new window)".
- Be mindful when using anchor links. Adding descriptive text like Jump to.. or On this page will help indicate that the link is within the same page.
- Further reading: https://www.sitepoint.com/15-rules-making-accessible-links/
Extensions for testing accessibility: