Bring the tool to the front of any website

Unlocking the Potential of Data at Australia Data Forum
Post Reply
arzina566
Posts: 42
Joined: Tue Dec 17, 2024 2:56 am

Bring the tool to the front of any website

Post by arzina566 »

For example, a screen reader knows that everything between the <nav></nav> tags is part of the menu, and everything between the <main></main> tags is part of the main content of the page. The screen reader can also distinguish between different paragraphs based on the <p> tags.

By ordering your HTML elements chronologically, you also prevent a screen reader from presenting your content in a different order than intended. Sometimes, developers use CSS and JavaScript to place elements on the screen in a certain order that does not match the order in which they appear in the code. This can be very confusing for people who rely on assistive technologies.

By using the most 'suitable' elements you often get 'free' functionality. For example, by using a <button> element for a button, instead of a general <div>, the button is immediately suitable for operation with a keyboard.

Finally, well-structured code also makes it a lot easier for you as a developer to work with the code.

5. It does not take as much time and money as is often thought
Marketers may not see the value in making a website accessible. It can be expensive and time-consuming to revamp an existing site to make it WCAG compliant. However, if you consider using accessible development techniques and optimizing your multimedia content from the beginning of development, you can keep the time and costs to a minimum.

What can I do to get started with this?
Scan your website to find out where the first points of improvement are. There are several tools available to find out which obvious points you can tackle to improve the accessibility of your website.

WAVE
WebAIM's WAVE tool shows you where you can still work on your site in the form of warnings and errors, but the tool also shows you which accessibility features you already meet, such as ARIA labels or landmarks. A handy feature is that you can 'jump' to the element per warning or error, so that you know exactly what it is.

WAVE

You can then also click through to the reference so that you can read more extensively what you can do to address that point. In addition to the web version of WAVE, there is also a browser extension available for Firefox and Chrome.

Tota11y
Another handy tool is Tota11y. The cool thing about it is that it is actually a piece of JavaScript that you can bookmark. That means you can easily

Tota11y

You then walk through the page step by step, and also receive suggestions for improvement. For example, if the tool indicates that there is insufficient color contrast between certain elements, it gives a suggestion for another color combination that does offer sufficient contrast.

User testing
However, tools remain just aids. They can't check sweden telegram data everything and it's not always correct. So always keep thinking carefully yourself and also go through the WCAG guidelines (or the simplified checklist) yourself.

However, nothing beats the final testing with real users. As a developer, it is difficult to imagine how people with a disability really experience your website. With user testing, you can see whether your website is actually considered accessible in practice, and what you can possibly adjust further.

Image

Accessibility: Where to Start?
This article is just the tip of the iceberg in terms of content you can find on accessibility. If you are serious about accessibility, there is so much content out there that you may not know where to start and what you 'need' to implement.

However, keep in mind that it is nearly impossible to be 100% accessible and check off the entire WCAG checklist at level AAA. And it doesn't have to be.

It's about taking accessibility into account, preferably from the beginning of a project, and doing as much as you can. Not just disabled users, but all your users will thank you for it in the end.
Post Reply