For a sighted person, it’s hard to imagine how a screen reader user surfs the internet. For a web developer with accessibility in mind, it’s crucial to have a basic knowledge about this topic. So be ready to get a concrete idea of the main strategies available to read a website using a mobile screen reader!| Accessibility Developer Guide
ARIA provides an attribute which allows to attach other elements as descriptions to an element. They work pretty non-uniformly in modern browsers and screen readers, and as such they must be used with extreme caution.| Accessibility Developer Guide
In order for us to provide you the best possible experience on our guide, we need to collect and process certain information.| Accessibility Developer Guide
The PDF Accessibility Checker (PAC) provides a fast way to test the accessibility of PDF files. On one hand, it checks whether the PDF/UA standard is met. On the other hand, it offers a great preview feature that visually displays the document similar to the way a screen reader perceives it, making it easy to spot problems in both sequence and meaning of elements.| Accessibility Developer Guide
Total Validator checks your website regarding various web and accessibility standards by the press of a button. Building valid code is one of the highest goals developers should strive for. Total Validator helps a lot with achieving this.| Accessibility Developer Guide
"Web Components" is an umbrella term for three main technologies: Custom elements, shadow DOM and HTML templates. Using these technologies allows us to create reusable, optionally encapsulated components. There are some important caveats regarding accessibility we need to keep in mind when authoring web components.| Accessibility Developer Guide
To reach as many users as possible, it's a pragmatic approach to support the most widely used combinations of browsers and screen readers. Here you learn, which those are. Other requirements may only apply in closed environments that are only open to a specific, deterministic group of users.| Accessibility Developer Guide
The introduction of smartphones increasingly led web designers to avoid traditional "bulky" HTML tables - because these would exceed the limited screen dimensions. Others tried to find ways to change the layout of tables so they would not need so much horizontal space anymore. Responsive tables were born. But to make them accessible, the use of some ARIA is essential.| Accessibility Developer Guide
Not surprisingly, HTML (Hyper Text Markup Language) is exactly that: a markup language. This means that it is not only plain text, but text marked up with meaning - so called "semantics". For this, HTML offers a lot of tags, each with an inherent, unique semantic meaning. And it is absolutely crucial that those tags are used properly.| Accessibility Developer Guide
The «Accessibility Developer Guide», in its entirety, is the result of many years of hands-on practice in the field of testing websites for accessibility, as well as developing accessible web applications. The daily experience of user experts with special needs, blended together with the profound technical knowledge of fullstack web developers, resulted in forming the «Accessibility Alliance».| Accessibility Developer Guide
This guide aims to provide a comprehensive resource for both beginners looking for a pragmatic way to dive into the world of accessibility, as well as seasoned experts wanting to extend their knowledge and embrace new inspirations. Here you will find out how to read through our guide, and how to stay up to date.| Accessibility Developer Guide
For developing accessible websites, you need some common Windows web browsers. In this chapter, you will learn how to install and configure them. Additionally, we introduce some useful extensions that will support you in your daily routine.| Accessibility Developer Guide
Beneath big players like browsers and screen readers, there is a vast number of software that helps in developing accessible websites. In this chapter, you will find a collection of our favourite helper tools. Some of them are third party software, others are integrated into Windows.| Accessibility Developer Guide
Operating websites with screen readers is one of the most efficient techniques to ensure accessibility. For beginners, screen reader usage can be a bit confusing at first, especially if the software is not configured properly for testing purposes. In this chapter, you will learn how to install and configure both mobile and desktop screen readers in a way for you to use them conveniently.| Accessibility Developer Guide
To ensure the accessibility of websites, the most important software is native Windows software, such as desktop screen readers. In this chapter, you will learn how to prepare everything for the upcoming installation tasks. And if you want to keep your own Windows working environment clean (or if you aren't using Windows anyway), we suggest you set up a dedicated Windows installation within a virtual machine.| Accessibility Developer Guide
Browser extensions are software modules for customizing and extending a web browser. Browsers typically allow users to install a variety of extensions, including those that make development and testing easier.| Accessibility Developer Guide
Windows high contrast mode (Win HCM) changes the colours on the screen to a specific high-contrast scheme. It is used by visually impaired people. It is a useful tool to ensure that visual information is not conveyed with purely decorative styles.| Accessibility Developer Guide
Having sufficient contrast between foreground and background colours is an essential part of usability in general and accessibility in particular. The Colour Contrast Analyser (CCA) is a tool that calculates the contrast between two colours and automatically evaluates the returned value against the Web Content Accessibility Guidelines.| Accessibility Developer Guide
Bookmarklets are bookmarks that contain JavaScript instead of a URL. You can execute them while reading a webpage, and they typically do some quick analysis and display their results.| Accessibility Developer Guide
HeadingsMap generates an index of any web document structured with headings and sections. It shows the headings structure, the errors in the structure (ie. incorrect levels), and it works as HTML5 Outliner too.| Accessibility Developer Guide
WAVE toolbar gives you a very quick first impression about the quality of the current webpage’s accessibility. At the press of a button, it provides visual cues by injecting icons and detailed information right into the page.| Accessibility Developer Guide
Probably well known by most web developers already, the Web Developer toolbar extension adds various tools to the browser that are incredibly useful for all sorts of code inspection and debugging. It can sometimes even be seen as a screen reader substitute — if you know its limitations.| Accessibility Developer Guide
The idea behind HTML 5's heading algorithm is great: it promises to offer valid and highly accessible heading outlines that can be much easier to implement than traditional ones. Sadly, it was never really picked up by any browser or screen reader, and the HTML 5.2 draft advises against using it any further.| Accessibility Developer Guide
Being the favourite browser of many web developers anyway, Chrome also has some nice features and extensions that are useful in the daily accessibility workflow.| Accessibility Developer Guide
Edge replaces Microsoft's legacy browser Internet Explorer 11 (IE 11) and is based on the same Chromium open-source code base as Google Chrome.| Accessibility Developer Guide
Being one of the most sympathetic browsers available, Firefox (FF) is widely used and loved by people with special needs, especially technology-adept ones. One of FF's main characteristics is its high conformance regarding web standards, including those related to accessibility.| Accessibility Developer Guide
An accessibility checker for developers, testers, and designers. Find and fix accessibility issues during website development.| Accessibility Developer Guide
The Accessibility Developer Guide is published under the MIT License.| Accessibility Developer Guide
Semantic HTML does not only provide meaning to content elements, it also provides the foundation for elements' interactivity. Be it links, buttons or various form inputs - browsers know exactly how to deal with them, and they provide the user with everything needed for proper interaction with the website.| Accessibility Developer Guide
Microsoft's legacy browser (and every serious web developers' longtime nemesis) Internet Explorer 11 (IE 11) is not officially supported any more. See Edge for its successor.| Accessibility Developer Guide
JAWS (Job Access With Speech) is one of the most-used desktop screen readers. Therefore it's very important to ensure its compatibility with your websites. Due to its heavy weight, JAWS is a rather clumsy companion while developing, but it's absolutely crucial to fire it up every now and then for counterchecking accessibility on desktop.| Accessibility Developer Guide
NVDA (Non Visual Desktop Access) is a lightweight and reliable open source desktop screen reader. Because of its firm compliance to standards, it is the desktop screen reader of choice when developing accessible websites. After using it for a while, you will respect it as a firm but fair teacher.| Accessibility Developer Guide
On macOS, running Windows as a virtual machine needs some special configuration, especially to integrate it seamlessly into the daily workflow. Once properly set up, accessibility testing on macOS will be as comfortable as it gets.| Accessibility Developer Guide
Even if you are already running Windows as your operating system, it is highly recommended making the initial effort needed to set up another Windows within a virtual machine, configured specifically for accessibility testing. This keeps your own system clean and makes accessibility testing much more comfortable.| Accessibility Developer Guide
While mobile screen readers already offer a pretty good idea of how it is to surf the internet as a blind person, they offer way less features (and thus complexity) than desktop ones. So be ready to get a concrete idea of the main strategies available to read a website using a desktop screen reader!| Accessibility Developer Guide
This bookmarklet highlights a lot of typical semantic HTML elements, conveying their tag names. This makes inspection of the current page's semantic structure pretty easy.| Accessibility Developer Guide
This bookmarklet analyses the displayed page's HTML source and detects violations of the coding standard. It offers a huge amount of predefined rules and can be extended with custom rules.| Accessibility Developer Guide
This guide is the result of tight collaboration between accessibility experts and web developers. Its content by far is not exhaustive yet: there remain a lot of topics to talk about, and due to the fast evolution of web technologies, there certainly will always be.| Accessibility Developer Guide
Forms consist of many interactive elements. To work through and understand the examples in this chapter, besides knowing keyboard only usage, it is good to have a screen reader at hand and know how to handle it. In addition to this, there are some tools and bookmarklets that can be a huge help in your development workflow.| Accessibility Developer Guide
To be meaningful, heading outlines must be coherent on both a technical and textual level. While headings often are omitted completely by naive web developers, existing heading outlines can suffer of various accessibility problems on both a syntactical and a semantical level.| Accessibility Developer Guide
Headings are solely browsable elements and do not offer any interactivity. To work through and understand the examples in this chapter, it is good to have a screen reader at hand and know how to handle it. In addition to this, there are some tools and bookmarklets that can be a huge help in your development workflow.| Accessibility Developer Guide
Tables consist of solely browsable elements and do not offer any interactivity. To work through and understand the examples in this chapter, it is good to have a screen reader at hand and know how to handle it. In addition to this, there are some tools and bookmarklets that can be a huge help in your development workflow.| Accessibility Developer Guide
This bookmarklet provides an efficient way to display the current webpage's heading outline, very close to how screen readers do. In addition, it has some pretty useful features like displaying potentially incorrectly hidden headings.| Accessibility Developer Guide
Grouping form controls in a meaningful way can make them much easier to handle for everyone. While most controls can be grouped, some must be grouped. The fieldset/legend structure is available for exact that - it can even be nested. And if its visual limitations are a problem, ARIA can be of help.| Accessibility Developer Guide
Asterisk (*) next to a form control's label usually indicates it as "required". Oftentimes, this asterisk's purpose is then explained somewhere else on the page. Many users (especially screen reader users) may be confused with that, so make sure this information is easily accessible.| Accessibility Developer Guide
In some situations, table headers need to be placed at a specific place on screen, and remain there, even when scrolling. Especially when tables are very long, it is useful to make the table header sticky on top so visual users always see it, even when scrolling vertically.| Accessibility Developer Guide
There often exist various approaches to solving an accessibility requirement, but usually one specific solution stands out clearly. The chapters in this 4th part of our guide, the Examples part, contain our collection of such rock-solid and inspiring solutions. They are available as real-life code examples (ready for copy&paste), and as such can be executed and played with directly in the browser.| Accessibility Developer Guide
The «Accessibility Developer Guide» is an initiative of «Access for all», Swiss Foundation for technology adapted to people with disabilities. It is developed and maintained in collaboration with a number of acclaimed web agencies. The vision behind the Accessibility Developer Guide is to bridge the gap between providers of websites and users with special needs.| Accessibility Developer Guide
To begin developing accessible websites, some basic knowledge about the required tools and techniques is needed. The chapters in this 3rd part of our guide, the Knowledge part, will support you to get acquainted with various important topics of rather theoretical nature - with high practical value though. They will prepare you to actively dive into the world of accessible website development.| Accessibility Developer Guide
For creating websites with accessibility in mind, you need to have some specific software at hand. The chapters in this second part of our guide, the Setup part, will teach you how to set up all of the software. The complete setup is tailored to the needs of developers, but for readers with lesser demands, we also provide a pragmatic minimal version of the setup.| Accessibility Developer Guide
Forms provide interactivity with websites. If coded properly, basic forms are natively accessible. And to achieve advanced functionalities, more sophisticated techniques are available.| Accessibility Developer Guide
Like a traditional book's table of contents, a proper heading outline allows screen reader users to quickly get an overview over the available areas of a page (including header, main, footer, and alike), and their respective contents. Furthermore, a comprehensive heading outline supports quick navigation inside all those contents.| Accessibility Developer Guide
There are cases when some element on a page needs to be hidden in some way: for example you want to show some content to one audience, but not to another one. In this chapter, you learn how to do this properly. Much is possible, but there are some pitfalls you really need to know about.| Accessibility Developer Guide
An HTML file has a clearly defined structure that allows any browser to render the content correctly. To make an HTML file accessible you need to know the basic structure and its roles.| Accessibility Developer Guide
There are some ARIA roles and attributes that we use and recommend in our daily business, especially regarding JavaScript widgets. They are well supported by screen readers, and if you know their peculiarities, they can be very helpful in creating accessible websites. However, we often describe and recommend alternative techniques with traditional HTML.| Accessibility Developer Guide
Tables allow to present complex data in a structured manner. They have a long history: from layout tables around the 2000's to today's need for responsive tables. Traditional tables are fully accessible, but you still should try to keep them as simple as possible. Even in more advanced use cases, they can be fully accessible - if you know how to do them right.| Accessibility Developer Guide
Being the most promising technique for modern websites, JavaScript can be the most challenging one for accessibility. If done right, they both truly complement each other.| Accessibility Developer Guide
There are indeed situations where standard HTML does not provide functionalities for all the requirements developers may have for implementing modern and interactive websites. For this, the Accessible Rich Internet Applications (ARIA) technical specification was introduced. In this chapter, we introduce how it is purposely used, show its potential as well as its shortcomings (and alternatives, if needed).| Accessibility Developer Guide
Visual elements like for example text, icons, input fields and charts need to be easily perceivable. On the most basic level that means that they have to clearly stand out from their background. But it's also important that they can be easily distinguished from similar elements around them – for example links embedded in a text paragraph.| Accessibility Developer Guide
Due to physical restrictions, many users cannot control a pointing device like a mouse or touch screen. So they rely on keyboard usage only, and thus, software must be fully functional with a keyboard only. In this chapter, you will learn everything you need to know about browsing websites using a keyboard only.| Accessibility Developer Guide
To develop accessible modern websites, it's absolutely crucial to have basic skills in both reading and interacting with websites using screen readers. In this chapter, you will learn everything you need to know about using both mobile and desktop screen readers to browse the web.| Accessibility Developer Guide
While today's trend goes for more and more fancy visuals everywhere, it is still important to mark up content with proper HTML. In this chapter, you will get familiar with the concept of "semantics", and why they are indispensable in website development.| Accessibility Developer Guide
Even in technically fully valid forms, there can be a lot messed up semantically, making it hardly accessible in many ways. Be it missing or improperly implemented elements - here we show the most common problems and explain them.| Accessibility Developer Guide
Forms are widely used to accept user input, be it for transferring it to the server or to act upon it locally using some JavaScript. HTML provides for accessibility, so cleanly laid out and marked up form controls are already fully accessible all by themselves. Still, screen readers may sometimes announce specific elements a bit irritatingly.| Accessibility Developer Guide
It sometimes feels necessary to group complex forms visually using headings. As traditionally used headings are non-focusable elements, you have to make sure that they are not missed by screen reader users in focus mode.| Accessibility Developer Guide
Sometimes it is necessary to have form controls within tables. And while tables provide their own labelling mechanism, it is important that each and every control still has its dedicated label.| Accessibility Developer Guide
Although headings are the most widely known technique to label page regions (like header, navigation, etc.), there exist other ways to label content in HTML. In our opinion though, headings are both the most expressive and simple technique. But let's examine the situation a bit deeper.| Accessibility Developer Guide
Structuring content with headings is always a good thing: no published book containing structured text could ever live without it. Headings allow to skim through the book, and the table of contents (TOC) of a book is based on them. On websites, headings work the exact same way as they do on print documents.| Accessibility Developer Guide
Iframes allow to include any external content into a page. As such, precaution must be taken that external content does not mess up the semantics of the surrounding content with improper heading levels and hierarchies.| Accessibility Developer Guide
Websites optimised for accessibility also result in better search engine rankings. The question regarding multiple headings on level 1 often concerns search engine optimisation (SEO) experts. While we do have a clear opinion on it (based on years of experience and intense debates with various experts) we also offer alternative solutions.| Accessibility Developer Guide
Not only the main content of a web page needs to be marked up using headings, but also other elements like header, navigation, footer, etc. As the visual design usually does not include those headings, they need to be visually hidden by moving them off-screen.| Accessibility Developer Guide
To hide an element from all devices means just that: no single device will perceive it anymore (although the element still is present in the DOM). This can be achieved using either an HTML attribute or CSS attributes.| Accessibility Developer Guide
To hide an element from screen readers means: visually (on a computer screen) it is perceivable, but non-visual clients (for example screen readers) ignore it. This is done easily using ARIA, but you should never try this on focusable elements.| Accessibility Developer Guide
Search engine optimisation (SEO) experts often are concerned about hiding elements visually. This due to the fear of being penalised for SEO fraud. But today's search engines are very smart, and sensible optimisation of content for accessibility reasons is honoured by them.| Accessibility Developer Guide
To hide an element visually means: visually (on a computer screen) it is not perceivable anymore, but non-visual clients (for example screen readers) still perceive it. There is no official technique for doing this, but there's a well proven workaround.| Accessibility Developer Guide
ARIA provides a role which makes screen readers announce an element immediately after its addition to the DOM (using JavaScript). While this works in most browsers and screen readers, it must be used with extreme caution as it interrupts the screen reader's current output.| Accessibility Developer Guide
ARIA provides an attribute which allows to mark an element in a set of elements as the current one. It works pretty uniformly in modern browsers and screen readers. Still, for most situations there exist alternative techniques that are more robust.| Accessibility Developer Guide
ARIA provides an attribute which allows to describe the expandability status of an element. It works pretty uniformly in modern browsers and screen readers, and as such is a good solution for many situations where an element's visibility should can be toggled.| Accessibility Developer Guide
ARIA provides attributes which override the accessible label of an element. As they are treated differently in modern browsers and screen readers, they must be used with caution. They also have some noticeable side effects. There exist alternative techniques that are much more robust.| Accessibility Developer Guide
ARIA provides a role which removes the inherent semantics of an element. While this works in most browsers and screen readers, it is rarely needed.| Accessibility Developer Guide
ARIA provides an attribute which allows to mark an element as activatable. It works pretty uniformly in modern browsers and screen readers. Still, for most situations there exist alternative techniques that are more robust.| Accessibility Developer Guide
Oftentimes, developers forget to mark up a table's header cells with the proper HTML tag. Instead, they are styled only visually as headers. But tables lacking proper header cells are tricky to navigate by screen reader users, and the more complex they are, the less they can be understood.| Accessibility Developer Guide
Tables are widely used to display tabular data, be it complex or simple. HTML provides for accessibility, so cleanly laid out and marked up tables are already fully accessible all by themselves.| Accessibility Developer Guide
Sometimes, table headers are not provided in the visual layout. This is feasible, as visual users often recognise the larger context of tables without the need for visual headers. For screen reader users though, table headers are always necessary.| Accessibility Developer Guide
Sometimes it is necessary to style tables visually in a way that standard tables are not capable of. For example, with some CSS, it is possible to stack all cells of a table vertically on top of each other. This provides a lot of new ways of styling a table. But as this potentially also changes its semantics, ARIA must be used to ensure accessibility.| Accessibility Developer Guide
A table's header cells are in charge of making the corresponding data cells distinguishable, so users can easily identify data cells and navigate through the table flawlessly. But sometimes it is hard to find the correct cells that fit in this respect, so you can try to introduce another one - or to use a combination of cells.| Accessibility Developer Guide
Spanning rows and columns is a standard HTML feature and exists for decades already. Be sure not to overuse them though, as they can be a bit tricky for screen readers, especially in complex data tables. And in general: keep your tables simple.| Accessibility Developer Guide
Instead of using traditional HTML table elements, it is also possible to convert a structure of non-table elements into a table using ARIA. This is an experiment, and we explicitly do not recommend using this on productive websites. So please, kids, do not try this at home!| Accessibility Developer Guide
Accordions contain of a number of content panels, each of wich can be expanded or collapsed vertically by the user.| Accessibility Developer Guide
Autosuggests offer a number of possible values, usually presented as some sort of a dropdown element, allowing to select one. By entering a filter string, the possible values are filtered.| Accessibility Developer Guide
Very similar to tablists, carousels also help to split up a page's content into smaller and thus more digestible parts which can be toggled visible one at a time.| Accessibility Developer Guide
Datepickers are an easy and intuitive way to let users pick a date. They usually offer their options below their respective form control in a table-like design which can be toggled visible. Some date pickers also offer time settings.| Accessibility Developer Guide
Dialogs display some information on top of a page. They are typically used to react upon a user action, for example to display a notice or to ask for some input like confirming something. There are dialogs that disable the rest of the page in the background (modal), while others do not (non-modal).| Accessibility Developer Guide
Dropdowns allow to toggle an element's visibility. They usually contain some sort of navigation, be it a bare list of links, or more complex elements. They can offer one to multiple nesting levels.| Accessibility Developer Guide
If you want to learn more about designing and implementing fully accessible websites, you've come to the right place.| Accessibility Developer Guide
ARIA provides an attribute which allows to hide elements from screen readers. It works pretty uniformly on non-focusable elements in modern browsers and screen readers, but it still has some very odd peculiarities. So you better try to create solutions that do not need it.| Accessibility Developer Guide
HTML 5 client side validations are a very useful feature: they allow rudimentary validation of user data without submitting anything to the server. They are supported to a high degree by modern browsers and screen readers. Still, you should obviously never think of them as a complete replacement for server side data validation.| Accessibility Developer Guide
Screen reader interaction with forms usually happens in focus mode. So if there are any non-interactive elements (like a paragraph) in the form, they are prone to be missed. To prevent this, they need to be attached specifically to the form controls. There are several ways to achieve this goal.| Accessibility Developer Guide
Data submitted in a form is usually validated in some way. And if there is any unacceptable data, the form is traditionally re-displayed, together with validation messages. In such a case, it is important to immediately inform screen reader users, so they know that they have to look at their data and submit again.| Accessibility Developer Guide