WebSite X5Help Center

 
Mr. Doctor Dust Mite  .
Mr. Doctor Dust Mite .
User

Ada Compliance  en

Author: Mr. Doctor Dust Mite .
Visited 1162, Followers 1, Shared 0  

Is there some way you could make the site respond to using the TAB KEY on the keyboard. Pressing the TAB key should cycle thru the menu buttons as well as thru any hyperlinks on a page. Also cycling thru fields on forms pages.

This is probably all you will need to become ADA Compliant, as most readers can read the text, CTRL Mouse Scroll zooms.

Funny, if you hit the TAB key while on this page, you will see exactly what I am referring as you press the TAB Key several times. Thats it.

Should be lines of code imbedded. Maybe some sort of toggle or something similar to the existing "Optimize Feature" which searches and adds the code where it needs to be.

Just need the TAB Key ability here guys. Thats it.

Please HELP!!

Posted on the
6 ANSWERS
John P.
John P.
User

Totally agree, already asked for this but still no go.
It must be a legal requirement nationally now.

Read more
Posted on the from John P.
Mr. Doctor Dust Mite  .
Mr. Doctor Dust Mite .
User
Author

It is not something new. ADA Compliance came into law 1992. It has morphed thru the years but has always been a national / federal ruling. It has now flowed over to the UK and is becoming global.

This portion is WCAG (Web Content Accessibility Guidelines) and were guidlines prior to the following dating back to 1995 are now the law of the land:

Must be compliant:

Directive 2016/2102 requires websites and mobile applications of public sector bodies to conform with WCAG 2.1 Level AA. New websites must comply from 23 September 2019 on, old websites from 23 September 2020 on and mobile applications from 23 June 2021 on.

What we care about here is at the bottom, Website Usability. A lot of this is house cleaning, but Website Usability requires underlying code.

_________

The Americans with Disabilities Act (ADA)

Title III of the ADA requires that every owner, lessor or operator of a “place of public accommodation” provide equal access to users who meet ADA standards for disability.

Website Compliance with ADA for 2020

Under the most recent WCAG standards, accessibility includes the following the ADA compliant website requirements:

1. Website presentation –

  • Descriptive text: Any text used to describe the page titles, headings and link anchor text should be clear and must accurately convey the page or content that follows on its own
  • Nested Headings: For each page, headings start with one tag and optionally then flow down based on the hierarchy of subheadings within the page content
  • Color: Color on its own cannot convey meaning; if color is used to differentiate between two elements of the website, an alternative must be provided as well
  • Clear forms: Each field of a form must have coded labels, clear instructions on how to fix errors and use common formats
  • Uniform labels: All images like icons, frames and fields should have descriptive alt tags. Identical elements should have identical labels and tags
  • Clean code: Make sure the website is free of code errors to allow easier navigation by screen readers. Eliminate broken links and HTML errors

2. Website Appearance –

  • Zoom text: The user must be able to increase the text by up to 200% without negatively affecting the readability of a website
  • Color contrast ratio: All text must have a color contrast ratio of 4.5:1 against its background
  • Distinctive links: Text links inside a body of text and not inside header or footer navigation menus must use at least two of the following markups: underline, bold, italics and color to differentiate the links from normal text
  • Consistent layout and navigation: Maintain a consistent layout framework and header and footer navigation throughout the website. The main pages (About Us vs. Product Page) can have different layouts but pages within those categories must carry the same layout. All product pages must have the same layout

3. Content Alternatives –

  • Descriptive alt text: All important images on a website must have descriptive alt text. This also includes charts and infographics that need to have a descriptive caption to connect the alt text with the information in the image
  • No images of text: Instead of using images of texts, websites must use text. The exceptions being logos, branding, graph labels, etc
  • Text transcripts: Audio or video media must have a text transcript that conveys the full meaning of the audio or video
  • Closed captioning: All videos with understandable sounds/voices should have synced closed captioning
  • Table data: A large table data must be either accompanied by a body of text that explains the content of the table or it should be broken down into smaller tables
  • Extraneous documents: External documents like PDFs, PowerPoint presentations, Excel files or Microsoft Word documents should meet basic respective accessibility requirements like large text, contrast, captions and so forth

