Build accessibility: How to ensure that everyone can use your store

as a developer and an online store owner, we often regard accessibility as a reward of a reward Essence But this is indeed a requirement! From the perspective of all website visitors, consider each part of the website construction, regardless of their age, ability, or defects. After all, it is important that

everyone can easily use your store

and to buy your product. In the final analysis, the access content can be defined as:

All information must be presented in a way that users can perceive, no matter what user agent they use (browser, screen reader or other software) or what disability they have.

Operating.

Visitors need to be able to browse the website and use all features, even if they do not use traditional mouses.

It can be understood.

Content, form, menu, links and other site components require users to understand.

Strong.

Various tools including screen readers, voice recognition software, and blind readers should be able to read your content.

But how can accessability become the core part of the development process? What factors should be considered and how to adjust existing stores? Which tools can I use to test web accessibility?

All these questions will be answered below, but if you are interested Why is accessibility so important, please check the importance of accessibility to your online store.

Make access to the focus A accessible website starts

The correct mentality

. It is important to let everyone -developers, business owners, content administrators, etc. -all participate on the same page.

One of the best ways to understand accessability is to try to use your favorite website with screen readers. NVDA is an excellent choice for Windows users, and VoiceOver is the perfect choice for Mac users. Take all the actions you usually take -search websites, read blog articles, add the product to your shopping cart -and understand the feelings from different angles.

Follow the networkThe next step that can be accessed starts with a good, high -quality WordPress theme.

Or, if you are using the WordPress theme directory, then this work has been completed for you; Search with the label \”auxiliary function\”, you will find some good choices. If you are developing your own theme, the WordPress theme manual has a in -depth and clear accessible guide to allow you to embark on the right path. Then, when you complete the website construction process, is constantly tested.

Compared with the completion of the site, it is much easier to adjust the element at any time!

E -commerce accessable tools

Correct tools are essential for constructing accessible e -commerce websites. Below, you will find some good test options; when discussing specific accessable factors after discussing this article, many of the factors are also mentioned.

Screen reader test:

For Mac (free): narration For Windows (free, open source): nvda [123 [123 ]

For Windows (paid): jaws

General access test:

Axe auxiliary tool (browser extension) Codesniffer (HTML encoding standard check) Funkify 123]

Accessable indicators (scanning and monthly accessable reports)

Tota11y )
Wave (accessible report in the browser)

Color check:

Sim Daltonism (simulation color blindness )
Comparison checkup (testing prospects/background
Comparison -A (Development of Access Penses)

WP Accessibility (adding auxiliary function)

Contact form 7 accessibility defaults 123]

Zeno FONT Resizer Visit

Accessive image

In order to help your visually impaired user experience the pictures on your website, you need to ensure that each picture

. Screen reader uses an alternative text to \”read\” your image (reminder: Google do the same!). If you are a developer, make sure each

\u0026 lt; img \u0026 gt;

The element contains an alt property. If you are a website owner, you can use the default WordPress function to easily add instead of text to your image.

A good starting point is the purpose of the image:

1. Does it convey direct information, such as simple pictures or icons?

In this case, please describe your image in a way to help users draw images. A good replacement text is \”Women pushed the stroller on the sidewalk.\”

2. Does it convey complex information, such as information chart or chart? For complex images, it may be too difficult to describe the content in a simple way; you may need to add a long description. There are several ways to solve this problem, including the region of complex images in the reference page in detail. Learn more about solving this problem here.

3. Is it just decorative? For example, as a small flower element as a website design? Tell the screen reader to skip the decorative element by giving them an empty ALT attribute: \u0026 lt; img src \u003d \u0026 quot; iMage.png \u0026 quot; alt \u003d \u0026 quot; \u0026 quot; \u0026 gt;

In ideal, you should

Instead of decorative images in CSS instead of HTML

If you want to fill the keywords in Alt text for the purpose of SEO, please remember to google Priority consider user experience. Compared with the keywords, your alt attribute can be good

