Booking Engine | ADA Compliance

What is ADA compliance

Title III of the Americans with Disabilities Act (ADA) regulates businesses to provide a website experience that works well for citizens with disabilities. An ADA compliant website provides an online experience accessible to everyone, including people with disabilities. This means having a site that accommodates visually impaired users, creating content suitable for screen-readers, using descriptive links, and making website actions easily accessible via a keyboard.

alt text on graphics: Alternative text (Alt Text) is the metadata assigned to each image on your website explaining what the image is. It should be implemented using your website content management system or, if you don’t use one, directly in the website’s html code. So for example, the alt-text field will be available on load as shown below.Every image on your site should have descriptive alt text. This assists screen readers in deciphering content for those who are visually impaired. A screen reader isn’t able to figure out what an image is on its own, it relies on the alt text provided in the website code to read what an image contains to the user.

ADA compliance website issue #1: keyboard access

ADA compliance website issue #2: alt text on graphics

ADA compliance website issue #3: accessible forms

ADA compliance website issue #4: proper nested HTML markup

ADA compliance website issue #8: fonts

ADA compliance website issue #7: link titles

Website Presentation

1. Descriptive text: Clear, descriptive text is used for page titles, headings, and link anchor text. This text must accurately convey the page or content that follows.
2. Nested Headings: For each page, headings start with one <h1> tag and optionally then flow down to <h2>, <h3>, and so on down to <h6> based on the hierarchy of subheadings within the page content.
3. Color alone does not convey meaning: Color cannot be the only means used to convey information or instructions. If color is used, an alternative must be provided.
4. Clear forms: Forms must have coded labels for fields, clear instructions on fields and how to fix errors, clear error indications, and example formats (e.g. 10/12/1980).
5. Section labels: Websites should contain landmark and iframe labels to indicate and describe different sections and content.
6. Uniform labels: All images and elements (e.g. icons, frames, fields) that are identical should have identical labels and alt tags sitewide.
7. Clean code: The website is free of error pages, broken links, and HTML errors.

Website Appearance

1. Zoom text: Text must be able to be increased by up to 200% without negatively affecting the readability of a website.
2. Color contrast ratio: All text must have a color contrast ratio of 4.5:1 against its background.
3. Distinctive links: Text links inside a body of text (not inside header or footer navigation menus) must standout from normal text through at least two of the following markups: underline, bold, italics, color.
4. Consistent layout and navigation: A consistent layout framework and header and footer navigation must be maintained throughout the website. Different layouts within a website are permitted (e.g. products page vs. information page) but respective pages within those layouts must be consistent (e.g. product A page has the same layout as product B page).

Content Alternatives

1. Descriptive alt text: All meaningful images on a website must have alt text. Any images, charts, infographics, etc. that require over 30 words of description have a descriptive caption beneath them and alt text that identifies the image and refers to the caption.
2. No images of text: No images of text are permitted when actual text can readily be substituted. Exceptions: logos, branding, graph labels
3. Text transcripts: All audio and video files must be accompanied with a text transcript directly below the file. Text transcript must accurately convey the full meaning conveyed in the audio or video.
4. Closed captioning: All video with meaningful sound contains accurate, synced closed captioning.
5. Table data: If a table contains a large amount of data such that it would be difficult to understand when read aloud, either 1) an alternative version of the table is provided that breaks up the table into manageable columns and/or rows or 2) a caption is provided that accurately conveys the data. Both methods may be used.
6. Extraneous documents: All documents such as PDFs, PowerPoint presentations, Excel files, Microsoft Word documents, etc. meet basic respective accessibility requirements.

User Control

1. No automatic pop-ups: Unless to provide instructions or assist website users (e.g. how to correct an error, time limit warning), no pop-ups are allowed. Pop-ups of commercial intent (e.g. newsletter sign up, discount offer) are not permitted.
2. No automatic video or audio: Video and/or audio may not play unless a user clicks to play the media.
3. No unexpected changes: No part of a website may change unexpectedly.
4. No blinking or flashing content: No content (gifs, videos, etc.) may blink or flash.
5. Pause updating/refreshing content: Any content that automatically updates or refreshes (e.g. sports scores, scrolling news) can be paused by the user. Exception: rotating ads are permitted.
6. Adjustable time limits: All but necessary time limits (e.g. auction bids) must provide a warning before time expires and the ability to extend the time limit by up to 8x the original limit before the time limit begins.
7. Important submissions: For websites that require the submission of critical financial/personal/scheduling information (e.g. credit card number, social security number, reservation date, etc.), users must be provided with an opportunity to review and correct information submitted before finalizing the submission.

Website Usability

1. Keyboard only: All functions and content of a website must be accessible by keyboard only.
2. Focus indicator: A focus indicator box shows on all links and fields.
3. Skip navigation: A skip navigation link is available at the top left of every page on a website. This does not have to be visible.
4. Search function: A search function must be provided for, at a minimum, on the homepage. If placed on additional pages, the search function must remain in the same place.
5. Sitemap: A link to a sitemap must be provided for, at a minimum, on the homepage.
6. Language: A default language is set for the website.

How Can You Test Your Booking Engine for ADA and WCAG Compliance?

To ensure that your website complies with ADA and WCAG standards, a combination of automated and manual testing is best. One thing to check is that your website includes alternative text (aka alt text) for each image. Alt text is a word or phrase that describes an image for those with a visual impairment. Having accurate alt text is important not only because it enables screen reading software, such as NVDA or JAWS, to describe images to visually impaired users, but also because it enables search engines to display images based on written descriptions and to display search results more accurately. This type of testing can be tedious to do manually, so consider using an automated system to find potential violations and issues faster. The W3C has a list of web accessibility evaluation tools.Manually auditing your website for ADA and WCAG compliance involves reviewing many aspects of your site’s design. You can start by testing the frequently used colors on your website using a tool that assesses the color contrast ratio of text on top of backgrounds.

ADA compliance website

GraphicsAlternative text (Alt Text) is the metadata assigned to each image on your website explaining what the image is. It should be implemented using your website content management system or, if you don’t use one, directly in the website’s html code. So for example, if you use WordPress, the alt-text field will be available on load as shown below.Every image on your site should have descriptive alt text. This assists screen readers in deciphering content for those who are visually impaired. A screen reader isn’t able to figure out what an image is on its own, it relies on the alt text provided in the website code to read what an image contains to the user.