How do you make your website accessible to people with disabilities?

USE CAPTION VIDEOS Ensure your videos are accessible to individuals who are deaf or hard of hearing by including closed captions. Closed captions provide text that displays the spoken content and audio cues within the video. Additionally, offering transcripts of the video's dialogue can serve as an alternative means of accessing the video's content for those who may prefer reading or have other accessibility needs.

Web accessibility aims to allow people with disabilities to understand navigate and interact with websites. People living with disabilities often use assistive technologies to aid them in browsing the web. Screen readers, Speech recognition software, subtitles and video scripts provide assistance to those with audio and visual disabilities. If you use the correct html structure and appropriate elements as a foundation, it will greatly improve accessibility. for example having text that is not contained within proper tags like paragraph or heading tags makes it harder for assistive technologies to interact with the content. Similarly using multiple line breaks to break up text and add space also presents barriers to accessibility.

Semantic HTML is so important for helping browsers, screen readers but also search engines and all the users. If we talk about headings tag for example is very good to have one <h1> tag with the context of the page. Then you can use multiple <h2> in one page. Having multiple <h1> and no other headings tag (h2, ..., h6) create a flat structure. Not very good, huh? In my experience I see that a lot of times alt attribute are not properly compiled. Alt attribute are important for SEO (text search but also image search), accessibility but also for all the people that move mouse cursor on the image. It's important to do a test with a screen reader!

Semantic HTML: Use proper HTML tags for content structure. Alt Text: Provide descriptive alt text for images. Keyboard Navigation: Ensure all interactive elements are navigable via keyboard. Color Contrast: Maintain good contrast for text and background. Accessible Forms: Use labels and ARIA roles for forms. Testing: Regularly test with screen readers and other assistive technologies. Focus Styles: Implement clear focus styles for keyboard users. Aria Roles: Use ARIA attributes for non-standard elements. Transcripts and Captions: Include transcripts and captions for multimedia content. User Feedback: Gather feedback from users with disabilities for improvements.

We need to follow the color standards as well so people with color blind also can differentiate the text or other contents in the web applications.

Every web developer should read and apply the WCAG guidelines. Very soon (august 2023) the new WCAG version 2.2 will become a web standard. It will have new guideline on: - navigability (navigate pages, find content and determine where they are. For example new requirements for the focus); - input modalities (making life easier for users that operates with various inputs, for example dragging movements); - predictability: having web pages that appear and works in predictable ways. It's common sense: if there is a help button it have to be in the same place in all the pages; - input assistance: help users avoid mistakes

Is important to use ARIA roles and attributes. It can help browsers and screen reader to understand what component type they are reading. Sometimes web developer, for many reasons, don't use native elements. This can be a potential mess, but using ARIA roles and attributes they can solve the problem, because you can indicate what element type is or the state of that element. As a developer I try to use native elements whenever I can. Sometimes is only a matter of using your brain.

Get automated accessibility tooling into your build chain ideally failing builds when accessibility fails your desired standard.

I think that testing a website or a webapp accessibility is always a good idea. Not only governative website have to be accessible, but all the website. People with disabilities can buy also on your website! You can test the website with a screen reader (for example mac osx have voiceover, free). You can scan your website with an accessibility scanner that give you a report with all the problems found. If you are a developer there are plugins to check the accessibility status of a component. For example in Storybook there are plugin that can help you build an accessible UI component.

On the web there are magnificent examples of accessible websites. You can easily find an accessible website searching for public administration websites. I think that is important to follow all the rules but also to create good looking websites.

Is important to read news posted on accessibility groups. But the real fun come if you go to meetup and talks. I mean offline meeting, where you can physically meet people with common interests and accessibility experts. I remember one fantastic experience I made one day when I attended an Accessibility Club meeting in Munich. It was a lovely day where I meet super experts and I enjoyed it very much. I'm a fan of remote work, but sometimes meet people in real life can help to grow!

Inclusion drives innovation. Beyond the foundational practices of semantic HTML and WCAG guidelines, it's essential to continually educate oneself about emerging technologies and methods that aid accessibility. A crucial consideration is ensuring that multimedia content, like videos, offers captions and transcripts. This not only benefits hearing-impaired users but also expands content reach to broader audiences, enhancing overall user engagement.