May 25, 2018 was the day GDPR went into full effect. For some companies, the impact of GDPR is non-existent or minimal. Other companies are blocking European visitors until they figure out how to comply, but most are assessing the risk and making appropriate changes where they can.
If you are in the third group, you are likely creating popups and modals to speak to customers about your recent privacy policy changes, how you use cookies and/or general information about GDPR and your business.
While only your legal and compliance folks should advise you on WHAT you should say in the pop-up, it is important to consider HOW you present this information on your website if your site is WCAG 2.0 Level AA conformant.
Presenting GDPR Information in a Pop-Up or Modal
Many businesses are adding this information in a pop-up or modal, which can be troublesome for persons with disabilities if not properly coded. GDPR states that such alerts need to appear on the site without the user doing something first. Access these developer tips to support ADA best practice coding:
1. Label buttons so screen readers can make sense of them.
Is the ‘x’ in your popup unlabeled? Then how would a blind person know that it closes the pop-up? By adding the code in
yellow below, this will ensure that persons with disabilities can understand the action. If the button text is not descriptive enough to convey what clicking it will do, for example if it is an image, icon, or ‘X’, use the aria-label attribute to provide additional information to a screen reader.
2. Make sure the modal gets focus!
When you
pop up a modal, if you don’t assign focus, the keyboard user may never get to it and make it disappear with their next tab, or worse, be confined to purgatory in the grayed-out web-page behind the modal.
In the case of a modal or other dialogue that appears over the page, focus should be sent to the element. Set the tabindex attribute of the containing element to -1 to make it focusable, then set focus on it using JavaScript when it is shown.
3. Give your Pop-up a heading
Headings convey structure and they give another anchor for screen readers to lock on to. The pop-up dialog should have an appropriate heading. Give the heading an ID and use the aria-labelledby attribute on the dialog container to inform the screen reader this serves as the label/title for the dialog.
Additionally, adding role="dialog" helps inform assistive technology of the purpose of this content and separate from the rest of the page.
As always, consult with your developer or digital agency to provide guidance on your specific website and ADA conformance needs.