describing your image

, which is more important.

The access to access

The important matters to be considered when adding a link is

What will happen to your website visitors always click.

 Even if they are completely out of the context reading link (some types of screen readers are usually the case), they should know where to go next.   Example of error link text:

For more information about our candles, Please click here

Our size table to find the size that is best for you. Good link text example:

For more information about our candles, See common questions about candles

To find the best size for you, please our PDF size watch .

However, sometimes you may need or need to use link text such as \”reading more\”. One example of this may be that the recent blog articles grid on your homepage, each of which is a brief excerpt from the \”reading more\” link. What will you do in this case?

A good solution is to use

aria-label attribute, it Allows you to add descriptive tags to the link. The following is a link with aria-label

attribute:

\u0026 lt; p \u0026 gt; a bad Solar Installation can make your upfront initial evaporate. POTENTIal solar installer before you trust their reputation. \u0026lt;a href\u003d“https://example.com/bad-installation\u0026quot; aria-label\u003d\u0026quot;Read about 15 questions to ask your solar installer\u0026quot;\u0026gt;[Read more.. .] \u0026 lt;/a \u0026 gt; \u0026 lt;/p \u0026 gt;

But what if you want link image?

For the image, your alt attribute will be your link text . Therefore, if you have a free e -book model, you hope your ALT attribute is similar to \”E -book of choosing a suitable lipstick for your skin color\”. What will be opened.

Cabin The first thing to consider is the size of the font. Important, Your text can be easily read by people who are partial or unable to see smaller fonts . Although there is no official minimum font size, But a good starting point is 16 pixels of the text. Generally, the user’s browser is adjusted to the size of the font. You should build your website by allowing users to enlarge 200% without losing or viewing your website content. For example, you want to adjust the font to avoid cutting off content or overlapping text. The best way is to test your own test yourself Let’s find the instructions of each browser here.

Consider The fonts you made . Cursive or complex fonts are usually difficult to read, only occasionally (for example Signature or decorative elements). Only 2-3 fonts are used throughout the website to make your information less chaotic and easier to understand.

  [ 123]

Stone Bright Blind Test, usually used for test color blindness.

Access color [ 123] Not everyone treats the color in the same way. In fact, about 8% of men and 0.5% womenSexually suffer from some form color blindness

. Therefore, your website should be

completely running and available in the grayscale . You can use the Chrome extension Grayscale Black and White and other tools for testing.

Comparison is an important consideration for web accessibility. Check the comparison between the text or the text on the background and the elements (such as the button and the picture) near each other.

Ideally, you hope that the brightness contrast of the text is 4.5: 1, and the brightness contrast of the large text is 3: 1. The contrast checker is a good tool for testing and background, and even viewing your color selection with gray.

An important rule to remember:

Don’t just rely on color.

The shape and symbol can help convey the same information.

For example, if your contact form error message is red, you may also want to add a parking Sign or exclamation, to prevent your website visitor is red and green blind. Patters and textures are also a good way to show contrast.

What is the correct title structure?

\u0026 lt; h1 \u0026 gt;

should be used to identify the main theme of the page, and it can only be used once per page. For example, this will be the title of the blog post or product. \u0026 lt; h2 \u0026 gt; and

\u0026 lt; h3 \u0026 gt;

The element should be used to introduce the different parts of the following content.

This is the example of the blog post title format:

\u0026 lt; h1 \u0026 gt; why choe a stainless Steel water bottle \u0026 lt;/h1 \u0026 gt; h2 \u0026 gt; stain; STEEL WATER BOTETLES Are Perfect for Camping \u0026 LT;/H2 \u0026 GT; \u0026 LT; H3 \u0026 GT; They Can be used to box the wilderness.\u0026lt;/h3\u0026gt; \u0026lt;h3\u0026gt;They\u0026#39;re durable and can survive falls\u0026lt;/h3\u0026gt; \u0026lt;h2\u0026gt;Stainless steel water bottles keep drinks colder longer.\u0026lt;/h2\u0026gt; \u0026lt;h2\u0026gt;Stainless steel water bottles are the safer choice.\u0026lt;/h2\u0026gt; \u0026lt;h3\u0026gt;They don\u0026#39;t leach chemicals like many plastic bottles do.\u0026lt;/h3\u0026gt; \u0026lt;h3\u0026gt;They don\u0026#39;t rust like other metals.\u0026lt //h3 \u0026 gt; \u0026 lt; h3 \u0026 gt; They can be clean in the dispasher. \u0026 lt;/h3 \u0026 gt;

