Table of contents
No headings in the article.
I would like to talk about the accessibility in web development, as this subject was briefly covered in my full stack dev program but I did not fully realize the depth of this issue and its importance until I joined The Collab Lab. The topic of accessibility is becoming more and more popular and known to the general public. Companies seriously interested in the development of their products are hiring accessibility advocates. The aim of this article is to sum up my knowledge on accessibility and provide additional exposure to this topic.
As an able-bodied person I am lucky not to experience the need to read and navigate websites other than using my eyes and fingers, but as someone in my sixth year of pushing a stroller in the urban environment I do realize the importance of making roads and building entrances accessible and appreciate the fact the modern infrastructure is constructed with this requirement in mind. The information technology should be accessible to everyone in the same manner. And for developers taking an active approach to creating a fully inclusive web application will actually cost much less effort than it may seem initially but will bring incredible value to the product and benefit its users.
How to make your web application accessible:
1. Use semantic HTML to organize the structure
Screen readers use structure to navigate the content. If you are putting headings (<h1>, <h2>), semantic elements (<nav>, <article>) semantically and strategically, your web application will be easily interpreted by these devices. Keep heading levels in the decrementing order (<h1> to <h5>), do not skip the order. Build forms using grouping with the help of <fieldset>, <legend> tags when required. Each field should be well-positioned and focusable.
2. Include descriptive alt text for images
The alt text is used by screen reader users to understand the meaning conveyed by the image. If the image contains some text, this text should be included in the alt description. If the image is wrapped in a link, put this information in the text description as well.
3. Give links descriptive names
Descriptive text helps explain the context of the link to a screen reader user. If you are using markdown in a context management system - add the link description inside the square brackets. If you put a link using HTML, provide the name of the page you are linking to inside the anchor tag <a>, for example return to Tips List.
4. Use ARIA
I should start with the first rule of ARIA - do not use ARIA. ARIA stands for Accessible Rich Internet Applications. It adds accessibility information to elements that are not natively accessible. Always use native HTML elements if is possible, and if they are not available add ARIA attributes. The code with ARIA roles and landmarks could look like something like this: <div role="button">, which means that this div has a role of a button.
5. Integrate products developed specifically for a11y
A11y stands for "accessibility". There are already existing components built with a11y in mind. Right now I am working on customizing an a11y dialog to add to the shopping list application we are developing as part of The Collab Lab.
Let me know your ideas on this subject and what I could add to the article.
Resources used:
- Grouping controls at Web Accessibility Initiative
- Using ARIA at Web Accessibility Initiative
- Top 10 Tips for Making Your Website Accessible at Berkley Web Access
- A11y Dialog documentation
- A lecture on accessibility and consultations with accessibility experts at The Collab Lab