11 Golden Rules for A11Y
Tags: a11y, webdev, career
Published: 2020-12-16 19:10:29

# Let's make our websites accessible for everyone!

As a self-taught front-end developer, when I discovered the concepts of accessibility and inclusive design a few months ago, I did not know much about it. But I realised that many of us, in this web dev field, also don't know much about it. It is regrettable but accessibility is not the best field to invest in these days. It is just a popular buzzword which sometimes comes in and out of our attention. But we can really make a difference when we decide to start learning more about this. And possibly this would just be a small drop in the ocean but we really need that to achieve our goals. 
*Are you ready or eager to learn more?*

## What does `a11y` stand for?
> “a11y” stands for “accessibility.” It is a numeronym, with 11 representing the count of letters between the letter a and the letter y. Other numeronyms you may be familiar with include: i18n (internationalization), P2P (peer to peer) etc.

## 11 Golden Rules for Accessibility

### Which steps should we follow when we create a website?
 
The below rules are important and deserve our attention not only for accessibility but also for the usability of your website.

1. Always use a meaningful `Alt text`:
**Screen readers** may read out ugly, nonsense filenames to describe images. We don't want that as responsible developers right :smirk: ?

2. Define the level of accessibility of your website and follow the **guidelines** : [Web Content Accessibility Guidelines](https://www.w3.org/WAI/WCAG21/quickref/) 
This website should be your holy book when you want to get inspired :closed_book: .

3. Optimise **Color Contrast**: [Getstark](https://www.getstark.co/) This is one of the color optimization platforms where you can find more information about optimising colours for accessibility. 
![Color optimization on Sketch](https://www.getstark.co/sketch-action-2.png)

4. **Simplify** the language: We don't need complicated or sophisticated words to have a website. Someone once said that if you cannot explain your work simply then you don't understand it well enough.. Keep your content always simple and understandable, and keep your layout clear.
 
5. **Lead** the users: e.g. Always use form labels to describe input fields and place holders. Keep in mind that acceptable input field examples are really handy and useful.

6. Always provide **captions** for video content. Without captions it is meaningless to a person with a permanent or temporary visual problem. Never ever have your video automatically begin playing.

7. Don't forget to test **keyboard navigation**. A user should have the right to use his/her keyboard to navigate the website. We cannot take this advantage away from them.
 
8. Create **large buttons!** You don't have to be a designer to create large buttons. In this way it is more clear that this is a clickable button and it calls an action. 

9. Create **understandable links**: Have you ever thought: "I don't know where to click or where to go"? Yes! This is the reason why we need to be clear when we create links. Every link should have a meaningful reason behind it. So don't just make a href because you love a href..

10. Use **semantic** HTML elements: What on earth is semantic markup? Semantic elements mean elements with a meaning.```<main>, <nav>, <header>, <section>, <article>, <form>```and so on. Semantic elements clearly define its content.

11. Use **ARIA landmark** roles to add feature context to HTML elements.
[Aria Landmark Features](https://www.w3.org/TR/wai-aria-practices/examples/landmarks/main.html)

If you followed all the golden rules and are not sure where to ask, then ask the community: [A11Y Project](https://www.a11yproject.com/); they have the Accessibility Checklist for beginners to guide and enlighten you.. 

In a nutshell, Accessibility and Inclusive Design are really import to increase web content quality and make the standards higher on the web. Everyone has the right to reach your content. We should be more aware of these different aspects of web design and development.. I encourage you to everyday apply one new accessibility guideline on your website and enjoy while teaching to others.

Useful links to learn more: 

* https://www.w3.org/WAI/standards-guidelines/wcag/
* https://www.a11yproject.com/
* https://www.edx.org/course/web-accessibility-introduction
* https://www.webaccessibility.com/

Please do not hesitate to give any comment and add more sources or knowledge about accessibility. 

Thank you for reading.