As you can see, the organizer of the content makes the website visitors or screen readers easily understand Each part of the content.

Cabin It may be tricky, but they usually collect payment information, product customization details, and even potential customers. This is why it is easy to access and use such an important reason.

A good start is Use tags -Yi, even if you have a placeholder! The tag should tell you what the user fills in (e.g. Email address), and the placeholders should share how to fill in this field (for example

[Email \u0026#160; Protected]

). This is the key part of the screen reader to understand your form. Make sure that all the required fields are clearly marked, and it is explained that (especially the format requirements of the date, phone number, etc.) are overviewed in an easy -to -understand manner.

Your form can be accessed by

keyboard

is also very important -they can only be navigated and filled with the keyboard. As a developer, when processing form data, submitting forms, and changing form unit elements, please use JavaScript carefully. The abuse of JavaScript is one of the most common reasons that forms cannot completely access.

Cabin -free video Video is an excellent way to explain your products, display its purpose, and share customer evaluation. Make sure they can also access!

One way to do this is

Add subtitles to your videos , which will help those who have deaf or hearing impaired understanding audio. The University of Washington provides you with a good reminder to add subtitles to your own. However, if a professional cameraman is making your video, you only need to add subtitles.

 Add audio description  is an important step to help blind people understand the video content. Create a separate track to describe important visual content, especially the part of the video without narration. You can also use the script to write all the audio content and describe the video itself.

You also need to consider

Video player

. Make sure your options support hidden subtitles and provide switches to open and turn off audio descriptions. You also need to ensure that all the buttons on the player can be used with the screen reader or keyboard.

Keyboard navigation We have discussed this, but it is important that your website can only be operated with the keyboard.

This is particularly useful for people who may be difficult to use of traditional mouse.

Because the tab

button is used to navigate throughout the page, it is important to set a website navigation to follow the visual process of the page (from left to right, from top to bottom). Test your website to ensure that you can use the TAB button in the following order:

Title Leading menu Any page navigation and link

Foot

It also takes time to check any custom width, application, plug -in, etc. Appropriate small components can be accessed. The biggest key here is testing, testing, testing! Take time to use keyboards to browse all pages to ensure that they are easy to use.

Access

If you sell digital on the e -commerce website, it is also important to ensure that

itself is accessible.

A good way to access PDF is easy to access is Add a PDF tag

, which provides the hidden and structured representation of the content of the screen reader. Adobe Acrobat provides your PDF easy access toVery good guide.

Of course, in the entire digital design, you also need to keep in mind the other access principles we discussed above, such as color contrast and font size.

When creating an online course, make sure to keep in mind video subtitles [] 123] and

audio transcript

and other concepts. Considering your content in a variety of styles, such as video, audio and text, so that everyone can find content that suits them. Many of the above design principles are also applicable to your course.

It is important to provide students with multiple communication methods . For example, non -language users may not be able to call and ask questions, and blind students may not be able to easily submit questions online. The same is true of submitting any assignments or curriculum homework. Keep your students flexible and work with any existing disability to help them make full use of your courses.

When talking about your online store is easy to access, it is important to spend time

Knowing how the disabled people will use your website

. When you have a good understanding, all stages of the development process can be easier to consider accessibility and finally provide an excellent experience for all your customers

If you are looking for more information, WordPress provides a great web accessible manual, including more testing tools, development of best practice and store owners.

Author: