Introduction
The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.
– Tim Berners-Lee, W3C Director and inventor of the World Wide Web
Note: This lesson contains 1 activity that you should complete.
Web Accessibility
It is important to design and build accessible websites that every visitor can benefit from. This means we should consider how people with various impairments, such as visual impairments, or those using assistive technology, will find our websites.
Not every user will be using a keyboard and mouse, and we need to ensure the sites we build are as encompassing as possible in their usability. Building sites with accessibility in mind will often lead to better websites for everyone, even developers themselves.
Accessibility in design
We have already gone over accessibility in design in Design 1 and discussed the importance of clear, easy-to-read content.
Making a design visually accessible includes, among others, having enough contrast between text and its background. It is vital to ensure that the content on any website is easy to follow for people who are visually impaired.
Accessibility in development
There are many ways we can make our websites more accessible. Simple things like adding alternative text to images means that people exploring our site through an assistive technology will be able to hear what the images are about even though they can’t see them.
As we go into HTML and CSS, we will see more ways of making our websites more accessible. This includes using semantic HTML so that assistive technologies know which headings are most important and which links on the page are the most important ways of navigating the website.
Useful tools
These are a few useful tools that will make life easier for you as a developer. Just as a writer might use a dictionary to look up a word, so it’s useful as a developer to have tools you can rely on to help guide you. Especially as you’re getting to develop websites, it’s hard to remember every tag and syntax. Here are a few useful tools:
Stackoverflow
Stackoverflow is a popular developer forum where developers ask and answer queries. If you’re struggling with an error, there’s almost always someone else who’s had the same error, and it’s worth checking out Stackoverflow.
Warning: be careful of bad answers. Usually, answers will get upvoted and it will be easy to see which is the correct solution to your issue. It’s also worth noting that answers change over time, so make sure the answer you follow is up-to-date.
MDN
MDN is a very well-maintained set of web documents. The documentation is managed by Mozilla, who run Firefox. MDN’s site tagline is ‘Resources for developers, by developers’, and it will prove very useful as you develop more and more.
CSS Tricks
If you’re looking for an article regarding a specific topic on web development, CSS Tricks is a great place to visit. Web developers love sharing ideas and techniques they’ve found to achieve certain results. CSS Tricks offers a good platform for reading and exploring these articles.
W3Schools
If you search for a web topic on Google, it’s likely that W3Schools will rank quite highly in your search results. It is quite an extensive guide to web development, but it isn’t well maintained, and quite a few techniques they share are outdated now. MDN is usually a more up-to-date resource to use.
Mac and Linux users: A warning about installing Node Please NEVER use the sudo command to install Node or any npm package as this will cause a lot of permission problems and is difficult to fix.
Activity
READ
Chapters: 10, 11, 12, and 13 from Don’t Make Me Think by Steve Krug (2h)