Web accessiblity means that websites, tools, and technologies are designed and developed so that people with disabiliies can use them. More specifically, people can perceive,
understand, navigate, and interact with the web and contribute to the web.
Guiding Prinicples of web accessiblity POUR
P - Perceivalbe - either by seeing or hearing, text alternatives.
O - Operable - Keyboard accessiblity, navigatble, enough time to read and use content.
U - Understandable - readable, predictable, opportun ity for user to correct mistakes.
R - Robust - be used with different browsers and assistive technologies.
Accessiblility goes beyond disability
People using mobile phones, smart watches,rt TVs, and other devices with small screens, different input modules, etc.
Older people with changing abilities due to aging.
people with temporary disabilities such as a broken arm or lost glasses.
People with situational limits such as in bright sunlight or in an environment where they cannot listen to audio.
People using a slow internet connection,or who have limited or expensive bandwidth.
How to make accessible websites
Semantic HTML, <header>, <nav>, <main>, <footer><section>, <article>, <form>, <input>s, with
<label>s, heading levels, aria, alt attributes.
You can also use CSS to create accessible styles. Font sizes (responsive units), font families, color contrast, sizing touch targets, line spacing and letter spacing, hover/focus/active.visited states,
hiding elements in an accessible way, using animations thoughtfully, ect.
Some semantic HTML will have default styles that affect the appearance of your page, others have no style at all but serve as landmarks for content that are recognizable to all users.
Use a <button> for an internal link or action, and <a> to go to an external location, a new page, or a new landmark on the page.
Acessiblity Starter Checklist
POUR - Perceivable? Operable? Understandable? Robust?
Semantic HTML
Landmark elements
Heading tags build skeleton of the page.
Do images have alt text?
Are buttons and other custom elements interactive?
Color and contrast
Focusable styles
Can you tab trhough the page? (tab index) (tab to go to the next, shft + tab to go back)
Do you have access to all the same information on the page with a screen reader?
Accessibility lvl2 Checklist
Skip Link, if there are lots of navigation menus (sr-only class - code snippet)
Can you focus on off-screan content? This will trip the keyboard users and scren-readers.
Test with one type of screen reader.
Aria Properties
WAI-ARIA can come in handy when your working in someone elses codebase.
aria-label
aria-live, boolean
aria-labelledby
aria-required
Following heading structure <h1>, <h2>, <h3>, ext. is good for Accessibility
(it's what the screen-readers expect) and SEO.
Use links for navigation to somewhere on the same page, within the site, or elsewhere on the internet. Use correct button vs link for accessibility.
Use aria-live="" when changing the text of something within js, so the screen-reader knows to go back and read it.