How to make sure everyone can use your store by building for accessibility
Accessibility is often viewed as a bonus by developers and owners of online stores. It's a requirement, not a bonus. Every aspect of a website design should be considered from all perspectives, regardless of age, abilities, or impairments. It's crucial that all site visitors can use your website and buy your products.
Accessible content can be defined as:
- Perceivable. All information should be presented in a way that users can understand, regardless of what user agent (browsers or screen readers) they use or what disabilities they may have.
- Operable. Visitors must be able navigate the site and access all functions, even without a mouse.
- Clear. All forms, menus and links on the site must be understood.
- Robust. Various tools, such as screen readers, voice recognition software and braille readers, should be able to understand your content.
How does accessibility become an integral part of the development process. How can you adapt an existing store to accommodate accessibility? What tools are available to check for web accessibility?
These questions will be answered in the following, but if accessibility is important to you, take a look The Importance Of Accessibility for Your Online Store.
Making accessibility a focus
Accessible websites start with the right mindset. It is important that everyone involved, including the developer, business owner, and content manager, are on the same page. It's important to be on the same page.
You can use your favorite websites with a screen-reader to get a better understanding of accessibility. NVDA for Windows is an excellent option, and voiceOver for Mac users is an ideal choice. You can do all the normal actions - search the website and read blog posts, add products to your cart, etc. - but you will also gain a new perspective on what it is like to do this.
Next, focus on web accessibility by starting with . This is a high-quality, well-designed WordPress theme that integrates with WooCommerce and has many flexible features. See all Storefront features.
You can also search the tag "Accessibility" to find great themes. The WordPress Theme Handbook contains detailed accessibility guidelines to help you get started when you are developing your theme.
Then, you can check your website as you build it. It is much easier to modify elements as you go rather than rebuilding the site once you're done.
Tools to Increase eCommerce Accessibility
It is crucial to have the right tools in order to build an accessible eCommerce website. You'll find many great options for testing. Many of these will also be mentioned later when we discuss accessibility issues.
Screen Reader Test:
General Accessibility Testing:
- Axe Accessibility Tools (browser extension).
- CodeSniffer (HTML Coding Standard Check)
- Funkify (visual disability simulator)
- Accessible Metrics (scans, monthly accessibility reports)
- Tota11y (highlights accessibility issues)
- Tenon is an automated testing tool that can be integrated easily with WordPress.
- Wave (accessibility report right in your browser).
Color Checks:
- Sim Daltonism (simulates color blindness)
- Contrast Checker (test foreground/background colors)
- Contrast-A (develop an accessible color palette)
WordPress plugins:
- WCAG 2.0 Form fields for Gravity Forms. (enhanced accessibility of Gravity Forms).
- WP accessibility (adds accessibility options)
- Contact Formula 7 Accessibility Defaults - Enhanced accessibility for Contact form 7)
- Zeno Font Resizer allows visitors to adjust font size as required
How to make your eCommerce site accessible
Accessible images
Add alt text to each image to assist visually impaired users. Alt text is used by screen readers to "read" the image. (Tip: Google does too! Developers should ensure that every element has an alt attribute. You can easily add alt text to images if you are site owner.
It is a great place to begin: Think about the purpose of your image.
1. Is it clear and concise? A simple image or icon?
Your image should be described in a way that your users can picture it. An example of good alt text is "Woman pushing her stroller down the sidewalk."
2. Is it able to convey complex information, e.g. An infographic or chart?
Complex images may be difficult to describe in a concise manner. You might need to include a lengthy description. This can be done in a number of ways, including by referring to the area on the page where the complex image is described more fully. Learn more about how to do this.
3. Does it serve a purpose other than decoration, e.g. Is it a small element of site design that contains flowers?
Screen readers are urged to ignore decorative elements and instead give them an empty alt attribute.
You should prefer with decorative images in your CSS to HTML.
Google is a user-focused search engine, so don't be tempted to include keywords in your alt text. It is more important to describe your image in alt attributes than listing keywords.
Learn more:
- Magento Pos
- Shopify Pos
- Bigcommerce Pos
- Woocommerce Pos
- Netsuite pos
- MSI
- Bigcommerce automation
- Shopify automation
- Backorder
Accessible links
Always tell your visitors where you're taking them next when you add links.
Bad link text examples:
- Click here for more information on our candles.
- To find the perfect fit, download our sizing guide.
Here are some examples of link text that is good:
- See our Candle FAQs for more information.
- Download our PDF sizing guide to find the perfect fit.
However, there may be occasions when you need to use link text such as "Read More." This could be an example of a grid of blog posts that you have recently posted on your homepage, with each excerpt ending with a "Read More” link. What should you do?
The aria_label attribute is a great way to make your link more descriptive. This is how a link using the aria label attribute could look:
Bad solar installations can cause your initial investment to be lost.But what if you want to link an image? Your alt attribute will be the link text. If you have a mockup for your eBook download, your alt attribute should be something like "eBook about choosing lipstick for your skin tone" This will tell your site visitors what the image is and what it will open when they click on the link.
Accessible fonts
Font size is the first thing to think about. It is important that the font size of your text can be easily read by those who are partially blind or have difficulty reading smaller font sizes. Although there is no minimum font size, 16px is a good starting point for your body text.
It is up to the browser to adjust font sizes. They can either enlarge the text or zoom in to the page to apply responsive styles. Your website should be designed so that a user can zoom in up to 200% and still have the ability to view or use your content. You want to avoid text that is too long or too short when your font resizes. It is best to test it yourself. You can find the instructions for each browser right here.
Consider your font choices . Intricate fonts can be difficult to read, so they should not be used more than once a year (such as for a signature or decorative element). To make your information more understandable and less confusing, use only 2 fonts on your website.
Accessible Colors
Different people see color differently. In fact, 8% of men and 0.5% for women suffer from colorblindness. Your website should be fully functional and accessible in greyscale. For testing, you can use Chrome extensions Grayscale Black or White.
Contrast should be considered when designing web accessibility. Consider text over images and backgrounds, as well as contrast between elements (such buttons or pictures) that are very close together.
You should aim for a luminosity ratio of 4.5 to 1 for your body text, and 3 to 1 for your large text. Contrast checker is an excellent tool to test foreground and background, as well as viewing your color choices in grayscale.
Do not rely solely on color. Use shapes and symbols to communicate the same message.
If your error message on a contact form is red, you might also add an exclamation point symbol or stop sign to grab attention if visitors are color-blind. Contrast can also be demonstrated with patterns and textures.
Accessible Headings
Headings are not just for their size. They're an essential structural component to your content. Properly using heading elements allows screen readers to identify headings and sections on a page quickly and navigate efficiently.
What is a good heading structure?
Here is an example of a heading for a blog post:
Why choose a stainless-steel water bottle?
Water bottles made of stainless steel are ideal for camping.
They can also be used to boil water outdoors.
They are durable and can withstand falls
Drinks will stay colder for longer with stainless steel water bottles
Water bottles made of stainless steel are safer.
They don't release chemicals like plastic bottles.
They won't rust as easily as other metals.
They can be washed in the dishwasher.
You can see that the content is laid out in a way that visitors to the site or screen readers can understand each section.
Accessible forms
Screen readers may find forms difficult to use, but they are often used to collect payment information, product customization details and leads. It's important to make them accessible and simple-to-use.
using labels is a good place to begin - even if placeholders are used! Labels should inform your users what fields they need to fill out (e.g. Email Address), while the placeholder should explain how to fill in the field (e.g. Name@example.com This is an essential part of a screen reader's understanding of your form.
You should ensure that all fields are clearly labeled. Also, make sure to follow the instructions, especially regarding formatting requirements such as dates and phone numbers. They should be easy to follow.
Also, it is important that your forms are keyboard-accessible. They can be navigated and filled in only with a keyboard. Javascript is a tool that developers use to manipulate form data, submit forms and modify form elements. A form that isn't accessible is often due to javascript being misused.
Accessible Video
Videos are a great way for you to describe your products and show their benefits. Also, make sure they are easily accessible!
Adding captions to your videos will make it easier for those who are hard-of-hearing or deaf to hear the audio. The University of Washington offers great tips for adding captions to your video. If your video is being created by a professional videographer, ask them to add captions.
Add audio descriptions to make it easier for blind people to understand what is happening in your video. A separate audio track should be created that describes the most important visual content in your video, particularly those sections that do not have narration. Transcripts can also be used to describe and write all audio content.
The video player is also worth considering. You should ensure that the option you select supports closed captions, and has toggles for turning audio descriptions on or off. Also, ensure that the buttons can be used with a screenreader or keyboard.
Keyboard Navigation
We've already touched on this, but it is important that your website can be operated only using a keyboard. This is particularly helpful for those with motor impairments who might have trouble using a traditional mouse.
It is important to ensure that the Tab button can be used to navigate through the page. Your website navigation should follow the visual flow of your page (left to right, bottom to top). To ensure you can navigate your website using the Tab button, test the following:
- Header
- Main navigation menu
- Navigation and linking to pages
- Footer
You should also take the time to review any custom widgets or apps, as well as plugins. To ensure they can be easily exited with the Escape key, and that they adhere to the accessibility guidelines for widgets.
Test, test, and test is the key to success. To ensure that pages are easy to navigate, spend time scrolling through them using your keyboard.
Accessible downloads
It's essential to ensure that digital downloads are available on your eCommerce website.
Add PDF Tags is a great way to make PDFs more accessible. These tags hide the structure of the content and are visible to screen readers. Adobe Acrobat is a great tool to make your PDFs accessible.
You'll need to remember other accessibility principles, such as color contrast and font sizes, when designing your digital download.
Accessible Courses
When creating online courses, remember video captions as well as audio transcripts. You can present your content in multiple formats, such as video, audio and text, so there is something for everyone. Your courses will benefit from many of the same design principles.
It is important to provide multiple communication options for your students. A nonverbal user might not be able call to ask questions, and a blind student might not be able submit questions online. This is true for assignments and coursework submissions. To help students get the best out of your courses, be flexible and accommodate their disabilities.
Comments
Post a Comment