Accessible web design means that we incorporate the needs of visually impaired and blind individuals into our design and implementation. Through our design, we strive to avoid anything that makes using a website more difficult for these people. In short: anything that limits accessibility.
Anyone who has never created an accessible design might initially be at a loss and turn to Google. There you quickly learn that various standards and guidelines (W3C, WCAG, HTML5) must be adhered to, and that "this primarily concerns the technical implementation." It is also important that creating semantically correct content is crucial.
3 Simple Content Guidelines:
1. USE DESCRIPTIVE LINKS
bad: click here good: more information on topic XY
2. AVOID TABLES
If tables are unavoidable, we use row and column headings, and ideally, a brief summary of the table's content.
3. ALTERNATIVE IMAGE DESCRIPTIONS
Last but not least: Every image requires an "alt" tag that describes the image content thoroughly and meaningfully.
Design: Now for the Nitty Gritty
1. NO FRILLS
It's all about the content. The design should, of course, be appealing, but excessive CSS animations, parallax scrolling, or similar features make access more difficult.
2. RESPONSIVE DESIGN
Yes please, and always actually! The interaction design should be conceived in such a way that it looks perfect on every device. Visually impaired individuals also have cool iPad Minis.
3. CLEAR STRUCTURE
We design clearly and straightforwardly. A clear and easily understandable layout is a must! White space is our friend. The menu should have as few levels as possible (maximum 3) and clear navigation. Under no circumstances should it be a pop out mouseover menu! The page should also use breadcrumbs.
4. FONTS
My favourite topic. I am one of those designers who are convinced that serifs aid the better legibility of the typeface and that, above all, children's books should be set in serif fonts. However, the visually impaired colleagues who supported us in implementing several projects see things differently. It absolutely must be sans serif! Because often, each individual letter is painstakingly identified on its own. Ideally, Arial or Verdana should be chosen, as the latter, in particular, is characterised by large counter sizes and a large x-height, which makes it very readable, especially on screens.
Links should not be distinguished solely by a different colour. This means we can additionally: underline, change the font weight (bold, italic), or place an element in front of them, such as an arrow. Oh yes: And of course, the font size should not be too small, at least 14px.
As with all web design: no justified text. Let me repeat that: NO JUSTIFIED TEXT. Ideally, the design is left aligned throughout. Centred text is also problematic, as the start of the next line has to be sought out. This is not always in the same place.
5. ASSISTANCE FEATURES
When designing, assistance features must not be forgotten. Key questions include: Where do we place them and how should they look? What assistance features are there anyway?
- Most will be familiar with font size settings.
- Colour contrast settings (there are 6 by default)
- Website user guide with keyboard navigation
 You can see how this can look and work on www.augengesundheit.at and www.hilfsgemeinschaft.at.
6. COLOURS
A difficult topic! Red and green should not appear together, and sufficient contrast must always be considered. To avoid making a blunder on this delicate point, there is a wonderfully simple tool that helps us thoroughly test our colour choices WebAim. Here you can specifically see if the font colour works on the background colour and how large the text needs to be for it to work.
One more note: Programmers can check the finished page for errors with WAVE.
If you have any further tips and experiences regarding accessible web design, please let me know in the comments. You never stop learning :)
