Important notice about the «ADG» project
Important notice: Due to large demand, the «Accessibility Developer Guide» project (currently a proof of concept with low priority) will become a top priority priority in 2017. We will make this guide become what it deserves to be for so long already: a comprehensive resource for all folks interested in accessibility. For this we need your support!
Browsing a website with NVDA
Look at the following tutorials to gain a first idea on how to control a screenreader. You'll learn how to read different types of content on websites.
Each tutorial is very small and narrowed to the specific topic. This is to make the experience as easy and enjoyable as possible.
After you have some experience with controlling a screenreader, you will be ready to check out bigger websites (which often times are not optimised for screenreaders and therefore are difficult to use).
Make your way through all the links below. Make sure that you have fired up NVDA when opening them (start NVDA using
Ctrl + Option + N), and you may want to have the Speech Viewer window open, too (in the NVDA menu, choose
- Browsing an empty page - see what an empty page looks like to a screenreader
- Browsing paragraphs - browse paragraphs of different lengths
- Block vs. inline - experience the difference between block and inline content
- Block vs. inline-block - experience the difference between block and inline-block content
- Browsing lists - lists are announced differently to screenreaders than "bare" text content
- Browsing headings - see why headings are very important things
- Links in action - the things which made the internet the internet
- Layout tables - they still aren't dead!
- Hide empty table cells in layout tables - ever heard of fancy HTML emails?
- Browsing tables - experience how tables are linearised
- Heterogeneous tables - how complex should tables really be?
- Content flow - the sequence in the DOM matters!
- Hidden content - how content can be hidden in different ways and for different purposes
- Websites in other languages - or: Why does this sound so funny?
- Footnotes and other references - no problem if you know how!
- Associate other information with elements - how to add info to an element (or even replace the element's content with other info)
- Overrule heading levels using ARIA - change outline hierarchies using ARIA
- Teasers to do - how to create semantically awesome teasers
- Skip links to do - how they need to be implemented
- Abbreviations to do
- Document parts in other languages to do
- Create fool-proof focus styles to do
- Wrapping text manually to do
- Heading outlines to do - how to create semantically awesome heading outlines (different variants, e.g. SEO)