Accessible Web Design With Conversion in Mind
Our Accessibility Services
- Full Site Redesign: Bespoke design and implementation to meet WCAG 2.1 AA or AAA standard
- Stand Alone Project: Review, design changes, and dev implementation
The Benefits
- We don't compromise on design and branding when creating accessible sites
- With 3 years of accessibility experience, we’ve developed a unique process trusted by 30+ clients
- You have ownership and can make changes on your own schedule
- Higher accessibility expands your brand reach to include every type of customer
![dunning-golf-site-transformation-gif dunning-golf-site-transformation-gif](https://www.arcticleaf.io/hubfs/Dunning%202018%20to%202019_002.gif)
![ADA-compliant-websites-icon ADA-compliant-websites-icon](https://www.arcticleaf.io/hubfs/ADA-compliant-websites.jpg)
What is Digital Accessibility?
Digital Accessibility enables people with disabilities to perceive, understand, navigate, interact with, and contribute to the web.
![descriptive-text-icon descriptive-text-icon](https://www.arcticleaf.io/hubfs/whats-ADA1-descriptive-text.png)
Descriptive Text
![descriptive-text-computer example descriptive-text-computer example](https://www.arcticleaf.io/hubfs/whats-ADA-demo1.png)
Clear titles and subheadings. Adequate spacing between letters, words, lines, and paragraphs.
![readable-contrast-icon readable-contrast-icon](https://www.arcticleaf.io/hubfs/whats-ADA2-readable-contrast.png)
Readable Contrast
![readable-contrast-computer-example readable-contrast-computer-example](https://www.arcticleaf.io/hubfs/whats-ADA-demo2.png)
Utilize proper colors to the text, control elements and background to provide enough readable contrast.
![keyboard-navigating-icon keyboard-navigating-icon](https://www.arcticleaf.io/hubfs/whats-ADA3-keyboard-navigating.png)
Keyboard Navigating
![keyboard-navigating-computer-example keyboard-navigating-computer-example](https://www.arcticleaf.io/hubfs/whats-ADA-demo3.png)
Clear, simple forms, labeled input fields, support keyboard only access and keyboard navigating.
![video-audio-accessibility-icon video-audio-accessibility-icon](https://www.arcticleaf.io/hubfs/whats-ADA4-video-audio-accessibility.png)
Video Audio Accessibility
![video-audio-accessibility-computer-example video-audio-accessibility-computer-example](https://www.arcticleaf.io/hubfs/whats-ADA-demo4.png)
No automatic video and audio. Closed captioning on videos. Transcripts for videos. Media timeline control tools.
![zoomable-high-quality-content-icon zoomable-high-quality-content-icon](https://www.arcticleaf.io/hubfs/whats-ADA5-zoomable-high-quality-content.png)
Zoomable High-Quality Content
![zoomable-high-quality-content-phone-example zoomable-high-quality-content-phone-example](https://www.arcticleaf.io/hubfs/whats-ADA-demo5.png)
Provide high-quality images with explicit information. Zoomable text and zoomable images.
![descriptive-accurate-alt-text-icon descriptive-accurate-alt-text-icon](https://www.arcticleaf.io/hubfs/whats-ADA6-descriptive-accurate-alt-text.png)
Descriptive, Accurate Alt Text
![descriptive-accurate-alt-text-computer-example descriptive-accurate-alt-text-computer-example](https://www.arcticleaf.io/hubfs/whats-ADA-demo6.png)
Support descriptive, accurate alt text for images. Provide distinct links. Support nested headings.
How it’s Measured
The Web Consortium maintains a list of practical guidelines that will make a website accessible when followed correctly.
The most recent version of guidelines is called WCAG 2.1, and it has 3 levels:
A, AA, and AAA.
![ADA-level-a-icon ADA-level-a-icon](https://www.arcticleaf.io/hubfs/icon-ADA-level1.png)
Single A is the minimum level of requirement. This is what all websites, apps, and electronic content should adhere to.
All of our website builds are level A, unless a client specifically requests otherwise.
![ADA-level-double-a-icon ADA-level-double-a-icon](https://www.arcticleaf.io/hubfs/icon-ADA-level2.png)
Double A is viewed as the acceptable level of accessibility for many online services, which should work with most assistive technology.
![ADA-level-triple-a-icon ADA-level-triple-a-icon](https://www.arcticleaf.io/hubfs/icon-ADA-level3.png)
Triple A compliance is viewed as the gold standard level of accessibility. This is the highest level your website can reach.
Compliance Audit Offerings & How Arctic Leaf Can Help
- ADA Compliance Audit Site Scans for AA & AAA Compliance
- ADA Compliance Audit Full Manual Reviews for AA & AAA Compliance.
![computer-icon computer-icon](https://www.arcticleaf.io/hs-fs/hubfs/audit1@2x.png?width=200&height=180&name=audit1@2x.png)
UI Design
- Content & Display
- Color & Contrast
- Stop Animations
- Focus & Emphasis
- Mobile Functionality
![keyboard-icon keyboard-icon](https://www.arcticleaf.io/hs-fs/hubfs/audit2@2x.png?width=250&height=133&name=audit2@2x.png)
Keyboard Navigation
- Drop Downs
- Buttons
- Forms
- Menus
- Skip Links
- Pop Ups
![computer-screen-reader-icon computer-screen-reader-icon](https://www.arcticleaf.io/hs-fs/hubfs/audit3@2x.png?width=276&height=180&name=audit3@2x.png)
Screen Reader
- Alt Tags
- Icons & Buttons
- State Controls
- Forms & Validation
- Roles & Landmarks
Accessibility Recommendations
![accessibility-recommendations-grey-jacket-summary accessibility-recommendations-grey-jacket-summary](https://www.arcticleaf.io/hubfs/accessibility-recommendations1.jpg)
Summary:
Gray text on white background does not meet color contrast ratio requirements.
![accessibility-recommendations-example accessibility-recommendations-example](https://www.arcticleaf.io/hubfs/accessibility-recommendations3.png)
![accessibility-recommendations-grey-jacket-solution accessibility-recommendations-grey-jacket-solution](https://www.arcticleaf.io/hubfs/accessibility-recommendations2.jpg)
Solution:
Change text color to #1E1E1E
In the case of the search bar, we would animate the search label moving to the left to make room for the search input.
For the contact form (or any other input field), we have two suggestions:
- Mimic the same animation as the search field, however, the label would move above the field.
- We simply add static labels above each field, and increase the vertical padding to ensure the labels/fields are easy to identify.
Accessing the Risks
ADA: Title III
- Websites can be considered places of public accommodation and may not discriminate against people with disabilities by failing to provide auxiliary aids where necessary.
Section 504
- Any federally funded programs (including organizations and universities) may not exclude people with disabilities from any program or activity.
Section 508
- Many US State and organization laws require compliance with WCAG 2.0 web accessibility guidelines.
Looking to Make Your Site Accessible Without Changing the Design?
![accessibe-logo accessibe-logo](https://www.arcticleaf.io/hs-fs/hubfs/accessibe-logo.png?width=350&height=51&name=accessibe-logo.png)
+
![AL-Logo-Secondary-RGB AL-Logo-Secondary-RGB](https://www.arcticleaf.io/hs-fs/hubfs/AL-Logo-Secondary-RGB.png?width=400&height=43&name=AL-Logo-Secondary-RGB.png)
Arctic Leaf has partnered with accessiBe whose applications provide a full suite of accessibility options that achieve full compliance and meet the needs of ecommerce business owners and their customers.
Accessible Site Builds
![Right Rope](https://www.arcticleaf.io/hubfs/card-right-rope.png)
Right Rope
-
ADA Compliant Theme Development
-
Custom Design
-
UX Research & Prototyping
-
Mobile & Desktop Design
-
Custom BigCommerce Theme Development
![Giftstart website](https://www.arcticleaf.io/hubfs/card-giftstart.png)
Giftstart
-
ADA Compliant Theme Development
-
Custom Design
-
UX Research & Prototyping
-
Mobile & Desktop Design
-
Custom Shopify Theme Development
-
Email Marketing Consulting
-
Headless Development
![Dunning Golf website displayed on desktop and mobile](https://cdn2.hubspot.net/hubfs/3044628/filter-by-dunning-golf.png)
![Wally's Fine Wine website](https://www.arcticleaf.io/hubfs/portfolio-card-wally-wine.png)
Wally's Fine Wine
-
ADA Compliant Theme Development
-
Custom Design
-
Custom BigCommerce Theme Development
-
Email Marketing
![Canoyer Garden Center website](https://www.arcticleaf.io/hubfs/portfolio-card-canoyer.png)
Canoyer Garden Center
-
ADA Compliant Theme Development
-
Custom Design
-
Custom BigCommerce Theme Development
![GB Wear website](https://www.arcticleaf.io/hubfs/portfolio-card-gb-wear.png)
GB Wear
-
ADA Compliant Theme Development
-
Custom Design
-
Custom Shopify Theme Development
-
Email Marketing
![Impossible Kicks website](https://www.arcticleaf.io/hubfs/portfolio-card-impossible-kicks.png)
Impossible Kicks
-
ADA Compliant Theme Development
-
Custom Design
-
Custom Shopify Theme Development
-
Performance Analysis & Reporting
![Mann Lake website](https://www.arcticleaf.io/hubfs/portfolio-card-mannlake.png)
Mann Lake
-
ADA Compliant Theme Development
-
Custom Design
-
Platform Migration
-
Custom BigCommerce Theme Development
![Pacbrake website](https://www.arcticleaf.io/hubfs/card-pacbrake.png)
Pacbrake
-
ADA Compliant Theme Development
-
Custom Design
-
Custom Search App Creation
-
Custom Miva Theme Development
![Pick Your Plum website](https://www.arcticleaf.io/hubfs/portfolio-card-pick-your-plum.png)
Pick Your Plum
-
ADA Compliant Theme Development
-
Custom BigCommerce Theme Development
-
Performance Analysis & Reporting
![American Hard Bag website](https://www.arcticleaf.io/hubfs/portfolio-card-american-hardbags.png)
American Hard Bag
-
ADA Compliant Theme Development
-
Custom Design
-
Custom Shopify Theme Development
![Slant Collections website](https://www.arcticleaf.io/hubfs/portfolio-card-slant.png)
Slant Collections
-
ADA Compliant Theme Development
-
Design Support
-
Custom BigCommerce Theme Development
-
Performance Analysis & Reporting
![Cigar Spots website](https://www.arcticleaf.io/hubfs/card-cigar-spots.png)
Cigar Spots
-
ADA Compliant Theme Development
-
Custom Design
-
UX Research & Prototyping
-
Custom BigCommerce Theme Development
![Carver Skateboards website](https://www.arcticleaf.io/hubfs/portfolio-card-carver-skateboards.png)
Carver Skateboards
-
ADA Compliant Theme Development
-
Design Support
-
Custom BigCommerce Theme Development
-
Email Marketing
![Greg Normal Collection website displayed on desktop](https://cdn2.hubspot.net/hubfs/3044628/greg-norman.png)