# Web Accessibility Basics

Web accessibility begins with understanding clean, standard code. It is about keeping an inclusive mindset and using the best practices to build a website. Learning how to remove barriers to make your website easy to use is critical. This is a brief introduction to web accessibility with some practical tips to implement for a better user experience.


## What is Web Accessibility?

>Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them. More specifically, people can:

> - perceive, understand, navigate, and interact with the Web
- contribute to the Web

>Web accessibility encompasses all disabilities that affect access to the Web, including:
- auditory, cognitive, neurological, physical, speech, visual

 [W3.org](https://www.w3.org/WAI/fundamentals/accessibility-intro/) 

This also includes temporary disabilities such as an injured hand, for example. A website should also be accessible on mobile devices with varied screen sizes. 

## Understand Basic Website Structure 

When developing websites, implement proper basic structure by using appropriate  [HTML elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element). 
Each of your web pages should include a logical hierarchy of heading tags and sections. 

 Need a refresher? Check out this [guide to basic HTML basics](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics)  

If your site has a predictable structure with proper HTML elements, headers, and labels, someone using a [screen reader](https://axesslab.com/what-is-a-screen-reader/) will have an easier time navigating through your site. 

You can check your HTML structure by running your pages through an [HTML checker](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) which will provide you with line by line details if there are any errors or suggestions to improve the structure. You might also want to check a variety of sites to see what types of errors show up. 

## Web Accessibility Tools

 [Axe](https://www.deque.com/axe/browser-extensions/) is a free accessibility checker available for Chrome, Firefox, and Edge as a browser extension. Once installed, you can run an analysis to get a list of any accessibility issues.

Another accessibility checker you can use is called  [tota11y](https://khan.github.io/tota11y/) which you can add as a bookmarklet or directly to your site.

If color contrast is an issue, you can use a [Color Contrast Checker](https://color.a11y.com/) to get the exact elements and color pairs that are causing a problem. 

Use a [responsive design checker](https://everysize.kibalabs.com/?ref=producthunt) to see if there are any issues on various screen sizes. 

 (Please note that these tools are not perfect, so it is a good idea to have multiple ways to check accessibility.)


## Final Thoughts

Accessibility is a broad topic, so I leave you with a collection of great resources for you to learn more.

- [Egghead.io course on building accessible web applications
](https://egghead.io/courses/start-building-accessible-web-applications-today) 

- [Udacity course on accessibility](https://www.udacity.com/course/web-accessibility--ud891) 

- [Syntax podcast episode about web accessibility](https://syntax.fm/show/072/accessibility) 

-  [CodeNewbie podcast episode with an intro to accessibility](https://www.codenewbie.org/podcast/intro-to-accessibility) 

-  [A11y-101 - detailed accessibility tips for developers and designers](https://a11y-101.com/) 

**If you are interested in making accessibility changes to open source projects, check out this [article](https://bellomuboye.hashnode.dev/a-beginners-first-pr-with-accessibility) by Bell Omuboye and/or join the  [Slack channel](https://a11yopensource.slack.com/join/shared_invite/zt-hm4awhpe-IFGV_y94E2N2n2L6s~VqRQ#/) for this group. **

What is your experience with web accessibility? Do you have some resources to share? Drop a comment below to get the conversation going! 

Photo courtesy of  [Unsplash](https://unsplash.com/photos/HE1zW44Zm_Y)