Making Your Website More ADA Accessible
ADA Accessibility & Compliance
Accessible websites can be used by everyone, including visitors who use screen readers and other assistive technologies. QiSites gives you the ability to customize your website, so it is possible for you to introduce elements that are not fully accessible to everyone. Below are aspects of your site that you can customize to make it easier for visitors with disabilities to access your website.
The information below is available to help you make your website accessible, but should not be construed or relied upon as legal advice. Accessibility requirements differ by country, state, and jurisdiction, and QiSites cannot provide legal advice on making your website compliant with specific accessibility laws or regulations. If you need legal advice on compliance with a specific regulation, you may wish to consult a legal expert.
Accessibility Compliance Testing Tools
There are several excellent free testing tools that you can install in your web browser, which will help identify accessibility issues on your website. These include the WAVE Evaluation Tool, Google Lighthouse, and axe DevTools extension. Each tool works differently and may find different issues, so it is best to use more than one. In order to get accurate results, tests must always be run on your live website, not inside the editing environment.
Focus Outline
Websites built on the QiSites platform have a built-in focus outline feature that highlights items on a page, such as navigation links and form fields, with a black outline when a visitor presses the Tab key on their keyboard. This focus outline is standard across all websites and pages hosted on our platform, and cannot be disabled.
Skip Link
Websites built on the QiSites platform have a built-in skip link that allows the visitor to skip over the header and navigation menu that is repeated on each page. The skip link is activated when a visitor first presses the Tab key on their keyboard. This skip link is standard across all websites and pages hosted on our platform, and cannot be disabled.
Page Titles
Page titles are the first thing screen readers dictate when users arrive on a new web page, and are therefore important for orientating the visitor. You should ensure that every page has a title introducing the topic or purpose of the page and differentiating it from other pages on your website. You can also add a page description to provide more context. These fields are also important to your website’s search engine optimization. Learn how to edit Page Titles
Headings
Screen readers use the structure of HTML tags to understand the organization of content and allow the visitor to navigate quickly between sections. Use the heading dropdown in the text editor to add headings to your text. Always use headings to create the content structure, and use the H2-H5 headings in linear order. Don't rely on font size, bold, or italics to represent content structure.
Links
Screen readers allow users to skip directly to the links on a page. Therefore, links may be presented without the surrounding text. Try to ensure that the purpose of each link can be determined from the link text alone, without relying on the surrounding text. When an image is used as a link (i.e. a button), be sure to add ALT text that describes the purpose of clicking the button. Learn how to add Links
Images
Screen readers read the descriptive text (ALT text) of images to visitors. Images that convey meaning should have appropriate descriptions in the ALT text. When adding ALT text, consider what visitors with vision impairments need to know about the image to access all the information available to sighted visitors. Keep your ALT text brief, i.e. under 125 characters. When an image is used as a link (i.e. a button), be sure to add ALT text that describes the purpose of clicking the button. For images that require detailed descriptions, like complex info graphics, include a description of the image nearby in the text of your site rather than in the ALT text. Learn how to add ALT text
Colors
Colors must have a sufficient level of contrast between the foreground text and background color or background image. You can use a Contrast Checker to determine the level of contrast between two colors. Note that some accessibility testing tools cannot analyze images, so they may incorrectly report color contrast when text is placed over a background image.
1st Generation Themes
Themes labeled as "1st Generation" were created before modern accessibility standards had been defined and therefore may have color contrast issues or use older code that makes them less accessible. If you are still using a 1st generation theme, we recommend updating to a current generation theme through the Themes panel. Learn how to Change Themes
Downloadable Documents
Documents such as PDFs and Word docs may present accessibility challenges. Certain features, such as scanned elements that are embedded as images, may be inaccessible to people with disabilities. Designing downloadable documents in accessible ways requires special consideration to the needs of people with disabilities.
Audio & Video
Audiovisual content will always be hosted on a third party platform, such as Youtube or Vimeo, and embedded into your website via a player widget provided by the third party hosting platform. Please review the video hosting platform's information on making your audio and video content accessible.
Third Party Widgets & Pop Ups
Third party tools, such as scheduling systems and email capture pop ups may present accessibility challenges. Please review accessibility information with your third party providers to ensure that third party widgets are accessible.