Web Accessibility is an important factor in your design and development. With 56 million people with a disability in the United States alone (almost 1 in 5), and 1 billion worldwide, making your website accessible is not something to merely dismiss. Not only is it a requirement for many, it is just plain good UX, leading to your sites ability to reach a wider audience, improve SEO and site search-ability, and maybe even increase conversions. Luckily, making your site accessible is not as hard as you might think!
I will be creating this list of web accessibility recommendations in a three part series, focused each part on: Order and Tags, Content and Labels, and Color and Contrast.
Part 2 - Content and Labels
Use Descriptive Links
When a screen reader hits a button that merely says "Click Here", the user may be questioning what "here" means, and where that link will take them! Throughout your website, it is best to make text in links as descriptive as possible. A link should be descriptive in a way that you would understand where it goes without the context of its surrounding elements.
What to do
Plan out your links so that you can make them descriptive while still keeping your website content cohesive and simple. Try to make your links understandable even when out of context.
Resources
Using Alt, Scope, Role and Aria Tags
Screen readers use a number of tags to communicate additional and often necessary information to visually impaired users. These tags are 'hidden' and do not display on the browser, but instead show up when a screen reader or robot scans the site.
What to do
Alt (or alternative) Tags: Provides a description and meaning to an image or figure. Use them on every image.
<alt="descriptive text">
Scope Tags: Used on Table headers (th) to specify if is a header for a column or row.
<th scope="col">
Role and Aria Tags: Allows developers to include additional background information to an html element that a user on a screen reader may find useful, or to hide them when not needed.
<img src="..." role="logo"/>, <button aria-label="close">, <span aria-hidden=”true”>
Resources
Include Labels on Forms
Many designers resort to using placeholder text to label input boxes on forms, as it can make the form feel cleaner or more modern, while reducing its size footprint on a page. This is a big mistake, and should be avoided with accessibility in mind. When a user with a screen reader tabs through a form, they jump between label and input box, but placeholder text is usually skipped over. Not using labels in your forms sacrifices usability for many potential users.
What to do
It is best to include labels for form input boxes, but if the goal is to de-clutter then the use of small and brief labels should be used instead. Brevity in your labels should not sacrifice usability and the user having a clear understanding.
Resources
- Nielsen Norman Group: Placeholders in Form Fields Are Harmful
- freeCodeCamp: How to make an accessible form: it’s easier than you think
Conclusion
Part 2 complete! I hope you found this first set of recommendations useful in your journey into web accessibility. Web accessibility is always evolving and improving, and I am still trying to learn more about all of the requirements, options, and nuances available do designers and developers. Remember, making your website accessible opens doors to new users and is just plain good UX design, so implementing the basics is a great start. Please respond with any comments or additional resources I can include that readers might find useful!
Additional Resources
Below are some additional web accessibility resources, tools and guidelines for your site or project.
- W3C Web Content Accessibility Guidelines (WCAG) 2.1
- UX Collective: Designing for accessibility is not that hard
- UX Pin: 8 Website Accessibility Best Practices to Improve UX
- Invision Design: A guide to color accessibility in product design
- Inclusive Components: A library of ideas for making components accessible
- Vox Media: Accessibility Checklist for Designers, Engineers, and Project Managers
Additional Tools
- AXE: Web Accessibility Testing Chrome Extension
- Jxnblk Colorable: Color Contrast Checker
- Sim Daltonism: A Color Blindness Simulator
- SilkTide: Disability Simulator for the Web
Top comments (0)