4. User Control –

  • No automatic pop-ups for commercial purposes: Popups for assistance are allowed. These include popups with instructions like that indicate errors or show a time-warning
  • No automatic video or audio: Autoplay is not permitted
  • No unexpected changes: No aspect of the website should change unexpectedly. Use mild transitions
  • Pause updating/refreshing content: The user should have the ability to pause content that updates or refreshes automatically. Rotating ads are permitted
  • Adjustable time limits: All time limits must provide a warning before they expire and the user should have the ability to extend the time limit by up to 8x the original limit before the time limit begins. There are exceptions here like time limits on auction bids
  • Important submissions: Users must be able to review and correct critical financial/personal/scheduling information such as credit card numbers, social security numbers, reservation dates and so forth, before finalizing the submission

5. Website Usability –

  • Keyboard only: The entire website including all of its elements must be accessible by keyboard only
  • Focus indicator: A website should have a focus indicator box that shows on all links and fields
  • Skip navigation: A skip navigation link should be available at the top left of every page on a website
  • Search function: A search function, at the very least, must be placed on the homepage. If placed on multiple websites, it should remain the same
  • Sitemap: A link to a sitemap must be provided for, at a minimum, on the homepage
  • Language: A default language is set for the website

Risks of Non-Compliance

Plaintiffs are getting judgments against businesses for discrimination based on non-compliant websites, and businesses are finding themselves having to pay out monetary damages and cover the expense of compliance.

Common problem areas of non-compliant websites include:

  1. Alt Tags: Alt tags are a frequent culprit behind ADA compliance lawsuits. The lack of descriptive alt text for images and other elements can make it impossible for people using screen readers to choose and buy products
  2. Keyboard Access: In a case against Sephora, the plaintiff, a blind woman, argued that Sephora’s website failed to meet accessibility standards required by federal and state disability laws. According to the plaintiff, the website had no alt-text keyboard-only use and accessible forms with checkboxes and drop-down menus
  3. Closed Captioning: Closed captions are crucial in enjoying video content for anyone with impaired hearing. Three large companies have been sued at different times for lack of closed captioning, resulting in judgments or settlements and the businesses had to modify their websites accordingly.

Stefon, can you help see this thru?

Read more
Posted on the from Mr. Doctor Dust Mite .
Miguel Galarza
Miguel Galarza
User

Hello:


Try using css with the element ": focus" there are several editing possibilities and also in other programming languages.

Place it before closing the / head tag

<style>
:focus {
background-color: #000;
outline: 3px solid #ff4800;
}
input:focus {
background-color: yellow;
}
button:focus {
background-color: #ff4800;
}
</style>

Although it also depends on the browsers and if you have used css in buttons, fields, etc.

I hope it works for you.
Regards

Read more
Posted on the from Miguel Galarza
Mr. Doctor Dust Mite  .
Mr. Doctor Dust Mite .
User
Author

Thanks Miguel, that worked great .

 It works good with menu's that are one deep and the hyperlinks on the page, forms as well as capatcha.

 If it encounters a multiple level menu it just by-passes over it though. Any ideas on hitting the multi level menu's?

Thanks.

Read more
Posted on the from Mr. Doctor Dust Mite .
Mr. Doctor Dust Mite  .
Mr. Doctor Dust Mite .
User
Author

I would say we need a more integrated method. Something embeded in either Settings or Template Menu. There are some sharp people there and if the competitors can do it, which they already have, then Incomedia can do it as well.

Word Press integrates it already. I would really hate to have to migrate everything over to Word Press but the law has really left everyone with no choice. If evryone moves to Word Press or another product those customers will be lost forever. Really hate to see that happen with all the hard work already put into this.

We really need some feedback on this from actual Incomedia Engineers. What are we doing here???

Read more
Posted on the from Mr. Doctor Dust Mite .
Incomedia
Stefano G.
Incomedia

Good afternoon

I can see that the matter is currently being discussed on this other topic with my colleague already. Please keep all the information concentrated on a single topic as to be sure not to lose any piece of feedback

https://helpcenter.websitex5.com/en/post/232931

Thank you

Stefano

Read more
Posted on the from Stefano G.