8 tips for improving accessibility for your web designs - envato.com coupon

Web accessibility is a key component that is perhaps the most important aspect of modern web design. Without applying proper consideration during the design process, certain people can be excluded from using your website easily, or even at all. Below, we will be discussing some quick and easy tips that you can implement into your designs to ensure all users have equal access to your website and its content and functionality.

1. Always include Alt tags for images

This is especially important as it allows screen readers to provide a visual description of the image when the user is unable to view it. The description should be concise but descriptive.

Example

<img src= “tropical.png” alt= “Palm trees with the sea and sunset behind”>

2. Use H tags consistently and appropriately

The structure of H tags should be consistent throughout your designs. Page titles should typically use a H1 tag, headings a H2 tag, subheadings a H3 tag, and minor subheadings a H4 tag. This allows a screen reader or other assistive technology to effectively and accurately convey the hierarchy of the content to the user.

3. Design easy-to-use web forms

There are three main points to consider when designing a web form.

The first is to structure forms intuitively. Keep them simple, generic, and consistent with standard form flows.

The second is always including labels with each and every field. A common mistake can be to include labels in the placeholder section of a field. This, however, will likely not be picked up by a screen reader and can lead to confusion and issues for the user. Be sure to place the label outside but near to the field, and use the placeholder section to provide further cues such as example content. Also remember to always include visual cues such as asterisks alongside required inputs.

The final point is to include a large and prominent button below the fields with a descriptive label for the action to be committed. A typical form action button would use a label such as ‘Submit’ or ‘Post’.

4. Use larger font sizes for body text

The default browser font size is set at 16px, or 1em. Try to stick to this for content where the design will allow. People with good eyesight will typically have no trouble reading 11px, 12px, or 13px text, but it can very quickly restrict users with poorer eyesight from reading your content easily or even at all. This is great practice, easy to implement, and will instantly make your web designs more accessible.

5. Implement high contrast colors

The most common issue with contrast is using tones of grey which are too light for many users to read with ease. Practice picking high contrast colors for text and buttons. Use this tool by WebAIM to measure contrast in your designs.

6. Avoid ‘Click here’ links

Using ‘Click here’ as link text poses difficulties for all users, particularly those using screen readers. Always ensure links are descriptive and unambiguous.

7. Don’t rely solely on color for visual feedback

For field error states, sites often only convey the error through color feedback, such as red outlines or red text. This can make it hard for colorblind users to understand the error. As such, it’s important to provide other visual cues, such as error descriptions below the field, and/or appropriate use of icons.

This example is a well executed and accessible error state which provides three different forms of visual feedback: color, iconography, and a descriptive error message.

8. Include focus states for all input fields

This is a key visual indicator, particularly for users who are accessing your website solely with a keyboard. Without a focus state, keyboard users will have no visual indication of their position as they press the Tab key to navigate down the page.

This functionality is included by default in browsers, but CSS resets can often remove them in the belief that they will be replaced with something better. Ensure you test this particular use case on your website.

—

These are just a few tips to help you improve accessibility in your web designs, and take a step towards building a more inclusive web environment. Hopefully this gets you started with accessibility and is something you consider in the foremost phase of your next web design project.

The post 8 tips for improving accessibility for your web designs appeared first on Envato.

envato.com coupon from Envato http://ift.tt/2mKWEjZ
envato.com coupon