The beauty product brand Glossier is the latest in a parade of brands who have been sued for accessibility violations on their websites. The visually impaired plaintiff, Kathleen Sypert, claims Glossier violated the Americans with Disabilities Act (“ADA”) by failing to have proper screen reading software on their website. Lawsuits over web accessibility have been increasing.
The ADA is a civil rights law that encourages equal opportunity for all people with disabilities. The law currently applies to physical, brick-and-mortar storefront accessibility; however, the law has not been amended to directly protect web accessibility. A series of recent lawsuits are seeking to change the scope of this law that was created in 1990 when the internet was just beginning to surface.
Sypert claims that Glossier previously denied her the opportunity to utilize the services offered on the website – services enjoyed by people without disabilities – and that they continued to deny her access to those goods and services on a regular basis.
Other megabrands have had similar lawsuits filed against them including J. Crew, Vera Wang, Giorgio Armani, Perry Ellis, and Versace. Most have settled out of court and have promised to add accessibility to their websites for the visually and hearing impaired.
The attorney in most of these cases, Thomas Bacon, argues that websites are part of the public domain, and everyone, including those with audio and visual impairments, should have access. Bacon reasons that since most of the sites were designed and created after the ADA became law in 1990, there is really no reason for them not to be accessible.
These types of cases are quickly becoming more common. Most of them are occurring in New York City. Attorney Adam Michaels wants that the best way for a brand to prevent such a lawsuit is to proactively conduct an ADA compliance audit of its website.
Michaels also strongly suggested that brands add an accessibility statement pledging commitment to complete accessibility on their website, over the phone, through email, and via online chat.
All of the information above was cited from The Fashion Law’s article “Glossier Added to Long List of Brands Being Sued for Allegedly Violating Americans with Disabilities Act.”
Stay tuned for more on how you can integrate accessibility into your health and beauty website. Lawsuits over web accessibility are not just about adhering to the rules; rather, they are about showing all customers that you care about their experience shopping with your brand.
The Divi builder’s massive growth can be attributed to it’s ease of use in building beautiful websites. But that growth has also put the spotlight on some initial accessibility issues that were not part of the initial design. Quickly realizing the oversight, CampusPress introduced the Divi Accessibility plugin. Bear in mind, no single plugin or script can bring a website into compliance with the ADA, but it’s a step in the right direction. Here are a few major features of the plugin.
ARIA Support: One feature of Divi Accessibility is the addition of ARIA attributes to the Divi elements and modules. The ARIA code is also added in the Tab module. This is good for screen reader users.
Dropdown Keyboard Navigation: Another important feature is the drop-down keyboard navigation, which allows users to more easily navigate the Divi drop-down menus with the keyboard.
Fix Labels: This option fixes missing labels and assignments to corresponding inputs.
Focusable Modules: Without Divi Accessibility, the theme’s toggles and accordions aren’t accessible for screen reader or keyboard-only users. Instead, these devices skip over these tools. The accessibility feature makes Toggles and Accordions focusable, just like it would be for any mouse user.
Divi Accessibility’s other options include improvements in these areas:
- Keyboard Navigation Outline
- Screen Reader Text
- Divi Email Opt-in
- Form Label Display
- Skip Navigation
- Tota11y (helps you get an idea of what your site will look like with this new technology)
These features ensure Divi is versatile and accessible for site visitors with disabilities. This information was curated from the article “Improve Your Divi Website’s Reach With Divi Accessibility” written by Claire Brotherton for the website, A Clear Bright Web.
Designing your website with accessibility in mind can be a daunting task, especially since there are so many options for making a website accessible. To get started, consider these basic design features, which meet Web Content Accessibility Guidelines (WCAG).
Associate a label with every form control: Labels help readers understand the required input for the form field. Create labels by using a for attribute on the <label> element linked to the ID attribute of the form element or by using WAI-ARIA attributes.
Include Alternative Text for Images: Alternative text describes images to viewers (and search engines). Include alternative text for informational and functional images. Decorative images should have empty text alternatives.
Identify Page Language and Language Changes: Identify page language and language changes of every page by using the lang attribute in the html tag.
Use Markup to Convey Meaning and Structure: Using the right mark-up for headings, lists, tables, and more will improve the structure of your content.
Help Users Avoid and Correct Mistakes: If your website will include forms, plan on including clear instructions, messages, and notifications to assist with completing forms. It also helps to give specific explanations, corrections, and to provide a very forgiving format.
Other helpful tips for designing your website with accessibility in mind include:
- having the reading order match the logical order of the information presented
- helping the user understand nonstandard interactive elements
- making sure interactive elements are keyboard accessible
- using code that fits the user’s technology
- avoiding CAPTCHA, if possible
We found these tips to help you meet Web Content Accessibility Guidelines (WCAG) requirements in the article Tips for Getting Started – Developing for Web Accessibility. Read the article for more documents, tutorials, and user stories.
When a page loads on a website, your visitors who use keyboard or screen readers are forced to wade through all sorts of information. This includes the name of the organization, page title, site navigation, and more until they finally reach the page’s unique content. Within that same website, the website visitors encounter all unnecessary information every time they open a new page. Skip Links help people with disabilities find the content they need without this hassle.
This repetitive process can be annoying and time-consuming for anyone, but it’s surely worse for someone with a visual disability who relies on keyboard or screen readers.
Wikipedia defines a Skip Link as “an internal link at the beginning of a hypertext document that permits users to skip navigational material and quickly access the document’s main content. Skip Links are particularly useful for users who access a document with screen readers and users who rely on keyboards”.
Users can bypass all the junk and go directly to the important content they are seeking. They are absolutely crucial for web accessibility. And if designed creatively, they can match the look and feel of the website and not stand out like a sore thumb.
To see some good examples of Skip Links that blend in well with the website brand, visit some of these sites for inspiration.
The information above was entirely curated from Knowbility’s article Skip Links Design Showcase. If you want your site to be more accessible, consider adding Skip Links. Skip links help people with disabilities find the content they need while making your site accessible. Read the article for more detailed information.
According to the American Foundation for the Blind, 26.9 million adult Americans report having trouble seeing, even with glasses or contacts, or they are completely blind. Any visual impairment can make it extremely difficult for someone using a computer to interpret what they see. It’s important that your website is accessible to the visually impaired.
To ensure your website is accessible, follow the Web Content Accessibility Guidelines (WCAG) and create user interface design and visual design using the most accessible and easy-to-interpret methods possible to assist the visually impaired. Below are some best practices to follow.
Provide Sufficient Contrast between Foreground and Background: If foreground texts and background colors are too similar, they can be difficult to read. Use recommended “Contrast ratio” for images, buttons, and other elements, but not for logos or text in a photograph.
Don’t Use Color Alone to Convey Information: In addition to using colors to differentiate elements, also use symbols (e.g. asterisk, bullet point, dashes), numbers, or labels to show differentiation between elements, areas, graphs, etc. Adding a pattern to a color is another useful method.
Make Sure Interactive Elements Are Easy to Identify: For easy identification, change the appearance of links on mouse over, keyboard focus, and touchscreen activation.
Provide Clear and Consistent Navigation Options: Have clear navigation options by using consistent naming, styling, and positioning. Also use multiple methods of website navigation in addition to orientation cues, like breadcrumbs and clear headings.
Make Sure That Form Elements Include Clearly Associated Labels: All fields should have a descriptive label with minimum space between labels and fields.
Provide Easily Identifiable Feedback: Make feedback (confirmation, alerts, notification) easily identifiable. Feedback needing user action should use a prominent style.
Use Headings and Spacing to Group Related Content: Using whitespace, proximity, and style headings to group related content will help provide clarity.
Create Designs for Different Viewport Sizes: Change position and presentation of main elements (e.g. header, navigation) to optimize use of space. Adjusting text size and line width will maximize readability.
Include Image and Media Alternatives in Your Design: Use alternatives for images and media such as visible links to transcripts of audio, text with icons and buttons, and captions / descriptions for tables and graphs.
Provide Controls for Content That Starts Automatically: Use clearly visible controls to let users stop animation, auto-playing sound, carousels, and videos.
We found these tips to help you meet Web Content Accessibility Guidelines (WCAG) requirements in the article Tips for Getting Started – Designing for Web Accessibility. Read the article for more detailed information on how to make your website accessible to the visually impaired.
Harvard University is moving forward into the digital age by announcing their latest initiative to better serve students with disabilities. This initiative is aimed at making their digital content accessible and inclusive to those with disabilities.
The University’s commitment to accessibility speaks volumes about their goals for inclusivity to their current and prospective students, as well as the public. To start, they will convene a new Accessibility Steering Committee (ASC). Harvard also plans on periodically reviewing their digital content and accessibility policy to stay up to date as technology continues to evolve. A few examples of the new policy include easy navigation by screen readers, alternative text for images, and color contrast considerations. This new policy is a great example of what prioritizing audiences with disabilities looks like and how important it is to make all content accessible and available to users.
Read more about Harvard’s new digital accessibility initiative at https://news.harvard.edu/gazette/story/2019/04/harvard-adopts-university-wide-digital-accessibility/.